.ag-commitment-container {
  min-width: 350px;
}

.question {
  width: 100%;
  text-align: center;
  max-width: 512px;
  margin: 0 auto;
  margin-top: 20px;
}

.commitment-content-page {
  padding-bottom: 73px;
}
.question input {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  border: 1px solid #8f959a;
  background: #ffffffd9;
  padding-left: 8px;
  padding-right: 20px;
  font-size: 16px;
}

.question select {
  width: 100%;
  font-size: 16px;
}

.question label {
  display: inline-block;
  width: 100%;
  text-align: justify;
  position: relative;
  font-size: 16px;
  margin-bottom: 8px;
}
.question label.selected::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  padding: 2px;
  background-color: #caaf78;
  z-index: -1;
  /* border: 2px solid #caaf78; */
  box-sizing: content-box;
  border-radius: 8px;
}

.commitment-content .submit {
  display: block;
  margin: 0 auto;
  padding: 10px;
}

.result_poster {
  width: 986px;
  margin: auto;
  aspect-ratio: 9 / 16;
  /* height: 80vh; */
  background-size: 100% auto;
  background-position: center;
  background-image: url(../assets/images/commitment/agency_background.jpg);
  background-repeat: no-repeat;

  text-align: center;
  padding-top: 230px;
  position: absolute;
  left: -9999px;
}

.result_poster ol {
  padding-left: 153px;
}

.result_poster p {
  color: var(--core-colours-charcoal-charcoal01, #333d47);
  text-align: center;

  font-family: "Noto Sans TC";
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  /* line-height: 70px; */
}

.result_poster #distinctText {
  color: var(--core-colours-red-red01, #d31145);
  text-align: center;
  font-family: "Noto Sans TC";
  font-size: 68px;
  font-style: normal;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 40px;
}

.result_poster ol li {
  color: var(--core-colours-charcoal-charcoal01, #333d47);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Noto Sans TC";
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

  /* display: flex;
  align-items: center; */
  margin-top: 30px;
  text-align: left;
}

.result_poster ol li img {
  height: 98px;
  object-fit: contain;
  width: 97px;
  margin-right: 30px;
  margin-top: 10px;
  display: inline-block;
}

.result_poster ol li .value {
  color: var(--core-colours-red-red01, #d31145);

  font-family: "Noto Sans TC";
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.523px;
}
.posterContainer {
  width: 100%;
  max-width: 512px;
  margin: auto;
  aspect-ratio: 9 / 16;
  height: 63vh;
  position: relative;
  z-index: 1;
  padding-top: 17px;
}

.posterContainer img {
  display: block;
  object-fit: contain;

  margin-bottom: 20px;
}

#page_form p,
#page_form h2 {
  text-align: center;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  text-align: left;
}

#line {
  object-fit: contain;
  height: auto;
  height: 7px;
  margin: 15px auto;
}

.result_poster .poster_bottom {
  object-fit: contain;
  height: 86px;
  width: 598px;
  margin: 70px auto;
}

#page_form form {
  padding: 5%;
  position: relative;
  z-index: 1;
}

#distinct {
  color: var(--core-colours-red-red01, #d31145);
  text-align: center;
  /* font-feature-settings: "liga" off, "clig" off; */
  font-family: "Noto Sans TC";
  font-size: 68px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.8px; /* 136.471% */
}

.target img {
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  width: auto;
}

.target {
  display: flex;
  align-items: center;
  gap: 10px;
}

#page_form .target p {
  color: #d31145;
  text-align: left;
}

#page_form .target p span:nth-child(1) {
  color: var(--core-colours-red-red01, #d31145);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Noto Sans TC";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.5px;
}
.target .blackText {
  color: #333d47;
}

.targetContainer {
  display: flex;
  justify-content: center;
  gap: 24px;
  align-items: center;
}

#page_form p {
  margin-bottom: 8px;
  color: var(--core-colours-charcoal-charcoal01, #333d47);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.1px;
}

#logo {
  width: 80px;
  margin: 30px auto;
}

#commitment_title {
  width: 200px;
  margin: 0 auto;
}

.select2-container {
  display: block;
  width: 100% !important;
}

#page_form,
#page_result {
  position: relative;
  max-width: 512px;
  margin: 0 auto;
}

