.BgOrange{
  position: relative;
  width: 100%;
  animation: fadeout 4s;
  -moz-animation: fadeout 4s; /* Firefox */
  -webkit-animation: fadeout 4s; /* Safari and Chrome */
  -o-animation: fadeout 4s; /* Opera */
  animation-fill-mode: forwards;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.3;
    }
}
@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity: 1;
    }
    to {
        opacity: 0.3;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity: 1;
    }
    to {
        opacity: 0.3;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity: 1;
    }
    to {
        opacity: 0.3;
    }
}

.BgorangE{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.BgorangE >img{
  width: 100%;
  height: 100vh;
}

#header{
  width: 100%;
  margin: 0 auto;
  position: absolute;
  z-index: 2;
}


#header >h1{
  width: 90%;
  padding-top: 50px;
  font-size: 18px;
  color: #fff;
  margin: 0 auto;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}


#intro{
  width: 500px;
  margin: 0 auto;
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.wrapIntro{
  width: 100%;
  margin: 0 auto;
}


.IntroLogo{

}


.Logo01{
  display: block;
  width: 220px;
  margin: 0 auto;
}

.Logo01 >img{
  width: 100%;
}

.Logo02{
  display: block;
  width: 350px;
  margin: 0 auto;
}

.Logo02 >img{
  width: 100%;
}

.Logo03{
  display: block;
  font-weight: 400;
  font-size: 32px;
  text-align: center;
  color: #fff;
}

.IntroTxt{
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 50px;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  letter-spacing: 8px;
  color: #fff;
  font-weight: 400;
}