/*
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ɫ