#page_form #firework1,
#page_result #firework1 {
  position: absolute;
  display: block;
  width: 20%;
  height: auto;
  object-fit: contain;
  top: 15%;
  left: 2%;
  min-width: 100px;
  min-height: 100px;
}

#page_form #firework4,
#page_result #firework4 {
  position: absolute;
  display: block;
  width: 6%;
  height: auto;
  object-fit: contain;
  top: 0px;
  left: 12%;
  min-width: 25px;
  min-height: 28px;
}

#page_form #firework2,
#page_result #firework2 {
  width: 15%;
  min-width: 66px;
  height: auto;
  object-fit: contain;
  position: absolute;
  left: 81%;
  top: 10%;
}

/* #page_result #firework1,
#page_result #firework2 {
  z-index: -1;
} */

#page_form #line {
  height: 2px;
  margin: 10px;
}

#page_result {
  position: relative;
  padding: 0% 5%;
}

#page_result #firework3 {
  width: 15%;
  min-width: 66px;
  height: auto;
  object-fit: contain;
  position: absolute;
  left: 5%;
  top: 65%;
  z-index: -1;
}

#shareBtn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--core-colours-charcoal-white, #fff);
  text-align: center;

  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  margin-top: 70px;
}

#shareBtn img {
  width: 24px;
  height: 24px;
}

#backToIndex {
  display: block;
  width: 100%;
  text-align: center;
  margin: 16px auto;
  border-radius: 8px;
  border: 1px solid var(--core-colours-red-red02, #db406a);
  height: 48px;
  line-height: 48px;
  color: var(--core-colours-red-red02, #db406a);
  text-align: center;

  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  max-width: 512px;
}

.commitment-content {
  background: var(
    --Gold-Linear,
    linear-gradient(180deg, #d6bf93 0%, rgba(214, 191, 147, 0) 100%)
  );
  padding-top: 43px;
  position: relative;
}

#page_form::before {
  content: "";
  display: block;
  position: absolute;
  width: 110%;
  top: 42%;
  background-image: url(../assets/images/commitment/handshake_white.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  /* height: auto; */
  aspect-ratio: 375 / 276;
  max-width: 512px;
  left: 50%;
  transform: translateX(-50%);
}

.commitment-content .submit {
  display: block;
  border-radius: 8px;
  background: var(
    --Linear-8,
    linear-gradient(180deg, #ba0361 0%, #de4174 52%, #ff7a85 100%)
  );
  margin-top: 48px;
  color: var(--core-colours-charcoal-white, #fff);
  text-align: center;
  /* font-feature-settings: "liga" off, "clig" off; */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 31px;
  /* letter-spacing: 0.1px; */
  height: 48px;
  max-width: 512px;
  width: 100%;
}

.select2-container *:focus {
  outline: none;
}

input:focus {
  outline: none;
}
.loading {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
  z-index: 10;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 63px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #d31145 94%, #0000) top / 13px 13px
      no-repeat,
    conic-gradient(#0000 30%, #d31145);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 13px), #000 0);
  animation: l13 1s infinite linear;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes l13 {
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  font-size: 16px;
}

.mdrtLv img,
.paLv img {
  width: 100%;
  max-width: 100px;
  min-width: 67px;
  height: auto;
  object-fit: contain;
}

#mdrtContainer_content input,
#paContainer_content input {
  width: 0px;
  height: 0px;
  display: none;
}

#mdrtContainer_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#paContainer_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mdrtContainer_content label,
#paContainer_content label {
  width: auto;
  display: block;
}

#mdrtContainer p,
#paContainer p {
  text-align: left;
  color: var(--core-colours-charcoal-charcoal01, #333d47);

  /* Mobile TC/body */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 137.5% */
  letter-spacing: 0.1px;
}

.paLogoContainer {
  display: flex;
  justify-content: center;
  gap: 80px;
}

.paLogoContainer img {
  width: 300px;
  height: 300px;
}

#tick {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  margin: 50px auto;
}

#page_result .result_poster .redText {
  color: var(--core-colours-red-red01, #d31145);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Noto Sans TC";
  font-size: 68px;
  font-style: normal;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 45px;
}

.ag-btn--back {
  display: none;
}

.divisionLine {
  width: 1px;
  height: 48px;
  background-color: #fff;
}