.wap-menu-wrapper {
  height: 100vh;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
  display: none;
  z-index: 9999;
}
.wap-menu-wrapper .wap-menu-close {
  position: fixed;
  top: 50%;
  right: calc((40% - 48px) / 2);
  z-index: 2;
  cursor: pointer;
  width: 48px;
  height: 48px;
  color: #0055ff;
  border-radius: 100%;
  transform: translateY(-50%);
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: all 300ms;
}
.wap-menu-wrapper .wap-menu-mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: rgba(134, 142, 150, 0.3);
}
.wap-menu-wrapper .wap-menu-container {
  width: 60%;
  overflow: scroll;
  height: 100vh;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  z-index: 10;
  position: relative;
  background: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.wap-menu-wrapper .wap-menu-container a {
  text-decoration: none;
}
.wap-menu-wrapper .wap-menu-container svg {
  width: 16px;
  height: 16px;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-title {
  display: flex;
  padding: 12px;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-title .wap-menu-title-text {
  flex: 1;
  padding-right: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-body {
  flex: 1;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: bold;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-body .wap-menu-item {
  margin-bottom: 12px;
  border-bottom: 1px dashed #dee2e6;
  padding: 0 8px;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-body .wap-menu-item.active > a svg {
  transform: rotate(180deg);
}
.wap-menu-wrapper .wap-menu-container .wap-menu-body .wap-menu-item > a {
  display: flex;
  align-items: center;
  color: #212529;
  margin-bottom: 12px;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-body .wap-menu-item > a .wap-menu-item-text {
  flex: 1;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-body .wap-menu-item > a svg {
  width: 24px;
  transition: all 300ms;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-body .wap-menu-item .wap-menu-item-children {
  display: none;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-body .wap-menu-item .wap-menu-item-children a {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
  font-size: 14px;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-body .wap-menu-item .wap-menu-item-children a:nth-last-child(1) {
  margin-bottom: 10px;
}
.wap-menu-wrapper .wap-menu-container .wap-menu-body .wap-menu-item .wap-menu-item-children a:hover {
  color: #0055ff;
}
.wap-menu-wrapper .wap-menu-modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  overflow: scroll;
  padding-bottom: 20px;
  display: none;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.3);
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-modal {
  position: absolute;
  z-index: 21;
  top: 24px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  background: #fff;
  box-shadow: rgba(100, 100, 111, 0.6) 0px 7px 29px 0px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-modal-title {
  padding: 0 16px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  border-bottom: 1px solid #dee2e6;
  font-weight: bold;
  letter-spacing: 2px;
  color: #495057;
  display: flex;
  align-items: center;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-modal-title .wap-menu-modal-title-text {
  flex: 1;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-modal-title svg {
  width: 14px;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-modal-body {
  padding: 16px;
  flex: 1;
  overflow: scroll;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-product-group {
  margin-bottom: 12px;
  letter-spacing: 1px;
  border-bottom: 1px dashed #dee2e6;
  padding-bottom: 12px;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-product-group:nth-last-child(1) {
  padding-bottom: 0;
  border-bottom: 0;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-product-group .group-title {
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: #495057;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-product-group .group-title img {
  width: 16px;
  margin-right: 8px;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-product-group .group-items {
  display: flex;
  flex-wrap: wrap;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-product-group .group-items a {
  margin-right: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: #212529;
  display: flex;
  white-space: nowrap;
  align-items: center;
  text-decoration: none;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-product-group .group-items a:hover {
  color: #0055ff;
}
.wap-menu-wrapper .wap-menu-modal-wrapper .wap-menu-product-group .group-items a svg {
  width: 12px;
  height: 12px;
}
.wap-menu-wrapper .wap-menu-solutions {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
}
.wap-menu-wrapper .wap-menu-solutions a.wap-menu-solutions-item {
  flex: 0 0 47%;
  margin-right: 6%;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  margin-bottom: 16px;
  letter-spacing: 1px;
  text-decoration: none;
}
.wap-menu-wrapper .wap-menu-solutions a.wap-menu-solutions-item:hover {
  color: #0055ff;
}
.wap-menu-wrapper .wap-menu-solutions a.wap-menu-solutions-item img {
  width: 20px;
  margin-bottom: 8px;
}
.wap-menu-wrapper .wap-menu-solutions a.wap-menu-solutions-item:nth-child(2n) {
  margin-right: 0;
}
.wap-menu-wrapper .wap-menu-modal-wrapper[data-modal-key="solutions"] .wap-menu-modal {
  display: block;
  bottom: unset;
  top: 50%;
  transform: translateY(-50%);
}
.wap-menu-wrapper .wap-menu-modal-wrapper[data-modal-key="solutions"] .wap-menu-modal-body {
  padding: 24px;
}
/*# sourceMappingURL=wap-menu.css.map */