@font-face {
    font-family: 'MPLUS1p_Bd';
    src: url("../fonts/MPLUS1p-Bold.ttf") format("TrueType");
}
@font-face {
    font-family: 'MPLUS1p_Rg';
    src: url("../fonts/MPLUS1p-Regular.ttf") format("TrueType");
}
html{
  scroll-behavior: smooth;
}
body{
    font-size: 16px;
    color: #FFFFFF;
    z-index: 1;
    font-family: "MPLUS1p_Rg";

}
.BackGraund_Size{
    width: 100%;
    position: relative;

}
.BackGraund_Back{
    display: block;
    position: absolute;
    background-color: rgba(109, 128, 171, 0.5);
    width: 90%;
    margin: 4%;
    padding: 1%;
    height: 100%;
    border-top-left-radius: 1.38vw;
    border-bottom-right-radius: 1.38vw;
    z-index: -1;
    bottom: 0;
}
.firstViewArea{
    width: 100vw;
    height: 75vh;
}
.firstViewArea2{
    display: block;
    width: 100vw;
    height: 50vh;
}
.firstViewArea3{
    display: block;
    width: 100vw;
    height: 100vh;
}
.RocketArea{
    width: 100vw;
    height: auto;

    
}
.rocket{
    width: 100vw;
    height: auto;
    position: fixed;
    z-index: -3;
    bottom: -18vw;
    display: none;

}
.rocket2{
    width: 100vw;
    height: auto;
    position: fixed;
    z-index: -3;
    bottom: -9vw;
    display: block;
}

.BackGraund{
    background: linear-gradient(45deg, rgba(178,126,169,1) 0%, rgba(95,99,156,1)100%);
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: -4;
}
.BackGraund2{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -2;
}
.BackGraund3{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -3;
}

.BackImg{
    width: 100vw;
    height: 100vh;
    top: 0;
    position: absolute;
    display: block;
}
.BackImg_720{
    width: 100vw;
    height: auto;
    bottom: 0;
    position: absolute;
    display: none;

}
.BackImg2{
    width: 100vw;
    height: auto;
    bottom: -10vw;
    position: absolute;
    display: block;
    
}
.BackImg3{
    width: 108vw;
    height: auto;
    bottom: -32.8vw;
    left: -6.8vw;
    position: absolute;
    display: none;
    z-index: -1;
}
.BackImg4{
    width: 100vw;
    height: auto;
    top: 0;
    position: absolute;
    display: block;
}
.TitleArea{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -2;
}
.Titlefont{
    width: 100vw;
    height: auto;

}
.TitleActive_1440{
    width: 100vw;
    height: auto;
    position: absolute;
    top: 0;
    display: block;
}
.TitleActive_720{
    width: 100vw;
    height: auto;
    position: absolute;
    top: 0;
    display: none;
}


.loop02 {
    display: flex;
    overflow: hidden;
}
.loop02__box {
    display: flex;
    animation: loop-list 30s linear infinite;
}

.loop02__item div {
    display: block;
    margin: 0.5vw;
}

.loop02__item img {
    width: 22.22vw;
    height: 22.22vw;
    border-radius: 1.38vw;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
}

