html,
body {
height: 100%;
}
.index_con {
position: relative;
width: 100%;
height: 100%;
}
.index_logo {
position: fixed;
top: 70px;
left: 50%;
transform: translateX(-50%);
z-index: 999999;
}
/* .index_logo img {
width: 90%;
} */
.index_bg {
width: 100%;
height: 100%;
}
.index_bg img {
width: 100%;
height: 100%;
background-size: 100% 100%;
}
.index_footer{
position: fixed;
bottom: 0;
/* z-index: 999999; */
}
.index_footer img{
width: 100%;
}
.footer-nr{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
line-height: 40px;
margin-bottom: 30px;
color: #fff;
font-size: 16px;
}
.footer-nr span{
display: inline-block;
margin: 0 10px;
}
.module {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.module ul {
height: 100%;
padding-top: 12%;
display: flex;
justify-content: center;
}
.module ul li {
float: left;
width: 14%;
height: 62%;
margin: 0 3%;
opacity: 0;
transform: translateY(100px);
animation: slideIn 0.6s ease-out forwards;
}
@keyframes slideIn{
from{
opacity: 0;
transform: translateY(100px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
.module ul li:nth-child(1){animation-delay: 0.4s;}
.module ul li:nth-child(2){animation-delay: 0.8s;}
.module ul li:nth-child(3){animation-delay: 1.2s;}
.module ul li a {
height: 100%;
display: block;
}
.mask {
position: relative;
z-index: 2;
-webkit-transition: 0.3s;
transition: 0.3s;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .5);
border-radius: 10px;
border: 1px solid #ebebeb;
padding: 5%;
}
.module li .mask .maskCon{
width: 100%;
height: 100%;
border:1px solid rgba(255, 255, 255, 0);
border-radius: 10px;
position: relative;
text-align: center;
}
.maskT{
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
transition: all .6s;
text-align: center;
}
.maskT span {
display: block;
width: 109px;
height: 109px;
border-radius: 50%;
background-color: #c20505;
text-align: center;
margin: 0 auto;
transition: all .6s;
}
.maskT span i{
display: inline-block;
font-size: 48px;
margin-top: 14px;
color: #fff;
}
.module li:hover span{
transform: rotateY(360deg);
}
.maskT span i.icon-zhengfujiguan{
font-size: 92px;
}
.maskT span i.icon-dashiji{
font-size: 80px;
}
.maskT span i.icon-chengguoku{
font-size: 80px;
}
.maskB {
text-align: center;
color: #000;
width: 100%;
transition: all .6s;
position: absolute;
bottom: 30%;
}
.maskB_cn{
font-size: 26px;
padding: 0 20%;
line-height: 35px;
margin-bottom: 6px;
}
.module li.on .mask {
background: rgba(174, 4, 9, .8);
border: 1px solid #ae0409;
}
.module li.on .mask .maskT{
position: absolute;
top: 50%;
bottom: 0;
}
.module li.on .mask .maskB {
color: #fff;
position: absolute;
top: 20%;
bottom: 0;
}
.module li.on .mask .maskCon{
border:1px solid rgba(255, 255, 255, .5);
}
.module li.on .mask .maskT span{
background-color: #fff;
}
.module li.on .maskT span i{
color: #ae0409;
}
.module li.on i.icon-jiantou_xiangyou_o {
color: #fff;
}
@media screen and (max-width: 1800px) {
.module ul li{
width: 15%;
height: 60%;
}
}
@media screen and (max-width: 1680px) {
.module ul li{
width: 16%;
}
.footer-nr{
margin-bottom: 20px;
}
}
@media screen and (max-width: 1600px){
.maskB_cn{
font-size: 24px;
}
}
@media screen and (max-width: 1440px) {
.maskT span{
width: 90px;
height: 90px;
}
.maskB_cn{
font-size: 22px;
}
.maskT span i{
margin-top: 10px;
}
.maskT span i.icon-zhengfujiguan{
font-size: 76px;
}
.maskT span i.icon-dashiji{
font-size: 64px;
}
.maskT span i.icon-chengguoku{
font-size: 64px;
}
}
@media screen and (max-width: 1366px) {
.footer-nr{
margin-bottom: 12px;
}
.maskB{
bottom: 20%;
}
.maskB_cn{
font-size: 20px;
}
}
@media screen and (max-width: 1280px){
.module ul{
padding-top: 18%;
}
.maskB_cn{
font-size:18px;
}
}
@media screen and (max-width: 1024px) {
.module ul li{
width: 18%;
}
.maskB_cn{
font-size: 20px;
}
.footer-nr{
margin-bottom: 8px;
}
.maskB_cn{
font-size: 17px;
}
}