/* Editor: fan Time: 2020.1.7 Less compilation node.js 命o > npm install -g less 国内镜像命o > cnpm i -g less 下蝲less > lessc style.less style.css */ // Global style in here, change it @import 'components/base'; @import 'components/headfooter'; /* 首页 */ .home{ &-tit{ text-align: center; margin-bottom: 60px; @media @max-lg { margin-bottom: 40px; } @media @max-sm { margin-bottom: 26px; } span{ display: block; font-size: 45px; color: #cacaca; font-weight: bold; line-height: 50px; @media @max-da { font-size: 40px; line-height: 45px; } @media @max-lg { font-size: 34px; line-height: 39px; } @media @max-md { font-size: 30px; line-height: 35px; } } strong{ font-size: 34px; font-weight: 500; display: block; @media @max-bg { font-size: 30px; } @media @max-lg { font-size: 26px; } @media @max-md { font-size: 24px; } } } &-titfont64{ span{ font-size: 64px; display: block; margin-bottom: 8px; @media @max-da { font-size: 54px; } @media @max-bg { font-size: 44px; } @media @max-lg { font-size: 34px; } @media @max-md { font-size: 26px; } } } &-section1{ padding: 158px 0 186px; position: relative; @media @max-da { padding: 134px 0 146px; } @media @max-bg { padding: 100px 0 120px; } @media @max-lg { padding: 80px 0 100px; } @media @max-md { padding: 60px 0 70px; } @media @max-sm { padding: 50px 0; } .img{ width: 50%; @media @max-lg { height: 440px; } @media @max-md { width: 100%; height: auto; margin-bottom: 40px; } @media @max-sm { margin-bottom: 20px; } img{ width: 100%; height: 100%; object-fit: cover; } } .container{ position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: flex; flex-direction: row-reverse; @media @max-md { position: relative; top: 0%; left: 0%; z-index: 2; -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); } .cont{ width: 50%; @media @max-md { width: 100%; } .home-tit{ text-align: left; margin-bottom: 100px; position: relative; @media @max-bg { margin-bottom: 80px; } @media @max-lg { margin-bottom: 60px; } @media @max-sm { margin-bottom: 30px; } span{ font-size: 64px; display: block; margin-bottom: 24px; @media @max-da { font-size: 54px; } @media @max-bg { margin-bottom: 20px; font-size: 44px; } @media @max-lg { margin-bottom: 16px; font-size: 34px; } @media @max-md { margin-left: 0; font-size: 26px; } } &:after{ content: ""; display: block; position: absolute; left: 0; bottom: -34%; width: 120px; height: 6px; background-color: @color; } } .text{ font-size: 16px; color: #666; line-height: 2; margin-bottom: 20px; } .but{ display: flex; font-size: 16px; color: @color; align-items: center; i{ display: block; width: 8px; margin-left: 20px; img{ width: 100%; } } } .mas{ margin-top: 80px; display: flex; @media @max-bg { margin-top: 60px; } @media @max-lg { margin-top: 30px; } @media @max-sm { margin-top: 45px; } .item{ margin-right: 100px; position: relative; &:last-child{ margin-right: 0; } @media @max-lg { margin-right: 60px; } @media @max-xs { margin-right: 40px; } .shu{ // font-weight: bold; color:@color; margin-bottom: 10px; position: relative; @media @max-bg { margin-bottom: 5px; } span{ font-size: 84px; line-height: 1.1; font-family: @font2; font-weight: 500; @media @max-da { font-size: 55px; } @media @max-bg { font-size: 50px; } @media @max-sm { font-size: 40px; } @media @max-xs { font-size: 38px; } @media (max-width: 374px) { font-size: 30px; } } i{ font-style: normal; font-size: 16px; line-height: 1.1; position: relative; right: 0px; top: 0; } } strong{ color: #999; font-size: 22px; font-weight: 500; @media @max-lg { font-size: 18px; } @media @max-sm { font-size: 16px; } @media @max-xs { font-size: 14px; } @media (max-width: 374px) { font-size: 13px; } } &:after{ content: ""; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: -32%; background-color: #e0e0e0; } &:last-child{ &:after{ display: none; } } } } } } } &-section2{ background-color: #f7f7f7; .home-tit{ margin-bottom: 30px; } .home-cont2{ @media @max-sm { padding: 0 15px; } .home2-pag{ position: absolute; bottom: 34px; color: #fff; left: 30%; z-index: 13; line-height: 1; font-size: 48px; display: flex; align-items: flex-end; @media @max-bg { font-size: 40px; } @media @max-cg { font-size: 30px; } @media @max-lg { font-size: 26px; display: none; } span{ display: block; margin-bottom: 14px; } strong{ font-size: 28px; font-weight: 500; opacity: .3; @media @max-lg { font-size: 22px; } } .hom2-pin{ span{ width: auto; height: auto; background-color: transparent; display: none; } .swiper-pagination-bullet-active{ display: block; } } } .item{ position: relative; padding: 80px 66px 160px; width: 66%; height: 500px; background-color: @color; @media @max-bg { padding: 60px 33px 80px; height: 400px; } @media @max-lg{ order: 1; width: 100%; height: auto; padding: 30px 30px 40px; } @media @max-sm { padding: 26px 16px 34px; } .font{ width: 40%; color: #fff; @media @max-lg { width: 100%; } .tit{ font-size: 28px; line-height: 1; margin-bottom: 36px; @media @max-bg { margin-bottom: 30px; } @media @max-lg { font-size: 24px; margin-bottom: 26px; } @media @max-sm { width: 100%; font-size: 22px; margin-bottom: 20px; } } .text{ font-size: 14px; line-height: 26px; margin-bottom: 69px; @media @max-bg { margin-bottom: 40px; } @media @max-lg { margin-bottom: 30px; } } a{ display: flex; align-items: center; color: #fff; font-size: 16px; i{ display: block; width: 7px; margin-left: 20px; @media @max-lg { margin-left: 10px; } img{ width: 100%; } } } } } .img{ position: absolute; right: 0%; bottom: 34px; z-index: 2; width: 68%; @media @min-ug{ height: 628px; } @media @max-lg { position: relative; bottom: 0; order: 0; width:100%; } img{ width: 100%; @media @min-ug{ height: 100%; object-fit: contain; } } } .swiper-slide{ padding: 178px 0 0; width: 66%; @media @max-bg { padding: 124px 0 0; } @media @max-lg { display: flex; flex-wrap: wrap; padding: 0; } @media @max-sm { width: 100%; } .img img{ opacity: .3; } } .swiper-slide-active{ .img img{ opacity: 1; } } .swiper-slide-next{ .img{ left: 0; right: inherit; } .item{ opacity: 0; } } .swiper-slide-prev{ .item{ opacity: 0; } } } .but{ display: flex; align-items: center; justify-content: center; color: #333; background-color:transparent; border: 1px solid #cccccc; border-radius: 24px; font-size: 16px; margin: 60px auto 0; position: relative; width: 270px; height: 48px; @media @max-bg { width: 200px; } @media @max-lg { width: 140px; height: 40px; margin: 40px auto 0; } @media @max-sm { margin: 30px auto 0; } i{ display: block; width: 7px; margin-left: 24px; position: absolute; right: 10%; @media @max-lg { margin-left: 18px; } img{ width: 100%; } } } } &-section3{ .item{ display: flex; flex-direction: row-reverse; position: relative; flex-wrap: wrap; margin-bottom: 90px; @media @max-bg { margin-bottom: 70px; } @media @max-lg { margin-bottom: 50px; } @media @max-md { margin-bottom: 40px; &:last-child{ margin-bottom: 0; } } .img{ width: 50%; height: 564px; @media @min-ug{ height: 754px; } @media @max-md { width: 100%; order: 0; padding: 0 15px; margin-bottom: 40px; height: auto; } @media @max-sm { margin-bottom: 30px; } img{ width: 100%; height: 100%; object-fit: cover; } } .container{ position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); @media @max-md { position: relative; top: 0; left: 0; -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); order: 1; } .jut{ width: 50%; display: flex; flex-wrap: wrap; @media @max-md { width: 100%; } &::before{ content: ""; display: block; width: 100px; height: 4px; background-color: @color; margin-right: 46px; margin-top: 12px; @media @max-bg { width: 80px; height: 3px; margin-right: 36px; } @media @max-lg { width: 60px; height: 2px; margin-right: 20px; } @media @max-md { display: none; } } .font{ width: 72%; @media @max-md { width: 100%; } span{ font-size: 28px; color: #000; opacity: .5; line-height: 1; display: block; margin-bottom: 23px; @media @max-lg { margin-bottom: 16px; font-size: 24px; } @media @max-md { font-size: 20px; margin-bottom: 10px; } } .tit{ font-size: 38px; color: @color; font-weight: bold; margin-bottom: 40px; @media @max-bg { margin-bottom: 34px; font-size: 34px; } @media @max-lg { margin-bottom: 26px; font-size: 26px; } @media @max-md { font-size: 24px; margin-bottom: 18px; } @media @max-sm { font-size: 22px; } } .text{ color: #666666; font-size: 24px; line-height: 2; @media @max-lg { font-size: 18px; } @media @max-md { font-size: 16px; } } strong{ display: block; font-size: 142px; color: #666; opacity: .2; margin-top: 80px; line-height: 1; @media @max-bg { margin-top: 60px; font-size: 100px; } @media @max-lg { margin-top: 40px; font-size: 60px; } @media @max-sm { margin-top: 20px; font-size: 40px; } } } } } &:nth-child(2n){ flex-direction: row; .container{ display: flex; flex-direction: row-reverse; .jut{ flex-direction: row-reverse; &::before{ margin-left: 46px; @media @max-bg { margin-left: 36px; } @media @max-lg { margin-left: 20px; } } .font{ display: flex; flex-direction: column; align-items: flex-end; text-align: right; } } } @media @max-md { flex-direction: row; .container{ display: flex; flex-direction: row-reverse; .jut{ flex-direction: row; .font{ display: block; flex-direction: column; align-items: flex-end; text-align: left; } } } } } } } &-section4{ background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; padding: 270px 0; overflow: hidden; @media @max-da { padding: 240px 0; } @media @max-bg { padding: 220px 0; } @media @max-lg { padding: 200px 0; } @media @max-md { padding: 160px 0; } .container{ display: flex; align-items: center; justify-content: center; .font{ width: 100%; text-align: center; strong{ line-height: 72px; font-size: 62px; margin-bottom: 14px; display: block; color: #fff; font-weight: bold; @media @max-da { font-size: 52px; line-height: 62px; } @media @max-bg { font-size: 42px; line-height: 52px; } @media @max-cg { font-size: 32px; line-height: 42px; } @media @max-lg { font-size: 24px; line-height: 36px; } } .text{ font-size: 16px; display: block; color: #fff; line-height: 2; } .but{ width: 270px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; background-color: @color; border: 1px solid @color; border-radius: 24px; font-size: 16px; margin: 60px auto 0; position: relative; @media @max-bg { width: 200px; } @media @max-lg { width: 140px; height: 40px; margin: 40px auto 0; } @media @max-sm { margin: 30px auto 0; } i{ display: block; width: 7px; margin-left: 24px; position: absolute; right: 10%; @media @max-lg { margin-left: 18px; } img{ width: 100%; } } } } } } &-section5{ background-color: #f6f6f6; .item{ display: block; .transition; .cont{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; .lt{ width: 16%; strong{ display: block; font-size: 38px; line-height: 1; color: #999; @media @max-bg { font-size: 30px; } } span{ display: block; font-size: 18px; color: #666; margin-top: 16px; } @media @max-lg { display: none; } } .gt{ width: 84%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid #eeeeee; padding: 46px 0; @media @max-bg { padding: 36px 0; } @media @max-lg { width: 100%; padding: 30px 0; } .cent{ width: 72%; @media @max-lg { order: 1; } @media @max-sm { width: 100%; } strong{ font-size: 18px; color: #333; display: block; line-height: 1; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-bottom: 32px; @media @max-lg { margin-bottom: 26px; } @media @max-sm { margin-bottom: 10px; } } .text{ font-size: 14px; color: #666; height: 52px; line-height: 28px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; @media @max-sm { height: 86px; -webkit-line-clamp: 3; } } } .img{ width: 20%; position: relative; padding-bottom: 8%; border: 4px solid transparent; @media @max-lg { order: 0; width: 24%; padding-bottom: 12%; border-width: 2px; } @media @max-sm { width: 100%; padding-bottom: 60%; margin-bottom: 20px; } img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } } } } &:hover{ background-color: @color; .lt{ span,strong{ color: #fff; } } .gt{ border-color: @color; .cent{ strong,.text{ color: #fff; } } .img{ border-color: #fff; } } } } .but{ width: 270px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; background-color: @color; border: 1px solid @color; border-radius: 24px; font-size: 16px; margin: 40px auto 0; position: relative; @media @max-bg { width: 200px; } @media @max-lg { width: 140px; height: 40px; } @media @max-sm { margin: 30px auto 0; } i{ display: block; width: 7px; margin-left: 24px; position: absolute; right: 10%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); @media @max-lg { margin-left: 18px; } img{ width: 100%; } } &:after{ content: ""; display: block; position: absolute; bottom: -20px; left: 74%; width: 14px; height: 26px; background: url(../image/int/shouicon.png) no-repeat center / 14px 26px; -webkit-animation: shoudong .5s linear infinite; -moz-animation: shoudong .5s linear infinite; -ms-animation: shoudong .5s linear infinite; animation: shoudong .5s linear infinite; } } } } @keyframes shoudong{ 0%{ transform: translateY(10px); } 100%{ transform: translateY(0); } } @-webkit-keyframes shoudong{ 0%{ transform: translateY(10px); } 100%{ transform: translateY(0); } } @-moz-keyframes shoudong{ 0%{ transform: translateY(10px); } 100%{ transform: translateY(0); } } @-ms-keyframes shoudong{ 0%{ transform: translateY(10px); } 100%{ transform: translateY(0); } } @-o-keyframes shoudong{ 0%{ transform: translateY(10px); } 100%{ transform: translateY(0); } } /* End */ /* 关于我们 */ .aboutbox{ &-border{ border-top: 4px solid #eeeeee; @media @max-lg { border-width: 2px; } } &-but{ display: flex; align-items: center; justify-content: center; margin: 0 auto 0; width: 270px; height: 48px; border-radius: 20px; border: 1px solid @color; color: @color; font-size: 16px; span{ color: @color; } i{ display: block; width: 6px; overflow: hidden; margin-left: 20px; -webkit-transform: rotate(90deg); transform: rotate(90deg); .transition; img{ width: 100%; float: left; } } @media @max-bg { width: 200px; } @media @max-lg { width: 140px; height: 40px; font-size: 16px; i{ margin-left: 14px; } } } &-but.on{ i{ -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } } &-section1{ .cont{ width: 100%; .item{ width: 100%; position: relative; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 140px; @media @max-bg { margin-bottom: 120px; } @media @max-cg { margin-bottom: 100px; } @media @max-lg { margin-bottom: 80px; } @media @max-md { margin-bottom: 60px; } @media @max-sm { margin-bottom: 40px; } &:last-child{ margin-bottom: 0; } .img{ width: 56%; @media @max-md { width: 100%; } } .img{ position: relative; overflow: hidden; padding-bottom: 32%; @media @max-bg{ padding-bottom: 35%; } @media @max-lg { height: 458px; padding-bottom: 0; } @media @max-md { margin-bottom: 30px; padding-bottom: 50%; height: auto; } @media @max-sm { margin-bottom: 26px; } img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; .transition; } &:hover{ img{ -webkit-transform: scale(1.04); transform: scale(1.04); } } } .gt{ width: 44%; display: flex; flex-direction: row-reverse; @media @max-md { width: 100%; } .font{ width: 78%; @media @max-bg { width: 82%; } @media @max-lg { width: 88%; } @media @max-md { width: 100%; } .tit{ color: @color; font-weight: bold; margin-bottom: 22px; @media @max-lg { margin-bottom: 14px; } } .text{ font-size: 24px; color: #666; margin-bottom: 62px; @media @max-da { font-size: 22px; margin-bottom: 42px; } @media @max-bg { margin-bottom: 32px; } @media @max-lg { margin-bottom: 22px; font-size: 20px; } @media @max-md { font-size: 18px; margin-bottom: 20px; } } .jut{ .head{ font-size: 24px; color: @color; line-height: 1; margin-bottom: 24px; @media @max-bg{ font-size: 22px; } @media @max-lg { font-size: 20px; } } .list{ display: flex; justify-content: space-between; margin-bottom: 20px; align-items: flex-start; @media @max-lg { margin-bottom: 16px; } &:last-child{ margin-bottom: 0; } &>span{ font-size: 20px; color: #666; display: flex; align-items: center; line-height: 1; @media @max-lg { font-size: 18px; } @media @max-xs { font-size: 16px; line-height: 1.5; } i{ display: block; overflow: hidden; margin-right: 10px; width: 20px; @media @max-sm { width: 16px; margin-right: 6px; } img{ width: 100%; float: left; } } } .p{ width: 86%; font-size: 16px; color: #999; line-height: 23px; padding-bottom: 24px; border-bottom: 1px solid #e5e5e5; @media @max-bg { padding-bottom: 20px; } @media @max-lg { padding-bottom: 16px; } @media @max-sm { width: 91%; } @media @max-xs { width: 82%; } } &:last-child{ .p{ border-bottom: none; } } } } } } &:nth-child(2n){ flex-direction: row-reverse; .gt{ flex-direction: row; .font .jut{ .list{ margin-bottom: 22px; @media @max-bg { margin-bottom: 14px; } &>span i{ margin-right: 0; width: 15px; margin-top: 5px; } .p{ border-bottom: none; width: 94%; padding-bottom: 0; @media @max-lg { width: 96%; } @media @max-sm { width: 94%; } @media @max-xs{ width: 92%; } } } } } } &:nth-child(3n){ .gt{ .font .jut{ .list{ .p{ padding-bottom: 0; border-bottom: none; margin-bottom: 30px; @media @max-lg { margin-bottom: 20px; width: 100%; } } } } } } } } } &-section2{ .jut{ margin: 0 -33px 40px; height: 880px; overflow: hidden; .transition; @media @max-bg { margin:0 -20px 40px; height: 618px; } @media @max-lg { margin: 0 -10px 10px; height: 518px; } @media @max-md { height: 418px; } .zhong{ display: flex; flex-wrap: wrap; .list{ padding: 0 33px; width: 33.333%; margin-bottom: 30px; height: 880px; @media @max-bg { padding:0 20px; height: 600px; } @media @max-lg { padding: 0 10px; margin-bottom: 20px; height: 500px; } @media @max-md { width: 50%; height: 400px; } @media @max-sm { width: 100%; height: 450px; } .item{ display: flex; flex-direction: column; height: 100%; .img{ width: 100%; overflow: hidden; position: relative; img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; .transition; } &:hover{ img{ -webkit-transform: scale(1.04); transform: scale(1.04); } } } .img1{ margin-bottom: 30px; height: 42%; @media @max-lg { margin-bottom: 20px; } } .img2{ height: 84%; } } &:nth-child(3n-1){ .item{ flex-direction: column-reverse; @media @max-md { flex-direction: column; } .img1{ margin-bottom: 0; @media @max-md { margin-bottom: 20px; } } .img2{ margin-bottom: 30px; @media @max-lg { margin-bottom: 20px; } @media @max-md { margin-bottom: 0; } } } } } } } } &-section3{ .jut{ margin: 0 -10px 40px; height: 428px; overflow: hidden; .transition; @media @max-bg { height: 328px; } @media @max-lg { margin: 0 -5px 10px; } @media @max-sm { height: 228px; } @media @max-xs { height: 198px; } @media @max-xx{ height: 238px; } .zhong{ display: flex; flex-wrap: wrap; } .list{ width: 25%; height: 410px; padding: 0 10px; margin-bottom: 20px; @media @max-bg { height: 310px; } @media @max-lg { padding: 0 5px; } @media @max-md { width: 33.33%; } @media @max-sm { width: 50%; height: 210px; } @media @max-xs { height: 180px; } @media @max-xx{ width: 100%; height: 220px; } } .item{ border: 1px solid #eeeeee; width: 100%; height: 100%; overflow: hidden; img{ width: 100%; height: 100%; object-fit: contain; .transition; } &:hover{ img{ -webkit-transform: scale(1.04); transform: scale(1.04); } } } } } &-section4{ .jut{ display: flex; flex-wrap: wrap; a{ position: relative; display: block; width: 14%; padding-bottom: 6%; margin: -1px 0 0 -1px; border: 1px solid #e6e6e6; @media @max-lg { width: 25%; padding-bottom: 10%; } @media @max-sm { width: 33.33%; padding-bottom: 14%; } @media @max-xx{ width: 50%; padding-bottom: 22%; } img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } } } } } /* End */ /* 联系我们 */ .contactbox{ &-section1{ .home-tit{ margin-bottom: 76px; @media @max-bg { margin-bottom: 60px; } @media @max-lg { margin-bottom: 40px; } } .cont{ width: 100%; background-color: #fff; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.1); padding: 34px; position: relative; @media @max-sm { padding: 30px 16px; } #map{ width: 100%; height: 400px; margin-bottom: 80px; @media @max-bg { margin-bottom: 60px; } @media @max-md{ height: 300px; margin-bottom: 40px; } .BMap_bubble_title{ font-size: 14px; color: @color; } } .jut{ background-color: #fbfbfb; position: relative; z-index: 1; display: flex; flex-direction: row-reverse; padding: 34px 0; @media @max-md { padding: 26px 0; } .gt{ width: 67%; display: flex; flex-wrap: wrap; justify-content: space-between; padding-right: 90px; @media @max-da { padding-right: 60px; } @media @max-lg{ padding: 0 40px; width: 100%; } @media @max-md { padding: 0 30px; } @media @max-sm { padding: 0 16px; } .item{ font-size: 16px; line-height:30px; color: #666; @media @max-sm { line-height:26px; } p{ margin-bottom: 14px; } @media @max-sm { width: 100%; margin-bottom: 30px; } &:nth-child(2){ margin-bottom: 0; } } .er{ padding: 14px; width: 150px; background-color: #fff; border: 1px solid #eeeeee; text-align: center; @media @max-md { display: none; } i{ display: block; width: 100%; img{ width: 100%; } } p{ font-size: 14px; line-height: 1; margin-top: 13px; color: @color; opacity: .4; } } } } .img{ position: absolute; bottom: 0; z-index: 2; left: 34px; width: 26%; @media @max-lg { display: none; } img{ width: 100%; } @media @max-sm { left: 16px; } } } } } /* End */ /* 涂料M */ .remake{ &-section1{ background-color: #fafafa; border-bottom: 1px solid #e8e8e8; .cont{ height: 82px; border-bottom: #e8e8e8; display: flex; align-items: center; justify-content: center; @media @max-lg { height: 52px; } .item{ display: flex; align-items: center; padding: 0 73px; position: relative; height: 100%; @media @max-lg { padding: 0 53px; } @media @max-sm { padding: 0 33px; width: 25%; } @media @max-xs { padding: 0; justify-content: center; } a{ font-size: 16px; color: #666; border-bottom: 2px solid transparent; display: flex; align-items: center; height: 100%; @media @max-sm{ font-size: 14px; } } &:after{ content: ""; display: block; position: absolute; top: calc(50% - 7px); right: 0; width: 1px; height: 14px; background-color: #cccccc; @media @max-sm { display: none; } } &:last-child:after{ display: none; } } .on{ a{ color: @color; border-color: @color; } } } } &-section2{ width: 100%; position: relative; display: flex; flex-wrap: wrap; flex-direction: row-reverse; @media @max-sm { padding: 40px 15px; } .img{ position: relative; width: 50%; @media @max-lg { height: 458px; } @media @max-md { width: 40%; height: 400px; } @media @max-sm { width: 100%; height: auto; position: relative; height: auto; order: 0; margin-bottom: 20px; } img{ width: 100%; height: 100%; object-fit: cover; } } .container{ position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); @media @max-sm { order: 1; width: 100%; position: relative; top: 0%; left: 0%; padding: 0; z-index: 2; -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); } .lt{ width: 50%; padding-right: 6%; @media @max-md { width: 60%; padding-right: 3%; } @media @max-sm { padding: 0; width: 100%; } &>strong{ font-size: 42px; font-weight: bold; color: @color; display: block; margin-bottom: 50px; @media @max-bg { margin-bottom: 30px; font-size: 32px; } @media @max-lg { margin-bottom: 26px; font-size: 26px; } @media @max-md { font-size: 24px; margin-bottom: 20px; } } .text{ font-size: 16px; color: #666; line-height: 29px; } } } } &-section3{ background-color: #fbfbfb; .container{ position: relative; .remake-prev,.remake-next{ width: 26px; height: 47px; background: none; top: 65%; } .remake-prev{ background: url(../image/int/tult1.png) no-repeat center / 23px 47px; left: -100px; @media @max-da { left:0; } @media @max-lg { display: none; } &:hover{ background: url(../image/int/tult1-1.png) no-repeat center / 23px 47px; } } .remake-next{ background: url(../image/int/tugt1.png) no-repeat center / 23px 47px; right: -100px; @media @max-da { right:0px; } @media @max-lg { display: none; } &:hover{ background: url(../image/int/tugt1-1.png) no-repeat center / 23px 47px; } } } .cont{ .swiper-slide{ display: flex; align-items: center; justify-content: center; background-color: #fff; padding: 54px 0; @media @max-bg { padding: 34px 0; } @media @max-sm { padding: 26px 0; } .img{ position: relative; padding-bottom: 81%; width: 100%; img{ width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; .transition; } &:hover{ img{ -webkit-transform: scale(1.02); transform: scale(1.02); } } } } } } &-section4{ padding-bottom: 100px; @media @max-bg { padding-bottom: 80px; } @media @max-lg { padding-bottom: 60px; } @media @max-sm { padding-bottom: 50px; } .cont{ margin: 0 -34px; display: flex; flex-wrap: wrap; @media @max-bg { margin: 0 -20px; } @media @max-lg { margin: 0 -10px; } @media @max-sm { margin: 0; } .item{ padding: 0 34px; margin-bottom: 60px; width: 33.33%; @media @max-bg { padding: 0 20px; margin-bottom: 40px; } @media @max-lg { padding: 0 10px; margin-bottom: 20px; } @media @max-md { width: 50%; } @media @max-sm { padding: 0; width: 100%; } .jut{ display: block; width: 100%; border: 1px solid #eeeeee; padding: 16px; .transition; @media @max-lg { padding: 10px; } .img{ width: 100%; position: relative; padding-bottom: 67%; overflow: hidden; img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; .transition; } } .font{ padding: 24px 0; strong{ text-overflow: ellipsis; white-space: nowrap; display: block; overflow: hidden; margin-bottom: 24px; line-height: 1; color: #333; font-size: 20px; } .text{ font-size: 14px; color: #666; line-height: 25px; height: 55px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } } &:hover{ border-color: @color; .img img { -webkit-transform: scale(1.04); transform: scale(1.04); } .font strong{ color: @color; } } } } } .but{ width: 270px; height: 48px; display: flex; align-items: center; justify-content: center; color: @color; border: 1px solid @color; border-radius: 24px; font-size: 16px; margin: 0 auto; @media @max-bg { width: 200px; } @media @max-lg { width: 140px; height: 40px; } i{ display: block; width: 7px; margin-left: 24px; @media @max-lg { margin-left: 18px; } img{ width: 100%; } } } } &-section5{ background-color: #fcfcfc; .home-tit{ margin-bottom: 100px; @media @max-bg{ margin-bottom: 80px; } @media @max-lg { margin-bottom: 60px; } @media @max-sm { margin-bottom: 40px; } } .cont{ position: relative; width: 100%; .img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; img{ width: 100%; height: 100%; object-fit: cover; } } .form{ width: 100%; display: flex; align-items: center; justify-content: center; padding: 80px 0; z-index: 2; position: relative; @media @max-bg { padding: 60px 0; } @media @max-lg { padding: 40px 0; } @media @max-sm { padding: 30px 10px; } form{ font-size: 0; input,button{ width: 260px; padding: 20px; font-size: 14px; border: 2px solid #fff; background: transparent; -webkit-appearance: none; appearance: none; margin-left: 18px; @media @max-bg{ width: 230px; } @media @max-lg { width: 180px; padding: 8px 10px; margin-left: 14px; } @media @max-md { margin-left: 10px; width: 140px; } @media @max-sm { margin-left: 0; width: 100%; margin-bottom: 20px; border: 1px solid #fff; padding: 12px 10px; } } input::-webkit-input-placeholder{ color: #fff; font-size: 14px; } input:first-child{ margin-left: 0; } .sele{ width: 391px; @media @max-bg { width: 300px; } @media @max-lg{ width: 280px; } @media @max-md { width: 220px; } @media @max-sm { width: 100%; } } button{ width: 180px; background-color: @color; border-color: @color; color: #fff; @media @max-bg { width: 140px; } @media @max-lg { width: 100px; } @media @max-sm { margin-left: 0; width: 100%; } } } } } } } /* End */ /* ȝ更换 */ .replace{ &-section1{ position: relative; background-color: #f8f8f8; .container{ position: relative; z-index: 2; } .cont{ display: flex; flex-wrap: wrap; align-items: center; .lt,.gt{ width: 50%; @media @max-md { width: 100%; } } .lt{ position: relative; padding-bottom: 30%; @media @max-md { padding-bottom: 40%; } @media @max-sm { padding-bottom: 60%; } img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } } .gt{ padding-left: 9%; @media @max-bg{ padding-left: 6%; } @media @max-md { padding: 0; margin-top: 30px; } .font{ width: 100%; strong{ font-weight: bold; line-height: 2em; color: @color; display: block; margin-bottom: 30px; @media @max-lg { margin-bottom: 26px; } @media @max-md { margin-bottom: 10px; } } .text{ font-size: 16px; color: #666; line-height: 30px; } } } } &:after{ position: absolute; top: 0; left: 0; content: ""; display: block; width: 26%; height: 100%; background-color: #fff; @media @max-md { display: none; } } } &-section2{ padding: 170px 0 240px; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; @media @max-da { padding: 140px 0 200px; } @media @max-bg { padding: 120px 0 180px; } @media @max-lg { padding: 100px 0 160px; } @media @max-md { padding: 80px 0 140px; } @media @max-sm { padding: 70px 0 120px; } .container{ position: relative; z-index: 2; .home-tit{ margin-bottom: 175px; @media @max-da { margin-bottom: 145px; } @media @max-bg { margin-bottom: 120px; } @media @max-lg { margin-bottom: 100px; } @media @max-sm { margin-bottom: 60px; } span{ opacity: .3; } strong{ color: #fff; } } .rep2-cont{ width: 100%; .swiper-slide{ display: flex; justify-content: center; .font{ color: #fff; strong{ font-size: 28px; display: block; font-weight: bold; margin-bottom: 33px; @media @max-lg { margin-bottom: 26px; font-size: 24px; } } .text{ color: #fff; opacity: .8; font-size: 16px; line-height: 32px; } } &:after{ position: absolute; content: ""; display: block; width: 1px; height: 100%; right: 0; top: 0; background-color: #fff; opacity: .5; @media @max-md { display: none; } } &:last-child{ &:after{ display: none; } } } } } &:after{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); z-index: 1; } } } /* End */ /* news新闻中心 */ .newsbox{ &-section1{ padding-bottom: 60px; @media @max-bg { padding-bottom: 40px; } @media @max-lg { padding-bottom: 26px; } .container{ .cont{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; .lt{ @media @max-sm { width: 100%; margin-bottom: 16px; } .tit{ margin-bottom: 10px; @media @max-lg { margin-bottom: 5px; } strong{ font-size: bold; line-height: 1; display: block; color: @color; font-size: 36px; @media @max-bg { font-size: 30px; } @media @max-lg { font-size: 26px; } @media @max-md { font-size: 24px; } span{ color: #666666; } } } .text{ font-size: 18px; color: #666; @media @max-lg { font-size: 16px; } } } .gt{ display: flex; align-items: center; @media @max-sm { width: 100%; } a{ font-size: 16px; color: #666; display: block; margin: 0 9px; position: relative; // border-right: 1px solid #808080; @media @max-lg { font-size: 14px; } &:after{ content: ""; display: block; position: absolute; right: -9px; top: calc(50% - 7px); width: 2px; background-color: #808080; height: 16px; @media @max-lg { width: 1px; height: 14px; top: calc(50% - 7px); } } &:hover{ color: @color; } &:last-child{ margin-right: 0; border-right: none; @media @max-sm { margin-right: 9px; } &:after{ display: none; } } @media @max-sm{ &:first-child{ margin-left: 0; } } } } } } } &-section2{ background-color: #fbfbfb; position: relative; @media @max-sm { padding: 0 15px; } .newsbox-img{ width: 50%; margin: 0; @media @max-md { width: 750px; margin: 0 auto; margin-bottom: 30px; } @media @max-sm { width: 100%; } .img{ width: 100%; position: relative; padding-bottom: 66%; @media @max-bg { height: 464px; } @media @max-md { height: 340px; } @media @max-sm { height: auto; } img{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; @media @max-sm { height: auto; } } } } .container{ position: absolute; z-index: 2; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); @media @max-md { position: relative; z-index: 2; top: 0%; left: 0%; -webkit-transform: translateX(0%) translateY(0%); transform: translateX(0%) translateY(0%); } @media @max-sm { padding: 0; } .cont{ width: 100%; display: flex; flex-direction: row-reverse; position: relative; .jut{ width: 50%; margin: 0; overflow: hidden; padding-left: 10%; @media @max-md { width: 100%; padding: 0 0 30px; } .newsbox-font{ width: 100%; strong{ display: block; font-size: 32px; margin-bottom: 16px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: @color; @media @max-bg { font-size: 26px; } @media @max-lg { font-size: 24px; margin-bottom: 20px; } } span{ font-size: 12px; color: #666; } .text{ margin-top: 46px; font-size: 16px; color: #666; line-height: 26px; @media @max-bg { margin-top: 36px; } @media @max-lg { margin-top: 26px; } @media @max-md{ margin-top: 20px; } p{ margin-bottom: 23px; @media @max-md { margin-bottom: 14px; } } } .but{ display: block; margin-top: 66px; font-size: 12px; color: #666; padding-bottom: 100px; @media @max-bg { margin-top: 44px; padding-bottom: 80px; } @media @max-lg { padding-bottom: 60px; margin-top: 26px; } @media @max-sm { padding: 0; } i{ font-style: normal; } } } } .qie{ position: absolute; height: 36px; display: flex; top: 94%; right: 34.4%; @media @max-lg { right: 32%; } .ser3-prev,.ser3-next{ width: 36px; height: 36px; border-radius: 50%; background-color: #d0d0d0; top: 0; margin: 0; left: 0; right: 0; position: relative; outline: none; @media @max-md { display: none; } } .ser3-prev{ margin-right: 10px; background:#d0d0d0 url(../image/int/ltbai.png) no-repeat center / 10px 18px; &:hover{ background:@color url(../image/int/ltbai.png) no-repeat center / 10px 18px; } } .ser3-next{ margin-right: 10px; background:#d0d0d0 url(../image/int/gtbai.png) no-repeat center / 10px 18px; &:hover{ background:@color url(../image/int/gtbai.png) no-repeat center / 10px 18px; } } } } } } &-section3{ padding-bottom: 100px; @media @max-bg { padding-bottom: 80px; } @media @max-lg { padding-bottom: 60px; } @media @max-sm { padding-bottom: 50px; } .cont{ .lt{ width: 68%; @media @max-lg { width: 100%; } .jut{ width: 100%; margin-bottom: 60px; @media @max-lg { margin-bottom: 40px; } .item{ display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 47px 0; border-bottom: 1px solid #ebebeb; @media @max-lg { padding: 37px 0; } @media @max-sm { padding: 26px 0; } .img{ width: 30%; height: 146px; overflow: hidden; @media @max-sm { width: 100%; margin-bottom: 26px; height: 100%; } img{ width: 100%; height: 100%; object-fit: cover; .transition; } } .font{ width: 66%; @media @max-sm { width: 100%; } strong{ font-size: 18px; display: block; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 20px; color: #333; } span{ line-height: 1; font-size: 12px; color: #999; } .text{ font-size: 14px; color: #888; line-height: 20px; margin-top: 24px; height: 60px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } } &:first-child{ border-top: none; padding-top: 0; } &:hover{ .img img { -webkit-transform: scale(1.05); transform: scale(1.05); } } } } } .gt{ width: 26%; padding: 7px 20px; border: 1px solid #eeeeee; @media @max-lg { display: none; } .tit{ padding: 20px 0; line-height: 1; border-bottom: 1px solid #eee; font-size: 20px; color: @color; } .jut{ width: 100%; .list{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; padding: 20px 0; .img{ width: 40%; height: 87px; overflow: hidden; img{ width: 100%; height: 100%; object-fit: cover; .transition; } } .font{ width: 53%; strong{ font-size: 14px; color: #333; display: block; line-height: 20px; margin-bottom: 10px; height: 40px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .text{ line-height: 16px; font-size: 12px; color: #666; display: block; height: 34px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } } &:last-child{ border-bottom: none; } &:hover{ .img img { -webkit-transform: scale(1.04); transform: scale(1.04); } } } } } } } &-section4{ background-color: #fcfcfc; padding: 230px 0 90px; @media @max-da { padding: 200px 0 80px; } @media @max-bg { padding: 160px 0 70px; } @media @max-lg { padding: 120px 0 60px; } @media @max-md { padding: 100px 0 50px; } @media @max-sm { padding: 80px 0 50px; } .cont{ display: flex; align-items: center; flex-wrap: wrap; a{ position: relative; display: block; width: 50%; display: flex; align-items: center; flex-direction: row-reverse; padding: 82px 0 67px; .transition; @media @max-cg { padding: 62px 0 57px; } @media @max-lg { padding: 50px 0 37px; } @media @max-md { padding: 62px 0 57px; } @media @max-sm { padding: 40px 0; } .img{ position: absolute; bottom: 0; left: 0; width: 70%; overflow: hidden; display: flex; align-items: flex-end; .transition; @media @min-ug{ width: 48%; } @media @max-lg { width: 66%; } @media @max-md { width: 55%; } @media @max-sm { display: none; } img{ width: 100%; float: left; object-fit: contain; } } .font{ width: 34%; position: relative; @media @max-lg { width: 40%; } @media @max-sm { width: 100%; padding: 0 5%; } strong{ display: block; color: @color; font-size: 26px; line-height: 1; margin-bottom: 16px; @media @max-lg { font-size: 24px; } } span{ font-size: 18px; display: block; margin-bottom: 30px; line-height: 1; color: #fff; @media @max-lg{ font-size: 16px; } @media @max-sm { margin-bottom: 0; } } .but{ display: flex; justify-content: center; align-items: center; width: 37px; height: 37px; border-radius: 50%; border: 1px solid #fff; .transition; @media @max-sm { position: absolute; right: 5%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } i{ width: 18px; display: block; } } } @media @max-md { width: 100%; } &:hover{ .font .but{ -webkit-transform: translateY(-4px); transform: translateY(-4px); @media @max-sm { -webkit-transform: translateY(-23px); transform: translateY(-23px); } } } } .lt{ background: url(../image/int/bubag1.png) no-repeat center / cover; @media @max-md { margin-bottom: 90px; } @media @max-sm { margin-bottom: 30px; } } .gt{ background: url(../image/int/bubag2.png) no-repeat center / cover; .font{ strong{ color: #fff; } .but{ background-color: #fff; border-color:#fff; } } } } } } /* End */ /* coase_info案例详情?*/ .case_info{ &-section1{ padding: 20px 0; background-color: #fdfdfd; border-bottom: 1px solid #ececec; .container{ font-size: 14px; color: #333; line-height: 2; span,a{ color: #333; font-size: 14px; } .on{ color: @color; } } } &-section2{ padding: 60px 0; margin-bottom: 10px; @media @max-lg { margin-bottom: 40px; } .cont{ background-color: #fbfbfb; margin-bottom: 80px; @media @max-bg { margin-bottom: 60px; } @media @max-lg { margin-bottom: 50px; } @media @max-sm { margin-bottom: 30px; } .img{ width: 100%; overflow: hidden; img{ width: 100%; .transition; } &:hover{ img{ -webkit-transform: scale(1.04); transform: scale(1.04); } } } .case2-prev,.case2-next{ width: 37px; height: 93px; outline: none; pointer-events: auto; @media @max-lg { width: 27px; height: 60px; } @media @max-sm { width:20px ; height: 50px; } } .case2-prev{ left: 0; background: rgba(0,0,0,.2) url(../image/int/lthei.png) no-repeat center; background-size: 13px 22px; &:hover{ background: @color url(../image/int/ltbai.png) no-repeat center; background-size: 13px 22px; } } .case2-next{ right: 0; background: rgba(0,0,0,.2) url(../image/int/gthei.png) no-repeat center; background-size: 13px 22px; &:hover{ background: @color url(../image/int/gtbai.png) no-repeat center; background-size: 13px 22px; } } .make-text{ padding: 77px 100px; @media @max-bg { padding: 55px 80px; } @media @max-cg { padding: 44px 60px; } @media @max-lg { padding: 33px 40px; } @media @max-sm { padding: 22px 16px; } } } .qie{ width: 100%; display: flex; justify-content: space-between; min-width: 100%; flex-wrap: wrap; a{ color: #999; font-size: 15px; .transition; &:hover{ color: @color; } } } } &-section3{ padding-top: 0; .tit{ font-weight: bold; color: @color; padding: 50px 0 40px; line-height: 1; border-top: 1px solid #eeeeee; @media @max-lg{ padding: 40px 0 30px; } } } } /* End */ /* 新闻详情?*/ .news_info{ &-section1{ padding-bottom: 0; .container{ border-top: 1px solid @color; @media @max-sm { padding-left: 15px; padding-right: 15px; } } .cont .lt{ .list{ background-color: #fcfcfc; padding: 60px 40px 50px; margin-bottom: 50px; @media @max-lg { padding: 50px 26px 40px; margin-bottom: 40px; } @media @max-sm { padding: 40px 16px; margin-bottom: 30px; } .tit{ text-align: center; margin-bottom: 54px; @media @max-md { margin-bottom: 34px; } @media @max-sm { margin-bottom: 26px; } &>strong{ font-size: 24px; line-height: 2; display: block; margin-bottom: 10px; } .text{ display: flex; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 12px; color: #999; strong{ font-size: 12px; } span{ display: block; margin-right: 20px; } } } .end1{ text-align: center; margin-top: 30px; color: @color; font-size: 14px; span{ position: relative; &:after,&:before{ content: ""; display: block; position: absolute; width: 18px; height: 1px; background-color: @color; top: 50%; } &:after{ right:-24px ; } &::before{ left:-24px ; } } } } .qie{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; min-width: 100%; a{ color: #666666; font-size: 15px; line-height: 2; margin-bottom: 10px; .transition; &:hover{ color: @color; } } } } } } /* End */ /* 外墙l修 */ .facaderbox{ &-tit{ text-align: center; margin-bottom: 60px; @media @max-lg { margin-bottom: 40px; } @media @max-sm { margin-bottom: 26px; } span{ font-weight: bold; color: @color; display: block; } .text{ font-size: 16px; margin-top: 18px; color: #666; line-height: 30px; @media @max-bg { margin-top: 14px; } @media @max-lg { margin-top: 8px; } } } &-section1{ .cont{ display: flex; justify-content: space-between; flex-wrap: wrap; a{ display: block; width: 49%; overflow: hidden; position: relative; padding-bottom: 21%; img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; .transition; } &:hover{ img{ -webkit-transform: scale(1.04); transform: scale(1.04); } } } } } &-section2{ background-color: #fbfbfb; .cont{ .jut{ display: flex; flex-wrap: wrap; justify-content: flex-end; @media @max-md { justify-content: space-between; } .item{ width: 30%; margin-bottom: 34px; @media @max-sm { margin-bottom: 26px; } .list{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; span{ font-size: 42px; color: #cccccc; line-height: 1; @media @max-bg { font-size: 32px; } @media @max-lg { font-size: 26px; } } .font{ width: 84%; @media @max-md { width: 86%; } strong{ font-size: 18px; color: #666; display: block; font-weight: 500; margin-bottom: 10px; } .text{ line-height: 22px; font-size: 14px; color: #999999; } } } &:nth-child(4){ width: 100%; position: relative; @media @max-md { width: 49%; } @media @max-sm { width: 100%; } .list{ width: 30%; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); @media @max-md { position: relative; -webkit-transform: translateY(0%); transform: translateY(0%); top: 0; } @media @max-md { width: 100%; } } .img{ width: 100%; @media @max-md { display: none; } img{ width: 100%; } } } @media @max-md { width: 49%; } @media @max-sm { width: 100%; } } &:nth-child(2n){ flex-direction: row-reverse; @media @max-md { flex-direction: row; } } } } } } /* End */ /* 外墙清洗 */ .cleaning{ &-section1{ .container{ @media @max-sm { padding: 0; } } .cleaning1-cont{ width: 100%; padding: 54px 0; @media @max-sm { padding: 15px ; } .item{ display: flex; flex-wrap: wrap; background-color: #fff; align-items: center; position: relative; .img{ position: relative; z-index: 2; width: 44%; padding-bottom: 58%; .transition; overflow: hidden; @media @max-lg { height: 450px; } @media @max-xs{ display: none; } img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; .transition; } } .font{ width: 56%; position: relative; display: flex; align-items: center; justify-content: center; height: 100%; @media @max-sm { padding: 40px 0; } .text{ position: relative; z-index: 2; .tit{ font-size: 26px; font-weight: bold; color: @color; line-height: 1; margin-bottom: 30px; @media @max-lg { font-size: 24px; margin-bottom: 26px; } @media @max-sm { font-size: 22px; margin-bottom: 20px; } } .list{ strong{ display: block; font-size: 20px; color: #333; line-height: 1; position: relative; margin-bottom: 45px; @media @max-lg { margin-bottom: 35px; } &:after{ content: ""; display: block; width: 21px; height: 4px; background-color: @color; position: absolute; top: 32px; left: 0; } } li{ font-size: 14px; color: #999; display: block; margin-bottom: 20px; @media @max-lg { margin-bottom: 14px; } } } } } i{ position: absolute; bottom: 0; right: 0; display: flex; flex-direction: row-reverse; width: 25%; img{ width: 100%; } } } .swiper-slide{ width: 50%; .item .img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } @media @max-md { width: 100%; } } .swiper-slide-prev{ .item{ flex-direction: row-reverse; } } .swiper-slide-active{ box-shadow: 0 5px 54px rgba(0,0,0,.1); .item .img{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: gray; } @media @max-sm { box-shadow: 0 5px 15px rgba(0,0,0,.1); } } .cleaning1-prev,.cleaning1-next{ width: 44px; height: 93px; @media @max-sm { display: none; } } .cleaning1-prev{ background: rgba(255,255,255,.5) url(../image/int/tult1-1.png) no-repeat center / 17px 30px; left: 8%; } .cleaning1-next{ background: rgba(255,255,255,.5) url(../image/int/tugt1-1.png) no-repeat center / 17px 30px; right: 8%; } } } &-section2{ .cont{ position: relative; padding-top: 40px; @media @max-lg { display: flex; flex-wrap: wrap; justify-content: space-between; } &::before{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); content: ""; width: 16px; height: 100%; background-color: @color; object-fit: cover; display: block; @media @max-lg { display: none; } } .list{ display: flex; flex-direction: row-reverse; width: 100%; position: relative; z-index: 2; @media @max-lg { width: 100%; margin-bottom: 60px; } @media @max-sm { width: 100%; } .item{ width: 38%; position: relative; display: flex; flex-direction: column; @media @max-lg { width: 100%; } .tit{ position: absolute; top: -78px; left: -17vw; width: 275px; height: 275px; display: flex; align-items: center; justify-content: center; flex-direction: column; background: url(../image/int/juxing1.png) no-repeat center / contain; text-align: center; @media @min-ug{ left: -16vw; } @media @max-da { left: -54%; } @media @max-bg { left: -58%; } @media @max-lg { width: auto; height: auto; position: relative; top: 0; left: 0; right: 0; margin-bottom: 20px; background: none; } span{ font-size: 42px; font-weight: bold; color: @color; line-height: 1; margin-bottom: 12px; @media @max-bg { font-size: 32px; } @media @max-lg { font-size: 26px; } @media @max-md { font-size: 24px; } } strong{ font-size: 22px; color: @color; font-weight: 500; line-height: 1; @media @max-sm { font-size: 20px; } } } .font{ width: 100%; display: flex; flex-direction: column; span{ font-size: 26px; color: @color; line-height: 1; display: block; margin-bottom: 20px; @media @max-bg { font-size: 24px; } @media @max-lg { font-size: 20px; } @media @max-sm { text-align: center; width: 100%; } } .text{ font-size: 18px; line-height: 32px; margin-bottom: 10px; color: #666666; @media @max-md { font-size: 16px; line-height: 28px; } } .list1{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; img{ width: 49%; height: 155px; object-fit: cover; background-color: #333; @media @max-sm { width: 100%; margin-bottom: 16px; &:last-child{ margin-bottom: 0; } } } } } } &:last-child{ padding-bottom: 100px; @media @max-bg { padding-bottom: 80px; } @media @max-lg { padding-bottom: 60px; } @media @max-sm { padding-bottom: 50px; } } &:nth-child(2n){ flex-direction: row; .item{ flex-direction: row-reverse; @media @max-lg { flex-direction: column; } .font{ align-items: flex-end; @media @max-lg { align-items: flex-start; } } .tit{ top: -78px; right: -17vw; left: inherit; @media @min-ug{ right: -16vw; } @media @max-da { right: -54%; } @media @max-bg { right: -58%; } @media @max-lg { position: relative; top: 0; left: 0; right: 0; } } } } } } } &-section3{ background-color: #fafafa; padding-bottom: 63px; @media @max-bg { padding-bottom: 43px; } @media @max-lg { padding-bottom: 23px; } @media @max-md { padding-bottom: 13px; } @media @max-sm { padding-bottom: 3px; } .home-tit{ margin-bottom: 47px; @media @max-bg { margin-bottom: 27px; } @media @max-lg { margin-bottom: 7px; } @media @max-sm { margin-bottom: 25px; } } .cleaning3-cont{ width: 71%; margin: 0 auto; padding: 57px 0; @media @max-md { width: 100%; } @media @max-sm { padding: 15px 0; } .swiper-slide{ width: 90%; @media @max-sm { width: 100%; } a{ display: block; position: relative; padding-bottom: 40%; width: 70%; opacity: .4; @media @max-sm { width: 100%; } img{ position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; height: 100%; object-fit: contain; } } } .swiper-slide-prev{ display: flex; flex-direction: row-reverse; a img{ margin: 0; right: 0; left: initial; } } .swiper-slide-active{ a{ padding-bottom: 42%; width: 100%; opacity: 1; } a img{ box-shadow: 0 5px 54px rgba(0,0,0,.1); @media @max-sm { box-shadow: 0 5px 15px rgba(0,0,0,.1); } } } .cleaning3-prev,.cleaning3-next{ width: 17px; height: 30px; @media @max-sm { display: none; } } .cleaning3-prev{ background: url(../image/int/tult1-1.png) no-repeat center / 17px 30px; } .cleaning3-next{ background: url(../image/int/tugt1-1.png) no-repeat center / 17px 30px; } } } &-section4{ border-bottom: 4px solid #eeeeee; @media @max-sm { border-width: 2px; } .cont{ width: 100%; .jut{ width: 100%; margin-bottom: 100px; position: relative; @media @max-bg { margin-bottom: 80px; } @media @max-lg { margin-bottom: 60px; } @media @max-sm { margin-bottom: 40px; } .cleaning4-cont{ width: 100%; .img{ width: 100%; @media @max-cg { height: 546px; } img{ width: 100%; @media @max-cg { height: 100%; object-fit: cover; } } } .container{ position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); strong{ color: @color; display: block; margin-bottom: 20px; } .font{ font-size: 16px; color: #666; line-height: 2; } } } .clebox{ position: absolute; bottom: 0; left: 0; z-index: 222; width: 100%; height: 80px; background-color: rgba(0,0,0,.5); @media @max-lg { height: 60px; } .cleaning4-nav{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } a{ display: flex; width: 100%; position: relative; height: 178px; .transition; @media @max-bg { height: 140px; } @media @max-lg { height: 100px; } @media @max-sm { height: 80px; } .img{ position: absolute; bottom: 0; left: 0; width: 100%; height: 0; overflow: hidden; z-index: 1; .transition; img{ width: 100%; height: 100%; object-fit: cover; .transition; } &:after{ content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); position: absolute; top: 0; left: 0; z-index: 2; } } .font{ position: absolute; width: 100%; height: 80px; left: 0; bottom: 0; z-index: 2; display: flex; font-size: 16px; color: #fff; justify-content: center; align-items: center; text-align: center; .transition; @media @max-lg { height: 60px; } } &:hover{ .img{ opacity: 1; height: 100%; } } } .swiper-slide.on{ a{ .img{ opacity: 1; height: 100%; } } } } } } .text{ display: flex; align-items: center; justify-content: space-between; width: 100%; flex-wrap: wrap; .lt{ font-size: 22px; line-height: 38px; width: 50%; color: #666666; @media @max-bg { width: 70%; } @media @max-lg { font-size: 20px; line-height: 34px; } @media @max-sm { width: 100%; } } .but{ width: 270px; height: 48px; display: flex; align-items: center; justify-content: center; color: @color; border: 1px solid @color; border-radius: 24px; font-size: 16px; @media @max-bg { width: 200px; } @media @max-lg { width: 140px; height: 40px; } @media @max-sm { margin: 30px auto 0; } i{ display: block; width: 7px; margin-left: 24px; @media @max-lg { margin-left: 18px; } img{ width: 100%; } } } } } } /* End */ ɧbɫ