@charset "UTF-8" ;
/* ------------------------------------------------- */
/*   for PC design (PC first. public design) */
/* ------------------------------------------------- */
/*---PublicStyle---*/
#slidestage{
      position: relative;
      width: 600px;
      height: 400px;
      overflow:hidden;
      object-fit: cover;
      padding:0!important;
}

/*---smartphone---*/
@media screen and (max-width:680px){
	#slidestage{
		width: 100%;
	}
}
@media screen and (max-width:600px){
	#slidestage{
		max-height: 320px;
	}
}
@media screen and (max-width:500px){
	#slidestage{
		height: 270px;
	}
}

.photo{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding:0!important;
}   

/*--- ‘S–‡”~5‘S‘ฬ•b”  5•b‚ร‚ย‰มŽZ  , z-index‚๐’ฒฎ---*/
#photo1{
      -moz-animation: fadeinout 50s 0s infinite both;
      -webkit-animation: fadeinout 50s 0s infinite both;
      -o-animation: fadeinout 50s 0s infinite both;
      animation: fadeinout 50s 0s infinite both;
      z-index:10;
}

#photo2{
      -moz-animation: fadeinout 50s 5s infinite both;
      -webkit-animation: fadeinout 50s 5s infinite both;
      -o-animation: fadeinout 50s 5s infinite both;
      animation: fadeinout 50s 5s infinite both;
      z-index:9
}

#photo3{
      -moz-animation: fadeinout 50s 10s infinite both;
      -webkit-animation: fadeinout 50s 10s infinite both;
      -o-animation: fadeinout 50s 10s infinite both;
      animation: fadeinout 50s 10s infinite both;
      z-index:8;
}

#photo4{
      -moz-animation: fadeinout 50s 15s infinite both;
      -webkit-animation: fadeinout 50s 15s infinite both;
      -o-animation: fadeinout 50s 15s infinite both;
      animation: fadeinout 50s 15s infinite both;
      z-index:7;
}

#photo5{
      -moz-animation: fadeinout 50s 20s infinite both;
      -webkit-animation: fadeinout 50s 20s infinite both;
      -o-animation: fadeinout 50s 20s infinite both;
      animation: fadeinout 50s 20s infinite both;
      z-index:6;
}

#photo6{
      -moz-animation: fadeinout 50s 25s infinite both;
      -webkit-animation: fadeinout 50s 25s infinite both;
      -o-animation: fadeinout 50s 25s infinite both;
      animation: fadeinout 50s 25s infinite both;
      z-index:5;
}

#photo7{
      -moz-animation: fadeinout 50s 30s infinite both;
      -webkit-animation: fadeinout 50s 30s infinite both;
      -o-animation: fadeinout 50s 30s infinite both;
      animation: fadeinout 50s 30s infinite both;
      z-index:4;
}

#photo8{
      -moz-animation: fadeinout 50s 35s infinite both;
      -webkit-animation: fadeinout 50s 35s infinite both;
      -o-animation: fadeinout 50s 35s infinite both;
      animation: fadeinout 50s 35s infinite both;
      z-index:3;
}

#photo9{
      -moz-animation: fadeinout 50s 40s infinite both;
      -webkit-animation: fadeinout 50s 40s infinite both;
      -o-animation: fadeinout 50s 40s infinite both;
      animation: fadeinout 50s 40s infinite both;
      z-index:2;
}

#photo10{
      -moz-animation: fadeinout 50s 45s infinite both;
      -webkit-animation: fadeinout 50s 45s infinite both;
      -o-animation: fadeinout 50s 45s infinite both;
      animation: fadeinout 50s 45s infinite both;
      z-index:1;
}

@-moz-keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}

@-webkit-keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}

@-o-keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}

@keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}