.os {
	display:none;
	transition:all .3s ease;width:200px;cursor:default;
	position:fixed;z-index:800;top:50%;right:-160px;
	-ms-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
.os dt {
	width:40px;height:104px;text-align:center;background:#1d1f26;color:#fff;
	position:absolute;z-index:802;top:50%;left:0;
	-ms-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
.os dt i { display:block;line-height:1.5em;font-family:'iconfont';font-size:25px; }
.os dt div { font-size:12px; }
.os dt div span { display:block;margin-top:5px;line-height:1.2em;font-size:9px; }
.os dd { position:relative;margin-left:40px;padding:10px;width:130px;min-height:150px;border:5px solid #1d1f26;border-radius:2px;background:#1d1f26;overflow:hidden;}
.os dd span { font-family:'iconfont';font-size:12px;position:absolute;top:0;right:1px;color:#fff;cursor:pointer;opacity:.5; }
.os dd span:hover { opacity:1; }
.os dd h4 { height:26px;border-bottom:1px solid #2c2d32;font-size:16px;font-weight:normal;color:#fff;text-align:center; }
.os dd ul { list-style:none;margin:6px 0;height:100%;overflow:hidden; }
.os dd ul li { float:left;width:100%;margin:5px 0;overflow:hidden;border-radius:2px; }
.os dd ul li a { cursor:pointer;display:block;padding:2px;background:#fff;color:#1d1f26;overflow:hidden; }
.os dd ul li a:hover { background:#ededed; }
.os dd ul li em { display:block;float:left;width:25px;height:25px;overflow:hidden;text-align:center; }
.os dd ul li em img { width:100%;vertical-align:top; }
.os dd ul li i { display:block;float:left;margin-left:10px;line-height:25px;font-size:14px; }

.os.en dd ul li i { margin-left:5px;font-size:12px; }

.os.blue dt { background:#0078d1; }
.os.blue dd h4 { border-color:#2f8ed4; }
.os.blue dd { border-color:#0078d1;background:#0078d1; }
.os.blue dd ul li a { color:#0078d1; }
.os.blue dd ul li a:hover { background:#d1ebff; }

.os.green dt { background:#00877b; }
.os.green dd h4 { border-color:#41a299; }
.os.green dd { border-color:#00877b;background:#00877b; }
.os.green dd ul li a { color:#00877b; }
.os.green dd ul li a:hover { background:#e7fffd; }

.os.orange dt { background:#b88e45; }
.os.orange dd h4 { border-color:#cba96f; }
.os.orange dd { border-color:#b88e45;background:#b88e45; }
.os.orange dd ul li a { color:#b88e45; }
.os.orange dd ul li a:hover { background:#fff5e5; }

.os.powder dt { background:#d91354; }
.os.powder dd h4 { border-color:#e03b71; }
.os.powder dd { border-color:#d91354;background:#d91354; }
.os.powder dd ul li a { color:#d91354; }
.os.powder dd ul li a:hover { background:#ffe8f0; }

.os.red dt { background:#992c2b; }
.os.red dd h4 { border-color:#a14d4c; }
.os.red dd { border-color:#992c2b;background:#992c2b; }
.os.red dd ul li a { color:#992c2b; }
.os.red dd ul li a:hover { background:#ffe6e6; }


.os.open { right:10px; }
.os.open dd { box-shadow: rgba(0,0,0,.2) 0 0 10px 5px; }
/* .os:hover, .os.open { right:10px; }
.os:hover dd, .os.open dd { box-shadow: rgba(0,0,0,.2) 0 0 10px 5px; } */