:root {
  --colorW: #F7F8F8;
  --colorGL: #9FA0A0;
  --colorGD: #ff9500;
  --colorGD02: #525152 !important;

  --color-p: #CD7F17;
  --color-pD: #805e00;
  --color-border: #CFAE93;
  --color-BG01: #FFF3E5;
  --color-BG02: #FFE0C4;

  --BTN_Red: #e3344b;
  --BTN_DRed: #920114;
  --BTN_Green: #337e47;
  --BTN_Yellow: #FEB44B;
  --BTN_Yellow_hover: #ff9500;
  --BTN_Blue: #0061f3;

  --p-4rem: 64px;
  --p-3rem: 48px;
  --p-2rem: 32px;
  --p-15rem: 24px;
  --p-1rem: 16px;

  --borderRadius: 20px;
}

ul>li,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: var(--color-p);
  margin: 0;
  font-weight: 600;
  font-family: 'Noto Sans TC', sans-serif;
}

h1 {
  font-size: var(--p-4rem);
}

h2 {
  font-size: var(--p-3rem);
}

h3 {
  font-size: var(--p-2rem);
}

h4 {
  font-size: var(--p-15rem);
}

span {
  font-size: var(--p-1rem);
}

label {
  font-size: var(--p-1rem);
  color: var(--color-BG01);
  font-weight: 1000;
  font-family: 'Noto Sans TC', sans-serif;
}

.hidden {
  display: none !important;
}

.hiddenOpcity {
  opacity: 0 !important;
}

body {
  box-sizing: border-box;
  width: 100vw;

  margin: 0;
  padding: 100px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: var(--color-BG02);
  min-height: 100vh;
}

form {
  box-sizing: border-box;

  max-width: 620px;
  width: 90vw;
  background-color: var(--BTN_Yellow_hover);
  padding: 30px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  border-radius: 20px;

  margin: 0 0 100px 0;
}

form>div {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-self: flex-start;
}

form>div>label {
  flex: 1;
  /* background-color: #525152; */
}

form>div>input[type="checkbox"] {
  flex: 1;
  margin: 0;
}

input,
select {
  width: 98%;
  padding: 5px;
  border-radius: 10px;
  margin: 5px 0 0 0;
  background-color: var(--colorW);
  color: var(--color-pD);
  font-weight: 600;
  font-family: 'Noto Sans TC', sans-serif;
  border: 1px solid var(--color-border);
}

input[type="button"] {
  width: 100%;
  background-color: var(--BTN_Yellow);
  color: var(--colorW);
  border: none;
  margin: 20px 0 0 0;

  transition: 0.5s;
}

input[type="button"]:hover {
  background-color: var(--BTN_Green);
  color: var(--colorW);

  transform: scale(1.05);
}

input[type="button"]:active {
  transform: scale(0.95);
}

input[type="button"].btnRed {
  background-color: var(--BTN_Red);
}

input[type="button"].btnRed:hover {
  background-color: var(--BTN_DRed);
}

.pdf {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pdf>div>img {
  width: 90vw;
  max-width: 620px;
}

#img01,
#img02,
#img03,
#img04 {
  width: fit-content;
  max-width: 620px;
  height: fit-content;
  position: relative;
  margin: 0 0 20px 0;
  /* background-color: #525152; */
}

#img01>p,
#img02>p,
#img03>p,
#img04>p {
  position: absolute;
  font-size: 1.9cqi;
  color: var(--colorGD);
  font-weight: 400;
}

.signature-image {
  width: fit-content !important;
  /* 可以先设置为auto，后面用jQuery改变 */
  height: 10cqh !important;
  /* 不可以用這個，因為html2canvas不支援該Css*/
  /* object-fit: contain;
  object-position: left top; */
  /* background-color: #0061f3; */
}

#img01>.partyA {
  top: 24.4%;
  left: 22.5%;
}

#img01>.plan {
  top: 43.6%;
  left: 37%;
}

#img01>.dateY01 {
  top: 48.5%;
  left: 30.1%;
}

