/*	top_main
============================== */
.idx .mainp{width:980px; height:700px; margin:0 auto; position:relative;}

.idx h1 {
  width: 980px;
  height: 693px;
  position: relative;
}
.idx h1 .main1 {
  background: url(../img/top_main/main1_n.jpg) no-repeat 0 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: fadein 2.5s ease 0s 1 normal;
  -webkit-animation: fadein 2.5s ease 0s 1 normal;
}
.idx h1 .main2 {
  background: url(../img/top_main/main2_n.png) no-repeat 0 0;
  position: absolute;
  left: 76px;
  bottom: 117px;
  width: 815px;
  height: 191px;
  opacity: 0;
  -webkit-animation: fadein2 1s ease 1s 1 forwards;
  animation: fadein2 1s ease 1s 1 forwards;
}
.idx h1 .main3 {
  background: url(../img/top_main/main3_n.png) no-repeat 0 0;
  position: absolute;
  left: 9px;
  top: 29px;
  width: 50px;
  height: 356px;
  opacity: 0;
  -webkit-animation: fadein3 0.5s ease 1.5s 1 forwards;
  animation: fadein3 0.5s ease 1.5s 1 forwards;
}
.idx h1 .main4 {
  background: url(../img/top_main/main4_n.png) no-repeat 0 0;
  position: absolute;
  left: 56px;
  bottom: 51px;
  width: 174px;
  height: 67px;
  opacity: 0;
  -webkit-animation: fadein 1s ease 2s 1 forwards;
  animation: fadein 1s ease 2s 1 forwards;
}
.idx h1 .main5 {
  /*（update.css）*/
  position: absolute;
  left: 230px;
  bottom: 51px;
  width: 516px;
  height: 67px;
  opacity: 0;
  -webkit-animation: fadein 1s ease 2.5s 1 forwards;
  animation: fadein 1s ease 2.5s 1 forwards;
}

@keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes fadein2 {
    0% {opacity:0; transform: translate3d(0,20px,0);}
    100% {opacity:1; transform: translate3d(0,0,0);}
}
@-webkit-keyframes fadein2 {
    0% {opacity:0; transform: translate3d(0,20px,0);}
    100% {opacity:1; transform: translate3d(0,0,0);}
}

@keyframes fadein3 {
    0% {opacity:0; transform: translate3d(-20px,0,0);}
    100% {opacity:1; transform: translate3d(0,0,0);}
}
@-webkit-keyframes fadein3 {
    0% {opacity:0; transform: translate3d(-20px,0,0);}
    100% {opacity:1; transform: translate3d(0,0,0);}
}
@media all and (min-width: 768px) {
.idx h1 {
	margin: 20px auto 0;
}
.idx h1 .main1 {
	box-shadow: 0px 0px 5px #898989;
}
}
@media all and (max-width: 767px) {
.idx .mainp {

}
.idx h1 {
  width: 100%;
  height: 0;
  padding: 70.7142% 0 0;
	/*margin: 15px auto 15px;*/
  margin: 0px auto 0px;
  border-bottom: 1px solid #fff;
}
.idx h1 .main1 {
  background-size: cover;
}
.idx h1 .main2 {
	width: 78%;
  height: 0;
  padding: 17.9% 0 0;
  background-size: cover;
  top: 55.5%;
  left: 11%;
}
.idx h1 .main3 {
  width: 5.5%;
  height: 0;
  padding: 38.1578% 0 0;
  background-size: cover;
  top: 3%;
  left: 0.7%;
}
.idx h1 .main4 {
  width: 17%;
  height: 0;
  padding: 6.5057% 0 0;
  background-size: cover;
  position: absolute;
  bottom: 7.5%;
  left: 6.5%;
}
.idx h1 .main5 {
  width: 55%;
  height: 0;
  padding: 6.9844% 0 0;
  background-size: cover;
  position: absolute;
  bottom: 8%;
  left: 22.5%;
}

}