
.myMask{
    position: fixed;opacity: 0;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;background: rgba(0,0,0,0.6);-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;
}
.myPop{    
    position: fixed;top: 50%;left: 50%;height: auto;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;
    transform: translate3d(-52%,-50%,0);-webkit-transform: translate3d(-52%,-50%,0);-moz-transform: translate3d(-52%,-50%,0);-ms-transform: translate3d(-52%,-50%,0);
}
.ie .myPop{
	top: 20%;left: 12%;
}
.myPop .popContent{
	width: 100%;color: #fff;position: relative;border-radius: 3px;margin: 0 auto;background-color: #fff;
}
.effect_show ~ .myMask{
	opacity: 1;
    visibility: visible;
}
.effect_0 .popContent{
    opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.effect_show.effect_0 .popContent{
    opacity: 1;
}
.effect_2{
	-webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}
.effect_1 .popContent{

	-webkit-transform: translateX(20%);
    -moz-transform: translateX(20%);
    -ms-transform: translateX(20%);
    transform: translateX(20%);
    opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.effect_show.effect_1 .popContent{
	-webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}

.effect_2 .popContent{
	-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    transform-origin: 0 100%;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.effect_show.effect_2 .popContent{
	    -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
    -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
    -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
    transform: translateZ(0px) translateX(0%) rotateY(0deg);
    opacity: 1;
}

.effect_show{
	visibility: visible;
}
.myPop .popContent .popTop{
	height: 40px;line-height: 40px;
}
.myPop .popContent .popMain{
    padding: 29px 40px 30px;
    margin: 0;
    font-weight: 300;
    font-size: 1.15em;
}
.myPop .Tclose{
	position: absolute;top: -45px;right: 0px;cursor: pointer;
}
.myPop .Tclose i{
	color: #fff;font-size: 30px;
}
.box-hover-modal{
	overflow: hidden;background-color: transparent;
}
.boxMask{
	position: absolute;background-color: #994639;
	height: 100%;width: 100%;display: none;z-index: -1;
	
}


.taost{
	position: fixed;
	background-color: #262525;
	color: #fff;min-width: 100px;height: 40px;line-height: 40px;padding: 0 10px;
	font-size: 16px;bottom: 50%;left: calc(50% - 50px);text-align: center;border-radius: 5px;
}



.ball{
	animation: ball 1.5s;
}
@keyframes ball{
	0%{
		transform: translateY(-80px);
		opacity: 0;
	}
	38%{
		transform: translateY(0px);
	}
	55%{
		transform: translateY(-40px);
	}
	70%{
		transform: translateY(0px);
	}
	85%{
		transform: translateY(-15px);
	}
	100%{
		transform: translateY(0px);
		opacity: 1;
	}
}

