/*-------------------------
	GENERAL STYLE CSS
	Body, Fonts, links
-----------------------*/

body{
	
	font-family:'Roboto','Noto Sans TC', 'Noto Sans SC',sans-serif!important;
	line-height:1.5;
	font-size:16px;
	background:#001722;
	margin:0px;
	padding:0px;
	color:#fff;
	z-index:800;
		
}


.content{
    width:100%;
	position:absolute;
	top:0;
	background:#001722;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	
}




/*------------------------
         FONTS
-------------------------*/

h1 {font-size: 300%; margin-bottom: 0; margin-top: 0;letter-spacing:0.1em; color:#47B4DA;}
h2 {font-size: 220%; margin-bottom: 0; margin-top: 0;letter-spacing:0.1em; color:#47B4DA;}
h3 {font-size: 180%; margin-bottom: 0; margin-top: 0;letter-spacing:0.1em; color:#47B4DA;}
h4 {font-size: 120%; margin-bottom: 0; margin-top: 0;letter-spacing:0.1em; color:#0a0c22;}

p        {font-size: 100% ;margin-bottom: 0; margin-top:0;}
p.strong {font-weight:bold;}
p.small  {font-size: 80% ;margin-bottom: 0; margin-top:0;}


/*------------------------
         LINKS 
-------------------------*/

a:link, a:visited{
  
  text-decoration:none;
  background-color:transparent;
  letter-spacing:0.03em; 
  color:#47B4DA;
}


.boxlink a:link    {color:#47B4DA ; border:1.5px solid #47B4DA; padding:10px 30px; border-radius:50px; font-weight:bold; font-size:80%; letter-spacing:0.1em;}
.boxlink a:hover   {background:#47B4DA; border:1.5px solid #47B4DA;color:#fff;}





@media screen and (max-width: 768px){

h1 {font-size:140%;}
h2 {font-size:120%;}
h3 {font-size:100%; font-weight:bold;}
h4 {font-size: 80%;  margin-bottom: 0; margin-top: 0;letter-spacing:0.05em;}



p    {font-size: 90% }
ul li{font-size: 90% }
p.strong {font-weight:bold; }
p.small  {font-size: 80% ;}

a:link, a:visited{font-size:90%; text-decoration:none;}

}

     
    
/*------------------------
         Fa Fa ICONS 
-------------------------*/

.fa-search {color:#fff;padding: 5px 5px;font-size:18px;}
.fa-search:hover{color:#fff;}

.fa-facebook-f{color:#47B4DA ;padding: 5px 10px 5px 5px;font-size:18px;}
.fa-facebook-f:hover{color:#fff;}	
	
.fa-instagram{color:#47B4DA ;padding: 20px 8px 2px 8px ;vertical-align:bottom;font-size:20px;}
.fa-instagram:hover{color:#fff;}

.fa-youtube-play{color:#47B4DA ;	padding: 20px 8px 2px 8px ;vertical-align:bottom;font-size:20px;}
.fa-youtube-play:hover{color:#fff;}

.fa-chevron-circle-right {color:#47B4DA;}




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

.ipad-header, .mobile-header {display:none;}


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


header a:link   {color:#47B4DA ; font-size:100%; letter-spacing:0.15em;}
header a:visited {font-size:100%;}
header a:active {background:none;}



/*-------------------------
  Header Scrolled Effects
---------------------------*/

/*--Header background color changed when scrolled--*/
.headeractive {
    background:#001722;
}



/*-------------------------
  Language Switch Effects
---------------------------*/


/*--Language Selections Button--*/

.language-selections {
   text-align:right;
   display:inline-block;
   width:28%;
   margin:10px 0;
   padding-right:0;  
}

.language-selections ul li {
   text-align:center;
   display:inline-block;
   padding:5px;
   margin:0;
   font-size:small;  
}





/*---------------Header Container------------------*/

header{
    width:100%;
    height:80px;  
    position:fixed;
    z-index:1000;
    overflow:hidden;
}


/*--Logo Container--*/

header nav div.logo {
   text-align:left;
   display:inline-block;
   float:left;
   width:12%;
   margin:10px 0;
   padding-left:40px;	
} 

.logo img{
   width:180px;
   height:auto;	
}




/*--STYLE-2: Menu with underline hover--*/

/*---------------------------------
    HEADER MENU STYLES
-----------------------------------*/


/*--Middle (Categories)--*/

.top-category{
	text-align:right;
	display:inline-block;
	width:75%;
	margin-top:10px;
	padding-left:40px; 
} 


.top-category ul li{
	color:#47B4DA; 
	font-size:100%;
	font-weight:bolder;	
	letter-spacing:0.2em;
	cursor:pointer;
}


.top-category ul li:after {    
	background: none repeat scroll 0 0 transparent;
	bottom: 0;
	content: "";
	display: block;
	height: 3px;
	left: 50%;
	position: relative;
	background: #47B4DA;
	transition: width 0.3s ease 0s, left 0.3s ease 0s;
	width: 0;
}


.top-category ul li:hover:after { 
  width: 100%; 
  left: 0; 
}







/*---------------Menu and right icons container-------*/

header nav div ul {
	list-style:none;
	text-align:right;
	position:relative;
	margin:-10px;
	padding:0;
	
		
}

header nav div ul li {
	display:inline-block;
	margin-top:0;
	padding:1.9em 1em 5em 1em;
			
}




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


@media screen and (max-width:820px){

	.top-category ul li:after { 
		width:0; 
		left: 0; 
	  }

	  .top-category ul li:hover:after { 
		width:0; 
		left: 0; 
	  }

}






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


@media screen and (max-width:470px){

.DesktopHeader, .ipad-header {
	display:none;
}


.mobile-header {
    display:inherit;
	position:fixed;
	width:100%;
	height:75px;
	margin:0 auto;
	z-index:1000;

		
}

.mobile-header-innerdiv {
    display:grid; 
    width:95%; 
    height:auto; 
    padding-top:15px;
	grid-template-columns: 80% 20%;	
}

.mobile-logo {	
	text-align:left;
	padding:0;
	margin:0;
}

.mobile-toggle {
	text-align:right;

}





   
.mobile-logo img {
	width:150px;
	text-align: left;
	padding:0;
	margin:0;		
}



}




/*------------------------------------------------------------------------------------------------------------------------------
         													FOOTER
--------------------------------------------------------------------------------------------------------------------------------*/


/*---LINKS---*/

footer nav ul {list-style:none;}
footer ul li  {display:block; color:#47B4DA ; text-align:left; font-size:90%;}
footer a:hover{color:#47B4DA ;}
footer a:link, a:visited {color:#47B4DA ; font-size:100%; background:none;}


/*-------------------------------------
    DESKTOP, IPAD-PRO FOOTER
--------------------------------------*/



footer {  
   background:#001722;
   position:relative;
   bottom:0;
   left:0;
   width:100%;
   height:80px;
   margin-top:0;
   overflow:hidden;
   z-index:900;	
  
}

.bigtable{ 
    display:block;
   	width:70%;
	height:120px;
	margin:10px auto;
    margin-top:30px;
    text-align:center;                
}


/*--Left Column--*/

.leftcolumn{
    float:left;
    width:32%;
    margin:0;
    padding:0;  	
}


.leftcolumn nav li p{
       font-weight:bold;
       text-align:left;  
}


/*--Middle Column--*/

.middlecolumn {
    float:left;
    width:32%;
    margin:0;
    padding:0;
}

.middlecolumn nav li p{      
       font-weight:bold;
       text-align:left;   
}



/*--Right Column--*/


.rightcolumn { 
    float:left;
    width:32%;
    margin:0;
    padding:0;
   
}

.rightcolumn nav li p{       
       font-weight:bold;
       text-align:center;
 
}

.rightcolumn nav ul li {       

       text-align:center;
       margin-left:0;   
}

.rightcolumn img{
    display:inline;
	width:30px; 
    height:auto;
    padding:6px;
    margin-top:10px;  
}


article.copyright{
    width:100%;
    height:50px;
	position:absolute;
	bottom:8px;
	font-size:80%;
	text-align:center;
	margin:0 auto;		
}


article.copyright p{
	text-align:center;
	color:#47B4DA ;
	padding-top:10px;	
}




/*-------------------------------------
         	IPAD FOOTER
--------------------------------------*/




/*-------------------------------------
         	IPHONE FOOTER
--------------------------------------*/