@charset "UTF-8";
@media screen and (min-width: 768px) {
  .swiper {
    min-width: 470px;
    height: 284px;
  }
}
@media screen and (min-width: 1024px) {
  .swiper {
    width: 470px;
    height: 284px;
  }
}
@media screen and (min-width: 1200px) {
  .swiper {
    width: 470px;
    height: 284px;
  }
}
/* swiperjs  套件CSS 樣式修改 */
/*  (方法一) 按鈕定位控制 .form-card-out */
.control-btn {
  --swiper-navigation-size: 25px;
  width: 25px;
  height: 70px;
  background-color: rgb(122, 203, 221);
  color: rgba(255, 255, 255, 0.8);
  border: 0;
  position: absolute;
  margin: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.control-btn:first-of-type {
  border-radius: var(--bdrs) 0 0 var(--bdrs);
}
.control-btn:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: rgb(122, 203, 221);
}
.control-btn.prev {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  left: -5px;
  border-radius: var(--bdrs) 0 0 var(--bdrs);
}
.control-btn.next {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  right: -5px;
  border-radius: 0 var(--bdrs) var(--bdrs) 0;
}

.swiper {
  max-width: 240px;
  height: 320px;
}

.swiper-slide {
  pointer-events: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  border: 0px;
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px rgb(122, 203, 221);
          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px rgb(122, 203, 221);
}
.swiper-slide > .btn-group {
  pointer-events: auto;
}

.swiper-slide-active {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  border: var(--card-bd) solid rgb(122, 203, 221);
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), var(--bxsh-width) 0px rgb(122, 203, 221);
          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), var(--bxsh-width) 0px rgb(122, 203, 221);
  pointer-events: auto;
}

#array {
  position: absolute;
  bottom: 0;
}

.disabled_swiper_button {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

/* rSlider 套件CSS 樣式修改 控制 .question-4 .method-input */
.rs-scale {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.rs-scale span {
  opacity: 0;
}
.rs-scale span:last-child {
  position: absolute;
  right: 0;
}
.rs-container .rs-bg, .rs-container .rs-selected {
  border-radius: 24px;
  border: 0;
  min-height: 1rem;
  -webkit-box-shadow: 0px 2px 15px -10px rgba(0, 0, 0, 0.2), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 2px 15px -10px rgba(0, 0, 0, 0.2), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
}
.rs-container .rs-bg {
  /* grey-7 */
  background: #DEE0E3;
}
.rs-container .rs-selected {
  background-color: rgb(242, 159, 5);
}
.rs-container .rs-pointer {
  -webkit-box-shadow: inset 0 0 1px #FFF, inset 0 1px 6px #ebebeb, 1px 1px 4px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 0 1px #FFF, inset 0 1px 6px #ebebeb, 1px 1px 4px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background-color: rgba(255, 255, 255, 0.8);
  /* 邊框 設定 */
  border: 5px solid rgb(122, 203, 221);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform: translateY(-0.15rem);
          transform: translateY(-0.15rem);
  -webkit-transition: background-color 0.3s, border 0.3s;
  transition: background-color 0.3s, border 0.3s;
}
.rs-container .rs-pointer:last-child {
  -webkit-transform: translateY(-4%) translateX(-22%);
          transform: translateY(-4%) translateX(-22%);
}
.rs-container .rs-pointer:active {
  background-color: rgb(242, 159, 5);
}
.rs-container .rs-pointer::before, .rs-container .rs-pointer::after {
  opacity: 0;
}

/* rSlider 套件 控制文字提示 .question-4 .method-input */
.form-range .slider-container {
  width: 100%;
}

.rs-container .rs-tooltip {
  border-radius: 10px;
  -webkit-transform: translate(-50%, 2rem);
          transform: translate(-50%, 2rem);
  background-color: rgb(70, 64, 116);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  border: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}
.rs-container .rs-tooltip::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-top: 10px solid rgb(70, 64, 116);
}