@charset "utf-8";
/* CSS Document */

/*---clinic----*/
.viewport {
  width: 310px;
  height:250px;
  overflow: hidden;
  margin: 0px auto;
  -webkit-transform: translateZ(0); }

.viewport p span{
	font-size:15px;
    color:#fff;

}

.flipsnap {
  width: 2790px;
  background:#000;
  /* 310px(item) * 9 */}

.flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }


.item {
	margin-top:-10px;
  width: 310px;
  height:290px;
  background:url(../icon/right.png) no-repeat 99% 84%,url(../icon/left.png) no-repeat 1% 84%;

  float: left;
  position:relative;
}
.itemfirst {
	margin-top:-10px;
  width: 310px;
  height:290px;
  background:url(../icon/right.png) no-repeat 99% 84%;
  float: left;
  position:relative;
  color:#fff;
}
.itemlast {
	margin-top:-10px;
  width: 310px;
  height:290px;
  background:url(../icon/left.png) no-repeat 1% 84%;
  float: left;
  position:relative;
  color:#fff;
}

.pointer {
  text-align: center;
  margin-top:-8px;
  margin-bottom:5px;}

.pointer span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  border: 1px solid #000; }

.pointer span.current {
  background: #FC0; }





/*---equipment----*/

.flipsnap p{
	margin:-4px 0 0 0;
	font-size:0.8em;
    color:#ddd;
	text-align:center;
}

/*----------------------------------*/
.viewport2 {
  width: 310px;
  height:230px;
  overflow: hidden;
  margin: 0px auto;
  -webkit-transform: translateZ(0); }
  
#img2 .flipsnap {
  width: 930px;
  background:#000;
  /* 310px(item) * 3 */}

#img2 .flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }
  

.item2first {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/right.png) no-repeat 99% 74%;
  float: left;
  position:relative;
  color:#fff;
}
.item2 {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/right.png) no-repeat 99% 74%,url(../icon/left.png) no-repeat 1% 74%;

  float: left;
  position:relative;
}
.item2last {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/left.png) no-repeat 1% 74%;
  float: left;
  position:relative;
  color:#fff;
}
/*----------------------------------*/
.viewport3 {
  width: 310px;
  height:291px;
  overflow: hidden;
  margin: 0px auto;
  -webkit-transform: translateZ(0); }  

#img3 .flipsnap {
  width: 620px;
  background:#000;
  /* 310px(item) * x */}

#img3 .flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }
  
.item3first {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/right.png) no-repeat 99% 95%;
  float: left;
  position:relative;
  color:#fff;
}
.item3last {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/left.png) no-repeat 1% 95%;
  float: left;
  position:relative;
  color:#fff;
}
/*----------------------------------*/
.viewport4 {
  width: 310px;
  height:310px;
  overflow: hidden;
  margin: 0px auto;
  -webkit-transform: translateZ(0); }  
  
#img4 .flipsnap {
  width: 930px;
  height:320px;
  background:#000;
  /* 310px(item) * x */}

#img4 .flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }
  
#img4 .flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }
  
.item4first {
	margin-top:-10px;
  width: 310px;
  height:351px;
  background:url(../icon/right.png) no-repeat 99% 89%;
  float: left;
  position:relative;
  color:#fff;
}
.item4 {
	margin-top:-10px;
  width: 310px;
  height:351px;
  background:url(../icon/right.png) no-repeat 99% 89%,url(../icon/left.png) no-repeat 1% 89%;

  float: left;
  position:relative;
}
.item4last {
	margin-top:-10px;
  width: 310px;
  height:351px;
  background:url(../icon/left.png) no-repeat 1% 89%;
  float: left;
  position:relative;
  color:#fff;
}
/*----------------------------------*/
.viewport5 {
  width: 310px;
  height:253px;
  overflow: hidden;
  margin: 0px auto;
  -webkit-transform: translateZ(0); }  
  
#img5 .flipsnap {
  width: 930px;
  background:#000;
}

#img5 .flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }
  
#img5 .flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }
  
.item5first {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/right.png) no-repeat 99% 82%;
  float: left;
  position:relative;
  color:#fff;
}
.item5 {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/right.png) no-repeat 99% 82%,url(../icon/left.png) no-repeat 1% 82%;

  float: left;
  position:relative;
}
.item5last {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/left.png) no-repeat 1% 82%;
  float: left;
  position:relative;
  color:#fff;
}

/*----------------------------------*/
.viewport6 {
  width: 310px;
  height:275px;
  overflow: hidden;
  margin: 0px auto;
  -webkit-transform: translateZ(0); }  
  
#img6 .flipsnap {
  width: 3720px;
  background:#000;
}

#img6 .flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }
  
#img6 .flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }
  
.item6first {
	margin-top:-10px;
  width: 310px;
  height:311px;
  background:url(../icon/right.png) no-repeat 99% 89%;
  float: left;
  position:relative;
  color:#fff;
  overflow: hidden;
}
.item6 {
	margin-top:-10px;
  width: 310px;
  height:311px;
  background:url(../icon/right.png) no-repeat 99% 89%,url(../icon/left.png) no-repeat 1% 89%;

  float: left;
  position:relative;
  overflow: hidden;
}
.item6last {
	margin-top:-10px;
  width: 310px;
  height:311px;
  background:url(../icon/left.png) no-repeat 1% 89%;
  float: left;
  position:relative;
  color:#fff;
  overflow: hidden;
}

/*----------------------------------*/
.viewport7 {
  width: 310px;
  height:291px;
  overflow: hidden;
  margin: 0px auto;
  -webkit-transform: translateZ(0); }  
  
#img7 .flipsnap {
  width: 930px;
  background:#000;
}

#img7 .flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }
  
#img7 .flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }
  
.item7first {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/right.png) no-repeat 99% 95%;
  float: left;
  position:relative;
  color:#fff;
}
.item7 {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/right.png) no-repeat 99% 95%,url(../icon/left.png) no-repeat 1% 95%;

  float: left;
  position:relative;
}
.item7last {
	margin-top:-10px;
  width: 310px;
  height:310px;
  background:url(../icon/left.png) no-repeat 1% 95%;
  float: left;
  position:relative;
  color:#fff;
}