@charset "utf-8";


.btn {display: block;width: 158px;height: 38px;border-radius: 9px;border: none;margin: 0 auto;padding: 0px;overflow: hidden;position: relative;z-index: 13;}
.btn::after { content: ""; display: block; width: 244px; height: 38px; border-radius: 29px; margin: 0 auto; position: absolute; left: 50%; top: 50%; z-index: -1; animation: 0.3s ease 0s normal forwards 1 running btnOut; transform: translate(-50%, -50%) scale3d(1, 1, 1) translateZ(0px); transition: width 0.25s cubic-bezier(0.64, 0.57, 0.67, 1.53) 700ms;}
.bo-vid-btn::after { background-color: #DDDDDD; width: 244px;}
.active .btn::after { background-color: #90abf1; width: 244px;}
.btn:hover:after { -webkit-animation: btnHover .3s ease 0s 1 forwards; animation: btnHover .3s ease 0s 1 forwards;}


.btn-copy {display: inline-block;padding: 0px 0px;transform: translate(0px, 0px) translateZ(0px);transition: transform 0.25s cubic-bezier(0.64, 0.57, 0.67, 1.53) 800ms;font-size: 16px;font-family: "苹方";line-height: 28px;color: #333333;font-weight: bold;}
.btn-copy:hover { color: #333333;}
.active .btn-copy { color: #FFFFFF;}
.active .btn-copy:hover { color: #FFFFFF;}


@-webkit-keyframes btnHover {
	0% {
		-webkit-transform: translate(-50%,-50%) scale3d(1,1,1);
		transform: translate(-50%,-50%) scale3d(1,1,1)
	}

	25% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.1,.9,1);
		transform: translate(-50%,-50%) scale3d(1.1,.9,1)
	}

	50% {
		-webkit-transform: translate(-50%,-50%) scale3d(.95,1.1,1);
		transform: translate(-50%,-50%) scale3d(.95,1.1,1)
	}

	66% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.075,.95,1);
		transform: translate(-50%,-50%) scale3d(1.075,.95,1)
	}

	76% {
		-webkit-transform: translate(-50%,-50%) scale3d(.975,1.05,1);
		transform: translate(-50%,-50%) scale3d(.975,1.05,1)
	}

	87% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.05,.975,1);
		transform: translate(-50%,-50%) scale3d(1.05,.975,1)
	}

	100% {
		-webkit-transform: translate(-50%,-50%) scale3d(1,1,1);
		transform: translate(-50%,-50%) scale3d(1,1,1)
	}
}

@keyframes btnHover {
	0% {
		-webkit-transform: translate(-50%,-50%) scale3d(1,1,1);
		transform: translate(-50%,-50%) scale3d(1,1,1)
	}

	25% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.1,.9,1);
		transform: translate(-50%,-50%) scale3d(1.1,.9,1)
	}

	50% {
		-webkit-transform: translate(-50%,-50%) scale3d(.95,1.1,1);
		transform: translate(-50%,-50%) scale3d(.95,1.1,1)
	}

	66% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.075,.95,1);
		transform: translate(-50%,-50%) scale3d(1.075,.95,1)
	}

	76% {
		-webkit-transform: translate(-50%,-50%) scale3d(.975,1.05,1);
		transform: translate(-50%,-50%) scale3d(.975,1.05,1)
	}

	87% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.05,.975,1);
		transform: translate(-50%,-50%) scale3d(1.05,.975,1)
	}

	100% {
		-webkit-transform: translate(-50%,-50%) scale3d(1,1,1);
		transform: translate(-50%,-50%) scale3d(1,1,1)
	}
}

@-webkit-keyframes btnOut {
	0% {
		-webkit-transform: translate(-50%,-50%) scale3d(1,1,1);
		transform: translate(-50%,-50%) scale3d(1,1,1)
	}

	25% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.1,.9,1);
		transform: translate(-50%,-50%) scale3d(1.1,.9,1)
	}

	50% {
		-webkit-transform: translate(-50%,-50%) scale3d(.95,1.1,1);
		transform: translate(-50%,-50%) scale3d(.95,1.1,1)
	}

	66% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.075,.95,1);
		transform: translate(-50%,-50%) scale3d(1.075,.95,1)
	}

	76% {
		-webkit-transform: translate(-50%,-50%) scale3d(.975,1.05,1);
		transform: translate(-50%,-50%) scale3d(.975,1.05,1)
	}

	87% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.05,.975,1);
		transform: translate(-50%,-50%) scale3d(1.05,.975,1)
	}

	100% {
		-webkit-transform: translate(-50%,-50%) scale3d(1,1,1);
		transform: translate(-50%,-50%) scale3d(1,1,1)
	}
}

@keyframes btnOut {
	0% {
		-webkit-transform: translate(-50%,-50%) scale3d(1,1,1);
		transform: translate(-50%,-50%) scale3d(1,1,1)
	}

	25% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.1,.9,1);
		transform: translate(-50%,-50%) scale3d(1.1,.9,1)
	}

	50% {
		-webkit-transform: translate(-50%,-50%) scale3d(.95,1.1,1);
		transform: translate(-50%,-50%) scale3d(.95,1.1,1)
	}

	66% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.075,.95,1);
		transform: translate(-50%,-50%) scale3d(1.075,.95,1)
	}

	76% {
		-webkit-transform: translate(-50%,-50%) scale3d(.975,1.05,1);
		transform: translate(-50%,-50%) scale3d(.975,1.05,1)
	}

	87% {
		-webkit-transform: translate(-50%,-50%) scale3d(1.05,.975,1);
		transform: translate(-50%,-50%) scale3d(1.05,.975,1)
	}

	100% {
		-webkit-transform: translate(-50%,-50%) scale3d(1,1,1);
		transform: translate(-50%,-50%) scale3d(1,1,1)
	}
}


/*
@media only screen and (max-width:767px){
	.btn-copy{ font-size:14px;}
	.btn{ width:auto;}
	.erji_nav li{ width:50%; float:left;}
}
*/