body{ width:100%; background:url(../image/bg.jpg) no-repeat center top;}


.section1{ width:800px; margin:0 auto; height:960px; position:relative;}
.logo{ display:block; width:168px; height:96px; background:url(../image/logo.png) no-repeat;background-size:cover; z-index:1; position:absolute; top:22px; left:34px;}
.head{width: 768px;height: 314px;background: url(../image/head.png) no-repeat center;background-size: 100%;z-index:1;position:absolute;top: 466px;/*left:416px;*/animation:s-up .8s .3s forwards;-webkit-animation:s-up .8s .3s forwards;opacity: 0;}

@keyframes s-up{
0%{opacity: 0; transform: translate(0, 200px);}
100%{opacity:1; transform: translate(0, 0);}
}
.hny{ width:202px; height:156px;  z-index:1; position:absolute; top:140px; left:300px;animation:r2 3.2s ease-in infinite;}
.hny2{ width:202px; height:156px;background:url(../image/hny.png) no-repeat;background-size:cover;transform:rotate(45deg);    margin: -70px 0 0 -3px;}
.hny{
	}
@-webkit-keyframes r2{
	0%{-webkit-transform: rotate(0deg);}
	50%{-webkit-transform: rotate(15deg);}
	100%{ -webkit-transform: rotate(0deg);}
}
@keyframes r2{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(15deg);}
	100%{transform: rotate(0deg);}
}

.ren{ width:595px; height:808px; background:url(../image/ren.png) no-repeat;background-size:cover; z-index:1; position:absolute; bottom:80px; right:0px; opacity:0;}

.logOut{
	color: #fff;
	z-index: 333;
	position: absolute;
	bottom: 274px;
	right: -47px;
	cursor: pointer;
	font-size: 22px;
	}
.logOut:hover{ color:#b9c2bb;}


.ren{ 
	animation: top_nav_animation 0.5s ease-in-out .5s normal forwards; 
	-webkit-animation: top_nav_animation 0.5s ease-in-out .5s normal forwards;
}
@keyframes top_nav_animation{
  0%{
    opacity:0;
    transform:translateY(-25px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}
@-webkit-keyframes top_nav_animation{
  0%{
    opacity:0;
    transform:translateY(-25px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}
.login{width: 920px;height: 288px;z-index: 99;display: none;position: absolute;top: 650px;left: -60px;}

.loginTitle{
    width: 680px;
    margin: 46px auto 0;
    font-size: 31px;
    color: #000000;
    text-align: center;
 }
.loginTitle span{
	font-size: 12px;
    color: #ff3636;
}

.loginBox{width: 450px;margin: 30px auto 0;position:relative;}
.service_bg,.case,.door{ 

border-radius: 8px;
top: 650px;
/*
border: 3px solid #5477a8;
background: -webkit-gradient(linear,left top,left bottom,from(rgba(33, 48, 84, 0.82)),to(rgba(82, 35, 35, 0.77)));
background: linear-gradient(rgba(33, 48, 84, 0.82),rgba(82, 35, 35, 0.77));*/

background:url(../image/login.png) no-repeat;
}

.loginBox p{height:56px;margin-bottom: 12px;width: 310px; background:url(../image/yzm.png) no-repeat #15283c; border-radius: 8px;border: 1px solid #295078;}
.loginBox p:nth-child(2){background:url(../image/yzm2.png) no-repeat #15283c;}
.loginBox p input{ padding-left:50px;  height:100%; width:100%; border: none; letter-spacing: 1px; font-size: 14px; color: #d2d2d2;outline: 0; background: 0 0; }
.serveBox{width:204px;margin-right:15px;float:left;z-index: 66;position: relative;margin-top: 12px;}
.serveBox span{
    width: 100%;
    line-height: 28px;
    cursor: pointer;
    display: block;
    color: #d2d2d2;
    position: relative;
    border-radius: 6px;
    padding: 8px 11px;
    background: #15283cd9;
    border: 1px solid #234c77;
    font-size: 14px;
}
.serveBox span:before{content:"";position:absolute;top: 19px;right: 8px;border-top: 8px solid white;border-left: 8px solid transparent;border-right: 8px solid transparent;}

.yzm{ position: absolute; right: 72px; height: 54px;}
.serveBox ul{ display:none;}
.serveBox ul li{ width:196px; color:#311210; cursor:pointer; text-align: center; margin-left: 3px; font-size:18px; border-bottom: 1px solid #15283c; line-height:36px; background:#d0d4d8b0;}
.submit{width:191px;height:144px;cursor:pointer;position:absolute;top:0;right: 0;/* background:url(../image/sub.png) no-repeat; */background-size:cover;}
.sub2{margin-top: 83px;width: 141px;height: 44px;cursor:pointer;position:absolute;top:0;z-index: 33;text-align: center;background: #fedb6d;right: 168px;/* background:url(../image/qw.png) no-repeat; */background-size:cover;line-height: 44px;border-radius: 6px;border: 1px solid #ffe595;letter-spacing: 2px;font-size: 20px;}
.sub{
	width: 170px;
    height: 122px;
	margin-top: 83px;
    cursor: pointer;
    position: absolute;
    top: -82px;
    z-index: 33;
    text-align: center;
    background: #fedb6d;
    right: -62px;
    background-size: cover;
    line-height: 122px;
    border-radius: 6px;
    border: 1px solid #ffe595;
    letter-spacing: 2px;
    font-size: 20px;}
.fb_login,.yh_login{ display:inline-block; width:115px; height:115px; margin-top: 116px;}
.wid{ width:350px;margin: -76px auto 0;}
.fb_login{ transition:all 0.5s; background:url(../image/fb.png) no-repeat; }
.yh_login{ transition:all 0.5s; background:url(../image/gdreamer.png) no-repeat; float:right;}
.fb_login:hover,.yh_login:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1); transform:scale(1.1);}

.section2{ width:800px; margin:0 auto; position:relative;/* background:url(../image/sec02.jpg) no-repeat center top;*/ height:1270px;}
.st2{ width:100%; height:100%; position:absolute;}
.bt{width:157px;height: 49px;background:url(../image/bt.png);display:block;margin: 440px auto 0;cursor:pointer;}
.bt:hover{filter:brightness(1.2)}
.bt2{margin: 88px auto 0;}
.bt3{margin: 85px auto 0;}
.bt4{margin: 72px auto 0;}

@media screen and (max-width:800px){
body{background:url(../image/m_bg.jpg) no-repeat center top;}
.login{ width:780px; left: 50%; margin-left: -390px; margin-top: -110px;}
.record{ width:50rem; margin-left: -25rem;}
.logOut{ right: 24px;bottom: 382px;}
.close{
    width: 7rem;
    height: 4rem;
    right: 21.15rem;
    top: 19.4rem;}
.section2{height: 776px;}
.bt{margin: 149px auto 0;}
.bt2{margin: 45px auto 0;}
.bt3{margin: 52px auto 0;}
.bt4{margin: 46px auto 0;}
.service_bg, .case, .door {
    background: url(../image/login.png) no-repeat;
    background-size: 100%;
}
.head{width:100%;background-size: 93%;top: 436px;}
.fb_login, .yh_login {
    margin-top: 95px;
}
.wid {
    width: 300px;
}
.loginTitle {
    margin: 36px auto 0;
    font-size: 26px;
}
.sub {
    width: 140px;right: -26px;
}
}