.clearfix:before, .clearfix:after{ content:""; display:table;}
.clearfix:after { clear:both;}
.clearfix{ zoom:1;}

.snav{
	display:block;
}
.snav li span{
  	display:none;
}
#side{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  font-size:85%;
  overflow: hidden;
  width: 60px;
  box-shadow: 0 2px 1px 2px #ccc;
	color:#ffffff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #303030), color-stop(0.00, #222));
	background: -webkit-linear-gradient(#222, #303030);
	background: -moz-linear-gradient(#222, #303030);
	background: -o-linear-gradient(#222, #303030);
	background: -ms-linear-gradient(#222, #303030);
	background: linear-gradient(#222, #303030);
	background-color: #000000\9; /* IE10ˆÈ‰º */
  *background-color: #000000;   /* IE7ˆÈ‰º */
  _background-color: #000000; /* IE6 */
	}
	
#side ul{
  width: 200px;
	padding-top:20px;
}
#side li{
  white-space: nowrap;
  padding: 10px 15px 10px 0;
}
#side li a{
	display:block;
	height:30px;
	padding-left:60px;
	color:#ffffff;
}
#side li a:hover{
	background-position:12px bottom !important;
	padding-left:57px;
}
 #side.eu li a:hover{
	 border-left:3px solid #00af8f;
	 color:#cffff7;
 }
 #side.asia li a:hover{
	 border-left:3px solid #ef9d53;
	 color:#ffe5ce;
 }
 #side.japan li a:hover{
	 border-left:3px solid #ddd850;
	 color:#fffdca;
 }
 #side.namerica li a:hover{
	 border-left:3px solid #4b78ca;
	 color:#c7dbff;
 }
 #side.hawaii li a:hover{
	 border-left:3px solid #fb668d;
	 color:#ffccd9;
 }
 #side.oceania li a:hover{
	 border-left:3px solid #c18ed9;
	 color:#f1d1ff;
 }
#side li#logo a{
	background:url(../img/logo.png) no-repeat 15px 0;
}
#side li#icnpagetop a{
	background:url(../img/pagetop.png) no-repeat 15px 0;
}
#side li#icnback a{
	background:url(../img/back.png) no-repeat 15px 0;
}
/*area name*/
#side li#icneu a{
	background:url(../img/icon_eu.png) no-repeat 15px 0;
}
#side li#icnasia a{
	background:url(../img/icon_asia.png) no-repeat 15px 0;
}
#side li#icnjapan a{
	background:url(../img/icon_japan.png) no-repeat 15px 0;
}
#side li#icnnamerica a{
	background:url(../img/icon_namerica.png) no-repeat 15px 0;
}
#side li#icnhawaii a{
	background:url(../img/icon_hawaii.png) no-repeat 15px 0;
}
#side li#icnoceania a{
	background:url(../img/icon_oceania.png) no-repeat 15px 0;
}


#side li span{
	display:inline-block;
	padding-top:7px;
}
#side .bb{
	border-bottom:1px solid #f3f3f3;
	padding-bottom:15px;
	margin-bottom:10px;
}


@media screen and (max-width: 699px) {
  #side{
  	display:none;
  }
  .snav{
  	display:block;
  	position:fixed;
  	bottom:0;
  	width: 100%;
  	border-top:1px solid #ccc;
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #303030), color-stop(0.00, #222));
  	background: -webkit-linear-gradient(#222, #303030);
  	background: -moz-linear-gradient(#222, #303030);
  	background: -o-linear-gradient(#222, #303030);
  	background: -ms-linear-gradient(#222, #303030);
  	background: linear-gradient(#222, #303030);
		margin-top:100px;
  }
  .snav ul{
    width: 100%;
  }
  .snav li{
  	padding: 5px 0 0;
  	text-align:center;
  	width:20%;
  	float:left;
  }
  .snav li.bb{
    border-right: 1px solid #ccc;
  }
  .snav li a{
  	display:block;
  	height:30px;
		border-bottom:3px solid #303030;
  }
	 .snav.eu li a:hover{
		 border-bottom:3px solid #00af8f;
	 }
	 .snav.asia li a:hover{
		 border-bottom:3px solid #ef9d53;
	 }
	 .snav.japan li a:hover{
		 border-bottom:3px solid #ddd850;
	 }
	 .snav.namerica li a:hover{
		 border-bottom:3px solid #4b78ca;
	 }
	 .snav.hawaii li a:hover{
		 border-bottom:3px solid #fb668d;
	 }
	 .snav.oceania li a:hover{
		 border-bottom:3px solid #c18ed9;
	 }
  .snav li#logo a{
  	background:url(../img/logo@2x.png) no-repeat 50% 50%;
		background-size: 30px 30px;
  }
  .snav li#icndaymenu a{
  	background:url(../img/daymenu@2x.png) no-repeat 50% 50%;
		background-size: 30px 30px;
  }
  .snav li#icnpagetop a{
  	background:url(../img/pagetop@2x.png) no-repeat 50% 50%;
		background-size: 30px 30px;
  }
  .snav li#icnback a{
  	background:url(../img/icon_back@2x.png) no-repeat 50% 50%;
		background-size: 30px 30px;
  }
/*area name*/
  .snav li#icneu a{
  	background:url(../img/icon_eu@2x.png) no-repeat 50% 0;
		background-size: 30px 60px;
  }
  .snav li#icnasia a{
  	background:url(../img/icon_asia@2x.png) no-repeat 50% 0;
		background-size: 30px 60px;
  }
  .snav li#icnjapan a{
  	background:url(../img/icon_japan@2x.png) no-repeat 50% 0;
		background-size: 30px 60px;
  }
  .snav li#icnnamerica a{
  	background:url(../img/icon_namerica@2x.png) no-repeat 50% 0;
		background-size: 30px 60px;
  }
  .snav li#icnhawaii a{
  	background:url(../img/icon_hawaii@2x.png) no-repeat 50% 0;
		background-size: 30px 60px;
  }
  .snav li#icnoceania a{
  	background:url(../img/icon_oceania@2x.png) no-repeat 50% 0;
		background-size: 30px 60px;
  }

}