@font-face {
  font-family: "iconfont";
  src: url('iconfont.eot?t=1525831268431');
  /* IE9*/
  src: url('iconfont.eot?t=1525831268431#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAXQAAsAAAAACFwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kgGY21hcAAAAYAAAABlAAABnM7RaeVnbHlmAAAB6AAAAeEAAAIcgko88WhlYWQAAAPMAAAALgAAADYRUDLFaGhlYQAAA/wAAAAcAAAAJAfeA4VobXR4AAAEGAAAABAAAAAQD+kAAGxvY2EAAAQoAAAACgAAAAoBhADabWF4cAAABDQAAAAfAAAAIAETAF1uYW1lAAAEVAAAAUUAAAJtPlT+fXBvc3QAAAWcAAAAMwAAAESN6xTPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sU4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDyTYm7438AQw9zA0AAUZgTJAQAl8AyIeJzFkNENwCAIRA+wjWk6gTP0s+lA/eoITswaFtAfJ/DMQ7hcghHABkCMy0gAfSC4XnMpfMERfsJjc7bDdldlLa1NnYsikaMTT9KOZaJ1q2edUe8x+X/XgT1RueO+lg74BzzpD+MAAAB4nDWPPYsTYRDHn5nn9iW3m437ls1uXjcxu2o0YrJJCrnk5AK3hivCiSeiYPwAWqRJcYLbCBYKttfkziCIvXYHKrY22luIfoz46BOjwzD/YWb+Az8iEPL7Oz2lOWKSc+QKGZIxISA2oKphEfwwamIDbF+wHUujYS30pVq1SbfAqYpWttWNAkeUxAxoUIK23+qGTQyhE/XxKrSyRQA3790w6gWDvoDNXFh6wka4ALtcK2T6l9j1iwOrVTHlmWoYrmE8k0VBkBE3Mho8cLIpIbUpsldCxrNPy+exDKobenu305W8cf9p9LBYd1IASQJmvqK9HuiezvORlzUNVzqTlnNeunbWgtlPJWeqxeAH4UE563v6kW4ThRTIgHM2IdRAKoHTh15zhWyVsNXHKKDVoLNeasDbv+tV5adrgyXiY4h73Rgx7vbiD9cW7xbJzk6ykuHwJKXg9ODmFEHRFbgzuhDhvTieILQbo7ugYva/j9dv2/9sa2GyKh9MkdtlVZX3D1173N6dIE5222PbPdyXVbLBORLKaMKJFKITjxBT93XB1/2Ob/t1PZR0B3TedvgI6K9lQN+yL+wN+4qz+XzOQg5+Cy4v92iy5N8C1js6es4+HR/D1pwF8PnlCYsI+QMuIWyrAAAAeJxjYGRgYADiPWFuHfH8Nl8ZuFkYQOC6RHkKgv7fwMLA3ADkcjAwgUQBDXoJNQAAeJxjYGRgYG7438AQw8IAAkCSkQEVsAAARwoCbQQAAAAD6QAABAAAAAQAAAAAAAAAAHYA2gEOAAB4nGNgZGBgYGEIZGBlAAEmIOYCQgaG/2A+AwAREgFxAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgIWRiZGZkYWRlYGxgjM9tSg1Ly0zJ4crKzOxKiMxvzJVl4EBAHPECFgA') format('woff'),
  url('iconfont.ttf?t=1525831268431') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1525831268431#iconfont') format('svg');
  /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-gate-user:before {
  content: "\e61a";
}
.icon-gate-logo {
  margin-bottom: 5px;
}

.icon-gate-logo:before {
  content: "\e602";
}

.gate-tip {
  position: absolute;
  bottom: 1.33rem;
  left: 0;
  right: 0;
  height: 0.8rem;
  line-height: 0.8rem;
  background: #FF6C1E;
  color: #fff;
  font-size: 12px;
  padding: 0 15px;
  z-index: 999;
}

.gate-mask {
  position: absolute;
  bottom: 1.33rem;
  left: 0;
  right: 0;
  height: auto;
  background: #000;
  opacity: 0;
  z-index: 998;
}

.gate {
  position: absolute;
  bottom: 1.33rem;
  width: 100%;
  z-index: 999;
}

.gate-left {
  display: flex;
  align-items: center;
  left: -100%;
  height: 2.2rem;
  background: #FF6C1E;
}

.gate-left div:first-child {
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  width: 2.2rem;
}

.gate-left div:nth-of-type(2) {
  color: #fff;
  text-align: left;
  font-size: 13px;
  flex: 1;
}

.gate-left div:nth-of-type(2) span {
  color: #fff;
  font-size: 14px;
}

.gate-left div:last-child {
  color: #fff;
  text-align: center;
  font-size: 11px;
  width: 2.2rem;
}

.gate-center {
  left: 0;
  height: 0;
  display: flex;
  overflow: hidden;
}

.gate-right {
  left: 100%;
  width: 110%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.gate-item {
  width: 22%;
  flex: 0 0 auto;
  margin: 2px 1px 0;
}

.gate img {
  width: 100%;
  height: 100%;
}

.gate-shrink {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  color: #fff;
  border-radius: 1rem;
  background: #FF6C1E;
  font-size: 12px;
  bottom: 8.2rem;
  right: 15px;
  position: absolute;
  z-index: 999;
}

.gate-mask-overall {
  position: absolute;
  bottom: 1.33rem;
  top: 0;
  left: 0;
  right: 0;
  background: #000;
  opacity: 0.6;
  z-index: 998;
}