@charset "utf-8";
nav {
   display: block;
   float: left;
   width: 100%;
   margin-bottom: 30px;
                
            }
.nav ul{
   margin: 0;
   padding: 0;
            }
.nav li{
	position: relative;
	float: left;
	color: #333;
	list-style: none;
	background-color: #FFFFFF;
            }
.nav li a {
	display: block;
	padding: 15px 15px;
	color: #333;
	text-decoration: none;
	font-family: "微軟正黑體";
            }

.nav li:hover {
	
            }
.nav li ul {
	background-color: rgba(255,255,255,1);
	display: none;
	position: absolute;
	top: 100%;
            }
.nav li:hover ul {
	display: block;
	right: 0;
	left: 0;
	top: 100%;
            }
.toggle {
	display: none;
	font-size: 18px;
	font-weight: bold;
            }
.arrow-bottom {
	position: absolute;
	top: 25px;
	right: 13px;
	margin-left: 5px;
	border-top: 4px solid #FFF;
	border-right: 4px solid transparent;    
	border-left: 4px solid transparent;        
	width: 1px;
	height: 1px;
            }
@media (max-width: 768px) { 
.nav {
    display: none;
     }
.nav li{
	position: relative;
	float: left;
	color: #333;
	list-style: none;
	background-color: #3A3A3A;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #FFF;
            }
.nav li a {
	display: block;
	padding: 15px 15px;
	color: #FFF;
	text-decoration: none;
	font-family: "微軟正黑體";
	text-align: center;
            }
.toggle {
	display: inline-block;
	color: #FFF;
	background-color: #666666;
	float: right;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-right: 10px;
                }
.nav li{
    float: none;
                }
.nav li a{
    padding: 10px 15px;
                }
.nav li:hover ul {
	position: relative;
	display: block;
	background: transparent;
                }
.nav li:hover ul li{
     background: transparent;
                }
.nav li:hover ul li a{
     padding-left: 30px;
                }
.arrow-bottom {
     top: 20px;
                }
            }                
     /*   </style>*/