@charset "UTF-8";
@import url("/css/font-awesome-4.5.0/css/font-awesome.min.css");
.f-danger {
  color: #ff0000;
}

.f-fun {
  color: #f7f40a;
}

.f-primary {
  color: #92bbff;
}

.f-success {
  color: #28a745;
}

.f-info {
  color: #17a2b8;
}

.f-beauty {
  color: #da92ff;
}

.f-light {
  color: #fff;
}

.f-wraning {
  color: #ff6dc3;
}

.f-dark {
  color: #000;
}

.f-secondary {
  color: #868e96;
}

img {
  max-width: 100%;
}

.img-group {
  width: 100%;
  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;
}

table {
  font-family: "新細明體", "細明體";
}
table tbody,
table tfoot,
table thead,
table th,
table td {
  vertical-align: middle;
  margin: 0 !important;
}

.gotoheader {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 56px;
}
.gotoheader a {
  display: inline-block;
  color: #ff7a02;
}
.gotoheader a:hover {
  color: #ff4fab;
}

body {
  background-color: #ffffff;
  overflow-x: hidden;
}

.wrapper {
  background-size: 120%;
  overflow: hidden;
  background-color: #ffffff;
  background-position: top center;
  background-repeat: no-repeat;
  color: black;
  letter-spacing: 1px;
  padding-bottom: 16px;
  position: relative;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffddb5), color-stop(6%, #ffffff), color-stop(92%, #ffffff), to(#ffddb5));
  background: linear-gradient(to bottom, #ffddb5 0%, #ffffff 6%, #ffffff 92%, #ffddb5 100%);
}
@media only screen and (orientation: portrait) {
  .wrapper {
    background-size: 150%;
  }
}
@media screen and (min-width: 1280px) {
  .wrapper {
    background-size: 120%;
  }
}
@media screen and (min-width: 1600px) {
  .wrapper {
    background-size: initial;
  }
}

/* ================= 內容 ================= */
.content {
  width: 100%;
}
.content .container {
  max-width: 960px;
  margin: 10px auto -1px auto;
  padding: 3em 2em 0 2em;
  background-color: #ffffff;
  border: 6px solid #ffd0a3;
  border-radius: 20px;
  border-radius: 20px;
}
@media screen and (min-width: 420px) {
  .content .container {
    padding: 3em 2.5em 0 2.5em;
  }
}
@media screen and (min-width: 768px) {
  .content .container {
    padding: 3em 2.5em 0 2.5em;
  }
}
@media only screen and (orientation: landscape) {
  .content .container {
    width: calc(80% - 16px);
  }
}
.content .containerBg {
  width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 0;
}
.content .containerBg--top {
  width: 100%;
  max-width: 1091px;
  height: clamp(30px, 12.26vw, 157px);
  background-position: top center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content .containerBg--middle {
  width: 100%;
  max-width: 1091px;
  height: 100%;
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat repeat;
}
.content .containerBg--bottom {
  width: 100%;
  max-width: 1091px;
  height: clamp(30px, 12.26vw, 157px);
  background-position: bottom center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content .container * {
  position: relative;
  line-height: 30px;
}
.content h3 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 16px;
  width: 100%;
}
.content h3 img {
  display: block;
  max-width: 927px;
  width: 100%;
  margin: 12px auto;
}
@media screen and (min-width: 420px) {
  .content h3 img {
    margin-top: -9%;
    width: 100%;
  }
}
@media screen and (min-width: 992px) {
  .content h3 {
    margin-top: -8%;
    width: 70%;
  }
}
@media screen and (min-width: 1280px) {
  .content h3 {
    margin-top: 1%;
  }
}
@media screen and (min-width: 1600px) {
  .content h3 {
    margin-top: 1%;
  }
}
.content h4 {
  position: relative;
  color: #fc7a05;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1.2rem;
  padding-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 1280px) {
  .content h4 {
    font-size: 1.2rem;
  }
}
.content h4:before {
  content: "";
  width: 2.8em;
  height: 2.8em;
  display: none;
  margin: 0 5px 0 0;
  background-size: 100%;
}
.content ol a,
.content ul a, .content p a {
  color: #2a5cff;
  text-decoration: underline;
}
.content ol a:hover,
.content ul a:hover, .content p a:hover {
  color: #ff2af2;
}
ul, ol {
  margin-left: 20px !important;
}

.content__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 16px;
}
.content__btn div {
  width: 150px;
  margin-bottom: 15px;
  position: relative;
  color: #fff;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.content__btn div.action a, .content__btn div a:hover {
  width: 142px;
  border-radius: 30px;
  border: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(#e8bb00), to(#FFE782));
  background: linear-gradient(to top, #e8bb00 0%, #FFE782 100%);
  color: #332900;
}
.content__btn div a {
  width: 142px;
  display: block;
  background: #dfdfdf; /* Old browsers */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #dfdfdf), to(#b8b8b8));
  background: linear-gradient(to bottom, #dfdfdf 20%, #b8b8b8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  color: #303030;
  padding: 6px 1.25em;
  border-radius: 30px;
  border: 0;
  text-align: center;
  font-weight: bold;
}
@media screen and (min-width: 1280px) {
  .content__btn div a {
    padding: 12px 8px;
  }
}
.content__btn div .label {
  width: auto;
  position: absolute;
  top: 0;
  left: -1em;
}
.content__btn div .label:before {
  content: "\f0a3";
  font-family: FontAwesome;
  color: #ffe049;
  text-shadow: 1px 1px 2px #4f2a00;
  font-size: 3.5em;
  display: block;
  position: absolute;
}
.content__btn div .label:after {
  content: attr(data-content);
  font-weight: bold;
  color: #4a0000;
  font-size: 0.7em;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  white-space: pre;
  line-height: 1.125em;
}

.btnBox {
  margin-bottom: 16px;
}
.btnBox a {
  width: auto;
  border: 1px solid #ffb2bd;
  padding: 0.6em 2em;
  font-size: 1.15em;
  cursor: pointer;
  white-space: nowrap;
  background-image: #ff7f92;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff425e), color-stop(20%, #ff425e), color-stop(40%, #ff7f92), color-stop(60%, #ff7f92), color-stop(80%, #ff425e), to(#ff425e));
  background-image: linear-gradient(to bottom, #ff425e 0%, #ff425e 20%, #ff7f92 40%, #ff7f92 60%, #ff425e 80%, #ff425e 100%);
  -webkit-box-shadow: 0px 3px 3px #e50022;
          box-shadow: 0px 3px 3px #e50022;
  color: #fff;
}
.btnBox a:hover {
  border: 1px solid #ffdce1;
  background-image: #ffa9b6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff6c82), color-stop(20%, #ff6c82), color-stop(40%, #ffa9b6), color-stop(60%, #ffa9b6), color-stop(80%, #ff6c82), to(#ff6c82));
  background-image: linear-gradient(to bottom, #ff6c82 0%, #ff6c82 20%, #ffa9b6 40%, #ffa9b6 60%, #ff6c82 80%, #ff6c82 100%);
  -webkit-box-shadow: 0px 2px 2px #ff1034, inset 0 1px 1px 1px #ffd2d9, inset 0 -8px 8px 0px #fffbfb;
          box-shadow: 0px 2px 2px #ff1034, inset 0 1px 1px 1px #ffd2d9, inset 0 -8px 8px 0px #fffbfb;
  top: 2px;
  color: #66000f;
}

/* ================= item__box ================= */
.item__box {
  background: rgb(134, 62, 73);
  border: 0;
  border-radius: 0;
  border: 1px solid #ffabb8;
  margin: 0 auto;
}
.item__box p {
  width: 100%;
  line-height: 1.25em;
}
.item__box .item__box-title {
  background: -webkit-gradient(linear, left top, right top, from(#ff788d), color-stop(20%, #ffabb8), color-stop(80%, #ffabb8), to(#ff788d));
  background: linear-gradient(to right, #ff788d 0%, #ffabb8 20%, #ffabb8 80%, #ff788d 100%);
  color: #660010;
}
.item__box .item__box-title img {
  display: block;
  margin: 0 auto;
}
.item__box .item__box-img {
  border-radius: 0;
}
.item__box .item__box-get {
  text-align: center;
  color: #ff9100;
  font-weight: bold;
}
.item__box .item__box-get .plus {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.item__box .item__box-text {
  text-align: left;
}
.item__box .item__box--02 {
  background: #ffdde2;
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: inset 0 0 5px 1px #f87f92;
          box-shadow: inset 0 0 5px 1px #f87f92;
  height: 100%;
}
.item__box .item__box--02 .item__box-title {
  background: -webkit-gradient(linear, left top, right top, from(#ff788d), color-stop(20%, #ffabb8), color-stop(80%, #ffabb8), to(#ff788d));
  background: linear-gradient(to right, #ff788d 0%, #ffabb8 20%, #ffabb8 80%, #ff788d 100%);
  color: #660010;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.item__box .item__box--02 .f-danger {
  color: #d85600;
}
.item__box .question {
  width: 25px;
  height: 25px;
  position: absolute !important;
  top: 6px;
  left: 6px;
  background: linear-gradient(45deg, #8f0000, red);
  border-radius: 50%;
  -webkit-box-shadow: 0px 2px 1px #ff4b4b inset, 0px 0px 3px #000;
          box-shadow: 0px 2px 1px #ff4b4b inset, 0px 0px 3px #000;
  border: 1px solid rgb(0, 0, 0);
  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;
}
@media screen and (min-width: 420px) {
  .item__box .question {
    width: 30px;
    height: 30px;
  }
}
.item__box .question::before {
  content: "";
  width: 15px;
  height: 15px;
}
@media screen and (min-width: 420px) {
  .item__box .question::before {
    width: 20px;
    height: 20px;
  }
}
.item__box .question .tooltip {
  display: none;
  position: absolute;
  width: 17em;
  top: 30px;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdffdd), to(#f4ffad));
  background: linear-gradient(to bottom, #fdffdd 0%, #f4ffad 100%);
  border: 2px solid #979200;
  -webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75);
          box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75);
  border-radius: 10px;
  z-index: 1;
  overflow: hidden;
}
@media only screen and (max-width: 860px) {
  .item__box .question .tooltip {
    width: 17em;
  }
}
@media only screen and (max-height: 450px) {
  .item__box .question .tooltip {
    width: 17em;
  }
}
.item__box .question .tooltip h5 {
  background: -webkit-gradient(linear, left top, left bottom, from(#4b9700), to(#b2bb00));
  background: linear-gradient(to bottom, #4b9700 0%, #b2bb00 100%);
  font-size: 16px !important;
  line-height: 1.5rem;
  padding: 4px;
  margin-bottom: 0;
  color: #fff;
}
.item__box .question .tooltip ul.probability {
  width: calc(100% - 16px);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  padding: 4px 0;
}
.item__box .question .tooltip ul.probability li {
  font-size: 14px !important;
  padding: 0 8px;
  color: #005e16;
  border-bottom: 1px solid #013f05;
}
.item__box .question .tooltip ul.probability li:nth-child(odd) {
  width: 70%;
  text-align: left;
}
.item__box .question .tooltip ul.probability li:nth-child(even) {
  width: 30%;
  text-align: right;
}
.item__box .question .tooltip ul.probability li:nth-last-child(-1n+2) {
  border-bottom: 0;
}
.item__box .question:hover .tooltip {
  display: inline-block;
}

/*================= table================= */
.table tr td, .table tr th {
  border: 1px solid #ececec;
}

.table {
  border-collapse: initial;
  border-radius: 5px;
  color: #202c0d;
  border: 3px solid #ececec;
}
.table tr {
  background: #fff;
}
.table tr th {
  position: relative;
  background: -webkit-gradient(linear, left bottom, left top, from(#d8d8d8), to(#ececec));
  background: linear-gradient(to top, #d8d8d8 0%, #ececec 100%);
  color: #333333;
}
.table tr th.thStyle02 {
  color: #752b00;
  background: #ffec80;
}
.table tr th img {
  max-width: 50px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .table tr th img {
    max-width: 80px;
  }
}
.table tr td {
  /*單格變色*/
}
.table tr td p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.table tr td img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.table tr td img.img-inline {
  width: 4em;
  display: inline;
  margin: 0;
}
.table tr td[data-tdstyle=style01] {
  background-color: #f6f6f6;
}

/* ================= 說明框 ================= */
.explanation {
  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;
}
.explanation .note-main {
  color: #210032;
  border: 5px solid #fff;
  border-radius: 16px;
  -webkit-box-shadow: 0px 0px 8px 2px #fc7a05;
          box-shadow: 0px 0px 8px 2px #fc7a05;
  background: -webkit-gradient(linear, left bottom, left top, from(#fc8e2b), to(#d86803));
  background: linear-gradient(to top, #fc8e2b 0%, #d86803 100%);
  margin: 0 auto;
  padding: 10px 20px;
  text-align: left;
  color: 28.4210526316deg;
  color: 50.3921568627%;
  color: #fff;
}
.explanation .note-main .icon_tit {
  width: 169px;
  height: 169px;
  position: absolute;
  top: -47%;
  left: 56%;
  z-index: 9;
  background-image: url(../../images/icon_tit.png);
  background-repeat: no-repeat;
  background-position: center;
}
.explanation .symbol {
  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;
}
.explanation .symbol i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  color: #404040;
}
@media screen and (min-width: 992px) {
  .explanation .symbol i {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}