/* Generated by KompoZer
screen for phone
max-width:620px;
redmi note 6: 1080px;
I phone 6 plus
computer: 1280x800px;
*/

* {
  box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


body {

  position: relative;
  margin: 0;
  font-family: Verdana,"Trebuchet MS";
  font-size: 1em;


}

@font-face {
   font-family: swis721 cn bt bold;
   src: url(swis721-cn-bt-bold_0.ttf);
}

#header_container {
	text-align: center;
	background: white;
	width: 100%;


}

/*-------------------HEADER----------------*/


#header {
 z-index:99;
 display: flex;
 align-items: center;
 font-family: verdana;
 font-size: 14px;
 width: 1280px;
 height: 80px;
 margin: auto;
 padding-left: 100px;
 padding-right: 100px;
 background:white;

 /*
 opacity: 0.5;
 position:absolute;
 left: 50%;
 margin-left: -42.5vw;
 background-image: linear-gradient(rgba(255,255,255,1) 70%, rgba(255,255,255,0) 30%);

 */

}

#header_2{
	position: absolute;
	z-index: 999;
	display: flex;
	font-size: 0.8em;
	flex-wrap: wrap;
	width: 100%;
	height: 50px;

	padding-left: 140px;
	padding-right: 100px;
}

#header_2>p{
 display:flex;
 align-items: center;
 text-align: left;
 color:gray;

 line-height: 0.8em;


}

#header_2>p>a{
 cursor: pointer;	
 color:gray;
}


#social_media{
 display:flex;
 align-items: center;
 justify-content: space-between;
 width: 20%;
 margin-left: auto;
 margin-right: 1em;
}

#social_button{
 cursor: pointer;
 width: 30px;
}

#social_button:hover{
}


.img_logo{
 height: 57px;
}

#logo_text{
 display: none;
}


#mobile_menu_button{
 cursor: pointer;
 margin-left: auto;
 display: none;
}


#mobile_menu_button>img{
 width: 30px;
}



/*-------------------PC MENU----------------*/


#pc_menu{
 margin-left:auto;
 display: flex;
 justify-content: space-between;
 width: 80%;
 transform: translate(0, 15px);
 perspective: 1000px;
 height: 30px;

}

a{
text-decoration: none;
color: black;

}

.flip-box{
 width: 120px;
 color:gray ; /*green rgba(0,160,135,1)*/
 text-decoration: none;
 transition: transform 0.6s;
 transform-style: preserve-3d;
}

.flip-box-front{
text-align: center;
 position: absolute;
 width: 100%;
 line-height: 40px;
 backface-visibility: hidden;

}

.flip-box-back{
 text-align: center;
 position: absolute;
 width: 100%;
 line-height: 40px;
 transform: rotateY(180deg);
 backface-visibility: hidden;
 background-color:rgb(0,160,135); /*green*/
 color:white;

}

#pc_menu>a>div{

}


#pc_menu>a>div:hover{
 transform: rotateY(180deg);

}

#pc_menu>a>div:hover a{


}


@keyframes 3d {
  from {
	 transform: translate(0,-40px);
	 opacity:0;}
  to {
	 transform: translate(0, 0px);
	 opacity:1;
	}
}

/*-------------------MOBILE MENU----------------*/

#mobile_menu{
	position: absolute;
	z-index: 100;
	width: 70%;
	height: 0;
	display: flex;
	visibility: hidden;
	overflow: hidden;
	background: white;
	flex-direction: column;
	/*horizontal centering*/
	left: 0;
	right: 0;
	margin: auto;
	/*----------------*/
	font-size: 15px;
	border-top: 5px solid rgb(214,236,250);
	
}


.mobile_menu_scrolldown{
  animation-name: scrolldown;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes scrolldown {
  from {
	 height:0;
	 visibility: hidden;}
  to {
	height:50vh;
	visibility: visible;}
}

.mobile_menu_srollup{
  animation-name: scrollup;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes scrollup {
  from {
	 height:50vh;
	 visibility: visible;
	 }
  to {
	height:0;
	visibility: hidden;
	}
}

#mobile_menu>a{
	color: rgb(0,160,135);
	height: 8vh;
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgb(240,240,240);
}

#mobile_menu>a>div{
	display : hidden;
	width: 100%;
}

#mobile_menu>a>div:hover{
	color: rgb(214,236,250);
}


/*------------------------------------------*/


 
/*-----------------------------------*/

 #slide_button{
 display:flex;
 align-items: center;
  justify-content: center;
 width: 100%;
 height: 5 px;
 margin: auto;
 padding-left: 100px;
 padding-right: 100px;
 transform: translate(0,-15px); 
 }
 
 #slide_button>div{
  width: 80px;
  height: 7px;
  background: rgba(0,0,0,0.3);  
  margin-left: 3px;
  margin-right: 3px;
  cursor: pointer;
 }
 
 .slide_button_clicked{
  background: rgba(0,160,135,1) !important;
 }
 
 #topbutton {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  width: 50px;
  height: 50px;
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(0,160,135); /* Set a background color */
  background-image: url(picture/triangle_white.svg);
  background-size:  50%;
  background-position: center 17px;
  background-repeat: no-repeat;
  opacity: 0.5;
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 5000px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

/*-----------------------------------*/

@font-face {
   font-family: swis721 cn bt bold;
   src: url(swis721-cn-bt-bold_0.ttf);
}




 /*------------------------------------------*/

#footer{
 display: flex;
 margin-top: 30px;
 align-items: center;
 font-family: verdana;
 font-size: 12px;
 height: 150px;
 padding-left: 90px;
 padding-right: 90px;

}

