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



.m-nav{
 display: none;
}
.nav{
  /*width: 100%;*/
  /*position: fixed;*/
  /*left: 0;*/
  /*top: 0;*/
  height: 75px;
  background-image: url("https://pic-1259109643.cos.ap-taipei.myqcloud.com/respic/old/images/PMDESIGN/yg/20191105/img/bg-menu.png");
  /*z-index: 99;*/
}
.nav .nav-list{
  width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.nav .nav-list a{
  display: inline-block;
  position: relative;
  width: 118px;
  height: 71px;
  padding: 0 27px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.nav .nav-list a:hover,
.nav .nav-list a.active{
  background-color: rgba(91,27,14,.6);
}
.nav .nav-list a:active{
  transform: none;
}
.nav .nav-list a i{
  position: absolute;
  width: 118px;
  height: 100%;
  background: url("https://pic-1259109643.cos.ap-taipei.myqcloud.com/respic/old/images/PMDESIGN/yg/20191105/img/memu-list.png");
}
.nav .nav-list a:nth-child(1) i{
  background-position: 0 0;
}
.nav .nav-list a:nth-child(2) i{
  background-position: -118px 0;
}
.nav .nav-list a:nth-child(3) i{
  background-position: -236px 0;
}
.nav .nav-list a:nth-child(4) i{
  background-position: -354px 0;
}
.nav .nav-list a:nth-child(5) i{
  background-position: -472px 0;
}
.nav .nav-list a:nth-child(6) i{
  /*width: 136px;*/
  background-position: -590px 0;
}
.nav .nav-list a:nth-child(6) i{
  /*width: 136px;*/
  background-position: -590px 0;
}
.nav .nav-list a:nth-child(7) i{
  width: 134px;
  background-position: -708px 0;
}


.nav .nav-list a:hover i{
  animation: bannerMove 0.2s linear;
  -webkit-animation : bannerMove 0.2s linear;
}

@keyframes bannerMove {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(-2deg);}
  50% {transform: rotate(2deg);}
  75% {transform: rotate(-2deg);}
  100% {transform: rotate(0deg);}
}

@-webkit-keyframes bannerMove {
  0% {-webkit-transform: rotate(0deg);}
  25% {-webkit-transform: rotate(-2deg);}
  50% {-webkit-transform: rotate(2deg);}
  75% {-webkit-transform: rotate(-2deg);}
  100% {-webkit-transform: rotate(0deg);}
}



.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: 751px;height: 229px;background:url(../image/head.png) no-repeat;background-size: 100%;z-index:1;position:absolute;top: 415px;left: 112px;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;
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: 145px;height: 42px;background:url(../image/bt.png);margin: 381px 773px 0;cursor:pointer;}
.bt:hover{filter:brightness(1.2)}
.bt2{margin: 23px 773px 0;}
.bt3{margin: 16px 773px 0;}
.bt4{margin: 21px 854px 0;}


@media screen and (max-width: 1024px) {
	.nav{
    display: none;
  }
  .m-nav{
    display: block;
    position: relative;
    z-index: 999;
  }
  .m-nav .btn-nav{
    position: fixed;
    right: 5px;
    /*right: 1%;*/
    top: 5px;
    padding: 8px 6px;
    background-color: #5e070b;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    z-index: 9;
    margin-top: 1%;
  }
  .m-nav .btn-nav.active span{
    transition: all .5s;
  }
  .m-nav .btn-nav.active span:nth-child(1){
    transform: translateY(.09rem) rotate(45deg);
  }
  .m-nav .btn-nav.active span:nth-child(2){
    opacity: 0;
  }
  .m-nav .btn-nav.active span:nth-child(3){
    transform: translateY(-.09rem) rotate(-45deg);
  }

  .m-nav .btn-nav span{
    display: block;
    width: 24px;
    height: 3px;
    background-color: #fff;
    border-radius: 15px;
    margin-bottom: 6px;
    transition: all .5s;
  }
  .m-nav .btn-nav span:last-child{
    margin-bottom: 0;
  }
  .m-nav .content{
    position: fixed;
    height: 100%;
    width: 200px;
    top: 0;
    right: -206px;
    background-color: rgba(0,0,0,.7);
    z-index: 999;
  }
  .m-nav .content ul{
    width: 100%;
    padding: .5rem 0;
  }
  .m-nav .content ul li{
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }
  .m-nav .content ul li a{
    display: inline-block;
    padding: 2px 30px;
    font-size: 18px;
    position: relative;
    color: #f9f1e3;
    font-weight: 700;
  }
  .m-nav .content ul li.active a{
    color: #faaf1f;
  }
  .m-nav .content ul li a::before,
  .m-nav .content ul li a::after{
    content: '';
    position: absolute;
    background-color: #ede6d8;
  }
  .m-nav .content ul li.active a::before,
  .m-nav .content ul li.active a::after{
    background-color: #faaf1f;
  }
  .m-nav .content ul li a::before{
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
  }
  .m-nav .content ul li a::after{
    left: 15px;
    top: 15px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
  }
}

@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: 642px;}
.bt{margin: 111px 620px 0;}
.bt2{margin: 15px 620px 0;}
.bt3{margin: 19px 620px 0;}
.bt4{margin: 61px 320px 0;}
.service_bg, .case, .door {
    background: url(../image/login.png) no-repeat;
    background-size: 100%;
}
.head{width: 80%;background-size: 100%;top: 338px;}
.fb_login, .yh_login {
    margin-top: 95px;
}
.wid {
    width: 300px;
}
.loginTitle {
    margin: 36px auto 0;
    font-size: 26px;
}
.sub {
    width: 140px;right: -26px;
}
}