/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans TC", Arial, "sans-serif";
  color: #646469;
  background: url("/wp-content/uploads/kv_bg.jpg") no-repeat center top;
  background-color: #fff;
}
.rdt img {
  max-width: 100%;
  height: auto
}
.rdt-h1 {
  font-size: 5.4rem;
  margin: 30px auto
}
/*button*/
button {
  font-family: "Noto Sans TC", Arial, "sans-serif";
  font-size: 3.6rem;
  font-weight: 700;
  color: #ca525f;
  text-align: center;
  border-width: 4px;
  border-style: solid;
  border-radius: 45px;
  padding: 0.25em 1em;
  box-shadow: rgba(120, 20, 20, 0.3) 0 2px 2px, rgba(120, 20, 20, 0.3) 0 5px 20px;
  transition: all .3s;
  cursor: pointer
}
button:hover {
  color: #ca525f;
  transform: translateY(-10px);
  box-shadow: rgba(120, 20, 20, 0.3) 0 2px 2px, rgba(120, 20, 20, 0.3) 0 15px 20px;
}
button.start {
  letter-spacing: 0.2em;
  background: linear-gradient(to bottom, #fff, #ffc3cd);
  border-color: #ffd2d2;
  width: 100%;
  max-width: 420px;
  min-width: 320px;
}
button.answer {
  background: #ffffff;
  border-color: #ffd2d2;
  flex: 1 0 160px;
}
button.answer.selected {
  color: #ca525f;
  background: linear-gradient(to bottom, #fff, #ffc3cd);
}
button.next-question {
  background-color: #ffffff;
  border-color: #ca525f;
  flex: 1 0 260px;
  padding: 5px;
}
button.view-result {
  color: #ffffff;
  background-color: #ca525f;
  border-color: #ca525f;
  flex: 1 0 260px;
  text-decoration: none
}
.more {
  display: inline-block;
  font-size: 3.6rem;
  font-weight: 700;
  color: #ffffff;
  background-color: #ca525f;
  border-color: #ca525f;
  text-decoration: none;
  text-align: center;
  border-width: 4px;
  border-style: solid;
  border-radius: 45px;
  padding: 0.25em 1em;
  box-shadow: rgba(120, 20, 20, 0.3) 0 2px 2px, rgba(120, 20, 20, 0.3) 0 5px 20px;
  transition: all .3s;
}
.more:hover {
  color: #fff;
  transform: translateY(-10px);
  box-shadow: rgba(120, 20, 20, 0.3) 0 2px 2px, rgba(120, 20, 20, 0.3) 0 15px 20px;
}
.more br {
  display: none
}
.rdt-btn, .rdt-cta {
  display: inline-flex;
  justify-content: center;
  gap: 2rem;
  margin: auto
}
.rdt section {
  padding: 0 1.5rem;
  text-align: center
}
/*section-kv*/
.rdt-hero {
  width: 100%;
  height: auto;
  text-align: center;
  font-weight: 700;
}
.start-i {
  position: relative;
  z-index: 0;
}
.start-b {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 50px;
  z-index: 1;
}
#rdt-hero {
  min-height: 100vh
}
/*section-QA*/
#qr {
  background: url("/wp-content/uploads/qa_bg.png") repeat-y center center fixed;
  min-height: 100vh;
  position: relative;
  text-align: center;
  font-weight: bold;
  display: flex;
  padding-bottom: 3rem;
}
.question {
  padding: 15px;
  display: none;
  flex-direction: column;
  gap: 4rem;
  max-width: 1440px;
  margin: auto;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
.question.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.question p {
  font-size: 4.4rem;
  margin: auto;
  text-align: left;
  display: inline-block;
}
/*section-result*/
.m-title {
  text-align: left;
  margin: auto;
  width: 1440px;
}
.m-title img {
  max-width: 500px;
}
.m-title p {
  font-size: 3rem;
  font-weight: 700;
}
.result-i {
  margin: 30px auto;
  max-width: 1440px;
  text-align: center
}
.result-i p {
  font-size: 4.2rem;
}
.more-info {
  max-width: 1440px;
  margin: auto;
  background-color: #fff;
  padding: 1em;
  font-size: 2rem;
  text-align: left;
  display: inline-block;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.inf-src {
  margin: 45px auto 15px;
  font-size: 1.6rem;
}
/*footer*/
.rdt-footer {
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  column-gap: 30px;
  align-items: center;
  padding: 15px
}
.rdt-vline {
  height: 50px;
  width: 3px;
  background: #764A45
}
@media (max-width:576px) {
  .rdt-h1 {
    font-size: 3.4rem;
  }
  .question p {
    font-size: 3rem;
  }
  .result-i p {
    font-size: 3rem;
  }
  .rdt-footer {
    flex-direction: column;
  }
  .rdt-vline {
    display: none
  }
  .m-title {
    text-align: center;
    width: 100%;
    transform: none
  }
  .m-title img {
    width: 100%
  }
  button {
    padding: 0.5rem 1.5rem;
  }
  button.start {
    max-width: 100%;
  }
  .more br {
    display: block
  }
  .more {
    font-size: 3rem;
    padding: 0.5rem
  }
}

  .form-group {
    flex-direction: row
  }
  .form-group label {
    flex: 0 0 120px
  }
  .form-group label:after {
    color: #f00;
  }
  .form-group input {}