*{
    margin:0;
    padding: 0;
    box-sizing: border-box; 
}
header{
    width:100%;
    position: fixed;
    top:0;
    left:0;
    padding: 0 80px;
    box-sizing: border-box;
    z-index: 50;
    background-color: darkgray;
    height: 65px;
    
}

header .logo{
  height: 60px;
  line-height: 50px;
  float: left;
  font-weight: bold;
  margin-top: 5px;
  
}


header nav{
  float:right;
}
header nav ul{
  margin: 0;
  padding: 0;
  display: flex; 
 	
 
}
header nav ul li{
  list-style: none;
  position: relative;
  margin: 0 20px;
  width:210px;
	
}
header nav ul .globalcase, header nav ul .globalcase ul li{
  width:230px;
}
header nav ul .joincase, header nav ul .joincase ul li{
  width:210px;
}

header nav ul .supportingcase, header nav ul .supportingcase ul li{
	width:280px ;
}
header nav ul .aboutcase,header nav ul .aboutcase ul li{
    width:160px;
}


header nav ul .sub-menu:before{
  content: '\f0d7';
  font-family: FontAwesome;
  font-style: normal;
  position: absolute;
  line-height: 65px;
  color: #fff;
  right:5px;
}

header nav ul li ul{
  position: absolute;
  right:0;
  background: #333;
  display: none;
 
}

header nav ul li.fronthover:hover ul{
  display: block;
}
header nav ul li ul li{
  display: block;
  
  padding: 0px;
  margin: 0px;
  height: 100px;
}
header nav ul li ul li a{
  width:100%;
  height: 100%;
  line-height: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
header nav ul li ul li a:hover{
  color:#fff;
  background-color: aqua;
}




header nav ul li a{
  height: 65px;
  line-height: 65px;
  padding: 0 20px;
  color: #fff;
  display: block;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight:bolder;
  font-size: 1rem;
  
  
}
header nav ul li a:hover{
  color:#fff;
  background-color: cadetblue;
  text-decoration: none;
}
.menu-toggle{
  color:#fff;
  float: right;
  line-height: 65px;
	height: 65px;
  font-size: 24px;
  cursor: pointer;
  display: none;
}
.big-image{
  width: 100%;
  margin-top: 65px;
  height: 500px;
  background-image: url(../images/main_image.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

@media (max-width:1300px){
  main{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    padding: env(safe-area-inset);
    overflow: hidden;
  }
  header{
    padding: 0 20px;
    
  }
  .menu-toggle{
    display: block;
  }
  header nav{
    
    position: absolute;
    width: 100%;
    height: calc(100vh - 65px);
    background: #333;
    top:65px;
    left:-100%;
    transition: 0.5s;
  }
  header .active{
    left:0px;
  }
  header nav ul{
    display: block;
    text-align: center;
  }
  header nav ul li{
    margin: 0;
    
  }	
  
  header nav ul li a{
    height: 60px;
    line-height: 60px;
  }
  
  header nav ul li.active ul{
    position: relative;
  }
  header nav ul li ul li{
    width:100%;
    background-color:#92828D;
    height: 50px;
  }
  
  header nav ul .globalcase, header nav ul .globalcase ul li, header nav ul .joincase, header nav ul .joincase ul li, header nav ul .supportingcase, header nav ul .supportingcase ul li,header nav ul .aboutcase,header nav ul .aboutcase ul li{
    width:100%;
  }
  header nav ul li.active ul{
  display: block;
  }
  
  
}