.el-dialog-skin {
  width: 50%;
  background: #fff;
}

.el-dialog-skin-m {
  width: 100%;
  background: #fff;
}

.el-dialog-skin-m-h150 {
  width: 80%;
  height: 150px;
  background: #fff;
}

.el-dialog-skin-35 {
  width: 35%;
  background: #fff;
}

.el-dialog-skin-25 {
  width: 25%;
  background: #fff;
}

.el-dialog-ads-skin {
  width: 30%;
  border-radius: 30px;
  background-image: linear-gradient(to right, rgba(241,120,96,1), rgba(239,82,51,1));
}
.el-dialog-ads-skin2 {
  width: 50%;
  border-radius: 30px;
  background-image: linear-gradient(to right, rgba(241,120,96,1), rgba(239,82,51,1));
}


.el-dialog-loading-skin {
  width: 10%;
  background: rgba(0,0,0,0.1);

}

.layui-layer.layui-layer-page.el-dialog-skin {
  border-radius: 10px !important;
}
.layui-layer.layui-layer-page.el-dialog-skin-35 {
  border-radius: 10px !important;
}
.layui-layer.layui-layer-page.el-dialog-skin-25 {
  border-radius: 10px !important;
}
.layui-layer.layui-layer-page.el-dialog-skin-m {
  border-radius: 10px !important;
}
.el-dialog-skin-m-h150 {
  border-radius: 10px !important;
}
.layui-dropdown,.layui-menu.layui-dropdown-menu {
   background-color: white;
  /* background-color: #FFEADD; */
}
.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: linear-gradient(91.86deg, #F3743D 0%, #EF5233 100%);
  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; */
  width: 150px;
  height: 150px;
  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;
  margin-left: 20px;
  /* 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 .numbers .field {
  width: 30px;
  height: 30px;
  border: none;
  background-color: #fdeadd;
  border-radius: 5px;
  margin-right: 20px;
  text-align: center;
}

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

/* 歡迎樣式 */
.el-dialog .greeting {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.el-dialog .greeting img {
  width: 50px;
  height: 50px;
  margin:  20px 0;
}

/* 註冊電話驗證樣式 */
.el-dialog-register-verify .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.el-dialog-register-verify input {
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0;

  border-bottom: 1px solid #000;
}
.el-dialog-register-verify header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog-register-verify header {
  height: 80px;
}
.el-dialog-register-verifyheader i {
  position: relative;
  top: -50px;
  left: 100%; /** important **/
  font-size: 16px;
  font-weight: 600;
}
.el-dialog-register-verify .vertify {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.el-dialog-register-verify article{
  text-align: center;
  font-weight: 600;
}
.el-dialog-register-verify .vertify img {
  width: 150px;
  height: 150px;
  margin:  20px 0;
}
.el-dialog-register-verify .vertify span:nth-child(2) {
  font-weight: 600;
  align-self: flex-start;
}
.el-dialog-register-verify.vertify span:nth-child(3) {
  align-self: flex-start;
}
.el-dialog-register-verify .vertify .numbers {
  display: flex;
  /* flex-wrap: wrap; */
  margin: 10px 0; 
  margin-left: 20px;
  /* align-self: flex-start; */
}
.el-dialog-register-verify .vertify .numbers button {
  width: 30px;
  height: 30px;
  border: none;
  background-color: #fdeadd;
  border-radius: 5px;
  margin-right: 20px;
}
.el-dialog-register-verify .vertify .numbers .field {
  width: 30px;
  height: 30px;
  border: none;
  background-color: #fdeadd;
  border-radius: 5px;
  margin-right: 20px;
  text-align: center;
}
.el-dialog-register-verify .vertify > button {
  width: 200px;
  height: 30px;
  margin-block: 30px 10px;
  border: none;
  border-radius: 15px;
  color: #fff;
  background-color: #EF5233;
}


/* 登入樣式 */
.el-dialog-login input {
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0;

  border-bottom: 1px solid #000;
}

/* 新登入樣式 */
.el-dialog-login header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog-login header {
  height: 80px;
}
.el-dialog-login header i {
  position: relative;
  top: -50px;
  left: 100%; /** important **/
  font-size: 16px;
  font-weight: 600;
}

.el-dialog-login .login {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.el-dialog-login article{
  text-align: center;
  font-weight: 600;
}
.el-dialog-login footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.el-dialog-login footer .loginin {
  width: 200px;
  height: 30px;
  border: none;
  color: #ccc;
  border-radius: 15px;
}
.el-dialog-login footer .loginin.active {
  background: linear-gradient(91.86deg, #F3743D 0%, #EF5233 100%);
  color: #fff;

}
.el-dialog-login footer .loginin.entry {
  margin-block: 10px;
}

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


/* 忘記密碼樣式 */

.el-dialog-forgot-pwd input {
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0;

  border-bottom: 1px solid #000;
}

.el-dialog-forgot-pwd header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog-forgot-pwd header {
  height: 80px;
}
.el-dialog-forgot-pwd header i {
  position: relative;
  top: -50px;
  left: 100%; /** important **/
  font-size: 16px;
  font-weight: 600;
}

.el-dialog-forgot-pwd .login {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.el-dialog-forgot-pwd article{
  text-align: center;
  font-weight: 600;
}
.el-dialog-forgot-pwd footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.el-dialog-forgot-pwd footer .loginin {
  width: 200px;
  height: 30px;
  border: none;
  color: #ccc;
  border-radius: 15px;
}
.el-dialog-forgot-pwd footer .loginin.active {
  background: linear-gradient(91.86deg, #F3743D 0%, #EF5233 100%);
  color: #fff;

}
.el-dialog-forgot-pwd footer .loginin.entry {
  margin-block: 10px;
}

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



/* 電話驗證樣式 */


.el-dialog-verify .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


.el-dialog-verify input {
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0;

  border-bottom: 1px solid #000;
}

.el-dialog-verify header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog-verify header {
  height: 80px;
}
.el-dialog-verify header i {
  position: relative;
  top: -50px;
  left: 100%; /** important **/
  font-size: 16px;
  font-weight: 600;
}


.el-dialog-verify .vertify {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.el-dialog-verify article{
  text-align: center;
  font-weight: 600;
}
.el-dialog-verify .vertify img {
  width: 150px;
  height: 150px;
  margin:  20px 0;
}
.el-dialog-verify .vertify span:nth-child(2) {
  font-weight: 600;
  align-self: flex-start;
}
.el-dialog-verify .vertify span:nth-child(3) {
  align-self: flex-start;
}
.el-dialog-verify .vertify .numbers {
  display: flex;
  /* flex-wrap: wrap; */
  margin: 10px 0; 
  margin-left: 20px;
  /* align-self: flex-start; */
}
.el-dialog-verify .vertify .numbers button {
  width: 30px;
  height: 30px;
  border: none;
  background-color: #fdeadd;
  border-radius: 5px;
  margin-right: 20px;
}

.el-dialog-verify .vertify .numbers .field {
  width: 30px;
  height: 30px;
  border: none;
  background-color: #fdeadd;
  border-radius: 5px;
  margin-right: 20px;
  text-align: center;
}

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


/* 重設密碼樣式 */

.el-dialog-reset-pwd .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


.el-dialog-reset-pwd input {
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0;

  border-bottom: 1px solid #000;
}

.el-dialog-reset-pwd header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog-reset-pwd header {
  height: 80px;
}

.el-dialog-reset-pwd article{
  text-align: center;
  font-weight: 600;
}

.el-dialog-reset-pwd .vertify{
  text-align:center
}

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



/* 成功重設密碼樣式 */

.el-dialog-reset-pwd-success .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


.el-dialog-reset-pwd-success input {
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0;

  border-bottom: 1px solid #000;
}

.el-dialog-reset-pwd-success header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog-reset-pwd-success header {
  height: 40px;
}

.el-dialog-reset-pwd-success article{
  text-align: center;
  font-weight: 600;
}


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

.el-dialog-reset-pwd-success .content img {
  width: 50px;
  height: 50px;
  margin:  20px 0;
}



/* 成功對話框樣式 */

.el-dialog-success .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.el-dialog-success input {
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0;

  border-bottom: 1px solid #000;
}

.el-dialog-success header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog-success header {
  height: 40px;
}

.el-dialog-success article{
  text-align: center;
  font-weight: 600;
}


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

.el-dialog-success .content img {
  width: 50px;
  height: 50px;
  margin:  20px 0;
}


/* 失敗對話框樣式 */

.el-dialog-fail .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.el-dialog-fail input {
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0;

  border-bottom: 1px solid #000;
}

.el-dialog-fail header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog-fail header {
  height: 40px;
}

.el-dialog-fail article{
  text-align: center;
  font-weight: 600;
}


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

.el-dialog-fail .content img {
  width: 50px;
  height: 50px;
  margin:  20px 0;
}


/* 搜索樣式 #手機版 */
.el-dialog-search header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-dialog-search header {
  height: 40px;
}

.el-dialog-search header i {
  position: relative;
  top: -40px;
  left: 50%; /** important **/
  font-size: 16px;
  font-weight: 600;
}

.el-dialog-search article{
  text-align: center;
  font-weight: 600;
}

.el-dialog-search .content {
  position: relative;
  top: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


/* 載入中話框樣式 */

.el-dialog-loading .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

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

.el-dialog-loading .content img {
  width: 50px;
  height: 50px;
  margin:  20px 0;
}



/* 會員樣式 #手機版 */
.el-dialog-member header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-dialog-member header {
  height: 40px;
}

.el-dialog-member header i {
  position: relative;
  top: -50px;
  left: 50%; /** important **/
  font-size: 16px;
  font-weight: 600;
}

.el-dialog-member article{
  text-align: center;
  font-weight: 600;
}

.el-dialog-member .content {
  position: relative;
  top: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}



/* 註冊成功樣式  */
.el-dialog-greeting header .logo {
  width: 35px;
  height: 35px;
  background-color: #ccc;
  margin: 0  auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-dialog-greeting header {
  height: 40px;
}

.el-dialog-greeting header i {
  position: relative;
  top: -50px;
  left: 50%; /** important **/
  font-size: 16px;
  font-weight: 600;
}

.el-dialog-greeting article{
  text-align: center;
  font-weight: 600;
}

.el-dialog-greeting .content {
  position: relative;
  top: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


@media  (max-width: 960px) {
  .el-dialog-skin {   /* for register ui*/
    width: 90%;
    /* height: 300px;*/
    overflow: scroll;
    /* top: 100%; */
    /* transform: translateY(-50%); */
  }
  .el-dialog-skin-25 {
    width: 80%;
  }
  .el-dialog-skin-35 {
    width: 80%;
  }
  .el-dialog .vertify {
    width: 100%;
    flex-wrap: wrap;
  }
  .el-dialog .vertify img {
    width: 50px;
    height: 50px;
    margin:  10px 0;
    align-self: center;
  }
  .el-dialog .vertify .numbers {
    width: 100%;
  }
  .el-dialog header {
    height: 70px;
  }

  .el-dialo-login header {
    height: 70px;
  }

  .el-dialo-forgot-pwd header {
    height: 70px;
  }

  .el-dialog .vertify .numbers button {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    text-align: center;
    line-height: 20px;
  }

  
    /* 歡迎樣式 */

  .el-dialog .greeting {
    width: 100%;
    flex-wrap: wrap;
  }
  .el-dialog .greeting img {
    width: 35px;
    height: 35px;
    margin:  10px 0;
    align-self: center;
  }

  .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;
  }
}

@media (max-width: 500px) {  /* org: 430px  iphone 16 pro max 440px × 956px  updated 18-Feb-25 */

  .el-dialog-skin-25 {
    width: 100%;
    background: #fff;
  }
  .el-dialog-skin-35 {
    width: 100%;
    background: #fff;
  }
  .el-dialog-skin {   /* for register ui*/
    width: 100%;
    height: 80%;
    background: #fff;
  }
  .el-dialog-ads-skin2 {
    width: 100%;
    border-radius: 30px;
    background-image: linear-gradient(to right, rgba(241,120,96,1), rgba(239,82,51,1));
  }
}


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