
.img-replace {
	display: inline-block;
	overflow: hidden;
	text-indent: 100%;
	color: transparent;
	white-space: nowrap
}

.cd-popup-trigger {
	display: block;
	width: 100px;
	height: 50px;
	line-height: 50px;
	margin: 3em auto;
	text-align: center;
	color: #fff;
	font-size: 14px;
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 50em;
	background: #35a785;
	box-shadow: 0 3px 0 rgba(0,0,0,.07)
}

@media only screen and (min-width:1170px) {
	.cd-popup-trigger {
		margin: 6em auto
	}
}

.cd-popup {
margin: 0;
	padding: 0;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(94,110,141,.9);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity .3s 0s,visibility 0s .3s;
	-moz-transition: opacity .3s 0s,visibility 0s .3s;
	transition: opacity .3s 0s,visibility 0s .3s;
	
}
.cd-popup2 {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(94,110,141,.9);
	opacity: 0;
	visibility: hidden;
	z-index:9999999;
	-webkit-transition: opacity .3s 0s,visibility 0s .3s;
	-moz-transition: opacity .3s 0s,visibility 0s .3s;
	transition: opacity .3s 0s,visibility 0s .3s;
	
}
.cd-popup.is-visible {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity .3s 0s,visibility 0s 0s;
	-moz-transition: opacity .3s 0s,visibility 0s 0s;
	transition: opacity .3s 0s,visibility 0s 0s
}
.cd-popup2.is-visible {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity .3s 0s,visibility 0s 0s;
	-moz-transition: opacity .3s 0s,visibility 0s 0s;
	transition: opacity .3s 0s,visibility 0s 0s
}
.cd-popup-container {
	position: relative;
	width: 78%;
	height: 68%;
	max-width: 450px;
	margin: 5em auto;
	background: #fff;
	border-radius: .25em .25em .4em .4em;
	text-align: center;
	box-shadow: 0 0 20px rgba(0,0,0,.2);
	-webkit-transform: translateY(-40px);
	-moz-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
	-o-transform: translateY(-40px);
	transform: translateY(-40px);
	-webkit-backface-visibility: hidden;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	transition-property: transform;
	-webkit-transition-duration: .3s;
	-moz-transition-duration: .3s;
	transition-duration: .3s;
	background: url(/img/pw.png);
	background-size:100% 100%;

}
.cd-popup-container2 {
	position: relative;
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: .25em .25em .4em .4em;
	text-align: center;
	box-shadow: 0 0 20px rgba(0,0,0,.2);
	-webkit-transform: translateY(-40px);
	-moz-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
	-o-transform: translateY(-40px);
	transform: translateY(-40px);
	-webkit-backface-visibility: hidden;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	transition-property: transform;
	-webkit-transition-duration: .3s;
	-moz-transition-duration: .3s;
	transition-duration: .3s;
	background: url(/img/pwzx.png);
	background-size:100% 100%;
    background-repeat: no-repeat;
}
/*
.cd-popup-container p {
	padding: 6em 1em;
	color: #ffe0a5;
	font-size:12px;
}*/


.cd-popup-container .cd-popup-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px
}
.cd-popup-container2 .cd-popup-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px
}
.cd-popup-container .cd-popup-close::before,.cd-popup-container .cd-popup-close::after {
	content: '';
	position: absolute;
	top: 12px;
	width: 14px;
	height: 3px;
	background-color: #ffe0a5
}
.cd-popup-container2 .cd-popup-close::before,.cd-popup-container2 .cd-popup-close::after {
	content: '';
	position: absolute;
	top: 12px;
	width: 14px;
	height: 3px;
	background-color: #ffe0a5
}
.cd-popup-container .cd-popup-close::before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 8px
}
.cd-popup-container2 .cd-popup-close::before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 8px
}
.cd-popup-container .cd-popup-close::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	right: 8px
}
.cd-popup-container2 .cd-popup-close::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	right: 8px
}
.is-visible .cd-popup-container {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0)
}
.is-visible .cd-popup-container2 {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0)
}
@media only screen and (min-width:1170px) {
	.cd-popup-container {
		margin: 8em auto
	}
	.cd-popup-container2 {
		margin: 8em auto
	}
}


 /*通过@keyframes规则,能够创建动画 , que 定义动画的名称 可自己定义*/
    @keyframes que {
        /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
          0% {
        transform: rotateY(0deg);
    }
    10% {
        transform: rotateY(36deg);
    }
    20% {
        transform: rotateY(72deg);
    }
    30% {
        transform: rotateY(108deg);
    }
    40% {
        transform: rotateY(144deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    60% {
        transform: rotateY(216deg);
    }
    70% {
        transform: rotateY(252deg);
    }
    80% {
        transform: rotateY(288deg);
    }
    90% {
        transform: rotateY(324deg);
    }
    100% {
        transform: rotateY(360deg);
    }
    }