#footer>#footer_menu{
 display: flex;
}

#footer_menu>div{
 color:rgb(0,0,0);
 text-decoration: none;
 text-align:center;
 margin-right: 20px;
 line-height:30px;
}

#footer_menu>div:hover a{
 color: rgb(0,160,135);
}



#footer_text{
margin-left: auto;
 text-align:center;

}


 /*------------------------------------------*/




@media only screen and (max-width: 500px){
	  /* For mobile phone: portrait */

    #header_container {
	 background: rgb(0,160,135);
	}

	#header{
	 width: 360px;
	 height: 50px;
     margin: auto;
	 padding-left: 15px;
	 padding-right: 15px;
	 background-color: rgb(0,160,135);
	}

	#header_2{
	position: relative;
    z-index: 1;
	width: 360px;
	margin: auto;

	padding-left: 15px;
	 padding-right: 15px;
	}



		
	.img_logo{
	 display: none;
	}
	
	#logo_text{
	 display: inline;
	 width: 45vw;
	 height: 50px;
	 
	 color: white;
	 background: url("picture/logo_text 2.png") left center/100% no-repeat;
	}

	
	#pc_menu{
	 display: none;
	}
	
	#mobile_menu_button{
	 display: inline;

	}

	#footer{
	 flex-flow:column;
	 height: 300px;
	  padding-left: 0px;
	  padding-right: 0px;
	}

	#footer_menu{
	 flex-flow:column;
	 margin-top: 30px;
	}

	#footer_text{
	 margin: auto;
	 font-size: 11px;
	}



}



@media screen and (min-width: 768px) and (orientation: portrait){
	  /* For tab: portrait */

	
	#header {
	 z-index:99;
	 display: flex;
	 align-items: center;
	 font-family: verdana;
	 font-size: 11px;
	 width: 768px;
	 height: 80px;
	 margin: auto;
	 padding-left: 50px;
	 padding-right: 50px;
	 background: rgb(0,160,135);
	}
		
	#header_2{
	position: relative;
    z-index: 1;
	font-size: 0.9em;
	width: 100%;
	margin: auto;
	padding-left: 50px;
	padding-right: 50px;
	}
	
	#header_2>p{
	
	}
		

	.flip-box{
	 width: 90px;
	 color: white; /*green*/
	 text-decoration: none;
	 transition: transform 0.3s;
	 transform-style: preserve-3d;
	}

	.flip-box-front{
	text-align: center;
	 position: absolute;
	 width: 100%;
	 line-height: 40px;
	 backface-visibility: hidden;

	}

	.flip-box-back{
	 text-align: center;
	 position: absolute;
	 width: 100%;
	 line-height: 40px;
	 transform: rotateY(180deg);
	 backface-visibility: hidden;
	 background-color: white; /*green*/
	 color: rgb(0,160,135);

	}


	#footer{
	 flex-flow:column;
	}

	#footer_menu{
	 margin-top: 30px;
	}

	
	#footer_text{
	 margin: auto;
	 margin-top: 30px;
	}

}


@media screen and (min-width: 550px) and (max-width: 900px) and (orientation: landscape){
	  /* For mobile phone: landscape*/
  	#header_container {
	 background: rgb(0,160,135);
   	}
   
	#header{
	 width: 100%;
	 height: 50px;
     margin: auto;
	 padding-left: 40px;
	 padding-right: 40px;
	 background: rgb(0,160,135);
   	
	}
	
	#header_2{
	position: relative;
    z-index: 1;
	width: 100%;
	margin: auto;
	padding-left: 40px;
	padding-right: 40px;
	}

	
	.img_logo{
	 display: none;
	}
	
	#logo_text{
	 display: inline;
	 width: 20vw;
	 height: 50px;

	 color: white;
	 background: url("picture/logo_text 2.png") left center/100% no-repeat;
	}
	
	#pc_menu{
	 display: none;
	}
	
	#mobile_menu_button{
	 display: inline;
	}
	
	@keyframes scrolldown {
	  from {
		 height:0;
		 visibility: hidden;}
	  to {
		height:75vh;
		visibility: visible;}
	}

	@keyframes scrollup {
	  from {
		 height:75vh;
		 visibility: visible;
		 }
	  to {
		height:0;
		visibility: hidden;
		}
	}

	#mobile_menu>a{
		height: 12vh;
	}
	
	

	#footer{
	 margin-top: 30px;
	 font-size: 9px;
	 height: 100px;
	 padding-left: 40px;
	 padding-right: 40px;
	}

	#footer_menu>div{
	 cursor: pointer;
	 color:rgb(0,0,0);
	 text-decoration: none;
	 text-align:center;
	 margin-right: 15px;
	 line-height:30px;
	}

	#footer_text{
	 margin-left: auto;
	 text-align: center;
	}


}



@media screen and (min-width: 1024px) and (max-width: 1200px) and (orientation: landscape){
	  /* For Tab: landscape*/
	
	
	#header{
	 width: 100%;
	 padding-left: 50px;
	 padding-right: 50px;
	}
	
	/*----*/ 
	#pc_menu{
	 font-size: 12px;
	}
	
		

		
	#header_2{
	position: relative;
    z-index: 1;
	font-size: 0.9em;
	width: 100%;
	margin: auto;
	padding-left: 50px;
	padding-right: 50px;
	}

	
		

	
}


@media only screen and (max-width: 999px){
/*For mobile menu
	#mobile_menu_button{
	 display: inline;
	}

	#pc_menu{
	 display: none;
	}
*/


	
}

@media only screen and (max-width:500px){
/*For iso logo*/


}