@charset "utf-8";
.dialnav {
	display:block;
	top:0;
	right:0;
	position:fixed;
	width:0;
	height:423px;
}
.dialnav .container {
	position:absolute;
	left:0;
	top:0;
	width:320px;
	height:423px;
	/*
	overflow:hidden;
	*/
}
.dialnav .container .key {
	padding:0;
	margin:0;
	min-height:64px;
	min-width:64px;
	position:absolute;
	overflow:hidden;
}
.dialnav .container .key1 {
	background:url(img/key1.png) no-repeat right 100%;
}
.dialnav .container .key2 {
	background:url(img/key2.png) no-repeat right 100%;
}
.dialnav .container .key3 {
	background:url(img/key3.png) no-repeat right 100%;
}
.dialnav .container .key4 {
	background:url(img/key4.png) no-repeat right 100%;
}
.dialnav .container .key5 {
	background:url(img/key5.png) no-repeat right 100%;
}
.dialnav .list {
	margin-top:178px;
	width:156px;
	background:#ccc;
	position:relative;
	display:none;
}
.dialnav .list ul {
	padding:0;
	margin:0;
	left:0;
	top:0;
	width:100%;
	position:absolute;
	list-style:none;
	display:none;
	overflow:hidden;
	border-radius: 32px;
	-webkit-border-radius: 32px;
	-moz-border-radius: 32px;
}
.dialnav .list ul.an {
/*
	-webkit-border-bottom-right-radius:0;
	-moz-border-bottom-right-radius:0;
	border-bottom-right-radius:0;
	-webkit-border-bottom-left-radius:0;
	-moz-border-bottom-left-radius:0;
	border-bottom-left-radius:0;
*/
}
.dialnav .list li {
	display:none;
	width:156px;
	height:35px;
	line-height:35px;
	color:#333;
	font-size:13px;
	text-align:center;
}
.dialnav .list .title {
	width:86px;
	height:64px;
	padding-right:70px;
	line-height:64px;
	text-align:right;
	
}
.dialnav .list .line {
	border-top:1px solid #fff;
}
.dialnav .list a {
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	color:#333;
}
.dialnav .list .key1 {
	background:#a5c433;
}
.dialnav .list .key2 {
	background:#f2a32c;
}
.dialnav .list .key3 {
	background:#fc6d7b;
}
.dialnav .list .key4 {
	background:#55acee;
}
.dialnav .list .key5 {
	background:#fef26b;
}
.dialnav .list .off{
	background:#a5a5a5;
}
.dialnav .list .key1 .title {
	background:url(img/key1.png) no-repeat right top;
}
.dialnav .list .key2 .title {
	background:url(img/key2.png) no-repeat right top;
}
.dialnav .list .key3 .title {
	background:url(img/key3.png) no-repeat right top;
}
.dialnav .list .key4 .title {
	background:url(img/key4.png) no-repeat right top;
}
.dialnav .list .key5 .title {
	background:url(img/key5.png) no-repeat right top;
}
.dialnav .list .off .title {
	background-position:right 100%;
}
.dialnav .button ,
.dialnav .dial ,
.dialnav .back {
	position:absolute;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

.dialnav .open {
	background:#2b2c2c url(img/open.png) no-repeat center;
	width:50px;
	height:40px;
	left:-50px;
	top:191px;
	border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
	-moz-border-radius: 10px 0 0 10px;
	
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
.dialnav .close {
	background:url(img/close.png) no-repeat;
	width:97px;
	height:55px;
	left:148px;
	top:180px;
}
.dialnav .button:hover {
	/*background-position:0 100%;*/
}
.dialnav .dial {
	left:16px;
	top:100px;
	width:216px;
	height:216px;
	background:url(img/dial.png) no-repeat;
}
.dialnav .back {
	left:0px;
	top:60px;
	height:300px;
	width:300px;
	border-radius: 200px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
}