html,

body {

    height: 100%;

}



.index_con {

    position: relative;

    width: 100%;

    height: 100%;

}



.index_logo {

    position: fixed;

    top: 62px;

    left: 6%;

    z-index: 999;

}



.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;
    width: 100%;

}

/* .index_footer img{

    width: 100%;

} */

.footer-nr{

    position: absolute;

    bottom: 0;

    width: 100%;

    text-align: center;

    line-height: 40px;

    margin-bottom: 10px;

    color: #000;

}

.footer-nr span{

    display: inline-block;

    margin: 0 10px;

}

.module {

    width: 100%;

    height: 100%;

    position: absolute;

    bottom: 0;

    right: 0;

}



.module ul {
    /* height: 100%; */
    width: 100%;
    position: absolute;
    bottom: 8%;
    right: 0;
}



.module ul li {

    float: right;

    width: 324px;

    height: 468px;
    margin-right: 6%;

}
.module ul li:nth-child(1){
    margin-right: 12%;
}


.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: url(/images/whiteBg.png) no-repeat;

}

.maskCon{

    position: absolute;

    bottom: 24%;
    width: 100%;

}

.maskT{

    margin-bottom: 15%;

}

.maskT span {

    display: block;

    width: 140px;

    height: 140px;

    border-radius: 50%;

    background-color: #fff;

    text-align: center;

    margin: 0 auto;

}

.maskT span img{
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.maskB {

    text-align: center;

    width: 100%;

}

.maskB_cn{

    font-size: 34px;

    padding: 0 20%;

    line-height: 35px;

    margin-bottom: 6px;
    color: #172450;

}

.maskB_en{

    padding: 0 8%;

    line-height: 20px;
    color: #2e2e2e;
    letter-spacing: 1px;

}

.module li.on .mask {

    background: url(/images/blueBg.png) no-repeat;
    margin-top: -30%;

}


/* 

.module li.on .mask .maskT span{

    border: 4px solid #f5d721;

} */


/* 
.module li.on .mask .maskB {

    color: #fff;

} */

/* 

.module li.on i.icon-jiantou_xiangyou_o {

    color: #fff;

} */



@media screen and (max-width: 1680px) {


    .index_logo{

        left: 9%;

    }

    .maskB_cn{

        padding: 0 22%;

    }

    .maskB_en{

        padding: 0 10%;

    }

}

@media screen and (max-width: 1600px){

    .index_logo{

        left: 8.2%;
        top: 30px;

    }

}

@media screen and (max-width: 1440px) {
    .module ul li{
        width: 260px;
        height: 350px;
    }
    .mask{
        background-size: 100% 100%;
    }
    .module li.on .mask{
        background-size: 100% 100%;
        margin-top: -20%;
    }

    .maskT span {

        width: 110px;

        height: 110px;


    }

    .maskB_cn{

        font-size: 24px;

        line-height: 30px;

    }

    .maskB_en{

        font-size: 13px;

    } 

    .index_logo{

        left: 8%;
        top: 90px;

    }

    .index_logo img{

        width: 82%;

    }

}



@media screen and (max-width: 1366px) {

    .maskB_cn{

        font-size: 22px;

        line-height: 26px;

    }
    .index_logo{
        top: 40px;
        left: 10%;
    }
    .index_logo img{

        width: 68%;

    }
    .maskCon{
        bottom: 25%;
    }

}

@media screen and (max-width: 1280px){

    .index_logo img{

        width: 73%;

    }
    .index_logo{
		left: 8%;
		top: 60px;
	}

}

@media screen and (max-width: 1024px) {


    .maskB_cn{

        font-size: 20px;

        line-height: 24px;

    }

    .index_logo img{

        width: 69%;

    }

}