html body {
    margin: 0;
    padding: 0;
    font-size: 0;
    font: normal 100% Helvetica, Arial, sans-serif;
    background-color: black;
}

.container {
    width: 100%;
    height: 100%;
    background-color: black;
}

/* top_nav start */
.top_nav {
    width: 100%;
    height: 7.96vw;
    background-image: url(../img/Nav.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    position: relative;
    position: fixed;
    top:0;
    z-index: 99;
}

.left_list,
.right_list {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.top_welcome {
    width: 100%;
    height: 1.19vw;
    position: absolute;
    top: 15%;
    left: 18%;
    color: #848484;
    font-size: 2vw;
    font-weight:bold
}

.left_list_nav {
    width: 65%;
    height: 3.33vw;
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    top: 58%;
    left: 10%;
}

.left_list_nav a {
    height: 3.33vw;
    color: #848484;
    font-size: 1.5vw;
    font-family: robotobold;
    
}

.left_list_nav a:hover {
    text-decoration: underline#0079C0 0.4vw solid;
    color: #FFFFFF;
}

.logo {
    width: auto;
    height: 6vw;
    position: absolute;
    top: 15%;
}

.logo img {
    width: 100%;
    height: 5.4vw;
}



.SNS {
    display: flex;
    justify-content: space-around;
    width: 75%;
    height: 5vw;
    position: absolute;
    left: 25%;
}


.SNS a img {
    width: 100%;
    height: 2vw;
}

/* .SNS_tw {
    .twiwer1 {
        display: block;
    }

    .twiwer2 {
        display: none;
    }

    &:hover {
        .twiwer1 {
            display: none;
        }

        .twiwer2 {
            display: block;
        }
    }
} */

.SNS_fc {
    .fc1 {
        display: block;
    }

    .fc2 {
        display: none;
    }

    &:hover {
        .fc1 {
            display: none;
        }

        .fc2 {
            display: block;
        }
    }
    margin-top: 5%;
}

.SNS_ins {
    .ins1 {
        display: block;
    }

    .ins2 {
        display: none;
    }

    &:hover {
        .ins1 {
            display: none;
        }

        .ins2 {
            display: block;
        }
    } 
    margin-top: 5%;
}


.right_list_nav {
    width: 65%;
    height: 3.33vw;
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    top: 58%;
    left: 25%;
}

.right_list_nav a {
    
    height: 3.33vw;
    color: #848484;
    font-size: 1.5vw;
    font-family: robotobold;
}

.right_list_nav a:hover {
    text-decoration: underline#0079C0 0.4vw solid;
    color: #FFFFFF;
}

/* top_nav end */
.top2 {
    width: 100%;
    height: 16.9vw;
    margin-top: 7.96vw;
    
}
.top2_tupian{
    width: 100%;
    height: 16.9vw;
}
.top2_tupian img{
    width: 100%;
    height: 16.9vw;
}
/* top2 end */
.top3 {
    width: 100%;
    height: 40vw;
    display: flex;
    justify-content: space-evenly;
    background-image: url(../img/Rectangle\ 2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
   
}
.top3_left {
    width: 41.5vw;
    height: 38vw;
    color: #848484;
    font-size: 1vw;
    line-height: 1.5vw;
    text-align:justify;
    margin-top: 3%;
    font-family: interregular;
    
}
.top3_left img{
    width: 41.6vw;
    height:25vw ;
}
.top3_left span{
    font-size: 1.5vw;
    color: #FFFFFF;
}

h3{
    color: #0079C0;
    font-size: 2vw;
    margin-top: 1%;  
}
h4{
  color: #0079C0;
  font-size: 2vw;
  margin-bottom: 1%;
}
h1{
    color: #FFFFFF;
    font-size: 2vw;
    margin-bottom: 2%;
    font-family: spaceGroteskBold;
}
.top3_right {
    width: 24.2vw;
    height: 24.7vw;
    margin-top: 8%;
    
}
/* .top3_right_list{
    width: 23.1vw;
    height: 41.1vw;
    display: flex;
    justify-content: space-between;
} */
.list_left p{
    color: #848484;
    font-size: 2vw;
    
}
 .list_right img{
    width: 5.7vw;
    height:5.7vw ;
    margin-top: 30%;
 }  

/* top3 end */
/* top4 start */
.top4 {
    width: 100%;
    height:90vw;
    background-image: url(../img/Footer\ Gradient.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 1.5vw;
    color: #848484;
    font-size: 1vw;
    text-align:justify;
}

.top4_photo,.top4_under_photo{
    width: 41.6vw;
    height: 30vw;
    margin-left: 11%;
}
.top4_photo img,.top4_under_photo img{
    width: 41.6vw;
    height: 25vw;
}
.top4_text{
    width: 80%;
    height: 8.3vw;
    line-height: 1.5vw;
    color: #848484;
    font-size: 1vw;
    text-align:justify;
    margin-left: 11%;
    font-family: interregular;
}
.top4_text span{
    color: #0079C0;
    font-family: interregular;
}



/* foot start */
.footer_top {
    width: auto;
    height: 30.3vw;
    background-image: url(../img/Footer\ Gradient.png);
    position: relative;
    background-size: 100% 100%;
}

.footer_pr {
    color: #FFFFFF;
    text-align: center;
    font-size: 4vw;
}

.footer_join {
    width: auto;
    height: 4vw;
    position: absolute;
    left: 38%;
    top: 30%;

    .join_us1 {
        display: block;
    }

    .join_us2 {
        display: none;
    }

    &:hover {
        .join_us1 {
            display: none;
        }

        .join_us2 {
            display: block;
        }
    }
}

.footer_join img {
    width: auto;
    height: 6vw;
}

.footer_nether {
    width: auto;
    height: 23.6vw;
    background-image: url(../img/Section\ Divider.png);
    position: relative;
    background-size: 100% 100%;
}

.FY_logo {
    width: auto;
    height: 7.5vw;
    position: absolute;
    left: 33%;
    top: 15%;
}

.FY_logo img {
    width: auto;
    height: 7.5vw;
}
.under_line{
    width: 57.6vw;
    height: 0.2vw;
    background-color:#848484 ;
    position: absolute;
    left: 22%;
    top: 55%;
    opacity: 0.2;
}
.adrs_PH{
    width: auto;
    position: absolute;
    text-align: center;
    left: 25%;
    bottom: 8%;
}
.adrs_PH span{
    font-size: 1.5vw;
    color: #FFFFFF; 
    font-family: spaceGroteskBold;
}