.guide-con {
    display:none;
    z-index:10;
    width: 800px;
    height: 430px;
    position: fixed;
    right: 50%;
    margin-right:-400px;
    bottom: 50%;
    margin-bottom:-215px;
    background: url(../imagesrp/girl-bg.png) no-repeat center;
    background-size: 90%;
    -ms-behavior: url(../imagesrp/backgroundsize.min.htc);
    behavior: url(../imagesrp/backgroundsize.min.htc);
    animation-duration:1.2s;
    animation-fill-mode:both;
}
@media(max-width:1000px){
.guide-con{
display:none !important;
}
}
@keyframes fadeInLeft{
    0%{
        opacity:0;
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0)
    }
    100%{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
@-webkit-keyframes bounceInLeft{
    0%,100%,60%,75%,90%{
        -webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
        transition-timing-function:cubic-bezier(0.215,.61,.355,1)

    }
    0%{
        opacity:0;
        -webkit-transform:translate3d(-3000px,0,0);
        transform:translate3d(-3000px,0,0)

    }
    60%{
        opacity:1;
        -webkit-transform:translate3d(25px,0,0);
        transform:translate3d(25px,0,0)

    }
    75%{
        -webkit-transform:translate3d(-10px,0,0);
        transform:translate3d(-10px,0,0)

    }
    90%{
        -webkit-transform:translate3d(5px,0,0);
        transform:translate3d(5px,0,0)

    }
    100%{
        -webkit-transform:none;transform:none

    }

}
@keyframes bounceInLeft{
    0%,100%,60%,75%,90%{
        -webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
        transition-timing-function:cubic-bezier(0.215,.61,.355,1)

    }
    0%{
        opacity:0;
        -webkit-transform:translate3d(-3000px,0,0);
        -ms-transform:translate3d(-3000px,0,0);
        transform:translate3d(-3000px,0,0)

    }
    60%{
        opacity:1;
        -webkit-transform:translate3d(25px,0,0);
        -ms-transform:translate3d(25px,0,0);
        transform:translate3d(25px,0,0)

    }
    75%{
        -webkit-transform:translate3d(-10px,0,0);
        -ms-transform:translate3d(-10px,0,0);
        transform:translate3d(-10px,0,0)

    }
    90%{
        -webkit-transform:translate3d(5px,0,0);
        -ms-transform:translate3d(5px,0,0);
        transform:translate3d(5px,0,0)

    }
    100%{
        -webkit-transform:none;
        -ms-transform:none;
        transform:none

    }

}
@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}
.bounceInLeft{
    -webkit-animation-name:bounceInLeft;
    animation-name:bounceInLeft;

}
.fadeInLeft{
    -webkit-animation-name:fadeInLeft;
    animation-name:fadeInLeft;
}
.guide-con .close{
	position:absolute;
	width: 32px;
	height: 32px;
	line-height: 29px;
	text-align: center;
	background-color: #fff;
	font-size:32px;	
	border-radius: 50%;
	right: 65px;
	top: 72px;
	z-index: 1;
	cursor: pointer;
}
.guide-con .box-1,.guide-con .box-2{
	position:absolute;
	width: 370px;
	height:180px;
	top: 160px;
	right: 148px;
}
.guide-con .box-1 ul>li{
	float:left;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	text-align: center;
	width: 155px;
	margin:0 15px 20px 15px;
	background:#f4f3f3;
	border-radius: 4px;
	cursor: pointer;
}
.guide-con .box-1 ul>li:hover{
	background:#11adff;
	color:#fff;
}
.guide-con .box-1 p{
	color: #11adff;
	font-size: 15px;
	margin-left: 15px;
	padding-bottom: 10px;
}
.guide-con .box-2 p{
	font-size: 14px;
	color:#999;
	margin:0 30px;
}
.guide-con .box-2 input{
	width: 100%;
	background-color: #f4f3f3;
	text-indent: 10px;
	border-radius: 4px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	display: block;
	margin-top: 12px;
}
.guide-con .box-2 input.btn{
	background:#11adff;
	color:#fff;
    cursor:pointer;
    font-family:"Microsoft YaHei";
}