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

.container {
    width: 100%;
    height: 100%;
}

/* 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: 5.4vw;
    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: 26vw;
    background-image: url(../img/Group\ 200164.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 7.96vw;
}
.blogs_top{
    width: 100%;
    height: 12.8vw;
    position: absolute;
    text-align: center;
    line-height: 2vw;
}
.blogs_top img{
    width: 2.5vw;
    height: 2vw;
    margin-left: 48.5%;
    margin-top: 5%;

}
.blogs_top h1{
    font-size: 3vw;
    color:#FFFFFF;
    margin: 2% 0;
    font-family: spaceGroteskBold;
}
.blogs_top span{
    font-size: 1.5vw;
    color: #848484;
    font-family: interregular;
}
/* top2 end */
/* top3 start */
.top3{
    width: 100%;
    height: 20.1vw;
    background-image: url(../img/Rectangle\ 2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-evenly;
    position: relative;
}
.top3_left{
    width: 44.8vw;
    height: 19vw;
    position: absolute;
    left: 10%;
}
.top3_left img{
    width: 44.8vw;
    height: 19vw;
}

.top3_right{
    width: auto;
    height: 12.1vw;
    position: absolute;
    left: 60%;
    top: 10%;
}
.top3_right p{
    font-size: 1.5vw;
    color: #0079C0;
    font-family: interregular;
}
.top3_right h1{
    font-size: 3vw;
    color: #FFFFFF;
    font-family: spaceGroteskBold;
}
.top3_right span{
    font-size: 1.5vw;
    color: #848484;
    font-family: interregular;
}
/* top3 end */
/* top4 start */
.top4{
    width: 100%;
    height: 94vw;
    background-image: url(../img/Footer\ Gradient.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.top4_upper{
    width: 100%;
    height: 35.2vw;
    display: flex;
    justify-content: center;
   
}
.top4_upper_centre,.top4_upper_right{
    width: 20.6vw;
    height: 19vw;
    
    margin: 3%;
}
.top4_under{
    width: 100%;
    height: 35.2vw;
    display: flex;
    justify-content: center;
   
}
.top4_under_left,.top4_under_centre,.top4_under_right{
    width: 20.6vw;
    height: 19vw;
    
    margin: 3%;
    margin-top: 10%;
}
.top4_upper_left{
    width: 20.6vw;
    height: 19vw;
    margin: 3%; 
}
.top4_upper_left img{
    width: 20.6vw;
    height: 19vw;
}
.top4_upper_centre img{
    width: 100%;
    height: 19vw;
}
.top4_upper_right img{
    width: 100%;
    height: 19vw;
}
.top4_under_left img{
    width: 100%;
    height: 19vw;
}
h3{
    color: #FFFFFF;
    font-size: 2vw;
    font-family: spaceGroteskBold;
}
h2{
    color: #FFFFFF;  
    font-size: 2vw;
    margin-top: 120%;
    font-family: spaceGroteskBold; 
}


/* 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;
}
/* foot end */