html																	
	{																	
	height: 100%;	
	}																			
body																	
	{
	height: 100%;			
	line-height: 0px;
	margin: 0px;																			
	font-family: 'Trebuchet MS';				 																											
	position: relative;
	}	

svg																	
	{
	height: 3vw;						 
	width: 3vw;
	fill: #FFFFFF;																		
	}

/*************************************
*   desktop
*************************************/	
#desktop  
	{ 
	height: 6vw;
	width: 100%;
	
	background-color: #294A76;
	
	display: flex;
	flex-direction: row;
	}	
#desktop .block1
	{
	height: 100%;
	width: 20%;
	}	
#desktop .block2
	{
	height: 100%;
	width: 40%;
	}		
#desktop .body
	{
	height: 100%;
	width: 100%;
	font-weight: bold;	

	display: flex;
	justify-content: center;
	align-items: center;
	
	gap: 2vw;
	}
#desktop .logo
	{
	height: 100%;
	width: auto;
	}			
#desktop a 
	{ 
	color: white; 
	text-align: center; 
	text-decoration: none; 
	}	
	
/*************************************
*   moblie
*************************************/	
#moblie
	{
	height: auto;
	width: 100%;	
	display: none;
	}	

#moblie-section1
	{
	height: 100px;		
	color: #FFFFFF;
	text-shadow: 2px 2px 5px #000000;
	}	
#moblie-section1 .abs
	{
	background: rgba(41, 74, 118, 0.65);
	}
	
#moblie-section2
	{	
	border-top: 2px solid #FFFFFF;
	}	

#moblie-section3
	{
	border-top: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	}	

/*************************************
*   menu
*************************************/	
.menu
	{
	height: 50px;
	width: 100%;
	
	background-color: #294A76;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	}	
.menu .body
	{
	height: 100%;
	width: 100%;
	font-weight: bold;	
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	gap: 35px;
	}
.menu a 
	{ 
	color: white; 
	text-align: center; 
	text-decoration: none; 
	}

/*************************************
*   font
*************************************/	
.head
	{
	font-weight: bold;
	font-size: 2vw;
	line-height: 125%;
	}		
.body
	{	
	font-size: 1.5vw;
	line-height: 125%;
	}	
	
/*************************************
*   type1
*************************************/	
.type1
	{
	height: auto;	
	width: 100%; 
	}	
.type1 .banner
	{
	height: inherit;
	width: 100%; 

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
		
	object-fit: cover;
	position: absolute;
	z-index: 0;
	}
.type1 .abs 
	{
	height: inherit;
	width: 100%; 	
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	position: absolute;	
	z-index: 1;
	}		
.type1 #center 
	{
	position: relative;	
	}		
.type1 .head
	{
	text-align: center;
	}		
.type1 .body
	{
	text-align: center;
	}		
	
/*************************************
*   type2
*************************************/	
.type2
	{
	height: auto;
	width: 100%;
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	}		
.type2 .block
	{
	height: 100%;
	width: 50%;
	
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;	
	overflow: clip;
	
	display: flex;
	justify-content: center;
	align-items: center;
	}			
.type2 .text
	{
	width:90%; 	
	}	
.type2 .head
	{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	}	
	
/*************************************
*   type3
*************************************/	
.type3
	{
	height: auto;
	width: 100%;
	background: #294A76;	
	display: flex;
	justify-content: center;
	align-items: center;
	}	
.type3 div
	{
	height: 807px;
	width: 1205px;
	}
.type3 div iframe
	{
	height: 100%;
	width: 100%;
	}
			
/*************************************
*   type4
*************************************/
.type4
	{
	height: auto;
	width: 100%;
	
	display: flex;
	justify-content: center;
	flex-direction: row;
	}		
.type4 .block
	{
	height: auto;
	width: 33%;
	}	
.type4 .block .div2
	{
	height: 50%;
	width: 100%;
	}	
.type4 img
	{
	max-height: 100%;	
	max-width: 100%;	
	}		
.type4 .head
	{
	text-align: center;	
		
	display: flex;
	justify-content: center;
	align-items: flex-end;
	}		
.type4 .body
	{
	padding-left: 20px;
	text-align: center;	

	display: flex;
	justify-content: center;
	}	
.type4 .img
	{
	display: flex;
	justify-content: center;
	align-items: center;
	}	

/*************************************
*   type5
*************************************/	
.type5
	{
	height: auto;	
	width: 100%; 
	
	display: flex;
	justify-content: center;
	align-items: center;
	}						
		
/*************************************
*   body
*************************************/
#body
	{
	width:100%; 
	color: #294A76;
	background-color: #FFFFFF;
	float: left; 	
	}

/*************************************
*   footer
*************************************/		
#footer  
	{ 
	height: 15vw;
	width: 100%;
	background-color: #294A76;
	color: white; 
	text-align: center; 
	display: flex;
	flex-direction: row;
	}	
#footer .block
	{
	height: 100%;
	width: 33%;
	}	
#footer .block img
	{
	object-fit: contain;
	}	
#footer .subblock
	{
	height: 50%;
	width: 100%;
	
	align-items: flex-start;
	}	
#footer .head
	{
	width: 100%;	
	font-weight: bold;
	line-height: 125%;	
	display: flex;
	justify-content: center;
	align-items: flex-end;
	}	
#footer .body
	{
	width: 100%;	
	line-height: 125%;
	}
#footer .r1 .head 
	{
	height: 50%;
	}	
#footer .r1 .body
	{
	height: 50%;
	}	
#footer .logo
	{
	height: 100%;
	width: auto;
	}	
#footer .link 
	{ 
	padding-top: 5px;	
	display: flex;
	justify-content: center;
	flex-direction: row;	
	gap: 2vw;
	}			
#footer a 
	{ 
	color: white; 
	text-align: center; 
	text-decoration: none; 
	}
#footer .underline 
	{ 
	text-decoration: underline; 
	}	
/* Use a media query to add a breakpoint at 1020px: */
@media screen and (max-width: 1020px) 
	{
	svg																	
		{
		height: 18vw;						 
		width: 18vw;																	
		}	
	/*************************************
	*   desktop
	*************************************/	
	#desktop
		{
		display: none;
		}	
	
	/*************************************
	*   moblie
	*************************************/	
	#moblie
		{
		display: block;
		}	
		
	/*************************************
    *   font
    *************************************/	
    .head
    	{
    	font-weight: bold;
    	font-size: 8vw;
    	line-height: 125%;
    	}		
    .body
    	{	
    	font-size: 5vw;
    	line-height: 125%;
    	}
	
	/*************************************
	*   type2
	*************************************/	
	.type2 .block
		{
		width: 100%;
		}	
				
	/*************************************
	*   type3
	*************************************/	
    .type3 div
    	{
    	height: 90vh;
    	width: 92vw;
    	}
    	
	/*************************************
	*   type4
	*************************************/	
	.type4 .block
		{
		width: 100%;
		}	

	/*************************************
	*   footer
	*************************************/	
	#footer
		{
		height: auto;
		flex-direction: column;
		}
	#footer .logo
		{
		width: 100%;
		}
	#footer .block
		{
		width: 100%;
		}
	#footer .subblock
		{
		padding-bottom: 30px;
		}	
	#footer .link 
		{ 
		padding-top: 15px;
		gap: 5vw;
		}
	}