#img01>.dateM01 {
  top: 48.5%;
  left: 40.5%;
}

#img01>.dateD01 {
  top: 48.5%;
  left: 47%;
}

#img01>.dateY02 {
  top: 48.5%;
  left: 60.2%;
}

#img01>.dateM02 {
  top: 48.5%;
  left: 70.5%;
}

#img01>.dateD02 {
  top: 48.5%;
  left: 77.1%;
}

#img01>.donate {
  top: 53.3%;
  left: 33%;
}

#img03>.covenanter {
  top: 27.4%;
  left: 20%;
}

#img03>.partyA {
  top: 31.7%;
  left: 21%;
}

#img03>.uniformNbm {
  top: 36%;
  left: 22%;
}

#img03>.dateY01 {
  top: 85.6%;
  left: 48.6%;
}

#img03>.dateM01 {
  top: 85.6%;
  left: 59%;
}

#img03>.dateD01 {
  top: 85.6%;
  left: 64.3%;
}

#img03>.signature-image {
  position: absolute;
  top: 33%;
  left: 50%;
}

#img04>p {
  font-size: 1.5cqw;
}

#img04>.dateY01 {
  top: 23.1%;
  left: 23.5%;
}

#img04>.dateM01 {
  top: 23.1%;
  left: 32%;
}

#img04>.dateD01 {
  top: 23.1%;
  left: 37.5%;
}

#img04>.plan {
  top: 23.1%;
  left: 54.5%;
}

#img04>.dateY02 {
  top: 26.1%;
  left: 23.5%;
}

#img04>.dateM02 {
  top: 26.1%;
  left: 32%;
}

#img04>.dateD02 {
  top: 26.1%;
  left: 37.5%;
}

#img04>.covenanter {
  top: 38%;
  left: 26%;
}

#img04>.uniformNbm {
  top: 41.2%;
  left: 28%;
}

#img04>.partyA {
  top: 43.8%;
  left: 26%;
}

#img04>.dateY01.two {
  top: 86.7%;
  left: 48.6%;
  font-size: 1.9cqw;
}

#img04>.dateM01.two {
  top: 86.7%;
  left: 59%;
  font-size: 1.9cqw;
}

#img04>.dateD01.two {
  top: 86.7%;
  left: 64.3%;
  font-size: 1.9cqw;
}

#img04>.signature-image {
  position: absolute;
  top: 45%;
  left: 46%;
}

.popup {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: rgba(0, 0, 0, 0.5);
}

.ConfirmSignature{
  width: 90vw;
  max-width: 620px;
  height: 80vh;
  max-height: 620px;

  box-sizing: border-box;
  padding: 20px;
  background-color: var(--color-BG02);
  border-radius: 20px;
  border: 5px solid var(--color-border);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.OnDownload{
  width: fit-content;
  max-width: 620px;
  height:fit-content;
  max-height: 620px;

  box-sizing: border-box;
  padding: 20px;
  background-color: var(--color-BG02);
  border-radius: 20px;
  border: 5px solid var(--color-border);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ConfirmSignature>h4,
.OnDownload>h4 {
  width: 100%;
  text-align: center;
}

.btns {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin: -20px 0 0 0;
}

.btns>input {
  width: 100%;
}

#sign {
  width: 100%;
  max-width: 620px;
  height: 50%;
  max-height: 620px;
  border-radius: 5px;
  background-color: var(--color-BG01);
}

.OnDownload>img {
  width: 100%;
  max-width: 200px;
  animation: spin 1s linear infinite;
  margin: 20px 0 0 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(2deg);
  }

  80% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}



@media (min-width: 700px) {

  #img01>p,
  #img02>p,
  #img03>p,
  #img04>p {
    font-size: 14px;
    /* 當視口寬度達到或超過620px時，字體大小固定不變 */
  }

  #img04>p {
    font-size: 10px;
  }

  #img04>.dateY01.two {
    font-size: 14px;
  }

  #img04>.dateM01.two {
    font-size: 14px;
  }

  #img04>.dateD01.two {
    font-size: 14px;
  }
}