.car-a{ background: url(../carimg/loadings.gif) no-repeat center; } .car-a, .car-a img{ width: 100%; } .car-b{ width: 100%; height: 530px; padding: 115px 0 110px; background-image: url(../carimg/bg1.jpg); background-repeat: no-repeat; background-position: center top; background-color: #fff; } .car-b-cont{ max-width: 1050px; padding: 0 30px; margin: 0 auto; } .car-b-cont h2{ margin-bottom: 8px; font-size: 30px; color: #373d41; text-align: center; line-height: 2; } .car-b-cont .txt{ text-align: center; font-size: 16px; line-height: 30px; color: #666; } .car-b-list{ width: 1046px; height: 420px; margin: 30px auto 0; } .car-b-list ul li{ position: relative; width: 50%; height: 120px; float: left; color: #333; line-height: 24px; font-size: 16px; font-weight: bold; box-sizing:border-box; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .car-b-list ul li p{ position: absolute; width: 360px; padding: 15px 0; line-height: 24px; border-bottom: 1px solid #dee2e4; bottom: 0; } .car-b-list ul li.g p, .car-b-list ul li.h p{ width:390px; } .car-b-list ul li.a p:after, .car-b-list ul li.b p:after, .car-b-list ul li.g p:after, .car-b-list ul li.h p:after{ content: ''; position: absolute; width: 50px; height: 1px; background: #dee2e4; bottom:-1px; } .car-b-list ul li.a p:after{ left: 100%; -webkit-transform-origin: left center; transform-origin: left center; transform: rotate(45deg); } .car-b-list ul li.b p:after{ right: 100%; -webkit-transform-origin: right center; transform-origin: right center; transform: rotate(-45deg); } .car-b-list ul li.g p:after{ left: 100%; -webkit-transform-origin: left center; transform-origin: left center; transform: rotate(-45deg); } .car-b-list ul li.h p:after{ right: 100%; -webkit-transform-origin: right center; transform-origin: right center; transform: rotate(45deg); } .car-b-list ul li i{ position: absolute; top: 50%; margin-top: -8px; display: block; width: 9px; height: 9px; border:3px solid #b3c0c3; border-radius: 50%; vertical-align: middle; -webkit-transition: all 0.5s; transition: all 0.5s; } .car-b-list ul li:nth-child(1), .car-b-list ul li:nth-child(2){ height: 55px; } .car-b-list ul li:nth-child(odd) p{ padding-left: 40px; } .car-b-list ul li:nth-child(odd) i{ left: 0; } .car-b-list ul li:nth-child(even) p{ text-align: right; padding-right: 40px; right: 0; } .car-b-list ul li:nth-child(even) i{ right: 0; } .car-b-list ul li.a:hover i{ border: 3px solid #ff4d4f; } .car-b-list ul li.a:hover p{ color: #ff4d4f; border-bottom: 1px solid #ff4d4f; } .car-b-list ul li.a:hover p:after{ border-bottom: 1px solid #ff4d4f; } .car-b-list ul li.b:hover{ color: #f759ab; } .car-b-list ul li.b:hover i{ border: 3px solid #f759ab; } .car-b-list ul li.b:hover p{ border-bottom: 1px solid #f759ab; } .car-b-list ul li.b:hover p:after{ border-bottom: 1px solid #f759ab; } .car-b-list ul li.c:hover{ color: #ffc53d; } .car-b-list ul li.c:hover i{ border: 3px solid #ffc53d; } .car-b-list ul li.c:hover p{ border-bottom: 1px solid #ffc53d; } .car-b-list ul li.c:hover p:after{ border-bottom: 1px solid #ffc53d; } .car-b-list ul li.d:hover{ color: #0d8ef2; } .car-b-list ul li.d:hover i{ border: 3px solid #0d8ef2; } .car-b-list ul li.d:hover p{ border-bottom: 1px solid #0d8ef2; } .car-b-list ul li.d:hover p:after{ border-bottom: 1px solid #0d8ef2; } .car-b-list ul li.e:hover{ color: #a0d911; } .car-b-list ul li.e:hover i{ border: 3px solid #a0d911; } .car-b-list ul li.e:hover p{ border-bottom: 1px solid #a0d911; } .car-b-list ul li.e:hover p:after{ border-bottom: 1px solid #a0d911; } .car-b-list ul li.f:hover{ color: #597ef8; } .car-b-list ul li.f:hover i{ border: 3px solid #597ef8; } .car-b-list ul li.f:hover p{ border-bottom: 1px solid #597ef8; } .car-b-list ul li.f:hover p:after{ border-bottom: 1px solid #597ef8; } .car-b-list ul li.g:hover{ color: #36d0c9; } .car-b-list ul li.g:hover i{ border: 3px solid #36d0c9; } .car-b-list ul li.g:hover p{ border-bottom: 1px solid #36d0c9; } .car-b-list ul li.g:hover p:after{ border-bottom: 1px solid #36d0c9; } .car-b-list ul li.h:hover{ color: #40aaff; } .car-b-list ul li.h:hover i{ border: 3px solid #40aaff; } .car-b-list ul li.h:hover p{ border-bottom: 1px solid #40aaff; } .car-b-list ul li.h:hover p:after{ border-bottom: 1px solid #40aaff; } .car-b-list .circle{ position: absolute; width: 360px; height: 360px; left: 50%; margin-left: -180px; top: 48px; /*opacity: 0; transform: scale(.7) rotate(-180deg); transition: all 1s ease 0.3s;*/ } .car-b-list .circle img{ width: 100%; height: 100%; left: 0; top: 0; } .car-b-list .circle img.img{ display: none; } .car-b-list .circle.cur{ opacity: 1; transform: scale(1) rotate(0); } .car-c{ width: 100%; padding: 80px 0 70px; background:#f9f9fa url(../carimg/bg2.jpg) no-repeat center top; overflow: hidden; } .car-c-cont{ max-width: 1520px; margin: 0 auto; padding: 0 30px; } .car-c-cont h2{ font-size: 30px; text-align: center; line-height: 50px; color: #373d41; } .car-c-cont .txt{ font-size: 16px; line-height: 30px; color: #666; text-align: center; } .car-c-list{ margin-top: 60px; } .car-c-list ul{ margin-left: -0.65%; margin-right: -0.65%; } .car-c-list ul li{ float: left; margin: 0 0.65% 20px; width: 48.7%; height: 160px; background: #fff; box-sizing:border-box; -webkit-transition: all 0.5s; transition: all 0.5s; } .car-c-list ul li .text{ padding: 30px 38px; padding-right: 22%; background-repeat: no-repeat; background-position: right 38px center; box-sizing:border-box; } .car-c-list ul li .text h3{ margin-bottom: 5px; font-size: 18px; color: #333333; line-height: 36px; font-weight: bold; } .car-c-list ul li .text p{ font-size: 14px; color: #666; line-height: 24px; } .car-c-list ul li.a .text{ background-image:url(../carimg/ico1.png); } .car-c-list ul li.b .text{ background-image:url(../carimg/ico2.png); } .car-c-list ul li.c .text{ background-image:url(../carimg/ico3.png); } .car-c-list ul li.d .text{ background-image:url(../carimg/ico4.png); } .car-c-list ul li.e .text{ background-image:url(../carimg/ico5.png); } .car-c-list ul li.f .text{ background-image:url(../carimg/ico6.png); } .car-c-list ul li.g .text{ background-image:url(../carimg/ico7.png); } .car-c-list ul li.h .text{ background-image:url(../carimg/ico8.png); } .car-c-list ul li.i .text{ background-image:url(../carimg/ico9.png); } .car-c-list ul li.j .text{ background-image:url(../carimg/ico10.png); } .car-c-list ul li.a:hover .text{ background-image:url(../carimg/ico1_1.png); } .car-c-list ul li.b:hover .text{ background-image:url(../carimg/ico2_2.png); } .car-c-list ul li.c:hover .text{ background-image:url(../carimg/ico3_3.png); } .car-c-list ul li.d:hover .text{ background-image:url(../carimg/ico4_4.png); } .car-c-list ul li.e:hover .text{ background-image:url(../carimg/ico5_5.png); } .car-c-list ul li.f:hover .text{ background-image:url(../carimg/ico6_6.png); } .car-c-list ul li.g:hover .text{ background-image:url(../carimg/ico7_7.png); } .car-c-list ul li.h:hover .text{ background-image:url(../carimg/ico8_8.png); } .car-c-list ul li.i:hover .text{ background-image:url(../carimg/ico9_9.png); } .car-c-list ul li.j:hover .text{ background-image:url(../carimg/ico10_10.png); } .car-c-list ul li:hover{ background: -webkit-gradient(linear, 0 0, 100% 100%, from(#188cc7), to(#18a9c7)); box-shadow: 0 0 0 #fff, 0 0 0 #fff, 0 0 0 #fff, 0 5px 30px rgba(24,169,169,.5); } .car-c-list ul li:hover h3, .car-c-list ul li:hover p{ color: #fff; } .car-d{ width: 100%; padding-top: 70px; background: #fff; } .car-d-cont{ text-align: center; } .car-d-cont h2{ font-size: 30px; line-height: 50px; color: #373d41; } .car-d-cont .txt{ font-size: 16px; line-height: 30px; color: #666; } .car-d-list { margin-top: 50px; } .car-d-list li{ position: relative; float: left; width: 20%; overflow: hidden; } .car-d-list li img{ position: relative; left: 50%; margin-left: -335px; } .car-d-list li .bg{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(25,175,200,.8); opacity: 0; filter: alpha(opacity=0); transition: all 0.5s; } .car-d-list li .box{ position: absolute; width: 100%; top: 200px; bottom: 0; left: 0; text-align: center; color: #fff; transition: all 0.5s; } .car-d-list li .box .ico{ margin: 0 auto; width: 60px; height: 60px; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; transition: all 0.5s; } .car-d-list li .box .ico1{ background-image: url(../carimg/ico11.png); } .car-d-list li .box .ico2{ background-image: url(../carimg/ico12.png); } .car-d-list li .box .ico3{ background-image: url(../carimg/ico13.png); } .car-d-list li .box .ico4{ background-image: url(../carimg/ico14.png); } .car-d-list li .box .ico5{ background-image: url(../carimg/ico15.png); } .car-d-list li .box h3{ margin-top: 30px; margin-bottom: 20px; font-size: 20px; font-weight: bold; line-height: 1.5; } .car-d-list li .box p{ width: 70%; margin:0 auto; padding-top: 20px; font-size: 14px; line-height: 24px; opacity: 0; filter: alpha(opacity=0); transition: all 0.5s; } .car-d-list li:hover .bg{ opacity: 1; filter: alpha(opacity=100); } .car-d-list li:hover .box p{ padding-top: 0; opacity: 1; filter: alpha(opacity=100); } .car-d-list li:hover .box{ top: 132px; } .car-d-list li:hover .box .ico1{ background-image: url(../carimg/ico11_11.png); } .car-d-list li:hover .box .ico2{ background-image: url(../carimg/ico12_12.png); } .car-d-list li:hover .box .ico3{ background-image: url(../carimg/ico13_13.png); } .car-d-list li:hover .box .ico4{ background-image: url(../carimg/ico14_14.png); } .car-d-list li:hover .box .ico5{ background-image: url(../carimg/ico15_15.png); } .car-e{ padding: 90px 30px 80px; background: #f9f9fa; } .car-e h2{ font-size: 30px; line-height: 50px; color: #373d41; text-align: center; } .car-e .txt{ text-align: center; font-size: 16px; line-height: 30px; color: #666; } .car-e-list{ margin: 20px auto 0; max-width: 1520px; overflow: hidden; } .car-e-list li{ text-align: center; } .car-e-list li img{ width: 100%; } .car-e-list li p{ font-size: 18px; color: #666666; line-height: 1; } .car-e-list .pagination{ position: relative; margin-top: 60px; height: 12px; text-align: center; } .car-e-list .pagination .swiper-pagination-bullet{ width: 10px; height: 10px; background: #ebedf0; border: 1px solid #b9bbbf; border-radius: 100%; margin-right: 0; margin: 0 5px; vertical-align: top; } .car-e-list .pagination .swiper-pagination-bullet-active{ background: #b9bbbf; } .car-f{ padding: 70px 30px 100px; background: #fff; text-align: center; } .car-f h2{ font-size: 30px; line-height: 50px; color: #373d41; text-align: center; } .car-f .txt{ text-align: center; font-size: 16px; line-height: 30px; color: #666; } .car-f-list{ margin: 45px auto 0; font-size: 0; max-width: 1400px; } .car-f-list img{ width: 14%; margin: 0 3% 15px; } .car-fixed{ position: fixed; z-index: 100; right: 10px; bottom: 20%; width:150px; height: 50px; overflow: hidden; } .car-fixed .car-tel{ display: block; width: 90px; height: 50px; line-height: 50px; padding-left: 60px; background-color: #44b1f4; background-image: url(../carimg/tel.png); background-repeat: no-repeat; background-position: 26px center; border-radius: 25px; color: #fff; font-size: 16px; cursor: pointer; } .car-tel-box{ position: absolute; right: 100%; top: 50%; margin-top: -45px; width: 158px; height: 51px; background:url(../carimg/bg4.png) no-repeat center; padding: 20px 30px; opacity: 0; filter: alpha(opacity=0); transition: all 0.5s; } .car-tel-box p{ font-size: 18px; color: #262626; line-height: 25px; } .car-tel-box span{ display: block; font-size: 14px; color: #666; line-height: 25px; } .car-fixed:hover .car-tel-box{ right: 110%; opacity: 1; filter: alpha(opacity=100); } .car-fixed:hover{ overflow: visible; } .sol-footer .w1520{ width: 100%; } .contact-wrap .main-wrap{ width: 79%; } footer .main-wrap{ width: 79%; } /* 工具类 */ .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } @media (max-width: 1200px){ .visible-md { display: block !important; } .hidden-md{ display: none !important; } .car-b{ padding: 80px 0; height: auto; } .car-b-cont{ max-width: auto; } .mob-car-b-list{ margin-top: 50px; } .mob-car-b-list li{ position: relative; float: left; width: 48%; margin: 0 1% 20px; background: #fff; padding: 40px 40px 40px 180px; box-shadow: 0 0 10px 1px rgba(0,0,0,.1); box-sizing:border-box; } .mob-car-b-list li h3{ font-size: 20px; color: #000; line-height: 36px; } .mob-car-b-list li p{ font-size: 18px; color: #868fa4; line-height: 28px; } .mob-car-b-list li:before{ content: ""; position: absolute; top: 40px; left: 40px; height: 67px; width: 106px; } .mob-car-b-list li.num_1:before{ background:url(../carimg/01.png) no-repeat left top/100% auto; } .mob-car-b-list li.num_2:before{ background:url(../carimg/02.png) no-repeat left top/100% auto; } .mob-car-b-list li.num_3:before{ background:url(../carimg/03.png) no-repeat left top/100% auto; } .mob-car-b-list li.num_4:before{ background:url(../carimg/04.png) no-repeat left top/100% auto; } .mob-car-b-list li.num_5:before{ background:url(../carimg/05.png) no-repeat left top/100% auto; } .mob-car-b-list li.num_6:before{ background:url(../carimg/06.png) no-repeat left top/100% auto; } .mob-car-b-list li.num_7:before{ background:url(../carimg/07.png) no-repeat left top/100% auto; } .mob-car-b-list li.num_8:before{ background:url(../carimg/08.png) no-repeat left top/100% auto; } .car-d-list li:hover .box{ top: 100px; } .car-f-list img{ width: 18%; margin: 0 1%; } } @media (max-width: 1070px){ .mob-car-b-list li{ padding: 30px 40px 30px 150px; } .mob-car-b-list li:before{ width: 90px; top: 30px; left: 30px; } .mob-car-b-list li h3{ font-size: 18px; line-height: 28px; } .mob-car-b-list li p{ font-size: 16px; line-height: 26px; } } @media (max-width: 970px){ .visible-sm{ display: block !important; } .hidden-sm{ display: none !important; } .mob-car-b-list{ width: 80%; margin: 50px auto 0; } .mob-car-b-list li{ width: 100%; margin: 0 0 20px; } .car-c-list{ width: 80%; margin: 50px auto 0; } .car-c-list ul li{ width: 100%; margin: 0 0 20px; } .car-d{ padding: 70px 0 60px; } .car-d-cont{ padding: 0 30px; } .car-d-list{ width: 80%; margin: 50px auto 0; } .car-d-list li{ width: 100%; margin-bottom: 40px; } .car-d-list li img{ width: 100%; left: 0; margin-left: 0; } .car-d-list li .box{ top: 30%; } .car-d-list li .box p{ opacity: 1; filter: alpha(opacity=100); padding-top: 0; } .car-d-list li:hover .box{ top: 30%; } .car-e{ padding: 70px 30px 60px; } .car-e-list{ width: 80%; margin: 0 auto; } .car-f-list img{ width: 25%; margin: 0 1% 10px; } } @media (max-width: 768px){ .visible-xs { display: block !important; } .hidden-xs { display: none !important; } .car-b{ padding: 0.7rem 0 0.8rem; } .car-b-cont h2{ margin-bottom: 0.2rem; font-size: 0.46rem; line-height: 1rem; } .car-b-cont .txt{ font-size: 0.24rem; line-height: 0.4rem; } .car-b-cont{ padding: 0 0.4rem; } .mob-car-b-list{ width: 100%; margin: 0.6rem auto 0; } .mob-car-b-list li{ padding: 0.5rem 0.5rem 0.5rem 2rem; } .mob-car-b-list li h3{ font-size: 0.3rem; line-height: 1; margin-bottom: 0.15rem; } .mob-car-b-list li p{ font-size: 0.26rem; line-height: 0.36rem; } .mob-car-b-list li:before{ content: ""; position: absolute; top: 0.5rem; left: 0.5rem; height: 0.67rem; width: 1.06rem; } .car-c{ padding: 0.8rem 0 0.7rem; } .car-c-cont{ padding: 0 0.4rem; } .car-c-list{ width: 100%; margin: 0.5rem auto 0; } .car-c-cont h2{ margin-bottom: 0.1rem; font-size: 0.46rem; line-height: 1rem; } .car-c-cont .txt{ font-size: 0.24rem; line-height: 0.4rem; } .car-c-list ul li{ height: auto; } .car-c-list ul li .text{ padding: 0.5rem 0.38rem; padding-right: 22%; background-size: 0.5rem 0.5rem; background-position: right 0.38rem center; } .car-c-list ul li .text h3{ font-size: 0.3rem; line-height: 1; margin-bottom: 0.2rem; } .car-c-list ul li .text p{ font-size: 0.24rem; line-height: 0.36rem; } .car-d{ padding: 0.7rem 0 0.6rem; } .car-d-cont{ padding: 0 0.4rem; } .car-d-cont h2{ margin-bottom: 0.1rem; font-size: 0.46rem; line-height: 1rem; } .car-d-cont .txt{ font-size: 0.24rem; line-height: 0.4rem; } .car-d-list{ width: 100%; margin: 0.5rem auto 0; } .car-d-list li{ margin-bottom: 0.4rem; } .car-d-list li .box{ top: 0.8rem; } .car-d-list li .box .ico{ width: 1.2rem; height: 1.2rem; } .car-d-list li .box .ico1{ background-image: url(../carimg/ico11_11.png); } .car-d-list li .box .ico2{ background-image: url(../carimg/ico12_12.png); } .car-d-list li .box .ico3{ background-image: url(../carimg/ico13_13.png); } .car-d-list li .box .ico4{ background-image: url(../carimg/ico14_14.png); } .car-d-list li .box .ico5{ background-image: url(../carimg/ico15_15.png); } .car-d-list li .box h3{ font-size: 0.36rem; margin: 0.3rem 0 0.4rem; line-height: 1; } .car-d-list li .box p{ width: auto; padding: 0 0.6rem; font-size: 0.24rem; line-height: 0.4rem; } .car-d-list li:hover .box{ top: 0.8rem; } .car-e{ padding: 0.7rem 0.4rem 0.6rem; } .car-e h2{ margin-bottom: 0.1rem; font-size: 0.46rem; line-height: 1rem; } .car-e .txt{ font-size: 0.24rem; line-height: 0.4rem; } .car-e-list{ width: 100%; } .car-e-list li p{ font-size: 0.28rem; } .car-e-list .pagination{ margin-top: 0.6rem; } .car-f{ padding: 0.7rem 0.4rem 0.6rem; } .car-f h2{ margin-bottom: 0.1rem; font-size: 0.46rem; line-height: 1rem; } .car-f .txt{ font-size: 0.24rem; line-height: 0.4rem; } .car-f-list{ margin: 0.45rem auto 0; } .car-f-list img{ width: 31%; margin: 0 1% 0.1rem; } .car-fixed{ right: 0.2rem; bottom: 10%; width: 0.8rem; height: 0.8rem; overflow: hidden; } .car-fixed .car-tel-box{ display: none; } .m-car-tel{ width: 0.4rem; height: 0.4rem; padding: 0.2rem; background-color: rgba(68,177,244,.8); background-image: url(../carimg/tel.png); background-repeat: no-repeat; background-size: 0.4rem 0.4rem; background-position: center; border-radius: 50%; } }