body{
  background-image: url(/sipao/Images/bg/login_bg.jpg?1719565933);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #004EA2;
}

input,
button,
a {
  -webkit-tap-highlight-color: transparent;
}

input:-webkit-autofill {
  -webkit-animation: autofill-fix 1s infinite;
}

@-webkit-keyframes autofill-fix {
  from {
    background-color: transparent
  }

  to {
    background-color: transparent
  }
}

.pointType {
  color: olivedrab;
  float: right;
  padding-bottom: 5px;
}

/*隱藏在背後的輸入框*/

#inputHolder {
  background-color: lightgray;
  border: 0;
  outline: none;
  letter-spacing: 12vw;
  word-spacing: 12vw;
  margin-left: 15vw;
  width: 75vw;
  font-size: 10vw;
  padding-left: 6vw;
  padding-bottom: 0;
  padding-top: 0;
  padding-right: 0;
  margin-top: -1vw;
  -webkit-appearance: textfield;
  /* hide-------------- */
  background-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

#testModule {
  top: 44%;
  width: 100%;
  position: absolute;
  left: 0;
}

#pos {
  background-color: rgba(255, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 20%;
  height: 100%;
  width: 60%;
  z-index: 10;
  pointer-events: none;
  /* hide-------------- */
  background-color: rgba(0, 0, 0, 0);
}

#phoneZone {
  position: absolute;
  top: 63vw;
  left: 5%;
  width: 90%;
  text-align: center;
}

#phoneZone div {
  position: absolute;
  top: 55vmin;
  text-align: center;
  width: 100%;
  height: 10vw;
}

#inputUserPhone {
  position: absolute;
  -webkit-appearance: textfield;
  padding: 0;
  border: 1px solid lightgrey;
  width: 82%;
  left: 10%;
  font-size: 8vw;
  line-height: 12vw;
  border-radius: 3vw;
  text-align: center;
  box-shadow: 0 0 1.5vw #cccccc;
}

#btnChangePhone,
#btnNext {
  background-color: #cccccc;
  padding: 2vw 4vw;
  border-radius: 3vw;
  margin: 0 auto;
  margin-top: 5vw;
  display: block;
  width: 40%;
  color: #ffffff;
}

#btnChangePhone {
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

#inputDeco {
  top: 43%;
  left: 20%;
  width: 80%;
  position: absolute;
  background-color: rgb(0, 79, 163,0.3);
  /* display: flex | inline-flex;*/
  display: inline;
  z-index: 12;
  pointer-events: none;
  margin-left: -2vw;
  /*
        margin:  -4vw -6vw -4vw -4vw;
        padding:4vw;
        */
}

.decoBox {
  /* border: 1px solid grey;*/
  border: 1px solid lightgrey;
  padding: 7vw;
  margin: -2vw;
  box-sizing: border-box;
  border-radius: 2vw;
  position: absolute;
}

.dBox1 {
  left: 1vw;
}

.dBox2 {
  left: 18vw;
}

.dBox3 {
  left: 35.5vw;
}

.dBox4 {
  left: 53vw;
}

.dBox5 {
  left: 67vw;
  pointer-events: visible;
  border: 0;
}

.btnOriginal {}

.btnActive {
  background-color: #f2f2f2 !important;
  box-shadow: 0 0 1.5vw #cccccc;
  color: #000000 !important;
}

.btnLoading {
  background-color: rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 1) inset !important;
  color: lightgray !important;
}

.btnError {
  background-color: rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 1) inset !important;
  color: indianred !important;
}

.btnIsMember {
  background-color: #f2f2f2;
  -webkit-box-shadow: 0 0 0px 1000px #f2f2f2 inset !important;
  color:#000000 !important;
}

.infoTextBox {
  position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #aaaaaa;;
}

#hintText {
  position: absolute;
  top: 13vw;
  font-size: 3.5vw;
  text-align: center;
  width: 100%;
  display: block;
  color: #666666;
  font-weight: 700;
}

