﻿body{
	font-family:'Open Sans',"Myriad Set Pro","proxima-nova", "Helvetica Neue", "Helvetica","Noto Sans", "Noto Sans TC" ,Arial, sans-serif, "Microsoft JhengHei";
	line-height:1.5;
	font-size:16px;
	background-color:white;
	margin: 0px;
	padding: 0px;
	color:#313c52;
	
	
}

h1 {font-size:200%; margin-bottom: 0px ; margin-top:0}
h2 { font-size: 160%;  margin-bottom: 3px ; margin-top:0}
h3 {font-size: 120%; font-weight:bold; margin-bottom: 0px ; margin-top:0}


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


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


.fa-facebook-f{color:#c2b59b;padding: 0px 10px 5px 5px;font-size:20px;}
.fa-facebook-f:hover{color:#8e7a3f;}	
	
.fa-instagram{color:#c2b59b;padding: 0px 8px 2px 8px ;vertical-align:bottom;font-size:22px;}
.fa-instagram:hover{color:#8e7a3f;}

.fa-youtube-play{color:#c2b59b;	padding: 0px 8px 2px 8px ;vertical-align:bottom;font-size:22px;}
.fa-youtube-play:hover{color:#8e7a3f;}

.fa-line{color:#c2b59b;	padding:0px 8px 2px 8px ;vertical-align:bottom;font-size:22px;}
.fa-line:hover{color:#8e7a3f;}


.fa-shopping-cart{color:#c2b59b;padding: 5px 5px;font-size:18px;} 
.fa-shopping-cart:hover{color:#8e7a3f;}







a:link, a:visited{
  font-size:100%; 
  text-decoration:none;
  font-weight:bold;
}

p a:link {color:#1f2160;text-decoration:none;}
p a:visited {color:#1f2160;}
p a:hover {color:#d0cfcf;}
p a:active {color:#d0cfcf;}


@media screen and (max-width: 470px){
h1 {font-size:140%; }
h2 { font-size:120%;}
h3 {font-size:100%; font-weight:bold;}


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;
  font-weight:bold;
}
}

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

header a:link {color:#c2b59b;}
header a:visited{color:#c2b59b;}
header a:hover, a:active {color:#dcdcdc;}

header nav{
	background-color:#f2f3f5;
	opacity:0.9;
    width:100%;
    height:80px;  
    position:fixed;
    z-index:1000;
    
}


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

    
header nav div{
   text-align:center;
   display:inline-block;
   width:50%;
   margin-top:20px;
   padding:0;	
} 

header nav ul li{
	list-style:none;
	display:inline-block;
	margin-left:3%;
}

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


.mobile-menu, .mobile-header, .menu-icon, #menutoggle{
	display:none;
}

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

.DesktopHeader{
	display:none;
}

.mobile-menu, .mobile-header, .menu-icon, #menutoggle{
	display:inherit;
	z-index:1000;
}

.mobile-header{
	width:100%;
	height:100px;
	margin:auto;
	
	

}


#mobile-logo{  
   float:left;
   line-height:110px;

}

   
.mobile-menu{
	width:100%;
	height:auto;
	text-align:center;
	position:absolute;
	top:-600px;	
	background:#eeefef;
	
}

#mobile-logo img{
	width:80px;
	height:auto;
	padding-left:20px;
}


.mobile-menu ul{
	list-style:none;
	
}

.mobile-menu li{  
    width:50%; 
	display:block;
	margin:0 auto;
	padding:3% 0;
	text-align:center;
	border-bottom:1px solid #fff;
	clear:both;
}

.mobile-menu li:last-child{   
   border-bottom:none;
}


.mobile-menu a:link{
	text-decoration:none; 
	color:#1f2160;

}

.mobile-menu a:visited{
	color:#1f2160;
}


.menu-icon img{
    width:25px;
    height:auto;
    float:right;
    cursor:pointer;
	margin:10px;
	padding-top:28px;
	padding-right:20px;
}

#menutoggle{
	display:none;
}

#menutoggle:checked~.content{
	display:none;
}

#menutoggle:checked ~.mobile-menu{
	position:relative; 
	top:0px;
	
	
}
}





/*-----------------------Footer--------------------------*/


/*-----------------------Footer--------------------------*/
footer{  
   background:#313c52;
   position:relative;
   bottom:0;
   left:0;
   width:100%;
   height:200px;
   overflow:hidden;	

}

.bigtable{ 
    display:block;
   	width:80%;
	height:120px;
	margin:10px auto;
    margin-top:10px;
 
     
          
        
}


/*Left Column-logo*/
.leftcolumn{
    float:left;
    width:0;
	height:120px;
	margin:0;
	
}
.leftcolumn img{
    display:block;
	width:80px; 
    height:auto;
    margin:25px auto;
   
}

.middlecolumn {
    float:left;
    width:70%;
    height:120px;
    margin:0;
    padding:0;

    
   

}

   .pglinksL{
       float:left;
       width:40%;
       height:120px;
       margin:0 auto;
       padding:0 auto;
       border-right:0.5px solid #c2b59b; 
   
       
     }
      

   .pglinksR{
        float:left;
       width:50%;
       height:120px;
        margin:0 auto;
       padding:0 auto;
       border-right:0.5px solid #c2b59b;  
   
     }
     
    .pglinksR img{
    	width:20px;
    	height:auto;
   	    margin-bottom:-5px;

      }

 
    
footer nav ul {list-style:none;}
footer ul li  {display:block; color:#c2b59b;}
.bigtable a:link, a:visited {color:#c2b59b;}

footer nav ul li a:hover{ color:#8e7a3f;}
   


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

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

.rightcolumn nav ul li {       
      text-align:left;
      margin-bottom:0;
}





.smedia{
    float:left;
    width:100%;
    height:auto;
    margin:0;
    padding:0; 
    text-align:center;
  	
}

.smedia li{
    display:inline;
    margin:0 auto;
    width:35px;
    height:auto;
}

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

article.copyright p{
	text-align:center;
	color:#c2b59b;
}



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

footer{  
   background-color:#313c52; 
   position:relative;
   bottom:0;
   left:0;
   width:100%;
   height:100px;	  
}

.bigtable{ 
    float:left;
    left:0px;
	width:100%;
	height:150px;
	margin:0;
	
}	

.leftcolumn, .middlecolumn{
	display:none;
}

  
/*--Right Column--*/


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



article.copyright{
    display:none;

}
}

