.sFlex{ flex-direction: column; } .bgf{ background: #fff; } .envi-left, .work-left { background-image: url(../images/eLeft.png); background-repeat: no-repeat; background-position: center; /* transform: rotate(180deg); */ /* position: absolute; */ left: 0; /* top: 50%; */ background-size: 50px auto; width: 50px; height: 50px; border-radius: 50px; z-index: 999; outline: none; opacity: .5; transition: all .3s; } .envi-right, .work-right { background-image: url(../images/eRight.png); background-repeat: no-repeat; background-position: center; background-size: 50px auto; width: 50px; height: 50px; border-radius: 50px; /* position: absolute; */ right: 0; /* top: 50%; */ z-index: 999; outline: none; opacity: .5; transition: all .3s; } .bannerImg { width: 100%; height: 800px; } #envi , #worker{ /*width: calc(100% - 140px);*/ width: 100%; height: ; } .envi{ width: 100%; } .headerBox{ width: 130px;background: #E9E9E9;height: 130px;border-radius: 100%;overflow: hidden;margin: auto; } .hisAct .headerBox { transform: scale(1.3) !important; transition: all .3s !important; opacity: 1 !important;; } .hisNear .headerBox{ transform: scale(1) !important; opacity: .8 !important; transition: all .3s; } .hisOther .headerBox{ transform: scale(.65); opacity: .5; transition: all .3s; } .workCon{ display: none; } .ccBox .li{ height: 31.25vw; margin-bottom: 90px; } .ccBox .cDesc{ font-size: 20px; line-height: 30px; } .ccBox .li:nth-child(2n-1){ /*color: #333;*/ } .ccBox .li:nth-child(2n) .flex{ /*color: #fff;*/ align-items: flex-end; } .ccBox .li .newsPage{ border: 1px solid #333; color: #333; } /*.ccBox .li:nth-child(2n-1) .newsPage{*/ /* border: 1px solid #333;*/ /* color: #333;*/ /*}*/ /*.ccBox .li:nth-child(2n) .newsPage{*/ /* border: 1px solid #fff;*/ /* color: #fff;*/ /*}*/ /*.ccBox a:hover .newsPage{*/ /* border: 1px solid #DA2735 !important;*/ /* color: #DA2735 !important;;*/ /*}*/ /*.envi .swiper-slide:nth-child(5n-4), .envi .swiper-slide:nth-child(5n-3){*/ /* width: calc((1600px - 20px)/2) !important;*/ /* margin-bottom: 20px;*/ /*}*/ /*.envi .swiper-slide:nth-child(5n-4){*/ /* margin-right: 20px;*/ /*}*/ /*.envi .swiper-slide:nth-child(5n-2), .envi .swiper-slide:nth-child(5n){*/ /* width: 420px !important;*/ /*}*/ /*.envi .swiper-slide:nth-child(5n-1) {*/ /* width: calc(1600px - 880px) !important;*/ /* margin: 0 20px;*/ /*}*/ .envi .li_0, .envi .li_1 { width: calc((100% - 20px)/2); margin-bottom: 20px; } .envi .li { margin-right: 20px; box-sizing: border-box; overflow: hidden; } .envi .li:nth-child(1) .con, .envi .li:nth-child(2){ height: 370px; } .envi .li:nth-child(3) .con, .envi .li:nth-child(4) .con, .envi .li:nth-child(5) .con{ height: 270px; } /*.envi .li .con {*/ /* height: 400px;*/ /*}*/ .envi .li:nth-child(2), .envi .li:nth-child(5) { margin-right: 0; } .envi .li_2, .envi .li_4 { width: 420px; } .envi .li_3 { width: calc(100% - 880px); } .envi .hideCon { position: absolute; left: 0; bottom: 0; right: 0; padding: 20px; background: linear-gradient(0, rgba(0,0,0,0.75), transparent); flex-direction: column; text-align: center; /*opacity: 0;*/ } /*.envi .con:hover .hideCon{*/ /* animation: coonShow .3s linear forwards;*/ /*}*/ /*@keyframes coonShow{*/ /* from{opacity: 0;}*/ /* to{opacity: 1;}*/ /*}*/ .layer{ position:fixed;top:0;bottom:0;left:0;right:0;margin:auto;background:rgba(0,0,0,0.9);z-index:11087;display:none; } .r-envi-left { background-image: url(../images/w-b-ar.png?time=3); background-repeat: no-repeat; background-position: center; transform: rotate(180deg); position: absolute; left: 0; top: 50%; background-size: 50px auto; width: 50px; height: 50px; border-radius: 50px; z-index: 999; outline: none; /*opacity: .5;*/ /*transition: all .3s;*/ } .r-envi-right { background-image: url(../images/w-b-ar.png?time=3); background-repeat: no-repeat; background-position: center; background-size: 50px auto; width: 50px; height: 50px; border-radius: 50px; position: absolute; right: 0; top: 50%; z-index: 999; outline: none; /*opacity: .5;*/ /*transition: all .3s;*/ } .l-close{ background-image: url(../images/close.png?time=3); background-repeat: no-repeat; background-position: center; background-size: 34px auto; width: 64px; height: 64px; border-radius: 64px; position: absolute; right: 20px; top: 20px; z-index: 999; outline: none; /*opacity: .5;*/ transition: all .3s; } .l-close:hover{ transform: rotate(360deg); } .redBox{ width:300px;background:#dedede;height:1px;margin:auto; } .redBox:after{ position: absolute; background: #da2735; width: 150px; height: 6px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; content:''; } @media screen and (max-width: 768px) { .jzzz .right{ margin-top: 20px; } .envi .li{ min-width: 100%; height: 200px !important; margin: 0 auto 20px; padding-right: 0; } .lxfs .left{ background-position: top center !important; margin-bottom: 20px; min-height: 180px; height: auto !important; } }