/* =========================================================按钮=========================================== */
.button {
  display: block;
width: 90px;
    height: 44px;
    float: left;
    margin-top: 17px;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
  display: block;
  position: absolute;
      top: 4px;
    width: 22px;
    height: 13px;
  background-color: #1c1d1f;
  -webkit-transition: -webkit-transform 300ms ease, box-shadow 300ms ease;
          transition: transform 300ms ease, box-shadow 300ms ease;
}
.button span:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: "Open Sans";
  font-weight: 800;
  font-size: 12px;
  -webkit-transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
          transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
}

.button span:first-of-type {
  left: 6px;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  -webkit-transform-style: preserve3d;
          transform-style: preserve3d;
  -webkit-transform-origin: right center;
      -ms-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform: perspective(2000px) rotateY(40deg);
          transform: perspective(2000px) rotateY(40deg);
  box-shadow: -1px 0 1px rgba(255, 255, 255, 0.1) inset, 4px 0 8px rgba(255, 255, 255, 0.1) inset, 1px 0 0 rgba(255, 255, 255, 0.1) inset, -10px 0 8px rgba(40, 42, 44, 0.9), -20px 0 8px rgba(28, 29, 31, 0.7), -30px 0 8px rgba(28, 29, 31, 0.4);
}
.button span:first-of-type:before {
  content: "中";
  color: rgba(0, 0, 0);
  text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
  font-size: 16px;
}
.button span:first-of-type:after {
  left: -1px;
}
.button span:last-of-type {
  right: 6px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
          transform-origin: left center;
  box-shadow: -1px 1px 1px rgba(255, 255, 255, 0.1) inset, 2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.button span:last-of-type:before {
  content: "英";
  color: #fff;
  text-shadow: 0 0 24px rgba(255, 72, 71, 0.6);
}
.button span:last-of-type:after {
  right: -1px;
  opacity: 0;
}
.button input[type="checkbox"] {
  display: none;
}
.button input[type="checkbox"]:checked ~ span:first-of-type {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1) inset, -2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.button input[type="checkbox"]:checked ~ span:first-of-type:before {
  color: #fff;
  text-shadow: 0 0 24px rgba(147, 201, 19, 0.6);
}
.button input[type="checkbox"]:checked ~ span:first-of-type:after {
  opacity: 0;
}
.button input[type="checkbox"]:checked ~ span:last-of-type {
  -webkit-transform: perspective(2000px) rotateY(-40deg);
          transform: perspective(2000px) rotateY(-40deg);
  box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1) inset, -4px 0 8px rgba(255, 255, 255, 0.1) inset, -1px 0 0 rgba(255, 255, 255, 0.1) inset, 10px 0 8px rgba(40, 42, 44, 0.9), 20px 0 8px rgba(28, 29, 31, 0.7), 30px 0 8px rgba(28, 29, 31, 0.4);
}
.button input[type="checkbox"]:checked ~ span:last-of-type:before {
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
}
.button input[type="checkbox"]:checked ~ span:last-of-type:after {
  opacity: 1;
}





 .button {
  width: 70px;
      height: 30px;
  background-color: #fff;
}
.button span{
	width: 29px;
	    height: 23px;
}
.button span:first-of-type:before {
 
  text-shadow: 1px 4px 6px #fff, 0 0 0 #fff, 1px 4px 6px #fff;
}
.button span:first-of-type {

    box-shadow: -1px 0 1px rgba(255,255,255) inset, 
    4px 0 8px rgba(255,255,255,.1) inset, 1px 0 0 rgba(255,255,255,.1) inset, 
    -10px 0 8px rgba(255,255,255, 0.9), -20px 0 8px rgba(255,255,255, 0.7), -30px 0 8px rgba(255,255,255, 0.4);
}
.button span {
   
    background-color: #fff;
}
.button input[type="checkbox"]:checked ~ span:last-of-type:before {
    color: rgba(0, 0, 0, 0.5);
    text-shadow: 1px 4px 6px #fff, 0 0 0 #fff, 1px 4px 6px #fff;
}
.button input[type="checkbox"]:checked ~ span:last-of-type {
   
   box-shadow: -1px 0 1px rgba(255,255,255) inset, 
    4px 0 8px rgba(255,255,255,.1) inset, 1px 0 0 rgba(255,255,255,.1) inset, 
    -10px 0 8px rgba(255,255,255, 0.9), -20px 0 8px rgba(255,255,255, 0.7), -30px 0 8px rgba(255,255,255, 0.4);
}
.button input[type="checkbox"]:checked ~ span:first-of-type:before {
    color: #333;
    text-shadow: 0 0 24px rgba(255, 72, 71, 1);
	
}
    .bian{
    	line-height: 15px;border-left: 1px solid red;
    }
    .button span:last-of-type:before {
  content: "英";
  color: #ff4847;
  text-shadow: 0 0 24px rgba(255, 72, 71, 0.6);
  font-size: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 1920px) {.yinc{display: none;}.zyw{ position: absolute;    right: -300%;z-index:100;
    margin-right: 0px;top: 26%;border-radius:3px;}}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .zyw{ position: absolute;    right: 7%;z-index:100;
    margin-right: 0px;top: 26%;border-radius:3px;}
}