/*$$
{"color":[{"val":"#26334c","title":"æ ç›®æ ‡é¢˜é¢œè‰²"},{"val":"#666e80","title":"简介文å—颜色"},{"val":"#ffffff","title":"按钮上文å—颜色"},{"val":"#666e80","title":"ç»Ÿè®¡åŒºåŸŸæ ‡é¢˜é¢œè‰²"}],"background":[{"val":"#6160ea","title":"按钮背景颜色"},{"val":"#9493ff","title":"é¼ æ ‡æ»‘è¿‡è¾¹æ¡†é¢œè‰²"},{"val":"#ffffff","title":"统计区域背景颜色"}],"border":[{"val":"#efefef","title":"统计区域边框"}]}
$$*/
#about_147{
background: #f2f4f7;
width: 100%;
padding: 60px 0;
}
#about_147 .aboutCon{
width: 1200px;
margin: 0 auto;
position: relative;
display: flex;
}
#about_147 .aboutL{
width: 50%;
float: left;
padding: 40px 60px 190px 0;
position: relative;
}
#about_147 .aboutR{
width: 50%;
float: left;
overflow: hidden;
}
#about_147 .aboutR img{
width: 100%;
height: 100%;
object-fit: cover;
}
#about_147 .className{
width: 100%;
position: relative;
color: #26334c;
}
#about_147 .className .title-1{
font-size: 35px;
line-height: 50px;
padding-left: 30px;
position: relative;
text-transform: uppercase;
font-weight: bold;
}
#about_147 .reveal__cover-section{
background: #f2f4f7;
}
#about_147 .className .title-1 i{
display: block;
width: 25px;
height: 17px;
position: absolute;
left: 0;
top: 14px;
background: url(/static/images/IC00001_02.png) no-repeat;
}
#about_147 .className .title-2{
padding-left: 30px;
font-size: 24px;
line-height: 50px;
}
#about_147 .intrs{
font-size: 14px;
color: #666e80;
line-height: 36px;
padding-top: 30px;
position: relative;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:5;
}
#about_147 .intrs p{
width: 100%;
}
#about_147 .intrs .bgop{
position: absolute;
width: 100%;
height: 100%;
background:#f2f4f7;
opacity: 0.5;
/* transition: opacity .3s ease; */
transform: scale(1,1);
transform-origin: 100% 0;
}
#about_147 .intrs.active .bgop{
animation: showtit .8s forwards;
}
@keyframes showtit {
from {
transform:scale(1,1);
}
to {
transform:scale(0,1);
}
}
#about_147 .btnMore{
background: rgba(14, 110, 184, 1);
padding-right: 80px;
text-align: center;
line-height: 55px;
width: 200px;
height: 55px;
display: block;
color: #ffffff;
font-size: 16px;
letter-spacing: 1px;
margin-top:50px;
position: relative;
}
#about_xxx .btnMore:hover{
color: #ffffff;
}
#about_147 .btnMore i{
position: absolute;
left:142px;
top:50%;
content: '';
transform: translateY(-50%);
width: 26px;
height: 14px;
background: url(/static/images/IC00001_01.png) no-repeat;
background-size: 26px 14px;
}
#about_147 .bz-buttonAnimat .inner{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#about_147 .bz-buttonAnimat:before,
#about_147 .bz-buttonAnimat:after,
#about_147 .bz-buttonAnimat .inner:before,
#about_147 .bz-buttonAnimat .inner:after{
background:rgba(44, 146, 225, 1);
}
#about_147 .bz-buttonAnimat:before,
#about_147 .bz-buttonAnimat:after,
#about_147 .bz-buttonAnimat .inner:before,
#about_147 .bz-buttonAnimat .inner:after{
position:absolute;content:"";display:block;
-webkit-transition:-webkit-transform 0.3s;
transition:-webkit-transform 0.3s;
transition:transform 0.3s;
transition:transform 0.3s,-webkit-transform 0.3s;
}
#about_147 .bz-buttonAnimat:before,
#about_147 .bz-buttonAnimat:after{
left:0;width:100%;
height:2px;
-webkit-transform:scaleX(0);
transform:scaleX(0);
}
#about_147 .bz-buttonAnimat .inner:before,
#about_147 .bz-buttonAnimat .inner:after{
top:0;width:2px;height:100%;-webkit-transform:scaleY(0);transform:scaleY(0);
}
#about_147 .bz-buttonAnimat .inner:before{left:0;}
#about_147 .bz-buttonAnimat .inner:after{right:0;}
#about_147 .bz-buttonAnimat .inner:hover:before,
#about_147 .bz-buttonAnimat .inner:hover:after{
-webkit-transform:scaleY(1);transform:scaleY(1);
}
#about_147 .bz-buttonAnimat:before{top:0;}
#about_147 .bz-buttonAnimat:after{bottom:0;}
#about_147 .bz-buttonAnimat:hover:before,
#about_147 .bz-buttonAnimat:hover:after{
-webkit-transform:scaleX(1);transform:scaleX(1);
}
#about_147 .bz-buttonAnimat:hover .inner:before,
#about_147 .bz-buttonAnimat:hover .inner:after{
-webkit-transform:scaleY(1);transform:scaleY(1);
}
#about_147 .bz-buttonAnimat.clockwise .inner:before{
-webkit-transform-origin:top center;
transform-origin:top center;
}
#about_147 .bz-buttonAnimat.clockwise .inner:after{
-webkit-transform-origin:bottom center;
transform-origin:bottom center;
}
#about_147 .bz-buttonAnimat.clockwise:before{
-webkit-transform-origin:right center;
transform-origin:right center;
}
#about_147 .bz-buttonAnimat.clockwise:after{
-webkit-transform-origin:left center;
transform-origin:left center;
}
#about_147 .bz-buttonAnimat.clockwise:hover .inner:before{
-webkit-transform-origin:bottom center;
transform-origin:bottom center;
}
.bz-buttonAnimat.clockwise:hover .inner:after{
-webkit-transform-origin:top center;
transform-origin:top center;
}
#about_147 .bz-buttonAnimat.clockwise:hover:before{
-webkit-transform-origin:left center;
transform-origin:left center;
}
#about_147 .bz-buttonAnimat.clockwise:hover:after{
-webkit-transform-origin:right center;
transform-origin:right center;
}
#about_147 .statistics{
width: 700px;
height: 110px;
background: #ffffff;
position: absolute;
bottom:30px;
z-index:100;
}
#about_147 .statistics ul{
height: 100%;
width: auto;
}
#about_147 .statistics ul li{
border-right: #efefef solid 1px;
float: left;
width: 195px;
float: left;
height: 100%;
padding-top: 22px;
}
#about_147 .statistics ul li .itemImg{
background: url(/static/images/IC00001_11.png) no-repeat;
background-size: 100%;
width: 64px;
height: 64px;
float: left;
display: flex;
align-items: center;
justify-content: center;
transition: background .3s ease;
cursor: pointer;
}
#about_147 .statistics ul li .itemImg:hover{
background: url(/static/images/IC00001_10.png) no-repeat;
background-size: 100%;
}
#about_147 .statistics .nr{
width: 110px;
padding-left: 15px;
}
#about_147 .statistics .nr .num{
color: #26334c;
font-size: 33px;
text-align: center;
}
#about_147 .statistics .nr .tit{
color: #666e80;
font-size: 14px;
line-height: 50px;
text-align: center;
}
#about_147 .statistics .logoBox{
width: 110px;
text-align: center;
justify-content: center;
align-items: center;
float: left;
display: flex;
height: 100%;
position: absolute;
right:0;
top:0;
}
@media screen and (max-width:1200px) {
#about_147 .aboutCon{
width: 100%;
}
#about_147{
padding: 20px 0;
}
#about_147 .aboutL{
padding: 40px 40px 190px 2%;
}
}
/* 手机 */
@media screen and (max-width: 767px) {
#about_147 .aboutCon{
width: 100%;
display: block;
}
#about_147 .aboutL{
width: 100%;
padding: 0 5% 150px 5%;
}
#about_147 .aboutR{
width: 100%;
margin-top: 200px;
display: none;
}
#about_147 .aboutR img{
height: 500px;
object-fit: cover;
width: 100%;
}
#about_147 .intrs{
line-height: 24px;
padding-top: 10px;
}
#about_147 .btnMore{
margin-top: 20px;
}
#about_147 .statistics{
width: 90%;
height: 120px;
bottom: 0px;
}
#about_147 .statistics ul li{
width: 25%;
text-align: center;
padding-top: 10px;
height: 100%;
}
#about_147 .statistics .nr{
padding: 0;
text-align: center;
width: 100%;
}
#about_147 .statistics .nr .num{
font-size: 20px;
}
#about_147 .statistics ul li img{
width: 40%;
margin: 0 30%;
}
#about_147 .statistics .logoBox{
width: 25%;
position: absolute;
right:0;
top:0;
}
#about_147 .statistics .nr .tit{
line-height: 40px;
}
#about_147 .statistics ul li .itemImg{
width: 40px;
height: 40px;
float: none;
margin: 0 auto;
}
#about_147 .className .title-1{
font-size: 30px;
line-height: 36px;
}
#about_147 .className .title-2{
font-size: 20px;
line-height: 30px;
}
}