:root {
  --effect: hover 1s linear infinite;
}
.loadingout {
width:100%;
text-align: center;
}

.loading {
  display: inline-block;
  text-transform: uppercase;
  text-align: center;
  font-size: 3vw;
  font-family: arial black;
  transform: scale(.5);
  color: Red;
  -webkit-text-stroke: 2px Red;
}

.loading:nth-child(1) {
  animation: var(--effect);
}

.loading:nth-child(2) {
  animation: var(--effect) .125s;
}

.loading:nth-child(3) {
  animation: var(--effect) .25s;
}

.loading:nth-child(4) {
  animation: var(--effect) .375s;
}

.loading:nth-child(5) {
  animation: var(--effect) .5s;
}

.loading:nth-child(6) {
  animation: var(--effect) .675s;
}

.loading:nth-child(7) {
  animation: var(--effect) .75s;
}

@keyframes hover {
  0% {
    transform: scale(.5);
    color: black;
    -webkit-text-stroke: 1vw #ff441b;
  }

  20% {
    transform: scale(1);
    color: pink;
    -webkit-text-stroke: 1vw red;
    filter: drop-shadow(0 0 0.5vw black)drop-shadow(0 0 0.5vw black)drop-shadow(0 0 1vw red)drop-shadow(0 0 0.2vw red)hue-rotate(10turn);
  }

  50% {
    transform: scale(.5);
    color: black;
    -webkit-text-stroke: 1vw #ff441b;
  }
}

@media print{
body{display:none;}
}
*{
margin:0;
padding:0;
font-weight:bold;
}
body{
user-select:none;
}
body::-webkit-scrollbar{
display:none;
}
#preload{
width: 100vw;
height: 100vh;
display: block;
overflow:hidden;
position:reletive;
align-items: center;
background-color:#ff8866;
}
#preload img{
width:15vw;
display:block;
margin:0 auto;
margin-top:35vh;
}
#mainbody{
display:none;
width:100%;
height:100%;
}
header{
width:100%;
height:auto;
overflow:hidden;
color:Gold;
background: linear-gradient(to left, #8833ff 0%, #ff3388 100%);
border-bottom:0.5vw solid #1d2671;
}
header #Manu{
display:block;
float:left;
padding:0 2vw;
font-size:5vw;
}
header h1{
font-size:6vw;
display:block;
padding:0 1vw;
float:left;
cursor:pointer;
}
header h1 img{
width:6.5vw;
margin:0 2vw;
border-radius:50%;
display:block;
float:left;
}
header span{
display:block;
float:right;
cursor:pointer;
}
header span img{
width:7vw;
height:7vw;
margin:0 auto;
display:block;
border-radius:50%;
cursor:not-allowed;
}
#menuout{
height: 100%;
width: auto;
display:none;
position: fixed;
z-index: 1;
top: 7.5vw;
left: 0;
background-color: #55005b;
overflow-x: scroll;
transition: 0.9s;
}
#menuout a{
display:block;
font-size:2.5vw;
font-weight:bold;
text-decoration:none;
}
.menu{
color:gold;
padding-left:1vw;
padding-top:1vw;
border-bottom:0.2vw dotted #ff077e;
}
.close{
overflow:hidden;
border-bottom:0.2vw dotted #ff077e;
}
.cbt{
color:white;
font-size:2.5vw;
padding:0.2vw 0.5vw;
text-align:center;
text-decoration:none;
border:0.2vw solid #ff077e;
}
#slide{
width:100%;
display:block;
color:gold;
position:relative;
overflow:hidden;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFhKzgHmaVSllvA7jIqPoGGgvb5N2LN8L_NQ&usqp=CAU);
background-repeat:no-repeat;
background-size:cover;
}
#slide img{
height:40vw;
display:block;
float:right;
}
#slide .one{
font-size:7vw;
top:3vw;
left:4vw;
position:absolute;
}
#slide .two{
font-size:5vw;
top:13vw;
left:10vw;
position:absolute;
}
#slide .three{
font-size:4vw;
top:21vw;
left:21vw;
position:absolute;
}
#slide button{
height:5vw;
width:20vw;
position:absolute;
bottom:5vw;
left:21.5vw;
color:white;
cursor:pointer;
font-size:2.5vw;
border:0.2vw solid #c22744;
background-color:#c22744;
box-shadow: 0.8vw 0.5vw 0.5vw 0 white;
}
#guide p{
font-size:2vw;
text-indent:5vw;
padding:2vw 1.5vw;
text-align:justify;
}
#exbaner{
overflow:hidden;
}
#exbaner .title, #proexbaner .title{
width:100%;
display:block;
text-align:center;
font-size:3vw;
color:gold;
background: linear-gradient(to left, #ec0066 0%, #1B9600 100%);
}
#exbaner .sub, #proexbaner .sub{
width:29%;
float:left;
position:relative;
margin:1vw 1.5vw;
font-size:2vw;
cursor:pointer;
text-align:center;
padding:0.5vw 0;
border:0.2vw solid;
border-top-right-radius:15%;
}
#exbaner .sub:nth-child(even){background-color:#cc2233; color:white;}
#exbaner .sub:nth-child(odd){background-color:#88001b; color:Gold;}

#proexbaner{
position:relative;
display:block;
overflow:hidden;
background-color:#33001b;
}
#proexbaner img{
display:block;
margin:1vw auto;
width:50%;
height:15vw;
}
#proexbaner .sub{
color:black;
background-color:white;
}
#exbaner .lock, #proexbaner .lock{
top:0;
right:0;
width:15%;
display:block;
margin:1vw;
height:auto;
position:absolute;
}


@media(max-width:800px){
.loading {
font-size:10vw;
}
#preload img{
width:50vw;
display:block;
margin:0 auto;
margin-top:45vw;
}
header #Manu{
font-size:8vw;
}
header h1{
font-size:9vw;
}
header h1 img{
height:10.5vw;
width:auto;
margin:0 1vw;
}
header span img{
width:11vw;
height:11vw;
margin:0 1vw;
}
#menuout{
top: 11vw;
width:40vw;
}
#menuout a{
font-size:5vw;
}
.menu{
font-size:10vw;
border-bottom:0.8vw dotted #ff077e;
}
.close{
border-bottom:0.8vw dotted #ff077e;
}
.cbt{
font-size:4.5vw;
padding:0.5vw 2vw;
}
#slide img{
height:60vw;
}
#slide .one{
font-size:8vw;
top:10vw;
left:1vw;
position:absolute;
}
#slide .two{
font-size:6vw;
top:22vw;
left:4vw;
position:absolute;
}
#slide .three{
font-size:5vw;
top:33vw;
left:16vw;
position:absolute;
}
#slide button{
height:7vw;
width:30vw;
position:absolute;
bottom:8vw;
left:14vw;
font-size:4vw;
}
#guide p{
font-size:4.5vw;
}
#exbaner .title, #proexbaner .title{
font-size:6vw;
}
#exbaner .sub, #proexbaner .sub{
width:48.6%;
margin:auto 0.5vw;
margin-top:2vw;
font-size:4.2vw;
padding:1vw 0;
border:0.2vw solid;
}
#proexbaner img{
width:50%;
height:20vw;
}
#proexbaner .sub{
font-size:5vw;
}
#exbaner .lock, #proexbaner .lock{
width:20%;
}
}