@charset "UTF-8";
body {
  background-image: url("../../img/fairytaleImg/activityMeans/bg-mobile.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; }

* {
  letter-spacing: 1px;
  color: #333333;
  font-size: 14px;
  font-family: 微軟正黑體;
  position: relative; }

.ehanlin-logo {
  position: absolute;
  top: 0; }

.content-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px 0px; }

.fairytale-logo {
  width: 60%; }
  .fairytale-logo img {
    width: 100%; }

.content-box {
  padding: 20px 10px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 80px;
  width: 95%;
  background-color: rgba(255, 255, 255, 0.8);
  position: relative;
  border-radius: 20px; }

hr {
  margin-top: 0rem; }

#section_title .container-fluid .row .col-12 .title {
  width: 200px;
  text-align: center;
  margin: 0px auto 10px auto;
  font-size: 20px;
  font-weight: 700; }

#section_title .container-fluid .row .col-12 .title_content {
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  padding: 12px 18px;
  color: #0e55a5; }
  #section_title .container-fluid .row .col-12 .title_content span {
    color: #0e55a5; }
    #section_title .container-fluid .row .col-12 .title_content span img {
      width: 14px;
      height: 14px; }

#section_part1 .container-fluid .row .col-12 .stitle {
  margin-bottom: 16px; }

#section_part1 .container-fluid .row .col-12 span img {
  width: 15px;
  height: 15px; }

#section_part1 .container-fluid .row .col-12 .red_content {
  color: #ff5837; }

#section_part2 .container-fluid .row .stitle {
  margin-bottom: 15px; }

#section_part2 .container-fluid .row .upgrade_content {
  padding: 0px 35px; }
  #section_part2 .container-fluid .row .upgrade_content span {
    color: #ff1414; }

#section_part2 .container-fluid .row .col-4 .row {
  margin-bottom: 15px; }
  #section_part2 .container-fluid .row .col-4 .row .col-12 {
    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; }
    #section_part2 .container-fluid .row .col-4 .row .col-12 img {
      width: 90%;
      height: auto; }
    #section_part2 .container-fluid .row .col-4 .row .col-12 .potion_time {
      border-radius: 20px;
      border: 2px solid #422700;
      padding: 2px 12px;
      margin: 5px 0px;
      background-color: #fff; }

#section_part2 .container-fluid .row .col-7 {
  padding-top: 15px; }
  #section_part2 .container-fluid .row .col-7 p {
    margin-bottom: 0px; }

#section_part2 .container-fluid .row .col-5 {
  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; }

#section_part2 .container-fluid .row .magic {
  width: 100%;
  max-width: 150px; }

#section_part2 .container-fluid .row:nth-child(4) {
  padding: 20px 0px; }

#section_part3 .stitle {
  margin-bottom: 15px; }

#section_part3 p {
  font-size: 12px; }

#section_part3 .red_content {
  font-size: 12px;
  color: #ff1414; }

#section_part4 {
  padding-bottom: 30px; }
  #section_part4 .stitle {
    margin-bottom: 15px; }
  #section_part4 p {
    font-size: 12px; }
  #section_part4 .btn-line {
    background-color: #48abaf;
    color: #ffffff;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 5px; }
    #section_part4 .btn-line:hover {
      text-decoration: none;
      background-color: #33969a; }

#section_part5 .stitle, #section_part6 .stitle {
  margin-bottom: 15px; }

#section_part5 .part5_content, #section_part6 .part5_content {
  padding-left: 22px; }
  #section_part5 .part5_content li, #section_part6 .part5_content li {
    font-size: 12px; }

.tree {
  position: absolute;
  bottom: -1%;
  width: 70%;
  z-index: -10; }
  .tree img {
    width: 100%; }

.goback_btn {
  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;
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 50px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#D7B060), color-stop(51%, #CD9514), to(#D7B060));
  background-image: linear-gradient(-180deg, #D7B060 0%, #CD9514 51%, #D7B060 100%);
  border-top: 6px solid #EFD08D;
  -webkit-box-shadow: 0 4px 10px 0 rgba(152, 90, 16, 0.5);
          box-shadow: 0 4px 10px 0 rgba(152, 90, 16, 0.5); }
  .goback_btn h3 {
    margin: 0px;
    color: #FFFFFF;
    font-size: 22px; }
  .goback_btn a {
    color: #FFFFFF;
    letter-spacing: 3px;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.7); }
    .goback_btn a:hover {
      text-decoration: none;
      color: #f9e5ac; }

@media screen and (min-width: 768px) {
  * {
    font-size: 16px; }
  .fairytale-logo {
    max-width: 500px; }
  .content-box {
    width: 90%;
    max-width: 800px; }
  #section_part2 .row:nth-child(3) .col-4 {
    padding: 0px; }
  #section_part3 p {
    font-size: 14px; }
  #section_part3 .red_content {
    font-size: 14px; }
  #section_part4 p {
    font-size: 14px; }
  #section_part5 .part5_content li, #section_part6 .part5_content li {
    font-size: 14px; }
  .goback_btn {
    height: 60px; }
    .goback_btn h3 {
      font-size: 24px; } }

@media screen and (min-width: 1200px) {
  html, body {
    width: 100%;
    height: 100%; }
  * {
    font-size: 18px; }
  body {
    background-image: url("../../img/fairytaleImg/background.png"); }
  .content-box {
    border: solid 15px rgba(255, 255, 255, 0);
    padding: 10px;
    height: 66vh;
    overflow: scroll;
    overflow-x: hidden;
    top: 0px;
    margin-bottom: 0px; }
  #section_part3 p {
    font-size: 16px; }
  #section_part3 .red_content {
    font-size: 16px; }
  #section_part4 p {
    font-size: 16px; }
  #section_part5 .part5_content li, #section_part6 .part5_content li {
    font-size: 16px; }
  .goback_btn {
    width: 13%;
    top: 20%;
    height: 60px;
    right: 0;
    border: 3px solid #EFD08D;
    border-right: none;
    border-radius: 10px 0px 0px 10px; }
    .goback_btn h3 {
      font-size: 28px;
      letter-spacing: 5px; }
  .tree {
    position: absolute;
    bottom: 0;
    width: 300px;
    z-index: -10; }
    .tree img {
      width: 100%; } }

@media screen and (min-width: 1500px) {
  .content-logo {
    padding: 30px 0px; }
  .fairytale-logo {
    max-width: 740px; }
  .content-box {
    max-width: 1000px; } }