/* 基准width: 1920px */
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: black;
    overflow-y: auto;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    /* background-image: linear-gradient(to bottom, #8da3ae, #1f2a30, #29203e, #220c27, #220c27); */
}
body::-webkit-scrollbar {
    display: none;
}
#video-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url(./images/bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
#video-bg>video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#main-body {
    width: 25vw;
    float: right;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#main-body>div:first-child {
    height: 15vw;
}
#main-body>img:nth-child(2) {
    width: 14vw;
    margin-bottom: 1vw;
}
#main-body>div:nth-child(3) {
    margin-bottom:3.8vw;
    display: grid;
    grid-template-columns: 14.94792vw 6.58333vw;
    grid-template-rows: 2.8vw 2.27083vw;
    position: relative;
}
#main-body>div:nth-child(3)>img:first-child {
    grid-row-start: 1;
    grid-row-end: 3;
}
#main-body>div:nth-child(3)>img {
    width: 95%;
}
/* 
#main-body>div:nth-child(4) {
    margin-bottom: 1.5625vw;
    width: 31.77084vw;
    height: 1.40625vw;
    display: flex;
    align-items: center;
    justify-content: center;
} */
.icon-div>img + img {
    margin-left: 1.82292vw;
}
.icon-div>img:first-child {
    width: 5.46875vw;
}
.icon-div>img:nth-child(2) {
    width: 1.40625vw;
}
.icon-div>img:nth-child(3) {
    width: 1.51042vw;
}
.icon-div>img:nth-child(4), .icon-div>img:nth-child(6)  {
    width: 1.35417vw;
}
.icon-div>img:nth-child(5) {
    width: 1.82292vw;
}
.icon-div>img:nth-child(7) {
    width: 1.30208vw;
}
#main-body>img:last-child {
    width: 31.77083vw;
    height: 2.08333vw;
    margin-bottom: 2.5vw;
}
#main-body div>img {
    cursor: pointer;
}
#main-body .icon-div>img:first-child {
    cursor: default;
}
#download-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40vw;
    display: none;
    z-index: 200;
    transform: translate(-50%,-50%);
    flex-direction: column;
    align-items: flex-end
}
#download-img .X{
    width: 40px;
    height: 40px;
}
#download-img .coming{
    width: 40vw;
    height: 100%;
}
#mask{
    position: fixed;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 3;
  height: 100%;
  display: none;
  background-color: rgba(0, 0, 0, 0.45);
}
#contact{
    width: 20vw;
    margin-bottom: 1vw;
}

.all-rr {
    color: #fff;
    text-align: center;
    font-size: .625vw;
    padding: .1vw 0;
    width: 18vw;
}
.all-rr a {
    text-decoration: none;
    color: #fff;
}
@media screen  and (max-width: 800px) {
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: black;
    overflow-y: auto;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
body::-webkit-scrollbar {
    display: none;
}
#video-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-image: url(./images/bg1.jpg);
}
#video-bg>video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#main-body {
    width: 100vw;
    float: right;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#main-body>div:first-child {
    height: 58vh;
}
#main-body>img:nth-child(2) {
    width: 55vw;
    margin-bottom: 1vw;
}
#main-body>div:nth-child(3) {
    margin-bottom: 3.8vw;
    display: grid;
    grid-template-columns: 48.94792vw 23.58333vw;
    grid-template-rows: 7.8vw 9.27083vw;
    position: relative;
}
#main-body>div:nth-child(3)>img:first-child {
    grid-row-start: 1;
    grid-row-end: 3;
}
#main-body>div:nth-child(3)>img {
    width: 95%;
}
.icon-div>img + img {
    margin-left: 1.82292vw;
}
.icon-div>img:first-child {
    width: 5.46875vw;
}
.icon-div>img:nth-child(2) {
    width: 1.40625vw;
}
.icon-div>img:nth-child(3) {
    width: 1.51042vw;
}
.icon-div>img:nth-child(4), .icon-div>img:nth-child(6)  {
    width: 1.35417vw;
}
.icon-div>img:nth-child(5) {
    width: 1.82292vw;
}
.icon-div>img:nth-child(7) {
    width: 1.30208vw;
}
#main-body>img:last-child {
    width: 31.77083vw;
    height: 2.08333vw;
    margin-bottom: 2.5vw;
}
#main-body div>img {
    cursor: pointer;
}
#main-body .icon-div>img:first-child {
    cursor: default;
}
#download-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70vw;
    display: none;
    z-index: 200;
    transform: translate(-50%,-50%);
    flex-direction: column;
    align-items: flex-end
}
#download-img .X{
    width: 40px;
    height: 40px;
}
#download-img .coming{
    width: 70vw;
    height: 100%;
}
#mask{
    position: fixed;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 3;
  height: 100%;
  display: none;
  background-color: rgba(0, 0, 0, 0.45);
}
#contact{
    width: 60vw;
    margin-bottom: 1vw;
}

.all-rr {
    color: #fff;
    text-align: center;
    font-size: 2vw;
    padding: .1vw 0;
    width:50vw;
}
}