You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
396 lines
9.3 KiB
396 lines
9.3 KiB
body,html{
|
|
margin:0;padding:0;
|
|
}
|
|
.section1 .topcontainer{
|
|
width:100%;
|
|
margin-top:100px;
|
|
position: relative;
|
|
}
|
|
.section1 img{
|
|
width:100%;
|
|
}
|
|
.selectItemContainer{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 74px;
|
|
background: rgba(2,7,14,0.5);
|
|
position: absolute;
|
|
bottom: 0;
|
|
width:100%;
|
|
z-index: 9;
|
|
}
|
|
.section1.active .selectedContainer{
|
|
-webkit-animation-duration: 1s;
|
|
-moz-animation-duration: 1s;
|
|
-o-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-name: fadeInRight;
|
|
-moz-animation-name: fadeInRight;
|
|
-o-animation-name: fadeInRight;
|
|
animation-name: fadeInRight;
|
|
-webkit-animation-fill-mode: both;
|
|
-moz-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-moz-animation-timing-function: ease-in-out;
|
|
-o-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
.section1.active .selectItemContainer{
|
|
-webkit-animation-duration: 1s;
|
|
-moz-animation-duration: 1s;
|
|
-o-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-name: fadeInUp;
|
|
-moz-animation-name: fadeInUp;
|
|
-o-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
-webkit-animation-fill-mode: both;
|
|
-moz-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-moz-animation-timing-function: ease-in-out;
|
|
-o-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
.section2.active .xietong,.section3.active .yaosu,.section4.active .yaosu{
|
|
-webkit-animation-duration: 1s;
|
|
-moz-animation-duration: 1s;
|
|
-o-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-name: fadeInDown;
|
|
-moz-animation-name: fadeInDown;
|
|
-o-animation-name: fadeInDown;
|
|
animation-name: fadeInDown;
|
|
-webkit-animation-fill-mode: both;
|
|
-moz-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-moz-animation-timing-function: ease-in-out;
|
|
-o-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
.section2.active img,.section3.active .middleContent, .section4.active .contentContainer h5{
|
|
-webkit-animation-duration: 1s;
|
|
-moz-animation-duration: 1s;
|
|
-o-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-name: fadeInUp;
|
|
-moz-animation-name: fadeInUp;
|
|
-o-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
-webkit-animation-fill-mode: both;
|
|
-moz-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-moz-animation-timing-function: ease-in-out;
|
|
-o-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
.section4.active .contentContainer .contentList{
|
|
-webkit-animation-duration: 1s;
|
|
-moz-animation-duration: 1s;
|
|
-o-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-name: fadeInUp;
|
|
-moz-animation-name: fadeInUp;
|
|
-o-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
animation-delay: 0.5s;
|
|
-webkit-animation-fill-mode: both;
|
|
-moz-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-moz-animation-timing-function: ease-in-out;
|
|
-o-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
.selectItemContainer a,a:link,
|
|
a:visited,
|
|
a:hover,
|
|
a:active{
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
height:100%;
|
|
flex:1;
|
|
}
|
|
.selected{
|
|
background: #124AA0;
|
|
}
|
|
.selectItemContainer a:hover{
|
|
background: #124AA0;
|
|
}
|
|
.selectItem{
|
|
|
|
text-align: center;
|
|
color: #ffffff;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.selectItem h5{
|
|
font-size: 16px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
padding:0 !important;
|
|
line-height:16px !important;
|
|
margin:0 !important
|
|
}
|
|
.selectItem>div{
|
|
font-size: 10px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
margin-top:12px;
|
|
}
|
|
.line{
|
|
width: 1px;
|
|
height: 30px;
|
|
background-color: #ffffff;
|
|
}
|
|
.selectedContainer{
|
|
position: absolute;
|
|
top:0;
|
|
left:14%;
|
|
z-index: 9;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
left: 15%;
|
|
}
|
|
.selectedContainer .title{
|
|
font-size: 48px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
.selectedContainer .subtitle{
|
|
font-size: 36px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
.section2{
|
|
|
|
}
|
|
.xietong{
|
|
padding: 146px 0 102px 0;
|
|
text-align: center;
|
|
}
|
|
.section2 img{
|
|
width:100%;
|
|
}
|
|
.xietong .devide{
|
|
width: 80px;
|
|
height: 6px;
|
|
background: #E3E8EF;
|
|
margin: 0 auto;
|
|
}
|
|
.xietong .title{
|
|
font-size: 48px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #124AA0;
|
|
margin:15px 0 10px 0;
|
|
}
|
|
.xietong .subtitle{
|
|
font-size: 36px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #124AA0;
|
|
}
|
|
.section3{
|
|
background: url(../images/要素资源-bg@2x.png) center top no-repeat;
|
|
}
|
|
|
|
.yaosu{
|
|
text-align: center;
|
|
}
|
|
.yaosu .devide{
|
|
width: 80px;
|
|
height: 6px;
|
|
background: #124AA0;
|
|
margin: 0 auto;
|
|
}
|
|
.yaosu .title{
|
|
font-size: 48px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #124AA0;
|
|
margin:15px 0 10px 0;
|
|
}
|
|
.yaosu .subtitle{
|
|
font-size: 36px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #124AA0;
|
|
}
|
|
.middleContent{
|
|
display: flex;
|
|
width:100%;
|
|
/* margin-top: 30px; */
|
|
|
|
}
|
|
|
|
.middleContent .imgcontainer img{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
.middleContent .contenttitle{
|
|
font-size: 30px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
.contentText{
|
|
position: absolute;
|
|
top:50%;
|
|
width: 72%;
|
|
left: 14%;
|
|
}
|
|
.contentText p{
|
|
margin:0;
|
|
padding:0;
|
|
font-size: 24px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
.category__item {
|
|
cursor: pointer;
|
|
border:2px solid transparent;
|
|
position: relative;
|
|
}
|
|
.category__item:hover .business-effect {
|
|
background: #134BA1;
|
|
-webkit-transition-delay: 0.5s;
|
|
-moz-transition-delay: 0.5s;
|
|
-o-transition-delay: 0.5s;
|
|
transition-delay: 0.5s;
|
|
}
|
|
.category__item:hover .business-effect .e-img-l {
|
|
left: 0;
|
|
-webkit-transition: all 0.5s;
|
|
-o-transition: all 0.5s;
|
|
-moz-transition: all 0.5s;
|
|
transition: all 0.5s;
|
|
}
|
|
.category__item:hover .business-effect .e-img-r { right: 0; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
|
|
.business-effect {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
z-index: 2;
|
|
}
|
|
.category__item:hover a {
|
|
opacity: 1;
|
|
z-index:9999;
|
|
position: absolute;
|
|
top:50%;
|
|
transform: translateY(-50%);
|
|
left:50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.category__item .business-effect .e-img-l {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-transition: all 0.5s;
|
|
-o-transition: all 0.5s;
|
|
-moz-transition: all 0.5s;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
|
|
.category__item .business-effect .e-img-l img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.business-effect .e-img-r { position: absolute; top: 0; right: -100%; width: 100%; height: 100%; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
|
|
.business-effect .e-img-r img { display: block;height: 100%; width: 100%; }
|
|
.category__item>a {
|
|
opacity: 0;
|
|
display: block;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
width: 118px; height: 38px;
|
|
line-height: 38px;
|
|
border: 1px solid #fff;
|
|
/* margin: 10% auto; */
|
|
-webkit-transition: all 0.5s;
|
|
-o-transition: all 0.5s;
|
|
-moz-transition: all 0.5s;
|
|
transition: all 0.5s;
|
|
text-align: center;
|
|
position: absolute;
|
|
}
|
|
.middleContent .owl-nav{
|
|
display: block !important;
|
|
}
|
|
.owl-prev{
|
|
position: absolute;
|
|
right:-70px;
|
|
top:50%
|
|
}
|
|
.owl-next{
|
|
position: absolute;
|
|
left:-60px;
|
|
top:50%
|
|
}
|
|
.section4{
|
|
position: relative;
|
|
}
|
|
.section4 .bg{
|
|
position: absolute;
|
|
top:3%;
|
|
left:50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.contentContainer{
|
|
background: url('../images/qianglian.png');
|
|
background-repeat: no-repeat;
|
|
padding: 80px 0 90px 0;
|
|
text-align: center;
|
|
}
|
|
.contentContainer h5{
|
|
padding:0;
|
|
margin:0;
|
|
font-size: 36px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
.contentList{
|
|
width:65%;
|
|
margin:0 auto;
|
|
margin-top: 70px;
|
|
}
|
|
.contentItem{
|
|
width: 202px;
|
|
height: 202px;
|
|
background: rgba(18,74,160,0);
|
|
border: 2px solid #316DCB;
|
|
border-radius: 50%;
|
|
font-size: 24px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
} |