html,body,div{
  margin:0; padding:0;
}
html,body{
  width:100%; height:100%;
}
 .smooth {
    display: inline-block;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease 0s;
    z-index: 9;
}
.smooth .active {
    bottom: 0;
    display: block;
    height: 0;
    margin-bottom: 40px;
    position: absolute;
    transition: all 0.2s ease 0s;
    width: 100%;
    z-index: 99;
}
.smooth:hover .active {
    height: 100%;
    margin: 0;
    transition: all 0.2s ease 0s;
}


#body {
  height: 1000px;
}
#header{
  width:100%; height:auto;
  position:fixed;
  z-index:200;
  top:0; left:0; right:0;
  margin:auto;
}

#header div.colorbar{
  width:100%; height:10px;
  position:absolute;
  top:80px; left:0;
  background:url(../image/bg01.png) repeat-x 0 0;
}

#header div.block1{
  width:100%; height:80px;
  position:absolute;
  top:0; left:0;
  background:rgb(0,56,149);
}

#header div.block1 div.logo1{
  width:141px; height:57px;
  position:absolute;
  top:12px; left:0; right:0;
  margin:auto;
  /*background:url(../image/ph01.png) no-repeat 0 0;*/
  opacity:0;
}

#header div.block1 div.logo2{
  width:189px; height:80px;
  position:absolute;
  top:14px; left:0; right:0;
  margin:auto;
  /*background:url(../image/ph01.png) no-repeat 0 -943px;*/
}
#header div.block2{
  width:100%; height:105px;
  position:absolute;
  top:80px; left:0;
  background:url(../image/bg05.png) repeat-x 0 0;
}


#btn{
  width:60px; height:60px;
  position:absolute;
  top:101px; right:8px;
  background:url(../image/ph04.png) no-repeat 0 0;
  cursor:pointer;
}

#op{
  width:302px; height:413px;
  position:absolute;
  /*top:80px; bottom:141px; left:0; right:0;*/
  top: 30%;
  left:0; right:0;
  margin:auto;
}

#op div.bg1{
  width:302px; height:413px;
  position:absolute;
  top:0; left:0;
  /*background:url(../image/ph01.png) no-repeat 0 -57px;*/
  opacity:0;
  z-index: -9999;
}

#op div.bg2{
  width:302px; height:413px; /*243 342*/
  position:absolute;
  top:0; left:0;
  /*background:url(../image/ph01.png) no-repeat -302px -57px;*/
  background:url(../image/opening_card.png) no-repeat;
  background-size: 302px 413px;
  opacity:0;
  z-index: -9999;
}

#op div.bg3{
  /*width:302px; height:413px;*/
  width: 270px; height: 379px;
  /*width: 260px; height: 393px;*/
  position:absolute;
  top:15px; left:15px;
  /*background:url(../image/ph01.png) no-repeat 0 -470px;*/
  background:url(../image/card_100.png) no-repeat;
  /*background-size: 302px 413px;*/
  background-size: 270px 379px;
  opacity:0;
  z-index: -9999;
}



#body{
  width:100%; height:100%;
  overflow:hidden;
  /*position:absolute;*/
  position: relative;
  top:0; left:0;
}

#body ul{
  /*width:1200px; height:100%;*/
  width:100%; height:100%;
  position:absolute;
  top:120%; left:0; right:0;
  /*margin:auto;*/
  margin: 0 auto;
/*  overflow-y: scroll;*/
}

#body ul li{
  /*width:290px; height:9672px;*/ /* 8060+1612 */
  top:0;
  /*width:290px; height:1000px;*/
  /*width:290px;*/
  width: 20%;
  position:absolute;
  margin: 0 auto;
  top:0; left:0;
  list-style:none;
  /*background:url(../image/ph02.png) repeat-y 0 0;*/
}
#body ul li img {
  width: 100%;
  cursor: pointer;
}

#body ul.sou li{
  background:url(../image/ph03.png) repeat-y 0 0;
}

#body ul li.line1{ top:60%; left:0; }
#body ul li.line2{ top:40%; left:20%; }
#body ul li.line3{ top:20%; left:40%; }
#body ul li.line4{ top:40%; left:60%; }
#body ul li.line5{ top:60%; left:80%; }
#body ul li.sp{ top:15%; height: 100%; display: none; }


#footer{
  width:100%; height:141px;
  position:fixed;
  bottom:0; left:0; right:0;
  margin:auto;
  background:url(../image/bg04.png) repeat-x 0 0;
}

#footer div.colorbar{
  width:100%; height:10px;
  position:absolute;
  top:0; left:0;
  background:url(../image/bg01.png) repeat-x 0 0;
}

#footer div.block1{
  width:1200px; height:131px;
  position:absolute;
  top:10px; left:0; right:0;
  margin:auto;
  background:url(../image/bg02.png) no-repeat 0 0;
  }
@media  screen and (max-width:980px) {

}
@media  screen and (max-width:767px) {

}
@media  screen and (max-width:360px) {
  #op{
    top: 20%;
  }
  #body {
    height: 100%;
    overflow-y: scroll;
  }
  .sp {
      width:50%;
      float:left;
   }
  .line1,
  .line2,
  .line3,
  .line4,
  .line5 {
    display: none;
  }
  #body ul li.sp {
    display: block;
  }
  #body ul li{ 
    width: 100%;
  }
  #sp-card100,
  #sp-card209 {
    width: 50% !important;
  }
}
@media  screen and (max-width:340px) {
  #op{
    top: 20%;
  }
  #body {
    height: 100%;
    overflow-y: scroll;
  }
  .sp {
      width:50%;
      float:left;
   }
  .line1,
  .line2,
  .line3,
  .line4,
  .line5 {
    display: none;
  }
  #body ul li.sp {
    display: block;
  }
  #body ul li{ 
    width: 100%;
  }
  #sp-card100,
  #sp-card209 {
    width: 50% !important;
  }
}
@media  screen and (max-width:640px) {
  #op{
    top: 20%;
  }
  #body {
    height: 100%;
    overflow-y: scroll;
  }
	.sp {
			width:50%;
			float:left;
	 }
  .line1,
  .line2,
  .line3,
  .line4,
  .line5 {
    display: none;
  }
  #body ul li.sp {
    display: block;
  }
  #body ul li{ 
    width: 100%;
  }
  #sp-card100,
  #sp-card209 {
    width: 50% !important;
  }
}
@media (max-width:991px) and (min-width:768px) {

}​