.connect-icon {
	width: 3rem;
	height: 3rem;
	fill: currentColor;
	overflow: hidden;
	margin: .5rem 1rem;
}

.connect-icon:hover{
	color: #878ECD;
	transition: 0.3s;
	-moz-transition:0.3s;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	animation: up .5s;
	-webkit-animation: up .5s;
	/*停在最后一帧*/
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	position: relative;
}

@keyframes up {
      from {
        bottom: 0;
      }
      to {

        bottom: .5rem;
      }
    }

    @-webkit-keyframes up {
      from {
        bottom: 0;
      }
      to {
        bottom: .5rem;
      }
    }

.qr{
	display:none;
	background:#fff;
	position:fixed;
	bottom:14rem;
	width: 15rem;
	height: 19rem;
	right:27%;
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;
	border: solid 0.2rem #878ECD;
	color: #000
}

@media screen and (max-width: 768px){
	.qr{
		right:35%;
	}
}

.qr img {
	position: relative;
	padding:.6rem .6rem .6rem;
	width: 13.8rem;
}

.qr-note{
	font-size: 1.2rem;
	line-height: 1.8rem;
	text-align: center;
}

.mailbox{
	display:none;
	background:#fff;
	position:fixed;
	bottom:14rem;
	width: 13rem;
	height: 4rem;
	right:23%;
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;
	border: solid 0.2rem #878ECD;
}

@media screen and (max-width: 768px){
	.mailbox{
		right:25%;
	}
}

.mail-note{
	font-size: 1.2rem;
	line-height: 4rem;
	text-align: center;
}