#controlPanel {
  position: absolute;
  bottom: -60%;
  width: 70%;
  margin-left: 15%;
}

#btnReSendSMS {
  float: left;
  color: #ffffff;
}

#btnCancelSMS {
  float: right;
  color: #ffffff;
}

#noticePanel {
  font-weight: 700;
  color: #c8c8c8;
  text-align: center;
  display: block;
  position: absolute;
  bottom: 5%;
  left: 5%;
  width: 90%;
  font-size: 4vw;
}

#noticePanel a {
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}

#stagePanel {
  display: none;
  position: absolute;
  left: 13%;
  width: 80%;
  bottom: 12%;
}

#stagePanel div {
  width: 50%;
  font-size: 3vw;
  color: #ffffff;
}

#stagePanel span {
  font-size: 4vw;
  display: block;
  margin: 2vw;
  color: #f2f2f2;;
  opacity: 0.5;
}

#stagePanel span a {
  width: 3vw;
  color: white;
  background-color: #666666;
  margin-right: 2vw;
  padding: 1vw 3vw;
  border-radius: 2vw;
}

.stageActive {
  opacity: 1 !important;
}

.stageNumberActive {
  background-color: #fcc200 !important;
}

#iconType {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  text-align: center;
}

#iconType img {
  width: 100%;
}

#btnSmsHelp {
  display: none;
  position: absolute;
  width: 100%;
  color: grey;
  text-align: center;
  bottom: 27%;
}

#btnSmsHelp span {
  background-color: white;
  font-size: 3vw !important;
  border-radius: 1vw;
  padding: 1vw 1.5vw;
  border: solid thin #666666;
}

#smsHelpPanel {
  display: none;
  background-color: white;
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  z-index: 15;
  border-radius: 3vw;
  box-shadow: -2px 1px 15px 10px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: -2px 1px 15px 10px rgba(0, 0, 0, 0.3);
}

#smsHelpPanel div {
  padding: 4vw;
}

#smsHelpPanel span {
  font-size: 4vw;
}

#smsHelpPanel a {
  text-decoration: none;
  color: #fcc200;
  font-weight: 800;
}

#smsHelpPanelBg {
  display: none;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

#btnSmsInfoDone {
  padding: 0 !important;
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  border-radius: 0 0 3vw 3vw;
}

#btnSmsInfoDone span {
  color: dimgrey;
  line-height: 13vw;
  font-size: 6vw;
  font-weight: 800;
}

#regPageVer {
  position: absolute;
  top: 0;
  right: 0;
  margin: 5vw 2vw;
  color: rgba(255, 255, 255, 0.7);
  font-size: 3vw;
}

/**隱私權條款*/
#privacy_box{
  display: none;
  position: absolute;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
#privacy_text{
  padding:1vw;
  width: 90%;
  height: 90vh;
  position: relative;
  margin: 0 auto;
  top: 5vh;
  background-color: white;
  /* overflow-y: scroll; */
}
#privacy_text iframe{
  width: 100%;
  height: 90vh;
}
#privacy_cancel_btn{
  width: 6vw;
  height:6vw;
  text-align: center;
  line-height: 6vw;
  background-color: #004EA2;
  position: absolute;
  top: 5vh;
  right: 4vw;
  color: #ffffff;
}

/*logo*/
#login_logo_box{
  width: 45%;
  margin: 0 auto;
  margin-top: 10vh;
}
#login_logo_box img{
  width: 100%;
}

@media screen and (max-height: 667px) { 
  #phoneZone{
    top:35vh;
  }
  #phoneZone div{
    top:35vmin;
  }
  #phoneZone div.step-btn-box{
    top:55vmin;
  }
  #controlPanel{
    bottom: -100%;
  }
  #testModule{
    top: 50%;
  }
  #inputDeco{
    top: 50%;
  }
  #btnSmsHelp{
    bottom: 29%;
  }
}