.index-banner { width: 100%; overflow: hidden; } .index-banner .banner-box { width: 100%; overflow: hidden; position: relative; } .banner1 img { display: block; } .banner1 img:nth-of-type(2) { position: absolute; top: 0; left: 50%; margin-left: 99px; } .banner1 img:nth-of-type(3) { position: absolute; bottom: 100px; left: 50%; margin-left: -30px; } .banner1 img:nth-of-type(4) { position: absolute; bottom: 100px; left: 50%; margin-left: 365px; } .index-banner .banner-txt { width: 700px; overflow: hidden; position: absolute; left: 50%; z-index: 1; color: #ffffff; margin-left: -710px; display: none; } .index-banner .banner-txt h1 { font-size: 100px; margin: 10px 0 25px; text-shadow: 4.6px 1.9px 6.5px rgba(35,31,28,0.26); } .index-banner .banner-txt ul { width: 100%; line-height: 51px; overflow: hidden; } .index-banner .banner-txt ul li { width: 100%; font-size: 24px; padding: 0 0 0 53px; overflow: hidden; background-image: ; background-position: left center; background-repeat: no-repeat; } .index-banner .banner-txt ul li:nth-of-type(2) { background-image: url(/uploads/image/simages/banner3-3.png); } .index-banner .banner-txt ul li:nth-of-type(3) { background-image: url(/uploads/image/simages/banner3-4.png); } .index-banner .swiper-container-horizontal>.swiper-pagination-bullets,.index-banner .swiper-pagination-custom,.index-banner .swiper-pagination-fraction { bottom: 20px; } .index-banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 7px; } .index-banner .swiper-pagination-bullet { width: 20px; height: 20px; border-radius: 0px; opacity: 1; background-color: transparent; position: relative; } .index-banner .swiper-pagination-bullet:before { content: ''; display: block; width: 10px; height: 10px; overflow: hidden; margin: 5px; border: 1px solid #ffffff; } .index-banner .swiper-pagination-bullet-active:before { background-color: #ffffff; } .index-banner .swiper-pagination-bullet-active em { display: block; width: 7px; height: 7px; overflow: hidden; position: absolute; } .index-banner .swiper-pagination-bullet-active em:nth-of-type(1) { border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; left: 0px; top: 0px; } .index-banner .swiper-pagination-bullet-active em:nth-of-type(2) { border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; right: 0px; top: 0px; } .index-banner .swiper-pagination-bullet-active em:nth-of-type(3) { border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; left: 0px; bottom: 0px; } .index-banner .swiper-pagination-bullet-active em:nth-of-type(4) { border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; right: 0px; bottom: 0px; } @media only screen and (max-width: 991px) { .banner1 img:nth-of-type(1),.banner2>img,.banner3>img,.banner4>img { width: 1200px; position: relative; left: 50%; margin-left: -600px; } .banner4>img { margin-left: -500px; } .banner1 img:nth-of-type(2) { height: 100%; margin-left: 50px; } .banner1 img:nth-of-type(3) { width: 200px; margin-left: -10px; bottom: 70px; } .banner1 img:nth-of-type(4) { width: 200px; margin-left: 170px; bottom: 70px; } .banner2 img:nth-of-type(2) { width: 425px; position: absolute; top: 170px; left: 50%; margin-left: -25px; z-index: 1; } .banner3 img:nth-of-type(2) { width: 300px; position: absolute; top: 175px; left: 50%; margin-left: 50px; z-index: 1; } .index-banner .banner-txt { top: 165px; margin-left: -325px; } .index-banner .banner-txt img { width: 180px; } .index-banner .banner-txt h1 { font-size: 52px; } .index-banner .banner-txt ul { line-height: 36px; } .index-banner .banner-txt ul li { font-size: 18px; padding: 0 0 0 40px; background-size: auto 25px; } } @media only screen and (max-width: 767px) { .banner1 img:nth-of-type(1),.banner2>img,.banner3>img,.banner4>img { width: 800px; margin-left: -400px; } .banner4>img { margin-left: -270px; } .banner1 img:nth-of-type(2) { margin-left: -35px; } .banner1 img:nth-of-type(3) { width: 130px; margin-left: -55px; bottom: 50px; } .banner1 img:nth-of-type(4) { width: 130px; margin-left: 60px; bottom: 50px; } .banner2 img:nth-of-type(2) { width: 225px; margin-left: -30px; top: 160px; } .banner3 img:nth-of-type(2) { width: 170px; top: 140px; margin-left: 20px; } .index-banner .banner-txt { width: 200px; top: 115px; margin-left: -165px; } .index-banner .banner-txt img { width: 120px; } .index-banner .banner-txt h1 { font-size: 32px; margin: 5px 0 10px; } .index-banner .banner-txt ul { line-height: 25px; } .index-banner .banner-txt ul li { font-size: 14px; padding: 0 0 0 25px; background-size: auto 15px; } .index-banner .swiper-container-horizontal>.swiper-pagination-bullets, .index-banner .swiper-pagination-custom, .index-banner .swiper-pagination-fraction { bottom: 10px; } .index-banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 3px; } } @media only screen and (min-width: 992px) { .banner1 img:nth-of-type(1),.banner2>img,.banner3>img,.banner4>img { width: 1550px; position: relative; left: 50%; margin-left: -775px; } .banner4>img:nth-of-type(1) { margin-left: -660px; } .banner1 img:nth-of-type(2) { height: 100%; margin-left: 99px; } .banner1 img:nth-of-type(3) { width: 300px; margin-left: -10px; } .banner1 img:nth-of-type(4) { width: 300px; margin-left: 260px; } .banner2 img:nth-of-type(2) { width: 650px; position: absolute; top: 170px; left: 50%; margin-left: -40px; z-index: 1; } .banner3 img:nth-of-type(2) { width: 435px; position: absolute; top: 175px; left: 50%; margin-left: 50px; z-index: 1; } .index-banner .banner-txt { top: 200px; margin-left: -450px; } .index-banner .banner-txt h1 { font-size: 72px; } .index-banner .banner-txt ul { line-height: 36px; } .index-banner .banner-txt ul li { font-size: 18px; padding: 0 0 0 40px; background-size: auto 25px; } } @media only screen and (min-width: 1300px) { .index-banner .banner-txt { margin-left: -565px; } } @media only screen and (min-width: 1450px) { .banner1 img:nth-of-type(1),.banner2>img,.banner3>img,.banner4>img { width: 1700px; margin-left: -850px; } .banner4>img:nth-of-type(1) { margin-left: -850px; } .banner1 img:nth-of-type(2) { height: 100%; margin-left: 99px; } .banner1 img:nth-of-type(3) { width: 360px; margin-left: -10px; } .banner1 img:nth-of-type(4) { width: 360px; margin-left: 300px; } .banner2 img:nth-of-type(2) { width: 750px; top: 170px; margin-left: -30px; } .banner3 img:nth-of-type(2) { width: 500px; top: 175px; margin-left: 88px; } .index-banner .banner-txt { margin-left: -600px; } .index-banner .banner-txt h1 { font-size: 90px; } .index-banner .banner-txt ul { line-height: 45px; } .index-banner .banner-txt ul li { font-size: 21px; padding: 0 0 0 45px; background-size: auto 30px; } } @media only screen and (min-width: 1600px) { .banner1 img:nth-of-type(1),.banner2>img,.banner3>img,.banner4>img { width: 1920px; margin-left: -960px; } .banner4>img:nth-of-type(1) { margin-left: -960px; } .banner1 img:nth-of-type(2) { margin-left: 99px; } .banner1 img:nth-of-type(3) { width: 460px; margin-left: -30px; } .banner1 img:nth-of-type(4) { width: 460px; margin-left: 365px; } .banner2 img:nth-of-type(2) { width: auto; margin-left: -60px; } .banner3 img:nth-of-type(2) { width: auto; } .index-banner .banner-txt { top: 250px; margin-left: -710px; } .index-banner .banner-txt h1 { font-size: 100px; } .index-banner .banner-txt ul { line-height: 51px; } .index-banner .banner-txt ul li { font-size: 24px; padding: 0 0 0 53px; background-size: auto 34px; } } @media only screen and (min-width: 1921px) { .banner1 img:nth-of-type(1),.banner2>img:nth-of-type(1),.banner3>img:nth-of-type(1),.banner4>img { width: 100%; } } /*行业及产品*/ .index_one{ width: 100%; overflow: hidden; padding: 3.5em 0; background-color: #f8f8f8; } .index_one .one_title{ width: 100%; overflow: hidden; color: #666666; text-align: center; font-size: 0.75em; line-height: 22px; margin: 0 0 2em; } .index_one .one_title p{ font-size: 1.2em; } .index_one .one_title h1{ font-size: 36px; color: #333333; margin: 0 0 0.38em; } .index_one .one_list{ width: 1200px; height: 576px; margin: 0 auto; } .index_one .one_list a{ display: block; overflow: hidden; float: left; box-shadow: 0 0 9px rgba(0,0,0,0.12); padding: 20px 0 0; text-align: center; background-color: #ffffff; } .index_one .one_list a .list_img{ width: 100%; height: 160px; overflow: hidden; position: relative; margin: 0 0 25px; } .index_one .one_list a .list_img>img{ position: absolute; left: 50%; margin-left: -75px; } .index_one .one_list a .list_img>img:nth-of-type(2){ display: none; } .index_one .one_list a h4{ font-size: 20px; line-height: 25px; color: #333333; } .index_one .one_list a span{ display: block; width: 20px; height: 3px; background-color: #004098; margin: 10px auto 0; } .index_one .one_list a:nth-of-type(5) .list_img{ margin: 0 0 18px; } .index_one .one_list a:nth-of-type(5) h4{ line-height: 20px; } .index_one .one_list a:nth-of-type(5) span{ margin: 13px auto 0; } .index_one .one_list a:hover .list_img>img:nth-of-type(1){ display: none; } .index_one .one_list a:hover .list_img>img:nth-of-type(2){ display: block; } .index_one .one_list a .list_img li{ width: 58px; height: 58px; line-height: 55px; border-radius: 50%; background-color: #004098; text-align: center; margin: 11px auto; } @media only screen and (max-width: 1249px) { .index_one { padding: 4.5em 0; } .index_one .one_list{ width: 100%; } .index_one .one_list a{ width: calc(25% - 37.5px); width: -moz-calc(25% - 37.5px); width: -webkit-calc(25% - 37.5px); height: 240px; margin: 24px 0 24px 37.5px; } .index_one .one_list a:nth-of-type(4n 1){ margin: 24px 37.5px 24px 0; } .index_one .one_list a:nth-of-type(4n 2){ margin: 24px 25px 24px 12.5px; } .index_one .one_list a:nth-of-type(4n 3){ margin: 24px 12.5px 24px 25px; } } @media only screen and (max-width: 991px) { .index_one .one_list a { width: calc(50% - 37.5px); width: -moz-calc(50% - 37.5px); width: -webkit-calc(50% - 37.5px); height: 240px; } .index_one .one_list a:nth-of-type(2n 1) { margin: 24px 37.5px 24px 0; } .index_one .one_list a:nth-of-type(2n) { margin: 24px 0 24px 37.5px; } } @media only screen and (max-width: 767px) { .index_one { padding: 45px 0 40px; } .index_one .one_title { font-size: 12px; line-height: 18px; margin: 0 0 25px; } .index_one .one_title br { display: none; } .index_one .one_title h1 { font-size: 28px; margin: 0 0 10px; } .index_one .one_list a { width: calc(50% - 7.5px); width: -moz-calc(50% - 7.5px); width: -webkit-calc(50% - 7.5px); height: 200px; padding: 30px 0 0; } .index_one .one_list a:nth-of-type(2n 1) { margin: 8px 7.5px 8px 0; } .index_one .one_list a:nth-of-type(2n) { margin: 8px 0 8px 7.5px; } .index_one .one_list a .list_img { margin: 0 0 15px; } .index_one .one_list a .list_img img{ transform: scale(0.9); } } @media only screen and (min-width: 1250px) { .index_one .one_list a{ width: calc(25% - 37.5px); width: -moz-calc(25% - 37.5px); width: -webkit-calc(25% - 37.5px); height: 260px; margin: 24px 0 24px 37.5px; } .index_one .one_list a:nth-of-type(4n 1){ margin: 24px 37.5px 24px 0; } .index_one .one_list a:nth-of-type(4n 2){ margin: 24px 25px 24px 12.5px; } .index_one .one_list a:nth-of-type(4n 3){ margin: 24px 12.5px 24px 25px; } } @media only screen and (min-width: 1500px) { } /*品牌介绍*/ .index_two{ width: 100%; height: 840px; overflow: hidden; } .index_two li{ width: 50%; height: 100%; overflow: hidden; float: left; } .index_two li:nth-of-type(1){ background: url(/uploads/image/simages/brandbg.jpg) no-repeat center; color: #ffffff; padding: 100px 0 0 225px; } .two_left{ width: 100%; overflow: hidden; font-size: 16px; line-height: 28px; } .two_left h2{ font-size: 30px; line-height: 35px; margin-bottom: 75px; } .two_left h1{ line-height: 64px; margin-bottom: 60px; } .two_left a{ display: block; width: 160px; height: 40px; margin: 110px 0 0; font-size: 14px; color: #ffffff; text-align: center; border: 1px solid #ffffff; border-radius: 4px; line-height: 38px; transition: all 1s; } .two_left a:hover{ background-color: #1e4398; border-color: #1e4398; } .two_top{ width: 100%; height: 50%; overflow: hidden; position: relative; background: url(/uploads/image/simages/ivideo.jpg) no-repeat center; } .two_top video { width: 100%; height: 100%; background-color: #000000; display: none; } .two_top .two_topbg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.36); } .two_top .two_topbg .video_icon{ width: 74px; height: 74px; border-radius: 50%; border: 1px dashed #ffffff; text-align: center; line-height: 68px; margin: 173px auto; cursor: pointer; } .two_bottom{ width: 100%; height: 50%; overflow: hidden; background: url(/uploads/image/simages/qualitybg.jpg) no-repeat center; text-align: center; padding: 105px 0 0; color: #666666; font-size: 16px; line-height: 30px; } .two_bottom h1{ color: #333333; margin-bottom: 25px; } .two_bottom a{ display: block; width: 160px; height: 40px; background-color: #1e4398; line-height: 40px; font-size: 14px; color: #ffffff; margin: 35px auto; border-radius: 4px; } .two_bottom a:hover{ text-decoration: underline !important; } @media only screen and (max-width: 1249px) { .index_two { height: 640px; } .index_two li:nth-of-type(1) { padding: 50px 0 0 75px; } .two_left h2 { font-size: 24px; line-height: 30px; margin-bottom: 50px; } .two_left h1 { line-height: 48px; font-size: 24px; margin-bottom: 40px; } .index_two li:nth-of-type(1) p br{ display: none; } .index_two li:nth-of-type(1) p { width: 310px; font-size: 14px; } .two_top .two_topbg .video_icon { margin: 123px auto; } .two_bottom { width: 100%; height: 50%; overflow: hidden; background: url(/uploads/image/simages/qualitybg.jpg) no-repeat center; text-align: center; padding: 60px 0 0; color: #666666; font-size: 12px; line-height: 25px; } } @media only screen and (max-width: 991px) { .index_two { height: auto; } .index_two li:nth-of-type(1){ width: 100%; height: 655px; } .index_two li:nth-of-type(2) { width: 100%; height: 100%; overflow: hidden; float: none; } .two_top { width: 100%; height: 330px; overflow: hidden; position: relative; background: url(/uploads/image/simages/ivideo.jpg) no-repeat center; } .two_bottom{ height: 330px; } } @media only screen and (max-width: 767px) { .index_two li:nth-of-type(1){ height: 420px; background-size: auto 100%; padding: 50px 0 0 35px; } .index_two li:nth-of-type(2) { width: 100%; height: 100%; overflow: hidden; float: none; } .two_top { height: 240px; background-size: auto 100%; } .two_top .two_topbg .video_icon { margin: 83px auto; transform: scale(0.8); } .two_bottom{ height: 240px; line-height: 20px; background-size: auto 100%; padding: 40px 0 0; } .two_bottom h1{ font-size: 28px; margin-bottom: 10px; } .two_bottom br{ display: none; } .two_bottom p{ width: 100%; overflow: hidden; padding: 0 15px; } .two_bottom a { width: 130px; height: 35px; line-height: 33px; font-size: 12px; margin: 20px auto; border-radius: 4px; } .two_left h2 { font-size: 24px; line-height: 30px; margin-bottom: 10px; } .two_left h1 { line-height: 35px; font-size: 22px; margin-bottom: 20px; } .index_two li:nth-of-type(1) p { width: 280px; font-size: 12px; line-height: 20px; } .two_left a { width: 130px; height: 35px; margin: 40px 0 0; font-size: 12px; line-height: 33px; } } @media only screen and (min-width: 1250px) { .index_two li:nth-of-type(1) { padding: 100px 0 0 100px; } } @media only screen and (min-width: 1500px) { .index_two li:nth-of-type(1) { padding: 100px 0 0 225px; } } /*新闻资讯*/ .index_three{ width: 100%; overflow: hidden; padding: 60px 0 45px; background-color: #f4f4f4; } .index_three .three_title{ width: 100%; overflow: hidden; margin: 0 0 30px; } .index_three .three_title h1{ font-size: 30px; line-height: 40px; width: 125px; overflow: hidden; float: left; } .index_three .three_title .three_menu{ float: left; } .index_three .three_title .three_menu a{ display: block; float: left; line-height: 40px; margin-left: 60px; cursor: pointer; font-size: 15px; } .index_three .three_title .three_menu a.menunow{ color: #1e4398; font-weight: bold; } .index_three .three_title .three_menu a:hover{ color: #1e4398; } .index_three .three_swiper{ width: 100%; overflow: hidden; } .index_three .three_swiper a{ display: block; width: 100%; overflow: hidden; } .index_three .three_swiper a .three_img{ width: 100%; height: 300px; overflow: hidden; border-radius: 8px; margin: 0 0 25px; } .index_three .three_swiper a .three_img img{ width: 100%; transition: all 1s; } .index_three .three_swiper a h4{ font-size: 20px; color: #333333; line-height: 25px; margin: 0 0 10px; } .index_three .three_swiper a span{ font-size: 14px; color: #ababab; } .three_swiper .swiper-container{ padding: 0 0 55px; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 2px; } .index_three .three_swiper a:hover img{ transform: scale(1.08); } .index_three .three_swiper a:hover h4{ color: #1e4398; } @media only screen and (max-width: 991px) { .index_three .three_swiper a .three_img { height: 220px; } } @media only screen and (max-width: 767px) { .index_three { padding: 35px 0 30px; } .index_three .three_title { margin: 0 0 10px; } .index_three .three_title h1 { font-size: 28px; line-height: 35px; width: 112px; } .index_three .three_title .three_menu a { line-height: 50px; margin-left: 20px; font-size: 14px; } .index_three .three_swiper a .three_img{ height: 230px; border-radius: 6px; margin: 0 0 15px; } .index_three .three_swiper a span { font-size: 12px; } .index_three .three_swiper a h4 { font-size: 15px; line-height: 20px; margin: 0 0 10px; } .three_swiper .swiper-container { padding: 0 0 10px; } .swiper-pagination-bullet { width: 8px; height: 8px; } } @media only screen and (min-width: 992px) { .index_three .three_swiper a .three_img { height: 205px; } } @media only screen and (min-width: 1300px) { .index_three .three_swiper a .three_img { height: 240px; } } @media only screen and (min-width: 1500px) { .index_three .three_swiper a .three_img { height: 300px; } }