.navArea {text-align:left; font-family:"微軟正黑體","Microsoft JhengHei", Arial, Helvetica;}
.navArea .nav{z-index:98; left: 50%; top: 0; position: absolute; margin:0 0 0 -655px; }
.navArea .nav.fixed{position:fixed; margin:60px 0 0 -655px;}
.navArea .nav li{z-index:1; position:relative; display:block; width: 74px; height: 74px; background-color:#9d9d9d; border-radius: 50%; margin: 0 0 10px 0; text-align: center; color: #fff; font-size: 22px; line-height: 74px;}
.navArea .nav li:hover{background-color:#000; }
.navArea .nav a { display:block; color:inherit; text-decoration:none}
.navArea .nav i { z-index:-1; position: absolute; top:50%; left:50%; border-radius:44px; width:100%; height:100%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.navArea .nav .cate-hover i { background-color:#000;}



@media screen and (max-width:1220px){
.navArea {text-align:left; font-family:"微軟正黑體","Microsoft JhengHei", Arial, Helvetica;}
.navArea .nav{z-index:98; overflow-y: hidden; height:44px; background-color:#9d9d9d; width: 100%; left: inherit; top: inherit; margin: 0; position: fixed; bottom:0;}
.navArea .nav ul{width: 100%;}
.navArea .nav li{z-index: 1;position: relative;display: inline-block;height: 44px; width: 24%;background:none; border-radius: 0; margin: 0;line-height: 44px; font-size: 16px; }
.navArea .nav li:hover{background:none;}
.navArea .nav a { display:block; color:inherit; text-decoration:none;}
.navArea .nav li a:after{content: ""; width: 1px; height: 60%; position: absolute; right: 0; top: 20%; background-color: #fff;}
.navArea .nav li:last-child a:after{display:none;}
.navArea .nav i { z-index:-1; position: absolute; top:50%; left:50%; border-radius:44px; width:90%; height:60%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.navArea .nav .cate-hover i { background-color:#000;}
}/*media*/