#head_top{
    width: 100%;
    min-height:150vh;
    background-color:#f8f9fa;;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
}
#head_top>nav{
    width: 100%;
    height:80px;
    /* background-color:orange; */
    display: flex;
    margin-top:40px;
}
#head_top>nav>*{
    height: 100%;
    /* border:2px solid black; */
}
#head_top>nav>figure{
    width: 10%;
}
#head_top>nav>figure>a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#head_top>nav>figure>a>img{
    width: 80%;
    height: 80%;
    object-fit:contain;
}
#head_top>nav>ul{
    width: 70%;
    display: flex;
}
#head_top>nav>ul>li{
    height: 100%;
    /* border:2px solid white; */
    position: relative;
}
#head_top>nav>ul>li::after{
    content:'';
    display: block;
    width: 50%;
    height: 0;
    border:1px solid #079649;
    position: absolute;
    bottom: 0;left: 25%;
    opacity: 0;
    transition:.4s;
}
#head_top>nav>ul>li:hover::after{
    opacity: 1;
}
#head_top>nav>ul>li:first-child>a{
    color:#079649;
}
#head_top>nav>ul>li:first-child::after{
    opacity: 1;
}
#head_top>nav>ul>li>a{
    display: flex;
    height: 100%;
    align-items: center;
    padding:0 25px;
    color:black;
    text-transform: capitalize;
}
#head_top>nav>ul>li>a:hover{
    color:#079649;
}
#head_top>nav>section{
    width: 20%;
    /* border:2px solid black; */
    display: flex;
    justify-content: center;
    align-items: center;
}
#head_top>nav>section>a{
    display: flex;
    width: 70%;
    height: 80%;
    background-color:#000c35;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
    font-size:20px;
    font-weight:bold;
    text-transform: uppercase;
    border-radius:20px;
}
/* end of head_top  */

#banner_head_top{
    width: 80%;
    min-height:500px;
    /* border:2px solid black; */
    /* margin:0 auto; */
    margin-top:5%;
    display: flex;
}
#banner_head_top>section{
    width: 60%;
    min-height:300px;
    /* background-color:orange; */
}
#banner_head_top>section>h1{
    color:#079649;
}
#banner_head_top>section>h2{
    color:#000c35;
    font-size:40px;
    margin-block:30px;
}
#banner_head_top>section>p{
    color:#626981;
    font-size:20px;
    padding-right:50px;
}
#banner_head_top>figure{
    width: 40%;
    min-height:400px;
    /* background-color:gray; */
    text-align: right;
}
#banner_head_top>figure>img{
    width: 95%;
    height: 90%;
}


.app_head_top{
    width: 100%;
    height: 150px;
    /* background-color:red; */
    display: flex;
    align-items: center;
    /* justify-content: center; */
}
.app_head_top>a{
    display: flex;
    width: 230px;
    height: 70px;
    /* border:2px solid black; */
    margin-left:15px;
    border-radius:10px;
}
.app_head_top>a>img{
    width: 100%;
    height: 100%;
}
/* end of #head_top  */
#banner_video{
    width: 100%;
    min-height:100vh;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.banner_video-text{
    width: 70%;
    /* height: 100px; */
    /* background-color:orange; */
    text-align: center;
    padding:0 100px;
    margin:100px 0;
}
.banner_video-text>h3{
    font-size:60px;
}
.banner_video_img{
    width: 85%;
    min-height:500px;
    /* background-color:gray; */
    position: relative;
    display: flex;
    justify-content: center;
}
.banner_video_img::after,
.banner_video_img::before{
    content:'';
    display: block;
    width: 30%;
    height: 100%;
    /* border:2px solid black; */
    position: absolute;
    top: 0;
    background-image:url(../img/tutorial-left-banner.png);
    background-size: cover;
}
.banner_video_img::after{
    left: 0;
}
.banner_video_img::before{
    right: 0;
    transform: rotateY(180deg);
}
.banner_video_img>figure{
    width: 60%;
    height: 400px;
    /* background-color:black; */
    z-index:1;
    position: relative;
}
.banner_video_img>figure>img{
    width: 100%;
    height: 100%;
}
.banner_video_img>figure>span{
    display: flex;
    width: 100px;
    height: 100px;
    background-color:blue;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size:40px;
    position: absolute;
    top: calc(50% - 50px);
    left:calc(50% - 50px);
}