*{
	margin:0;
	padding:0;
}
a{
	text-decoration: none
}
ul{
	list-style: none
}
body{
	font-family: "微软雅黑";
	background: url(../images/bg.jpg)no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	padding-top:100px;
}
.tp-content {
                width: 80%;
                max-width: 650px;
                background: rgba(0,0,0,.1);
                border-radius: 10px;
                box-shadow: -2px -2px 2px rgba(255,255,255,1),-2px -2px 12px rgba(255,255,255,0.5),inset 2px 2px 4px rgba(255,255,255,0.1),2px 2px 8px rgba(0,0,0,0.15);
                position: fixed;
                left: 0;
                top: 25%;
                right: 0;
                margin: 0 auto;
                padding: 15px;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
            }

            .tp-content:hover {
                box-shadow: -2px -2px 4px rgba(255,255,255,1),-2px -2px 14px rgba(255,255,255,0.7),inset 2px 2px 6px rgba(255,255,255,0.3),2px 2px 10px rgba(0,0,0,0.25);
            }

            .tp-content a {
                display: block;
                width: 20%;
                background: rgba(0,68,255,0.1);
                color: #fff;
                font-size: 16px;
                line-height: 30px;
                text-align: center;
                text-decoration: none;
                margin: 15px 2%;
                border: 1px solid rgba(0,0,0,.4);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .tp-content a:hover {
                transition: all .3s;
                border-radius: 0;
                border-color: rgba(0,0,0,.9);
                background: rgba(144,0,255,.4);
            }

            .tp-content a img {
                width: 25px;
                height: 25px;
                margin-right: 6px;
                transform-origin: 50% 0;
                animation: yaolingdang 3s infinite ease;
            }

            @media screen and (max-width: 1200px) {
                .tp-content a {
                    width:40%;
                    margin: 15px 5%;
                }
            }

            @media screen and (max-width: 980px) {
                .tp-content a {
                    width:40%;
                }
            }

            @media screen and (max-width: 650px) {
                .tp-content a {
                    width:80%;
                }
            }

            .copyright {
                width: 100%;
                position: fixed;
                bottom: 0;
                width: 100%;
                text-align: center;
                font-size: 12px;
                color: #fff;
                line-height: 20px;
            }

            @keyframes yaolingdang {
                5%,25%,45% {
                    transform: rotate(8deg);
                }

                0%,10%,30%,50% {
                    transform: rotate(-8deg);
                }

                15%,35%,55% {
                    transform: rotate(4deg);
                }

                20%,40%,60% {
                    transform: rotate(-4deg);
                }

                65%,100% {
                    transform: rotate(0deg);
                }
            }