::before, ::after {
transition: 0.5s;
}
h1 {
font-weight: normal;
}
.header {
width: 100%;
z-index: 2;
display: flex;
/* align-items: center; */
justify-content: center;
position: relative;
flex-direction: column;
text-align: center;
padding-top: 7vh;
     
}
.header .bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.header .bg video {
width: 100%;
height: 100%;
object-fit: cover;
}



.header .line {
/* position: absolute; */
bottom: -0.5vh;
width: 100%;
height: 0.9vh;
pointer-events: none;
}
.header .line::before {
content: "";
width: 40%;
height: 0.2vh;
position: absolute;
left: 0;

}
.header .line::after {
content:"";
width: 40%;
height: 0.2vh;
position: absolute;
right: 0;

}
.header .line img {
width: 60vh;
    transform: rotate(180deg);
    position: relative;
    z-index: 1;
    top: 0.5vh;
    opacity: 0.8;

}
.header .top {
position: relative;
z-index: 1;
margin-bottom: 4vh;
      
}
.header .top::after {
content: "";
left: 0;
opacity: 0.3;
top: 10vh;
width: 100%;
height: 80%;
background-color: black;
position: absolute;
z-index: -1;
filter: blur(10vh);
}
.header .top .logo {
width: 55vh;
padding-top: 8vh;
    padding-bottom: 1vh;
}
      @media screen and (max-width: 1024px) {
    .header .top .logo {
        width: 35vh;
        margin: 0;
      padding-top:2vh;
    }
}
.header .top h1 {
color: white;
text-shadow: 0vh 0vh 2vh rgba(0, 0, 0, 0.6);
line-height: 10vh;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.8));
}
.header .top h1 span {
color: #efe0ab;
      
}

li {
list-style: none;
}

.header {
background-position-y: 0vh;
}
.header .line {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.header .top h1 {
font-size: 2.5rem; 
line-height: 6.5vh;
width: 80%;
margin: 0 auto;
}
       @media screen and (max-width: 1024px) {
      .header .top h1 {
    font-size: 1.5rem; 
    }
}
.header .key {
width: 100%;
overflow-x: scroll;
justify-content: start;
padding-left: 4vh;
padding-top: 3vh;
}
.header .key::-webkit-scrollbar {
height: 0;
}
.header .key li {
width: 15vh;
margin: 0vh 2vh;
}
.header .key li p {
width: 15vh;
}


html, body {
overflow-x: hidden !important;
}

img {
transition: 0.5s;
}
a {
transition: 0.5s;
}

html, body {
overflow-x: hidden;
}