@keyframes loop-list {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.ButtonFont{
    display: flex;
    justify-content: right;
    align-items: center;
    font-family: "MPLUS1p_Bd";
    margin-top: 5.55vw;

}

.ButtonIcon{
    width: 1.04vw;
    margin: 0.83vw;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.ButtonFont a {
    display: flex;
    align-items: center;
    color: #FFFFFF;
    border-bottom: #FFFFFF solid;
    text-decoration: none;
    padding-bottom: 0.69vw;
    
}

.Area{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 75%;
    padding: 12.5%;
    padding-bottom: 11.45vw;
    padding-top: 11.45vw;
}
.Area2{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 75%;
    padding: 12.5%;
    padding-bottom: 0;
    padding-top: 0;
}
.Area3{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 75%;
    padding: 12.5%;
    padding-bottom: 0;
    padding-top: 4.3vw;
}
.Area4{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 75%;
    padding: 12.5%;
    padding-bottom: 0;
    padding-top: 5.83vw;
}
.Area5{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 75%;
    padding: 12.5%;
    padding-bottom: 17.55vw;
    padding-top: 0;
}

.HelloWorildEX{
    font-size: 16px;
}
.Title{
    display: flex;
    justify-content: left;
    background-color: rgba(255, 255, 255, 1);
    color: #595C83;
    border-top-left-radius: 1.38vw;
    border-bottom-right-radius: 1.38vw;
    padding: 1.38vw;
    margin-bottom: 5vw;
    font-size: 20px;
    font-family: "MPLUS1p_Bd";
}
.Title2{
    display: flex;
    justify-content: left;
    background-color: rgba(255, 255, 255, 1);
    color: #595C83;
    border-top-left-radius: 1.38vw;
    border-bottom-right-radius: 1.38vw;
    padding: 1.38vw;
    margin-bottom: 8.3vw;
    font-size: 20px;
    font-family: "MPLUS1p_Bd";
}
.Title3{
    display: flex;
    justify-content: left;
    background-color: rgba(255, 255, 255, 1);
    color: #595C83;
    border-top-left-radius: 1.38vw;
    border-bottom-right-radius: 1.38vw;
    padding: 1.38vw;
    margin-bottom: 5.83vw;
    font-size: 20px;
    font-family: "MPLUS1p_Bd";
}
.NameArea{
    margin-bottom: 8.32vw;
}
.Name{
    font-size: 20px;
    font-family: "MPLUS1p_Bd";
    border-bottom: #FFFFFF solid;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 0.83vw;
}
.NameIcon{
    display: block;
    width: 0.5vw;
    margin-right: 0.83vw;

}

.NameArea2{
    display: flex;
    flex-direction: row;
}

.NameArea3{
    display: flex;
    flex-direction: row;    
}
.MapName{
    margin-right: 3.88vw;
}
.Map{
    display: flex;
    justify-content: center;
    margin-top: 4.16vw;
    margin-bottom: 13.88vw;

}

.MapSize{
    width: 61.25vw;
    height: 35.83vw;
}

.MapNameArea_1440{
    display: block;
}

.MapNameArea_720{
    display: none;
}

.PanListForm{
    display: flex;
    width: 100vw;
    height: 5.55vw;
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    align-items: center;
    justify-content: flex;
}
.PanListForm img{
    margin-left: 5.55vw;
    width: 33.33vw;
}

.PanListFormHeight{
    display: none;
}
.IconBtn{
    display: flex;
    position: fixed;
    bottom: 18vh;
    right: 5.55vw;
    width: 4.44vw;
}
.IconBtn a{
    width: 4.44vw;
}
.IconBtn a img{
    width: 4.44vw;
    height: auto;
}
.workArea{
    display: flex;
    flex-direction: row;
    padding-bottom: 8vw;
}
.workArea2{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding-bottom: 8vw;
}
.WorkImg{
    width: 22vw;
    height: auto;
    margin-right: 6vw;
}
.WorkImg2{
    width: 22vw;
    height: auto;
    margin-left: 6vw;
}
.WorkImg img{
    width: 22vw;
    height: 22vw;
    background-color: #FFFFFF;

}
.WorkImg2 img{
    width: 22vw;
    height: 22vw;
    background-color: #FFFFFF;

}
.WorkEx{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.workName{
    font-size: 20px;
    font-weight: bold;
    border-bottom: #FFFFFF solid;
    padding-bottom: 0.4vw;
    margin-bottom: 0.4vw;
}
.WorkNameArea{
    height: 2.77vw;
}

@media screen and (max-width: 767px) {
    body{
        font-size: 12px;

    }
    .BackGraund_Back{

        border-top-left-radius: 5.12vw;
        border-bottom-right-radius: 5.12vw;
    }
    .BackImg{

        display: none;
    }
    .BackGraund{
        z-index: -2;
    }
    .BackImg_720{
        display: block;
    }
    .BackImg2{
        display: none;
    }
    .BackImg3{
        display: none;
    }
    .BackImg4{
        display: none;
    }
    
    .firstViewArea2{
        display: none;
    }
    .firstViewArea3{
        height: 50vh;
        display: block;
    }
    .RocketArea{
        width: 100vw;
        height: auto;
    }
    .rocket{

        display: none;

    }
    .loop02__box {
        animation: none !important;
        transform: translateX(0) !important;
    }

    .loop02__item div {
        margin: 4vw;

    }

    .loop02__item img {
        width: 92vw;
        height: 92vw;
        border-radius: 0vw;
    }
    .Title{
        color: #595C83;
        border-top-left-radius: 5.12vw;
        border-bottom-right-radius: 5.12vw;
        padding: 2.05vw;
        padding-left: 5.12vw;
        margin-bottom: 10.25vw;
        font-size: 16px;
    }
    .Title2{
        color: #595C83;
        border-top-left-radius: 5.12vw;
        border-bottom-right-radius: 5.12vw;
        padding: 2.05vw;
        padding-left: 5.12vw;
        margin-bottom: 10.25vw;
        font-size: 16px;
    }
    .Title3{
        color: #595C83;
        border-top-left-radius: 5.12vw;
        border-bottom-right-radius: 5.12vw;
        padding: 2.05vw;
        padding-left: 5.12vw;
        margin-bottom: 10.25vw;
        font-size: 16px;
    }
    .TitleActive_1440{
        display: none;
    }
    .TitleActive_720{
        display: block;
    }

    .ButtonFont{
        margin-top: 8.2vw;
    }

    .ButtonIcon{
        width: 3.84vw;
        margin-left: 2.05vw;
    }

    .ButtonFont a {
        padding-bottom: 2.05vw;
        
    }
    .Area{
        width: 80%;
        padding: 10%;
        padding-bottom: 6.4vw;
        padding-top: 6.4vw;
    }
    .Area2{

        width: 80%;
        padding: 10%;
        padding-bottom: 0;
        padding-top: 0;
    }
    .Area3{
        width: 80%;
        padding: 10%;
        padding-bottom: 0;
        padding-top: 12.9vw;
    }
    .Area4{
        width: 80%;
        padding: 10%;
        padding-bottom: 0;
        padding-top: 14.35vw;
    }
    .Area5{
        width: 80%;
        padding: 10%;
        padding-bottom: 17.55vw;
        padding-top: 0;
    }

    .HelloWorildEX{
        font-size: 16px;
    }
    
    .Name{
        font-size: 16px;
        padding-bottom: 2.05vw;
    }
    .NameIcon{
        display: none;
    }

    .NameArea{
        margin-bottom: 12.3vw;
    }

    .NameArea2{
        display: flex;
        flex-direction: column;
    }

    .NameArea3{
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }

    .MapName{
        margin-right: 0;
        margin-bottom: 6.15vw;
    }
    .Map{
        margin-top: 8.2vw;
        margin-bottom: 16.41vw;
    }
    .MapSize{
        width: 100vw;
        height: 50vw;
    }

    .MapNameArea_1440{
        display: none;
    }

    .MapNameArea_720{
        display: block;
    }
    
    .workArea{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 3vw 0 3vw 0;
    }
    .workArea2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3vw 0 3vw 0;
    }
    .WorkImg{
        width: 80vw;
        height: auto;
        margin-right: 0;
        margin-bottom: 6.15vw;
    }
    .WorkImg2{
        width: 80vw;
        height: auto;
        margin-left: 0;
        margin-bottom: 6.15vw;
    }
    .WorkImg img{
        width: 80vw;
        height: 80vw;

    }
    .WorkImg2 img{
        width: 80vw;
        height: 80vw;

    }
    .WorkEx{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .workName{
        font-size: 16px;
        font-weight: bold;
        border-bottom: #FFFFFF solid;
        padding-bottom: 2.05vw;
        margin-bottom: 4.1vw;
    }
    .WorkNameArea{
        height: 6.15vw;
    }

    .PanListForm{
        height: 16.41vw;
    }
    .PanListForm img{
        width: 62.8vw;
    }
    .PanListForm div{
        display: none;
    }
    .PanListFormHeight{
        display: block;
        height: 16.41vw;
    }
    .IconBtn{
        display: flex;
        position: fixed;
        bottom: 12vw;
        right: 10.25vw;
        width: 13vw;
    }
    .IconBtn a{
        width: 13vw;
    }
    .IconBtn a img{
        width: 13vw;
        height: auto;
    }

}