@charset "utf-8";
/* CSS Document */
html{font-size:16px; height:100%;margin:0px; padding: 0px; width:100%;height:100%;-webkit-box-sizing:border-box;}
body{font-size:63%;height:100%;margin:0px; padding:0px;-webkit-box-sizing:border-box; width:100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-clip:border-box; background-size:100% 100%;
    background-image: url;
}
a{ text-decoration: none;}
.container{margin:0px auto; height:100%; width:100%;position:relative;overflow: hidden;}
.menu{  font-size:1em;  margin: 0 auto;position:relative;
    top: 54%;
    width:66.7%;
    -webkit-justify-content: space-between;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    /*-webkit-animation-fill-mode: none;*/
    /*-moz-animation-fill-mode: forwards;*/
    /*-o-animation-fill-mode: forwards;*/
    /*animation-fill-mode: none;*/
}

.menu .flex2>div,.menu .flex1>div,.menu .flex3>div{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    height: 5em;
    width:5em;

}
.menu .flex1{width:65.97%; float: right;  display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

}
.menu .flex2{
    width:100%;margin:.5em auto;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-pack:justify;
    -o-box-pack:justify;
    box-pack:justify;

}


.menu .flex3{width:65.97%; float: left;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;


}


.menu-list>div{
    width:95%; height:90%;
    background: rgba(0, 148, 187, 0.6);
    /*opacity:.5;*/
    display:inline-block;
    visibility: hidden;
	border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;

}
.flex1 .menu-list:last-child>div,.flex2 .menu-list:nth-child(2)>div,.flex3 .menu-list:first-child>div{
    background: rgba(0, 148, 187, 0.7);
}
.menu-list>div>a{
    color:#fff;
    display: block;
   text-align:center;
    color: #FFFFFF;
    font: 600 1.56em 'Microsoft YaHei';
    /*text-shadow: 1px 1px 0px #CCCCCC;*/
    height:100%;
    width: 100%;
    position:relative
}


.menu-list>div>a div:first-child{

     height:50%;
    width:50%;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform:rotate(-45deg) translate(0em,0em) ;
    -moz-transform: rotate(-45deg) translate(0em,0em);
    -ms-transform: rotate(-45deg) translate(0em,0em);
    -o-transform: rotate(-45deg) translate(0em,0em);
    transform: rotate(-45deg) translate(0em,0em);
    margin:0 auto;
    transform-origin: bottom center;
    -webkit-transform-origin:  bottom center;
 }
.menu-list>div>a div:last-child{
    text-align: center;
    width:50%;
    height:50%;

    margin:0 auto;
    -webkit-transform:rotate(-45deg) translate(0em,0em) ;
    -moz-transform: rotate(-45deg) translate(0em,0em);
    -ms-transform: rotate(-45deg) translate(0em,0em);
    -o-transform: rotate(-45deg) translate(0em,0em);
    transform: rotate(-45deg) translate(0em,0em);
    transform-origin: top center;
    -webkit-transform-origin: top center;
}
.menu-list>div>a div:last-child span{
    width:200%;
    text-align: center;
    display: inline-block;
    margin-top:.2em;
    margin-left: -50%;
	font-size: 12px;
}
.footer{text-align: center; position: absolute; bottom: 0px;height: 2em;line-height: 2em;
    color: #CECECE;
    font: 600 1.1875em 'Microsoft YaHei';
    width:100%;
}