@charset "utf-8";

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:3vw;

}
.main{
z-index: -1;
   display:block;
   width: 100%;
   opacity: 0.2;
   position:absolute;
   top:3%;
}
         
label {
    font-weight:bold;
    width:50%;
    font-size:3vw;
}
.user_pw{
/*    z-index: 3;
width:100%;
padding-left: 3%;*/
margin-bottom:1vw;
max-width:2.5vw;
margin-left: -14%; 
cursor: pointer;
}
       
.box {
    font-size: 3vw;
    border:#666666 solid 1px;
    max-width: 50%;
}
input#new_user{
    max-width: 100%;
    font-size: smaller;
    font-stretch: ultra-condensed;
}input#change_pw{
    max-width: 100%;
    font-size: smaller;
    font-stretch: ultra-condensed;
}
input#insert_user{
    max-width: 100%;
    font-size: smaller;
    font-stretch: ultra-condensed;
}
input#exit{
    max-width: 100%;
    font-size: smaller;
    font-stretch: ultra-condensed;
}
.image-slideshow {
  max-width: 100%;
  position: relative;
  margin: auto;
}
img {
  width: 45%;
}
.fade {
  animation-name: fade;
   animation: fade1 9s ease-in-out infinite;
  animation-duration: 10s;
}
@keyframes fade {
  from {
     transform:translateX(-100%);
     }
 
  to{
      transform:translateX(+150%);

  }
}
@keyframes fade1 {
0% {
      opacity: 0;
         transform:translateX(-100%);
/*      left: 450px;*/
   }
   20%, 45%{
      opacity: 1;
           transform:translateX(+0%);
/*      left: 0;*/
   }
   75%, 100% {    /* 33 + 17 = 50 */
      opacity: 0;
           transform:translateX(+150%);
/*      left: -450px;*/
   }
}
.text {
  color:blue;
  font-size: 3vw;
  font-weight: 700;
  padding: 2px 6px;
  position: absolute;
  bottom: 2px;
  width: 100%;
  text-align: center;
}