.el-dialog-skin {
  width: 50%;
  background: #fff;
}
.layui-layer.layui-layer-page.el-dialog-skin {
  border-radius: 10px !important;
}
.layui-dropdown,.layui-menu.layui-dropdown-menu {
  background-color: #fbead8;
}
.el-dialog header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog header {
  height: 80px;
}
.el-dialog header i {
  position: relative;
  top: -80px;
  left: 100%;
  font-size: 16px;
  font-weight: 600;
}
.el-dialog .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.el-dialog article{
  text-align: center;
  font-weight: 600;
}
.el-dialog footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.el-dialog footer .loginin {
  width: 200px;
  height: 30px;
  border: none;
  color: #ccc;
  border-radius: 15px;
}
.el-dialog footer .loginin.active {
  background-color: #EF5233;
  color: #fff;

}
.el-dialog footer .loginin.entry {
  margin-block: 10px;
}
.layui-layer-page .layui-layer-content {
  padding-right: 50px;
  padding-left: 50px;
  padding-block: 20px;
  /* background: #fff; */
}

.el-dialog #month-btn, #phone-btn {
  width: 50%;
  background-color: transparent !important;
  border: none;
  border-bottom: 1px solid #000;
}
#phone-btn {
  width: 100%;
}
.el-dialog input {
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0;

  border-bottom: 1px solid #000;
}
/* 復選框樣式 */
.layui-form-checkbox i {
  top: 3px;
}
.layui-form-checked[lay-skin=primary] i {
  border-color: #EF5233 !important;
  background-color: #EF5233 !important;
}

.layui-form-checkbox[lay-skin=primary]:hover i {
  border-color: #EF5233;
}
/* 驗證碼樣式 */
.el-dialog .vertify {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.el-dialog .vertify img {
  width: 50px;
  height: 50px;
  margin:  20px 0;
}
.el-dialog .vertify span:nth-child(2) {
  font-weight: 600;
  align-self: flex-start;
}
.el-dialog .vertify span:nth-child(3) {
  align-self: flex-start;
}
.el-dialog .vertify .numbers {
  display: flex;
  /* flex-wrap: wrap; */
  margin: 10px 0;
  align-self: flex-start;
}
.el-dialog .vertify .numbers button {
  width: 30px;
  height: 30px;
  border: none;
  background-color: #fdeadd;
  border-radius: 5px;
  margin-right: 20px;
}

.el-dialog .vertify > button {
  width: 200px;
  height: 30px;
  margin-block: 30px 10px;
  border: none;
  border-radius: 15px;
  color: #fff;
  background-color: #EF5233;
}


@media (max-width: 960px) {
  .el-dialog-skin {
    width: 80%;
    height: 300px;
    overflow: scroll;
    /* top: 100%; */
    /* transform: translateY(-50%); */
  }
  .el-dialog .vertify {
    width: 100%;
    flex-wrap: wrap;
  }
  .el-dialog .vertify img {
    width: 35px;
    height: 35px;
    margin:  10px 0;
    align-self: center;
  }
  .el-dialog .vertify .numbers {
    width: 100%;
  }
  .el-dialog header {
    height: 70px;
  }
  .el-dialog .vertify .numbers button {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    text-align: center;
    line-height: 20px;
  }
  .layui-dropdown {
    height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  footer button:nth-child(1) {
    margin-top: 10px;
  }
  .layui-layer-page .layui-layer-content {
    padding-right: 25px;
    padding-left: 25px;
  }
  .layui-row.layui-col-space20.nq-custom {
    display: flex;
  }
  .layui-row.layui-col-space20.nq-custom > div:nth-child(1) {
    width: 120px;
  }
  .layui-row.layui-col-space20.prefect-hobby {
    display: flex;
    flex-wrap: wrap;
  }
}

.layui-layer.layui-layer-dialog {
  /* height: 30px; */
  color: #EF5233;
  /* background-color: #fff; */
}