@charset "utf-8";
.pop-code{}
.pop-code .pop-dialog{ width: 135px; height: 135px;}
.pop-code .pop-dialog img{ display: block; width: 100%;}

.sidebar{ position: fixed; right: 0; z-index: 9;}
.sidebar li{ position: relative; cursor: pointer;}
.sidebar li + li{ margin-top: 8px;}
.sidebar .ico{ position: relative; width: 50px; height: 50px; border-radius: 50%; overflow: hidden;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}
.sidebar .ico img{ display: block; width: 100%;}
.sidebar .p{ position: absolute; top: 0; right: 0; padding: 0 50px 0 25px; border-radius: 25px; white-space: nowrap; color: #fff; line-height: 50px; opacity: 0; visibility: hidden;
	-webkit-transform: translateX(-20px) rotate(0deg);
	-moz-transform: translateX(-20px) rotate(0deg);
	transform: translateX(-20px) rotate(0deg);
	-webkit-transition: opacity 0.2s, transform 0.2s;
	-moz-transition: opacity 0.2s, transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
}
.sidebar .l1 .ico, .sidebar .l1 .p{ background-color: #244053;}
.sidebar .l2 .ico, .sidebar .l2 .p{ background-color: #2d7bad;}
.sidebar .l3 .ico, .sidebar .l3 .p{ background-color: #133984;}
.sidebar .l4 .ico, .sidebar .l4 .p{ background-color: #00a0e9;}
.sidebar .l5 .ico, .sidebar .l5 .p{ background-color: #12679d;}
.sidebar .l6 .ico, .sidebar .l6 .p{ background-color: #2d4f66;}
@-webkit-keyframes twinkling{
  0% {
      opacity: 0; 
  }
  100% {
      opacity: 1; 
  }
}
#shan {
    -webkit-animation: twinkling 1.1s infinite ease-in-out; 
}
.sidebar li:hover .p{ opacity: 1; visibility: visible;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

@media screen and (max-width: 750px){
	.p-show{ display: none;}
	
	.pop-code .pop-dialog{ width: 3rem; height: 3rem;}
	
	.sidebar li + li{ margin-top: 0.1rem;}
	.sidebar .ico{ width: 0.7rem; height: 0.7rem;}
	.sidebar .p{ padding: 0 0.8rem 0 0.4rem; border-radius: 0.4rem; line-height: 0.75rem;}

}