html{
	height:100%;
}
body{
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
	padding:0;
	background: url(bg.jpg);
	font-family:"Microsoft YaHei"; font-size:13px;
	color:#fff;
}
a:link{
color:#FFF;
text-decoration:none;
}
a:visited {
color: #FFF;
text-decoration:none;
}
a:hover {
color: #f00;
text-decoration:underline;
}
ul,li{ list-style-type:none}
.htmleaf-header{width:320px; margin:80px auto 0}
            .wrap {
                margin-top: 100px;
                perspective: 1000px;
                perspective-origin: 50% 50%;
            }
            .cube {
                margin: auto;
                position: relative;
                height: 200px;
                width: 200px;
                transform-style: preserve-3d;
            }

                .cube div {
                    position: absolute;
                    padding: 10px;
                    box-sizing: border-box;
                    height: 100%;
                    width: 100%;
                    opacity: 0.9;
                    background-color: #000;
                    border: solid 1px #eee;
                    color: #fff;
                    font: 10px arial;
                    transition: transform 0.2s ease-in;
                }

            .front {
                background: url(1.jpg);
                transform: translateZ(100px);
            }

            .back {
                background: url(2.jpg);
                transform: translateZ(-100px) rotateY(180deg);
            }

            .right {
                background: url(3.jpg);
                transform: rotateY(-270deg) translateX(100px);
                transform-origin: top right;
            }

            .left {
                background: url(4.jpg);
                transform: rotateY(270deg) translateX(-100px);
                transform-origin: center left;
            }

            .top {
                background: url(5.jpg);
                transform: rotateX(-270deg) translateY(-100px);
                transform-origin: top center;
            }

            .bottom {
                background: url(6.jpg);
                transform: rotateX(270deg) translateY(100px);
                transform-origin: bottom center;
            }
            /* inner cube */
            i{
              position:absolute;
              top:50px;
              left:50px;
              width:100px;
              height:100px;
              display:block;
              background:url(cube.jpg);
              transition: all 1s linear;
            }
            i.i_front{
              transform: translateZ(50px);
            }
            i.i_back{
              transform: translateZ(-50px) rotateY(180deg);
            }
            i.i_bottom{
              transform:rotateX(-90deg) translateY(50px);
              transform-origin: left bottom;
            }
            i.i_left{
              transform:rotateY(270deg) translateX(-50px);
              transform-origin: center left;
            }
            i.i_right{
              transform:rotateY(-270deg) translateX(50px);
              transform-origin: top right;
            }
            i.i_top{
              transform:rotateX(-270deg) translateY(-50px);
              transform-origin: left top;
            }

            @keyframes rotate {
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }

                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }

            .cube {
                animation: rotate 20s infinite linear;
            }

            .wrap:hover .front {
                transform: translateZ(200px);
            }

            .wrap:hover .back {
                transform: translateZ(-200px) rotateY(180deg);
            }

            .wrap:hover .right {
                transform: rotateY(-270deg) translateZ(100px) translateX(100px);
            }

            .wrap:hover .left {
                transform: rotateY(270deg) translateZ(100px) translateX(-100px);
            }

            .wrap:hover .top {
                transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
            }

            .wrap:hover .bottom {
                transform: rotateX(270deg) translateZ(100px) translateY(100px);
            }
.input {
	padding:10px 10px;
	border:1px solid #d5d9da;
	border-radius:5px;
	box-shadow: 0 0 5px #e8e9eb inset;
	width:200px;
	font-size:1em;
	outline:0;
}
.submit {
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,0.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                0 .25em .25em hsla(0,0%,0%,.05);
    color: #fff;background:#de147d;
    cursor: pointer;
    display: inline-block;
    font-size:16px;
    line-height: 1.5;
    padding: .5em 1.5em .75em;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
}
.submit:hover,.submit:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.05);
}
.submit:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
    outline: none;
}

.foot{ text-align:center; color:#FFF; line-height:25px; margin-top:100px}
.foot a{color:#fff; font-weight:bold; margin:0 3px}