.female1{
	 -webkit-animation: showFemale 10s linear infinite;
	 animation: showFemale 10s linear infinite;   
}
.male1{
	display: none;
	-webkit-animation: showMale 10s linear infinite;
	animation: showMale 10s linear infinite;
}
.qp1{
	-webkit-animation: fdani 5s linear 1.8s infinite;
	animation: fdani 5s linear 1.8s infinite;
}
.qp2{
	-webkit-animation: fdani 5s linear 1.8s infinite;
	animation: fdani 5s linear 1s infinite;
}
.qp3{
	-webkit-animation: fdani 5s linear 1.8s infinite;
	animation: fdani 5s linear 2.6s infinite;
}
.qp4{
	-webkit-animation: fdani 5s linear 1.8s infinite;
	animation: fdani 5s linear 1.8s infinite;
}
.qp5{
	-webkit-animation: fdani 5s linear 1.8s infinite;
	animation: fdani 5s linear 1s infinite;
}
.qp6{
	-webkit-animation: fdani 5s linear 1.8s infinite;
	animation: fdani 5s linear 2.6s infinite;
}
@keyframes fdani {
    10% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    20% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes showFemale {
    10% {
        opacity: 1
    }

    45% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes showMale {
    50% {
        opacity: 0
    }

    60% {
        opacity: 1
    }

    95% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.sss_sty{
	position: absolute;
	width: 120px;
	height: 40px;
	z-index: 999;
}
.sss_sty img{
	width: 100%;
	height: 100%;
}
.img_sty{
	position: relative;
	margin-top: 20px;
	margin-bottom: 10px;
	width: 90%;
	height: 30vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: url(../images/index_bannerBg.png) no-repeat left top;
	background-size: 100% 100%;
}
.banner_title{
    width: 100%;
    margin-top: 20px;
	background: rgb(198, 226, 255) url(../images/index_bg.png) no-repeat left top;
    /* background: #f0a8a8 url(../images/banner.png) no-repeat left top; */
    background-repeat: no-repeat;
    background-size: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.book1{
    position:absolute;
    top:50%;
    left:50%;
    width:50%;
    transform:translate(-50%, -50%);
    animation:animationBook1 2s linear forwards;
}
@keyframes animationBook1{
    0%{
        transform:translate(-50%, -150%) scale(0.0);
        opacity:1;
    }
    50%{
        transform:translate(-50%, -100%) scale(0.5);
        opacity:1;
    }
    80%{
        transform:translate(-50%, -70%) scale(0.8);
        opacity:0.8;
    }
    100%{
        transform:translate(-50%, -50%) scale(1);
        opacity:0;
    }
}
.book2{
    position:absolute;
    opacity:0;
    top:75%;
    left:50%;
    width:80%;
    transform:translate(-50%, -50%);
    animation:animationBook2 1s linear 1.8s forwards;
}
@keyframes animationBook2{
    0%{
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100%{
        opacity:1;
    }
}
.lover{
    position:absolute;
    left:50%;
    width:85%;
    padding-top:0;
    transform:translateX(-50%);
    background:url("../images/animation_lover.png") no-repeat center bottom;
    background-size:100% auto;
    animation:animationLover 3s linear 2s forwards;
}
@keyframes animationLover{
    0%{
        padding-top:0;
    }
    100%{
        padding-top:100%;
    }
}
.line{
    position:absolute;
    top:30%;
    left:0;
    width:100%;
    opacity:0;
    animation:animationLine 1s linear 5s infinite alternate;
}
@keyframes animationLine{
    0%{
        opacity:0.4;
    }
    100%{
        opacity:1;
    }
}

/* 滚动条 */
.index-page {
	background: #d3aa72;
	overflow: hidden;
}

.top_gd {
	background-color:rgb(198, 226, 255);
	width: 100%;
	/*max-width: 450px;*/
	height: 20px;
	line-height: 20px;
	font-size: 13px;
	position: fixed;
	z-index: 999;
	top: 0;
}

.top_notice {
	overflow: hidden;
	color: hsla(0, 0%, 100%, .8);
	white-space: nowrap;
	position: absolute;
	animation: noticeBar 20s linear infinite;
	letter-spacing: 1.5px;
}

@keyframes noticeBar {
	0% {
		transform: translate(50vw)
	}

	to {
		transform: translate(-100%)
	}
}

.form-info-li{
    width: 70%;
    margin-top: 10px;
    border-bottom: 2px solid #C697A5;
    display: flex;
    height: 50px;
    line-height: 80px;
}
.formInfo{
	width: 90%;
	height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
    /* overflow: visible; */
    margin: 1em 2%;
    /* border: 3px solid #D33434; */
    border-radius: 0.5em;
    background: url(../image/form_bg.png) no-repeat center center;
    background-size: 100% 100%;
	padding-top: 12px;
}
.form-info-left{
    width: 35%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.form-info-right{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.index-form__sex span,.index-bottom-form__sex span{text-indent: 35px;}
span.radio_label {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAAM1BMVEVHcEycKiOcKyOaJiGbKiKaJxKcKySbJiCcKiOcKiOcKiOcKiObKiKcKiOcKiObKyObKiPVWfl3AAAAEXRSTlMAtNYlNwfcFexjz4FZdvqhp4rPLz8AAAC4SURBVDjLjZTXEoQwCEXJhBpN+f+vXbfMqqNB7hvJmQChAOwS60Vb09JN4E6YdBhud4I2NOEFyImNdpOMUz4Tq1Y6n1DV9WgvnK+eMy8HotyGJ+XPrHyfAAj/fGVFmAj1G0CqMFVNH5JpjhC/PSQDR7Y9I0oeQipgA1wNg24+Yh0K+ggWUPERUWjwoPaIUIs4CoQbSDrwdYECBMoYaYZAS0UaM9DekSGJjFpkYCNjf1geNFsezgp6AREhBn9zgdkFAAAAAElFTkSuQmCC) no-repeat left center;
        background-size: 90%;
}
span.radio_label.radio_label_select {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAANlBMVEVHcEybJiCcKiObKiKcKyOcKiOcKySbJx+cKiOZJBacKiObKyOcKyScKiOcKiSbKiKcKiOcKySl86mCAAAAEXRSTlMAJNA33mP3FOsHgqSztWpZdklX/TgAAADySURBVDjLjVTZtoMwCMwCBLKo+f+fvUq8rdb0lDk+BDORGQM490bCErh3DgWTmyFWLhj3vRSxcIsPgm+A8g4Fofk7Y+VN7m9k4/UaZ/DPzB7yhRGm8lJ4cVY4GWmpQAR1+Y/hzOV5qJdM/QTloSzyENC2wQz9gjD2tqZMkCGu3zDOCxwZKuo69A8EPYl1l8S6zP0BtSOcHBbVTk8Kqa+Cx7Nj6RMsmqm4oI7rjFLVTXCsn4MZBVQCO1L/NKOcWz8pQpZEBrkG04ZfZ7gA135eo6UYDCVlKUxDeVuaxNJqloa1tP2hvo3hId+Gx2sEEX2OoD8ZEx6J7HHaDQAAAABJRU5ErkJggg==) no-repeat left center;
        background-size: 90%;
}
.index-form__sex {
	font-size: 14px;
	width: 100%;
	height: .3rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.index-form__sex span {
	cursor: pointer;
	display: inline-block;
	margin-right: .27rem;
	width: .27rem;
	text-align: center;
	height: .27rem;
	line-height: .27rem;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	vertical-align: middle
}

.index-form__sex .cur {
	background-color: #c30;
	color: #fff
}

.index-bottom-form__birthday {
	font-size: 14px;
	width: 100%;
	padding-right: .3rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: .4rem;
	line-height: .4rem;
	background-color: #fcf9f6;
	-webkit-border-top-right-radius: .05rem;
	-moz-border-radius-topright: .05rem;
	border-top-right-radius: .05rem;
	-webkit-border-bottom-right-radius: .05rem;
	-moz-border-radius-bottomright: .05rem;
	border-bottom-right-radius: .05rem;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAY1BMVEUAAADPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPPTkPC8EIRAAAAIHRSTlMAaDwtVYgzRKp3HvToEgzBn5CxOIJvJBrNpZleXSgGzqzLNz0AAAERSURBVEjH7dTJbsIwFIVhZyKDHduZB4ae93/K5tqWShLSWkVILPgXPsT6BKzC/l/Lp93dLPIDXQI4be4iAPIxLwCEm7sQQLH92k5nWXY1vMzuKw2/Lp90VzqdClBhYY/7itAelEiN7jm8OHhPXMPxYTmaB3xwHJq4gO3MRgjZrHgjBUZ2hk0Qh2u8ybRk9YrXrEzl7Qsuy12qkVGGdVkkG4UV98/xwKcfznx6iven4/o9b1Mq6FJTZacLzLR7HjAqCs3QExVG9unD34XPCaWnxFTbmbSZ+c3/+4cf8dzUJnYrO0mVUPlTL47BQw+OcyDx4BXAaRWA+hL/3qVelCIew7fY/YxfFbPFiv9puYrZy/sGthpOVO1VtkEAAAAASUVORK5CYII=) no-repeat 98% center;
	-webkit-background-size: .2rem auto;
	-moz-background-size: .2rem auto;
	background-size: .2rem auto
}


.index-form__agreement {
	text-align: center;
	font-size: .14rem;
	padding: .1rem 0 .05rem;
	color: #666
}

.index-form__agreement input {
	-webkit-appearance: checkbox;
	vertical-align: middle;
	position: relative;
	margin-top: -.02rem;
	margin-right: .05rem;
	width: .14rem;
	height: .14rem
}

.index-form__agreement a {
	color: #af613f;
	text-decoration: underline
}


.index-form__btn {
	width: 100%;
	margin-top: .1rem;
}

.index-form__btn a {
	margin: auto;
	display: block;
	width: 80%;
	height: 70px;
	text-indent: -9999px;
	background: url(../image/index_btn.png) no-repeat top center;
	-webkit-background-size: auto .5rem;
	-moz-background-size: auto .5rem;
	background-size: 100% 100%;
	-webkit-animation: btnAnimate 1.5s linear infinite;
	-moz-animation: btnAnimate 1.5s linear infinite;
	-o-animation: btnAnimate 1.5s linear infinite;
	animation: btnAnimate 1.5s linear infinite
}
@-webkit-keyframes btnAnimate {
	0% {
		-webkit-transform: scale(.85);
		transform: scale(.85)
	}

	50% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	100% {
		-webkit-transform: scale(.85);
		transform: scale(.85)
	}
}

@-moz-keyframes btnAnimate {
	0% {
		-moz-transform: scale(.85);
		transform: scale(.85)
	}

	50% {
		-moz-transform: scale(1);
		transform: scale(1)
	}

	100% {
		-moz-transform: scale(.85);
		transform: scale(.85)
	}
}

@-o-keyframes btnAnimate {
	0% {
		-o-transform: scale(.85);
		transform: scale(.85)
	}

	50% {
		-o-transform: scale(1);
		transform: scale(1)
	}

	100% {
		-o-transform: scale(.85);
		transform: scale(.85)
	}
}

@keyframes btnAnimate {
	0% {
		-webkit-transform: scale(.85);
		-moz-transform: scale(.85);
		-o-transform: scale(.85);
		transform: scale(.85)
	}

	50% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1)
	}

	100% {
		-webkit-transform: scale(.85);
		-moz-transform: scale(.85);
		-o-transform: scale(.85);
		transform: scale(.85)
	}
}