html{
    min-height: 100%;
    scroll-behavior: smooth;
}
body{
    position:relative;
    margin:0;
    padding:0;
    background-color: black;
}

/*loading*/
#Loading{
    visibility: hidden;
    display: block;
    position:fixed;
    text-align: center;
    color:aliceblue;
    z-index: 5;
    font-size:200%;
    width:100vw;
    height:100vh;
    bottom:0px;
    top:-20px;
    background-color: #252525;
    animation:Loading 2s ease 0s normal;
    animation-fill-mode: forwards;
}

/*header*/
header{
    display:none;
    position:fixed;
    background-color: rgba(16, 16, 16, 0.8);
    width:100vw;
    box-sizing:border-box;
    margin-left: calc(-50vw + 50%);
    height: 70px;
    z-index: 2;
    box-shadow: 0 10px 15px 0 rgba(111, 111, 111, 0.5);
}
#headerImage{
    width:160px;
    margin:8px 0px 0px 30px;
}
nav.header ul{
    list-style-type: none;
    display: flex;
    float:right;
    margin:-50px 100px 0 0;
    padding:0;
}
ul li#other{
    width: 125px;
    border-left:2px solid rgb(128, 128, 128);
    height: 35px;
}
ul li#last{
    width: 125px;
    border-right:2px solid rgb(128, 128, 128);
    border-left:2px solid rgb(128, 128, 128);
    height: 35px;
}
a#default{
    position: relative;
    display: block;
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    color:rgb(209, 209, 209);
    line-height: 35px;
    transition:all 0.3s 0s ease;
}
a#default:hover{
    color:rgb(142, 170, 194);
}
a#default::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 2px;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
    
    background-color: rgb(142, 170, 194);
}
a#default:hover::after{
    transform: scale(1, 1);
}

/*slide*/
#slide{
    background-color: black;
    display: inline-block;
    position:relative;
}
.change{
    width:100vw;
}
.change img{
    width:100vw;
    height:100vh;
    object-fit: cover;
    opacity: 0.4;
}
#Logo{
    position:absolute;
    top:20vh;
    width:100vw;
    z-index: 2;
}
#LogoImg{
    width:320px;
    margin-left:80px;
}
#LogoStr{
    color:aliceblue;
    margin:0 0 20px 200px;
}

/*homeNav*/
nav.Home{
    text-align: center;
    position:absolute;
    z-index:2;
    top:50vh;
    width:600px;
    right:10px;
    height:50px;
}
nav ul{
    margin: 0;
    padding: 0;
}
nav.Home ul li{
    list-style: none;
    display: inline-block;
    width: 25%;
    min-width: 90px;
}
nav.Home ul li a{
    position: relative;
    display: block;
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    font-size:120%;
    color:rgb(209, 209, 209);
    line-height: 35px;
    transition:all 0.3s 0s ease;
}
nav.Home ul li a:hover{
    color:rgb(142, 170, 194);
}
nav.Home ul li a::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 2px;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
    
    background-color: rgb(142, 170, 194);
}
nav.Home ul li a:hover::after{
    transform: scale(1, 1);
}

/*period*/
.period{
    height:800px;
}
.whatsNew{
    background:repeating-linear-gradient(45deg,#151515,#151515 15px,#252525 0,#252525 30px);
    height:800px;
}
.period img.right{
    position:relative;
    height:800px;
    object-fit: cover;
    width:45vw;
    float:right;
    border-radius: 20px;
}
.period img.left{
    position:relative;
    height:800px;
    object-fit: cover;
    width:45vw;
    float:left;
    border-radius: 20px;
}

.aboutUs{
    position:relative;
    background-color: #151515;
}
.aboutUs:before{
    position:absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("../Image/cat.jpg");
}

.Contact{
    background-color: #252525;
    background-image: linear-gradient(90deg, #151515 50%, transparent 50%),
                      linear-gradient(#151515ac 50%, transparent 50%);
    background-size: 40px 40px;
}


/*Header2*/
.Header2.left{
    float:left;
    position:relative;
    top:25px;
    color:rgb(105, 126, 145);
    padding:2px 0 2px 5px;
    border-left:5px solid rgb(142, 170, 194);
    font-size:200%;
    margin-left:50px;
}
.Header2.right{
    float:right;
    position:relative;
    top:25px;
    color:rgb(105, 126, 145);
    padding:2px 5px 2px 0;
    border-right:5px solid rgb(142, 170, 194);
    font-size:200%;
    margin-right:50px;
}

/*contact*/
#contact{
    width:100vw;
    position:relative;
}
#container{
    display: grid;
    grid-template-rows: 400px 400px;
    grid-template-columns: 500px 500px;
    width:1000px;
    place-items:center;
    margin:0 calc((100vw - 1000px) / 2) 0 calc((100vw - 1000px) / 2);
}
#Box.X{
    grid-row: 1 / 2;
    grid-column:1 / 2;
}
#Box.Instagram{
    grid-row: 2 / 3;
    grid-column:1 / 2;
}
#Box.GooglePlay{
    grid-row: 1 / 2;
    grid-column:2 / 3;
}
#Box.booth{
    grid-row: 2 / 3;
    grid-column:2 / 3;
}
#Box{
    position:relative;
    width:360px;
    height:180px;
}
#Box img{
    width:180px;
    height:180px;
    border-radius:50px;
    float:left;
}
#Box #charContainer{
    float:left;
    width:180px;
    height:180px;
    text-align:center;
}
#Box span{
    display: block;
    color:aliceblue;
    font-size:150%;
    position:relative;
    top:50px;
}
#Box span a{
    font-size:90%;
}

/*text*/
#text{
    font-size:100%;
    color:rgb(180, 188, 195);
    line-height:40px;
    text-align: center;
    width:50vw;
    position:absolute;
}
#aboutUs #text{
    position:absolute;
    right:15px;
    margin-top:150px;
    width:50vw;
    font-size:100%;
    text-align: center;
    color:rgb(180, 188, 195);
    line-height:40px;
}
#text #marker{
    background: linear-gradient(transparent 40%, #7c4242 60%);
}
#error{
    color:red;
    font-size:16px;
}

/*table*/
table{
    position:absolute;
    line-height:50px;
    font-size:120%;
    width:45vw;
    margin:100px 0 0 50px;
    text-align: left;
}
td{
    padding:0 40px 0 20px;
    border-bottom:3px dashed #656565;
}

/*footer*/
footer{
    width:100vw;
    height:50px;
    background-color: #252525;
    text-align: center;
    margin-top:-16px;
}
footer p{
    color:aliceblue;
    padding-top:13px;
}
footer a#default{
    display: block;
    position:absolute;
    bottom:0px;
    right:0px;
    padding:0px 30px 7px 0px;
    font-size:90%;
}

@keyframes fadeInAnime{
    0%{
        translate:-50vw;
    }
    100% {
        translate:50vw;
    }
}

@keyframes Loading{
    0%{
        top:-32px;
    }
    60%{
        top:-32px;
    }
    100%{
        top:1000px;
        display: none;
    }
}