@charset "UTF-8";
* {
  font-family: 微軟正黑體, sans-serif; }

html, body {
  width: 100%;
  height: 100vh;
  min-height: 670px;
  margin: 0;
  position: relative; }

body {
  background: url("../../img/fairytaleImg/background.png") no-repeat center center;
  background-size: cover;
  overflow: auto; }

button, a {
  cursor: pointer;
  outline: none; }

#remind-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.87);
  z-index: 1500;
  height: 100vh;
  width: 100vw;
  font-weight: 500; }
  #remind-mask div {
    position: absolute;
    width: 90%;
    color: white; }
    #remind-mask div span {
      display: block;
      text-align: center; }

#loading-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1500;
  height: 100vh;
  width: 100vw; }

.center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.highlight {
  color: #FFFD30;
  text-shadow: 0 0 3px rgba(255, 253, 48, 0.5); }

#section_titlelist .container-fluid .row .elogo {
  z-index: 1000;
  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;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0;
  padding-top: 1%; }
  #section_titlelist .container-fluid .row .elogo a {
    padding-left: 5%; }
  #section_titlelist .container-fluid .row .elogo img {
    width: 90%;
    height: auto; }

#section_titlelist .container-fluid .row .title {
  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; }
  #section_titlelist .container-fluid .row .title img {
    width: 85%;
    height: auto;
    padding-top: 2%; }

#section_titlelist .container-fluid .row .person_info {
  z-index: 1000;
  padding: 0px;
  max-width: 350px; }
  #section_titlelist .container-fluid .row .person_info .row.person_bg {
    min-height: 120px;
    height: 50%;
    background: url("../../img/magicImg/person_info.png") no-repeat;
    background-size: 100% auto;
    margin: 0;
    margin-top: 5px;
    margin-right: 5px; }
    #section_titlelist .container-fluid .row .person_info .row.person_bg .col-4 {
      padding: 0;
      height: 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; }
      #section_titlelist .container-fluid .row .person_info .row.person_bg .col-4 img {
        width: 90%;
        height: auto; }
    #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 {
      padding: 0;
      height: 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; }
      #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row {
        width: 100%;
        height: 65%; }
        #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row {
          height: 100%;
          margin: 0; }
          #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-name {
            height: 50%; }
          #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-coins {
            height: 53%; }
          #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 {
            padding: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center; }
            #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 .user_name {
              font-size: 12px;
              color: #fff; }
            #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 .row {
              margin: 0; }
              #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 .row .col-6 {
                padding: 0; }
                #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 .row .col-6 .row .col-12 #ecoin, #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 .row .col-6 .row .col-12 #diamond {
                  font-size: 14px;
                  color: #fff;
                  text-shadow: 0 0 10px #270009;
                  font-weight: 900; }
        #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row {
          height: 100%;
          margin: 0; }
          #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row .col-bank {
            height: 64%;
            padding: 0;
            padding-left: 10%; }
            #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row .col-bank .bank {
              height: 100%;
              width: auto; }
              #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row .col-bank .bank img {
                height: 100%;
                width: auto; }
                #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row .col-bank .bank img:hover {
                  -webkit-filter: saturate(1.6);
                  cursor: pointer; }
          #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row .col-logout {
            height: 36%;
            padding: 0;
            position: relative; }
            #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row .col-logout img {
              width: 100%;
              height: auto;
              vertical-align: baseline; }
              #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row .col-logout img:hover {
                -webkit-filter: saturate(1.6);
                cursor: pointer; }
          #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row .col-login {
            height: 85%;
            padding: 0;
            padding-top: 5%;
            padding-right: 5%;
            padding-left: 5%; }
            #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row .col-login .login {
              width: 100%;
              height: auto; }
              #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-4 .row .col-login .login:hover {
                -webkit-filter: saturate(1.6);
                cursor: pointer; }

#section_middle_part, #section_novice {
  position: relative; }
  #section_middle_part .container-fluid .row .gift_list, #section_novice .container-fluid .row .gift_list {
    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;
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
    z-index: 1001;
    position: relative; }
    #section_middle_part .container-fluid .row .gift_list .mirror, #section_novice .container-fluid .row .gift_list .mirror {
      min-width: 310px;
      max-width: 310px;
      width: 100%;
      position: relative; }
      #section_middle_part .container-fluid .row .gift_list .mirror img, #section_novice .container-fluid .row .gift_list .mirror img {
        width: 100%; }
    #section_middle_part .container-fluid .row .gift_list .previous_btn, #section_novice .container-fluid .row .gift_list .previous_btn {
      width: 10%;
      position: absolute;
      left: 5%;
      top: 50%;
      -webkit-transform: scale(1) translateY(-50%);
              transform: scale(1) translateY(-50%);
      -webkit-transition: 0.2s;
      transition: 0.2s;
      cursor: pointer; }
      #section_middle_part .container-fluid .row .gift_list .previous_btn:hover, #section_novice .container-fluid .row .gift_list .previous_btn:hover {
        -webkit-transform: scale(1.1) translateY(-50%);
                transform: scale(1.1) translateY(-50%); }
      #section_middle_part .container-fluid .row .gift_list .previous_btn img, #section_novice .container-fluid .row .gift_list .previous_btn img {
        width: 100%; }
    #section_middle_part .container-fluid .row .gift_list .next_btn, #section_novice .container-fluid .row .gift_list .next_btn {
      position: absolute;
      right: 5%;
      width: 10%;
      top: 50%;
      -webkit-transform: scale(1) translateY(-50%);
              transform: scale(1) translateY(-50%);
      -webkit-transition: 0.2s;
      transition: 0.2s;
      cursor: pointer; }
      #section_middle_part .container-fluid .row .gift_list .next_btn:hover, #section_novice .container-fluid .row .gift_list .next_btn:hover {
        -webkit-transform: scale(1.1) translateY(-50%);
                transform: scale(1.1) translateY(-50%); }
      #section_middle_part .container-fluid .row .gift_list .next_btn img, #section_novice .container-fluid .row .gift_list .next_btn img {
        width: 100%; }
    #section_middle_part .container-fluid .row .gift_list .row_gift_content, #section_novice .container-fluid .row .gift_list .row_gift_content {
      position: absolute;
      padding: 2%;
      width: 50%;
      height: 70%;
      top: 15%;
      left: 25%; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content .gift_photo, #section_novice .container-fluid .row .gift_list .row_gift_content .gift_photo {
        width: 75%;
        margin-left: auto;
        margin-right: auto; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content .title-row, #section_novice .container-fluid .row .gift_list .row_gift_content .title-row {
        font-size: 14px;
        font-weight: 500;
        color: #7E3A00;
        text-align: center; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content .row_stitle, #section_novice .container-fluid .row .gift_list .row_gift_content .row_stitle {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_stitle, #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_scontnet, #section_novice .container-fluid .row .gift_list .row_gift_content .award_stitle, #section_novice .container-fluid .row .gift_list .row_gift_content .award_scontnet {
        font-size: 12px; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content .notice, #section_novice .container-fluid .row .gift_list .row_gift_content .notice {
        font-size: 12px; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_stock, #section_novice .container-fluid .row .gift_list .row_gift_content .award_stock {
        color: #ff1616;
        font-size: 12px; }
  #section_middle_part .container-fluid .row .potion_box, #section_novice .container-fluid .row .potion_box {
    max-width: 850px;
    min-width: 770px;
    width: 770px;
    background-image: url("../../img/fairytaleImg/crystal-box.png");
    z-index: 100;
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0; }
    #section_middle_part .container-fluid .row .potion_box .row, #section_novice .container-fluid .row .potion_box .row {
      margin-top: 7%;
      width: 88%;
      padding: 5px; }
      #section_middle_part .container-fluid .row .potion_box .row .col-3, #section_novice .container-fluid .row .potion_box .row .col-3 {
        height: 75%;
        padding: 0px; }
        #section_middle_part .container-fluid .row .potion_box .row .col-3 .mix_upgrade .row, #section_novice .container-fluid .row .potion_box .row .col-3 .mix_upgrade .row {
          margin: 0;
          width: 100%; }
          #section_middle_part .container-fluid .row .potion_box .row .col-3 .mix_upgrade .row .col-6, #section_novice .container-fluid .row .potion_box .row .col-3 .mix_upgrade .row .col-6 {
            padding: 0;
            padding-top: 10px;
            height: 100%;
            width: auto; }
        #section_middle_part .container-fluid .row .potion_box .row .col-3 .col, #section_novice .container-fluid .row .potion_box .row .col-3 .col {
          padding: 0; }
          #section_middle_part .container-fluid .row .potion_box .row .col-3 .col img, #section_novice .container-fluid .row .potion_box .row .col-3 .col img {
            width: 100%;
            height: auto; }
        #section_middle_part .container-fluid .row .potion_box .row .col-3 .now_finish, #section_middle_part .container-fluid .row .potion_box .row .col-3 .mix_finish, #section_novice .container-fluid .row .potion_box .row .col-3 .now_finish, #section_novice .container-fluid .row .potion_box .row .col-3 .mix_finish {
          padding-top: 5px; }
        #section_middle_part .container-fluid .row .potion_box .row .col-3 .potion_colum, #section_novice .container-fluid .row .potion_box .row .col-3 .potion_colum {
          padding: 0;
          position: relative; }
          #section_middle_part .container-fluid .row .potion_box .row .col-3 .potion_colum .potion, #section_novice .container-fluid .row .potion_box .row .col-3 .potion_colum .potion {
            width: 100%;
            height: 100%;
            top: 0%; }
          #section_middle_part .container-fluid .row .potion_box .row .col-3 .potion_colum .potion_finish, #section_novice .container-fluid .row .potion_box .row .col-3 .potion_colum .potion_finish {
            -webkit-filter: drop-shadow(0px 0px 3px rgba(179, 248, 152, 0.9));
                    filter: drop-shadow(0px 0px 3px rgba(179, 248, 152, 0.9)); }
          #section_middle_part .container-fluid .row .potion_box .row .col-3 .potion_colum .count_time, #section_novice .container-fluid .row .potion_box .row .col-3 .potion_colum .count_time {
            width: 100%;
            text-align: center;
            color: white;
            font-size: 16px;
            background: rgba(51, 51, 51, 0.75);
            position: absolute;
            top: 50%;
            right: 0;
            letter-spacing: 1px;
            font-weight: 500;
            -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
            text-shadow: 0 3px 8px #000;
            line-height: 35px;
            white-space: nowrap; }
  #section_middle_part .container-fluid .row .menu, #section_novice .container-fluid .row .menu {
    width: 25%;
    top: 200px;
    right: 0;
    position: fixed;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end; }
    #section_middle_part .container-fluid .row .menu a, #section_novice .container-fluid .row .menu a {
      width: 40%;
      text-align: right;
      margin-right: -15px;
      -webkit-transition: 0.3s;
      transition: 0.3s; }
      #section_middle_part .container-fluid .row .menu a:hover, #section_novice .container-fluid .row .menu a:hover {
        margin-right: 0px; }
      #section_middle_part .container-fluid .row .menu a img, #section_novice .container-fluid .row .menu a img {
        width: 100%;
        height: auto; }
  #section_middle_part .col.mix_upgrade, #section_middle_part .col.now_finish, #section_middle_part .col.mix_finish img, #section_novice .col.mix_upgrade, #section_novice .col.now_finish, #section_novice .col.mix_finish img {
    cursor: pointer; }

.confirm_message_box {
  border-top: solid 3px white;
  border-bottom: solid 3px white; }
  .confirm_message_box .common-font {
    font-size: 19px; }
  .confirm_message_box .left-align {
    text-align: left; }

.orange_message_box {
  border-radius: 5px; }

.tutorial_message_box.row {
  border-top: solid 3px white;
  height: 185px; }
  .tutorial_message_box.row p {
    text-align: left;
    font-size: 20px; }
  .tutorial_message_box.row .col-2 {
    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;
    position: relative; }
  .tutorial_message_box.row .col-10 {
    margin-bottom: 20px; }

.confirm_message_box p, .tutorial_message_box p, .orange_message_box p {
  margin-top: 5px;
  color: white;
  letter-spacing: 2px;
  font-size: 18px;
  line-height: 24px;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  font-weight: 400;
  margin-bottom: 0px; }

.confirm_message_box .btn_iknow, .tutorial_message_box .btn_iknow, .orange_message_box .btn_iknow {
  cursor: pointer;
  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: 3px 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);
  border-radius: 10px;
  font-size: 25px;
  color: #FFFFFF;
  letter-spacing: 3px;
  text-align: center;
  text-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  outline: none; }
  .confirm_message_box .btn_iknow:hover, .tutorial_message_box .btn_iknow:hover, .orange_message_box .btn_iknow:hover {
    text-decoration: none;
    color: #f9e5ac; }

.confirm_message_box .message_box_btn_style, .tutorial_message_box .message_box_btn_style, .orange_message_box .message_box_btn_style {
  font-size: 18px;
  margin-right: 10px; }

.confirm_message_box .tutorial_message_box_btn, .tutorial_message_box .tutorial_message_box_btn, .orange_message_box .tutorial_message_box_btn {
  padding: 8px 18px;
  margin-bottom: 20px; }

.my_treasure_message_box {
  border: 5px solid #887868; }
  .my_treasure_message_box p {
    margin-top: 5px;
    color: white;
    letter-spacing: 2px;
    font-size: 18px;
    line-height: 24px;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    font-weight: 400;
    margin-bottom: 0px; }
  .my_treasure_message_box .message_box_btn_style {
    font-size: 18px;
    margin-right: 10px; }
  .my_treasure_message_box .common-font {
    font-size: 19px; }
  .my_treasure_message_box .common-font-m {
    font-size: 18px;
    line-height: 26px; }
  .my_treasure_message_box .text_color {
    color: #452E0A; }
  .my_treasure_message_box .btn {
    color: white;
    background-color: #6E5537;
    border: 3px solid #4A382A;
    padding: 5px 10px;
    outline: none;
    -webkit-transition: 0.2s;
    transition: 0.2s; }
    .my_treasure_message_box .btn:hover {
      background-color: #4A382A; }

#near_activity {
  z-index: 1000;
  position: absolute;
  bottom: 0;
  left: 7%;
  width: 8%;
  height: auto; }
  #near_activity .cat img {
    width: 100%; }
  #near_activity .cat .cat_title {
    position: absolute;
    top: 57%;
    right: 11%;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 20px;
    text-shadow: 0px 0px 15px black; }
    #near_activity .cat .cat_title:hover {
      cursor: pointer;
      color: #f4eaff; }

#my_treasure {
  z-index: 1000;
  position: absolute;
  bottom: 10%;
  right: 2%;
  max-width: 210px;
  width: 15%;
  height: auto; }
  #my_treasure .book {
    position: relative; }
    #my_treasure .book img {
      width: 100%;
      -webkit-transition: 0.2s;
      transition: 0.2s;
      cursor: pointer; }
      #my_treasure .book img:hover {
        -webkit-transform: scale(1.05);
                transform: scale(1.05); }

#power_rank {
  z-index: 510;
  position: absolute;
  bottom: 2%;
  left: 12%;
  width: 15%;
  max-width: 210px;
  height: auto; }
  #power_rank .hat {
    position: relative; }
    #power_rank .hat img {
      width: 100%;
      -webkit-transition: 0.2s;
      transition: 0.2s;
      cursor: pointer; }
      #power_rank .hat img:hover {
        -webkit-transform: scale(1.05);
                transform: scale(1.05); }

.function_description {
  position: absolute;
  top: 0;
  z-index: 500;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 18px;
  letter-spacing: 1px; }
  .function_description .finish_novice_btn {
    padding: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    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: 5px solid #EFD08D;
    -webkit-box-shadow: 0 4px 10px 0 rgba(152, 90, 16, 0.8);
            box-shadow: 0 4px 10px 0 rgba(152, 90, 16, 0.8);
    border-radius: 10px;
    font-size: 32px;
    color: #FFFFFF;
    letter-spacing: 3px;
    text-align: center;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
    cursor: pointer; }
  .function_description .explain_gift {
    min-width: 320px;
    max-width: 320px;
    min-height: 385px;
    position: absolute;
    top: 100px;
    left: 1vw;
    width: 23%;
    height: 58%;
    border: 3px solid #fff; }
  .function_description .content_gift {
    position: absolute;
    display: block;
    bottom: 55%;
    left: 25%;
    width: 17%; }
  .function_description .explain_cat {
    position: fixed;
    bottom: 0%;
    left: 6%;
    width: 13%;
    height: 28%;
    border: 3px solid #fff; }
  .function_description .content_cat {
    position: absolute;
    display: block;
    bottom: 7%;
    left: 28%;
    width: 16%; }
  .function_description .explain_treasure {
    position: fixed;
    bottom: 9%;
    right: 4%;
    width: 15%;
    height: 39%;
    border: 3px solid #fff; }
  .function_description .content_treasure {
    position: absolute;
    display: block;
    bottom: 23%;
    right: 15%;
    width: 16%; }
  .function_description .explain_person_info {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 26%;
    height: 20%;
    border: 3px solid #fff; }
  .function_description .content_person_info {
    position: absolute;
    display: block;
    top: 7%;
    right: 27%; }

#login_dialog {
  z-index: 1000;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0; }
  #login_dialog .login_potion_box {
    z-index: 1001;
    position: fixed;
    left: 50%;
    top: 450px;
    width: 850px;
    height: 400px;
    background-image: url("../../img/fairytaleImg/crystal-box.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0px 4%; }
    #login_dialog .login_potion_box .row {
      width: 100%;
      text-align: center;
      padding-top: 2%; }
      #login_dialog .login_potion_box .row .col-3 {
        padding: 0px 10px; }
        #login_dialog .login_potion_box .row .col-3 a img:hover {
          -webkit-filter: saturate(1.6); }
      #login_dialog .login_potion_box .row img {
        width: 100%; }
    #login_dialog .login_potion_box .row_nothanks_btn {
      padding-top: 3%; }
      #login_dialog .login_potion_box .row_nothanks_btn img {
        width: 50%;
        height: auto; }
        #login_dialog .login_potion_box .row_nothanks_btn img:hover {
          -webkit-filter: saturate(1.5) contrast(1.2) brightness(1.1);
          cursor: pointer; }

#speaker {
  position: absolute;
  right: 2%;
  top: 130px;
  z-index: 1000; }
  #speaker .speaker-field {
    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; }
  #speaker h3 {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    display: inline-block;
    margin: 0;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8); }
  #speaker a {
    width: 35px;
    height: 35px;
    display: inline-block;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    cursor: pointer;
    background-image: url("../../img/fairytaleImg/speaker.svg");
    background-size: contain;
    -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
            filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); }
    #speaker a:hover {
      -webkit-transform: scale(1.05);
              transform: scale(1.05); }
  #speaker .mute {
    background-image: url("../../img/fairytaleImg/mute.svg"); }

.tree {
  width: 25%;
  position: absolute;
  bottom: 0;
  z-index: 0;
  right: 6%; }
  .tree img {
    width: 100%; }

.center {
  font-size: 24px; }

.swal2-popup .swal2-actions {
  margin: 0 !important;
  padding: 0px 0px 0px; }

.swal2-popup .swal2-content {
  min-height: 130px !important;
  padding-bottom: 20px !important; }

.swal2-container.swal2-shown {
  background-color: rgba(0, 0, 0, 0.7) !important; }

.swal2-popup-auto {
  height: 210px !important; }

.small-font {
  font-size: 16px;
  line-height: 24px !important; }

@media screen and (max-width: 1536px) {
  #login_dialog .login_potion_box {
    left: 53%;
    top: 400px; } }

@media screen and (max-width: 1440px) {
  #login_dialog .login_potion_box {
    left: 55%;
    top: 390px; } }

@media screen and (max-width: 1300px) {
  #login_dialog .login_potion_box {
    left: 59%; } }

@media screen and (max-width: 1200px) {
  html, body {
    min-height: 600px; }
  #section_titlelist .container-fluid .row .title img {
    width: 90%;
    height: auto;
    padding-bottom: 0%; }
  #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 {
    height: 92%; }
    #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-name {
      height: 40%; }
    #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-coins {
      height: 50%; }
    #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 .user_name {
      -webkit-transform-origin: left;
      -webkit-transform: scale(0.9);
      white-space: nowrap; }
    #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 .row .col-6 .row .col-12 {
      height: 50%; }
      #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 .row .col-6 .row .col-12 #ecoin, #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 .row .col-6 .row .col-12 #diamond {
        -webkit-transform-origin: left;
        -webkit-transform: scale(0.9);
        white-space: nowrap; }
  #section_middle_part .container-fluid .row .gift_list, #section_novice .container-fluid .row .gift_list {
    padding: 0 2%; }
    #section_middle_part .container-fluid .row .gift_list .mirror, #section_novice .container-fluid .row .gift_list .mirror {
      min-width: 270px;
      max-width: 270px;
      width: 100%; }
    #section_middle_part .container-fluid .row .gift_list .row_gift_content, #section_novice .container-fluid .row .gift_list .row_gift_content {
      width: 50%;
      height: 70%;
      top: 15%;
      left: 25%; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content .gift_photo, #section_novice .container-fluid .row .gift_list .row_gift_content .gift_photo {
        width: 65%; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content .title-row, #section_novice .container-fluid .row .gift_list .row_gift_content .title-row {
        font-size: 12px; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_stitle, #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_scontnet, #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_stock, #section_novice .container-fluid .row .gift_list .row_gift_content .award_stitle, #section_novice .container-fluid .row .gift_list .row_gift_content .award_scontnet, #section_novice .container-fluid .row .gift_list .row_gift_content .award_stock {
        font-size: 12px;
        -webkit-transform: scale(0.9);
                transform: scale(0.9);
        -webkit-transform-origin: 0 0;
                transform-origin: 0 0; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content .notice, #section_novice .container-fluid .row .gift_list .row_gift_content .notice {
        font-size: 12px;
        width: 95%;
        margin-left: 4%; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .notice .award_note, #section_novice .container-fluid .row .gift_list .row_gift_content .notice .award_note {
          width: 115%;
          -webkit-transform: scale(0.85);
                  transform: scale(0.85);
          -webkit-transform-origin: 0 0;
                  transform-origin: 0 0;
          letter-spacing: normal !important; }
  #section_middle_part .container-fluid .row .potion_box, #section_novice .container-fluid .row .potion_box {
    min-width: 700px; }
    #section_middle_part .container-fluid .row .potion_box .row .col-3 .potion_colum .count_time, #section_novice .container-fluid .row .potion_box .row .col-3 .potion_colum .count_time {
      font-size: 13px;
      line-height: 30px; }
  #my_treasure {
    bottom: 5%;
    right: 2%;
    max-width: 210px;
    width: 12%; }
  #power_rank {
    left: 14%;
    width: 12%; }
  .function_description .explain_gift {
    bottom: 38%;
    left: 1%;
    width: 22%;
    height: 35%; }
  .function_description .content_gift {
    bottom: 60%;
    left: 25%;
    width: 25%; }
  .function_description .explain_cat {
    width: 18%;
    height: 26%; }
  .function_description .content_cat {
    bottom: 10%;
    width: 23%;
    left: 26%; }
  .function_description .explain_treasure {
    width: 18%;
    height: 31%;
    right: 4%; }
  .function_description .content_treasure {
    width: 22%;
    right: 23%;
    bottom: 24%; }
  .function_description .explain_person_info {
    width: 26%;
    height: 13%; }
  .function_description .content_person_info {
    top: 3%; }
  #login_dialog .login_potion_box {
    left: 58%;
    top: 330px;
    width: 720px; }
  #speaker {
    top: 110px; } }

@media screen and (max-width: 1050px) {
  #login_dialog .login_potion_box {
    left: 60%; } }

@media screen and (max-width: 992px) {
  html, body {
    min-height: 500px; }
  #section_titlelist {
    height: 130px; }
    #section_titlelist .container-fluid {
      height: 100%; }
      #section_titlelist .container-fluid .row {
        height: 100%; }
        #section_titlelist .container-fluid .row .elogo, #section_titlelist .container-fluid .row .title, #section_titlelist .container-fluid .row .person_info {
          height: 100%; }
        #section_titlelist .container-fluid .row .title {
          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_titlelist .container-fluid .row .title img {
            width: 100%; }
        #section_titlelist .container-fluid .row .person_info .row.person_bg {
          height: 100%; }
          #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-name {
            height: 52%; }
          #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-coins {
            height: 55%; }
  #section_middle_part, #section_novice {
    padding-top: 0%; }
    #section_middle_part .container-fluid .row .gift_list, #section_novice .container-fluid .row .gift_list {
      padding: 0; }
      #section_middle_part .container-fluid .row .gift_list .mirror, #section_novice .container-fluid .row .gift_list .mirror {
        min-width: 220px;
        max-width: 220px;
        width: 100%; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content, #section_novice .container-fluid .row .gift_list .row_gift_content {
        width: 50%;
        left: 25%; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .gift_photo, #section_novice .container-fluid .row .gift_list .row_gift_content .gift_photo {
          width: 70%;
          margin-top: 3px;
          margin-bottom: 3px; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .title-row, #section_novice .container-fluid .row .gift_list .row_gift_content .title-row {
          font-size: 12px; }
          #section_middle_part .container-fluid .row .gift_list .row_gift_content .title-row .award_title, #section_novice .container-fluid .row .gift_list .row_gift_content .title-row .award_title {
            -webkit-transform: scale(0.9);
                    transform: scale(0.9);
            -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
            width: 110%;
            letter-spacing: normal; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_stitle, #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_scontnet, #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_stock, #section_novice .container-fluid .row .gift_list .row_gift_content .award_stitle, #section_novice .container-fluid .row .gift_list .row_gift_content .award_scontnet, #section_novice .container-fluid .row .gift_list .row_gift_content .award_stock {
          font-size: 12px;
          -webkit-transform: scale(0.8);
                  transform: scale(0.8);
          -webkit-transform-origin: 0 0;
                  transform-origin: 0 0;
          line-height: 14px;
          white-space: nowrap; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_scontnet, #section_novice .container-fluid .row .gift_list .row_gift_content .award_scontnet {
          -webkit-transform: scale(0.8) translateX(-10px);
                  transform: scale(0.8) translateX(-10px); }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .notice, #section_novice .container-fluid .row .gift_list .row_gift_content .notice {
          font-size: 12px;
          width: 95%;
          margin-left: 4%; }
          #section_middle_part .container-fluid .row .gift_list .row_gift_content .notice .award_note, #section_novice .container-fluid .row .gift_list .row_gift_content .notice .award_note {
            width: 135%;
            -webkit-transform: scale(0.75);
                    transform: scale(0.75);
            -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
            letter-spacing: normal !important; }
    #section_middle_part .container-fluid .row .potion_box, #section_novice .container-fluid .row .potion_box {
      min-width: 600px; }
      #section_middle_part .container-fluid .row .potion_box .row .col-3 .potion_colum .count_time, #section_novice .container-fluid .row .potion_box .row .col-3 .potion_colum .count_time {
        font-size: 12px;
        white-space: nowrap;
        line-height: 25px;
        -webkit-transform-origin: center;
        -webkit-transform: scale(0.9) translateY(-40%);
        letter-spacing: 0px; }
    #section_middle_part .container-fluid .row .menu a, #section_novice .container-fluid .row .menu a {
      width: 40%;
      height: 25px;
      text-align: right;
      margin-right: -15px;
      -webkit-transition: 0.3s;
      transition: 0.3s; }
      #section_middle_part .container-fluid .row .menu a:hover, #section_novice .container-fluid .row .menu a:hover {
        margin-right: 0px; }
      #section_middle_part .container-fluid .row .menu a img, #section_novice .container-fluid .row .menu a img {
        width: 100%;
        height: auto; }
  #my_treasure {
    bottom: 8%;
    width: 14%; }
  #power_rank {
    bottom: 5%;
    left: 11%;
    width: 15%; }
  #login_dialog .login_potion_box {
    left: 60%;
    top: 270px;
    width: 650px; }
  .function_description {
    font-size: 12px; }
    .function_description .finish_novice_btn {
      padding: 8px;
      position: fixed;
      border: 3px solid #EFD08D;
      font-size: 20px;
      letter-spacing: 2px; }
    .function_description .explain_gift {
      bottom: 28%;
      left: 2%;
      width: 20%;
      height: 47%; }
    .function_description .content_gift {
      left: 23%;
      bottom: 57%;
      left: 24%; }
    .function_description .explain_cat {
      width: 13%;
      height: 29%;
      left: 8%; }
    .function_description .content_cat {
      bottom: 7%;
      width: 23%;
      left: 23%; }
    .function_description .explain_treasure {
      width: 18%;
      height: 47%;
      right: 4%;
      bottom: 3%; }
    .function_description .content_treasure {
      bottom: 12%;
      right: 23%; }
    .function_description .explain_person_info {
      width: 35%;
      height: 28%; }
    .function_description .content_person_info {
      top: 3%;
      right: 36%; }
  #speaker {
    right: 2%;
    top: 110px; }
    #speaker h3 {
      font-size: 14px;
      text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8); }
    #speaker a {
      width: 25px;
      height: 25px; } }

@media screen and (max-width: 880px) {
  html, body {
    min-height: 480px; }
  #section_titlelist {
    height: 130px; }
    #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 {
      height: 82%; }
  #section_middle_part, #section_novice {
    padding-top: 0%; }
    #section_middle_part .container-fluid .row .potion_box, #section_novice .container-fluid .row .potion_box {
      min-width: 520px; }
  #login_dialog .login_potion_box {
    left: 62%;
    top: 250px;
    width: 560px; } }

@media screen and (max-width: 768px) {
  html, body {
    min-height: 400px; }
  #section_titlelist {
    position: relative;
    height: 110px; }
    #section_titlelist .container-fluid {
      height: 100%; }
      #section_titlelist .container-fluid .row {
        height: 100%; }
        #section_titlelist .container-fluid .row .title {
          padding-top: 2%;
          -webkit-box-align: start;
              -ms-flex-align: start;
                  align-items: flex-start; }
        #section_titlelist .container-fluid .row .person_info .row.person_bg {
          max-height: 100px;
          height: 100px; }
          #section_titlelist .container-fluid .row .person_info .row.person_bg #badge img {
            -webkit-transform: translateY(-15px);
                    transform: translateY(-15px); }
          #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 {
            height: 80%; }
            #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-name {
              height: 43%; }
            #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-coins {
              height: 50%; }
              #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-coins .user_name {
                -webkit-transform: translateX(-5px);
                        transform: translateX(-5px);
                left: 0;
                padding: 0;
                -webkit-transform-origin: left;
                -webkit-transform: scale(0.8);
                white-space: nowrap; }
              #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-coins .row .col-6 .row .col-12 {
                height: 50%; }
  #section_middle_part, #section_novice {
    padding-top: 0%; }
    #section_middle_part .container-fluid .row .gift_list, #section_novice .container-fluid .row .gift_list {
      padding: 0; }
      #section_middle_part .container-fluid .row .gift_list .mirror, #section_novice .container-fluid .row .gift_list .mirror {
        min-width: 170px;
        max-width: 170px; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content, #section_novice .container-fluid .row .gift_list .row_gift_content {
        width: 54%;
        left: 23%; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .gift_photo, #section_novice .container-fluid .row .gift_list .row_gift_content .gift_photo {
          width: 60%; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .title-row, #section_novice .container-fluid .row .gift_list .row_gift_content .title-row {
          font-size: 12px;
          max-height: 30px; }
          #section_middle_part .container-fluid .row .gift_list .row_gift_content .title-row .award_title, #section_novice .container-fluid .row .gift_list .row_gift_content .title-row .award_title {
            -webkit-transform: scale(0.7);
                    transform: scale(0.7);
            -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
            width: 140%;
            letter-spacing: normal; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_stitle, #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_scontnet, #section_novice .container-fluid .row .gift_list .row_gift_content .award_stitle, #section_novice .container-fluid .row .gift_list .row_gift_content .award_scontnet {
          font-size: 12px;
          -webkit-transform: scale(0.6);
                  transform: scale(0.6);
          -webkit-transform-origin: 0 0;
                  transform-origin: 0 0;
          line-height: 12px;
          white-space: nowrap; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_stock, #section_novice .container-fluid .row .gift_list .row_gift_content .award_stock {
          font-size: 12px;
          -webkit-transform: scale(0.6);
                  transform: scale(0.6);
          -webkit-transform-origin: -80% 0;
                  transform-origin: -80% 0;
          line-height: 12px;
          white-space: nowrap; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_scontnet, #section_novice .container-fluid .row .gift_list .row_gift_content .award_scontnet {
          -webkit-transform: scale(0.6) translateX(-40px);
                  transform: scale(0.6) translateX(-40px); }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .notice, #section_novice .container-fluid .row .gift_list .row_gift_content .notice {
          font-size: 12px;
          width: 95%;
          margin-left: 4%; }
          #section_middle_part .container-fluid .row .gift_list .row_gift_content .notice .award_note, #section_novice .container-fluid .row .gift_list .row_gift_content .notice .award_note {
            width: 160%;
            -webkit-transform: scale(0.6);
                    transform: scale(0.6);
            -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
            letter-spacing: normal !important; }
    #section_middle_part .container-fluid .row .potion_box, #section_novice .container-fluid .row .potion_box {
      min-width: 450px; }
      #section_middle_part .container-fluid .row .potion_box .row .col-3 .potion_colum .count_time, #section_novice .container-fluid .row .potion_box .row .col-3 .potion_colum .count_time {
        -webkit-text-stroke: 0.2px #000;
        font-size: 12px;
        white-space: nowrap;
        line-height: 25px;
        -webkit-transform-origin: left top;
        -webkit-transform: scale(0.7) translateY(-40%);
        letter-spacing: 0px;
        background: transparent;
        text-shadow: 0px 2px 3px #000;
        padding-left: 8%;
        -webkit-filter: drop-shadow(2px 0px 3px #000);
                filter: drop-shadow(2px 0px 3px #000); }
    #section_middle_part .container-fluid .row .menu, #section_novice .container-fluid .row .menu {
      top: 150px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      padding: 0;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end; }
      #section_middle_part .container-fluid .row .menu a, #section_novice .container-fluid .row .menu a {
        width: 75px;
        height: 21px;
        text-align: right;
        margin-right: -15px;
        -webkit-transition: 0.3s;
        transition: 0.3s; }
        #section_middle_part .container-fluid .row .menu a:hover, #section_novice .container-fluid .row .menu a:hover {
          margin-right: 0px; }
        #section_middle_part .container-fluid .row .menu a img, #section_novice .container-fluid .row .menu a img {
          width: 100%; }
  #my_treasure {
    bottom: 10%; }
  #power_rank {
    bottom: 6%;
    left: 12%;
    width: 14%; }
  #login_dialog .login_potion_box {
    left: 62%;
    top: 220px;
    width: 70%; }
  .function_description {
    font-size: 12px; }
    .function_description .finish_novice_btn {
      padding: 8px;
      position: fixed;
      border: 3px solid #EFD08D;
      font-size: 20px;
      letter-spacing: 2px; }
    .function_description .explain_gift {
      bottom: 30%;
      left: 1%;
      width: 22%;
      height: 43%; }
    .function_description .content_gift {
      bottom: 57%; }
    .function_description .explain_cat {
      width: 16%;
      height: 29%;
      left: 8%; }
    .function_description .content_cat {
      bottom: 7%;
      width: 23%;
      left: 26%; }
    .function_description .explain_treasure {
      width: 18%;
      height: 41%;
      right: 4%; }
    .function_description .content_treasure {
      bottom: 12%; }
    .function_description .explain_person_info {
      width: 35%;
      height: 24%; }
    .function_description .content_person_info {
      top: 3%;
      right: 36%; }
  #speaker {
    right: 2%;
    top: 90px; }
    #speaker h3 {
      font-size: 12px;
      text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8); }
    #speaker a {
      width: 20px;
      height: 20px; } }

@media screen and (max-width: 670px) {
  html, body {
    min-height: 360px; }
  #section_titlelist .container-fluid {
    height: 100%; }
    #section_titlelist .container-fluid .row {
      height: 100%; }
      #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 {
        height: 65%; }
        #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-name {
          padding: 11px 0px; }
        #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-coins .row .col-6 {
          height: 32px;
          font-size: 12px;
          -webkit-transform: scale(0.86) translateX(-6px);
                  transform: scale(0.86) translateX(-6px); }
  #section_middle_part, #section_novice {
    padding-top: 0%; }
    #section_middle_part .container-fluid .row .potion_box, #section_novice .container-fluid .row .potion_box {
      min-width: 400px; }
    #section_middle_part .container-fluid .row .menu, #section_novice .container-fluid .row .menu {
      top: 130px; }
  #my_treasure {
    bottom: 3%; }
  #power_rank {
    bottom: 0%; } }

@media screen and (max-width: 580px) {
  .tutorial_message_box.row {
    height: 165px; }
    .tutorial_message_box.row p {
      margin-top: -7px;
      font-size: 15px; }
    .tutorial_message_box.row .tutorial_message_box_btn {
      margin-left: 5px;
      padding: 5px 5px; }
  .confirm_message_box .message_box_btn_style, .tutorial_message_box .message_box_btn_style, .my_treasure_message_box .message_box_btn_style, .orange_message_box .message_box_btn_style {
    font-size: 15px;
    margin-right: 3px;
    margin-bottom: 5px;
    padding: 0 13px; }
  .confirm_message_box p, .tutorial_message_box p, .my_treasure_message_box p, .orange_message_box p {
    line-height: 26px; }
  .confirm_message_box .common-font, .tutorial_message_box .common-font, .my_treasure_message_box .common-font, .orange_message_box .common-font {
    font-size: 15px; }
  .confirm_message_box .btn_iknow, .tutorial_message_box .btn_iknow, .my_treasure_message_box .btn_iknow, .orange_message_box .btn_iknow {
    border: 2px solid #EFD08D;
    border-radius: 7px;
    font-size: 16px; }
  #section_titlelist {
    position: relative;
    height: 30%; }
    #section_titlelist .container-fluid .row .person_info .row.person_bg {
      height: 72%; }
      #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 {
        height: 100%; }
        #section_titlelist .container-fluid .row .person_info .row.person_bg .col-8 .row .col-8 .row .col-12 .user_name {
          -webkit-transform: scale(0.7);
          white-space: nowrap; }
  #section_middle_part, #section_novice {
    padding-top: 0; }
    #section_middle_part .container-fluid .row .gift_list, #section_novice .container-fluid .row .gift_list {
      padding: 0 2%;
      background-size: 95% auto; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_pic, #section_novice .container-fluid .row .gift_list .row_gift_pic {
        height: 40%; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_pic .col-3gulp, #section_novice .container-fluid .row .gift_list .row_gift_pic .col-3gulp {
          cursor: pointer;
          padding: 1px; }
          #section_middle_part .container-fluid .row .gift_list .row_gift_pic .col-3gulp img, #section_novice .container-fluid .row .gift_list .row_gift_pic .col-3gulp img {
            width: 22%; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_pic .col-6 .gift_photo, #section_novice .container-fluid .row .gift_list .row_gift_pic .col-6 .gift_photo {
          width: 90%; }
      #section_middle_part .container-fluid .row .gift_list .row_gift_content, #section_novice .container-fluid .row .gift_list .row_gift_content {
        font-size: 12px; }
        #section_middle_part .container-fluid .row .gift_list .row_gift_content .award_note, #section_novice .container-fluid .row .gift_list .row_gift_content .award_note {
          padding-left: 0%;
          margin-top: 0%; }
    #section_middle_part .container-fluid .row .potion_box, #section_novice .container-fluid .row .potion_box {
      height: 180px; }
      #section_middle_part .container-fluid .row .potion_box .row .col-3 .potion_colum .count_time, #section_novice .container-fluid .row .potion_box .row .col-3 .potion_colum .count_time {
        -webkit-transform: scale(0.6) translateY(-40%); }
    #section_middle_part .container-fluid .row .menu a, #section_novice .container-fluid .row .menu a {
      height: 8.5%; }
  .function_description {
    font-size: 12px; }
    .function_description .finish_novice_btn {
      padding: 8px;
      position: fixed;
      border: 3px solid #EFD08D;
      font-size: 20px;
      letter-spacing: 2px; }
    .function_description .explain_gift {
      bottom: 28%;
      left: 1%;
      width: 22%;
      height: 45%; }
    .function_description .content_gift {
      bottom: 57%;
      -webkit-transform: scale(0.9);
      white-space: nowrap; }
    .function_description .explain_cat {
      width: 16%;
      height: 29%;
      left: 8%; }
    .function_description .content_cat {
      bottom: 7%;
      width: 23%;
      left: 25%;
      -webkit-transform: scale(0.9); }
    .function_description .explain_treasure {
      width: 18%;
      height: 41%;
      right: 4%; }
    .function_description .content_treasure {
      right: 22%;
      bottom: 12%;
      -webkit-transform: scale(0.9); }
    .function_description .explain_person_info {
      width: 35%;
      height: 24%; }
    .function_description .content_person_info {
      top: 3%;
      right: 36%;
      -webkit-transform: scale(0.9); } }

.upgrade_animation {
  -webkit-animation: upgrade 1.5s alternate;
          animation: upgrade 1.5s alternate; }

.finish_animation {
  -webkit-animation: finish 1.5s infinite;
          animation: finish 1.5s infinite; }

.press_animation {
  -webkit-animation: press_upgrade 1s infinite;
          animation: press_upgrade 1s infinite; }

@-webkit-keyframes finish {
  0% {
    -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.8));
            filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.8)); }
  50% {
    -webkit-filter: drop-shadow(0px 0px 8px white);
            filter: drop-shadow(0px 0px 8px white); }
  100% {
    -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.8));
            filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.8)); } }

@keyframes finish {
  0% {
    -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.8));
            filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.8)); }
  50% {
    -webkit-filter: drop-shadow(0px 0px 8px white);
            filter: drop-shadow(0px 0px 8px white); }
  100% {
    -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.8));
            filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.8)); } }

@-webkit-keyframes upgrade {
  0% {
    -webkit-filter: blur(0px) brightness(1);
            filter: blur(0px) brightness(1); }
  30% {
    -webkit-filter: blur(0px) brightness(1.2);
            filter: blur(0px) brightness(1.2); }
  60% {
    -webkit-filter: blur(0px) brightness(1);
            filter: blur(0px) brightness(1); }
  100% {
    -webkit-filter: blur(16px) brightness(2.5);
            filter: blur(16px) brightness(2.5);
    opacity: 1; } }

@keyframes upgrade {
  0% {
    -webkit-filter: blur(0px) brightness(1);
            filter: blur(0px) brightness(1); }
  30% {
    -webkit-filter: blur(0px) brightness(1.2);
            filter: blur(0px) brightness(1.2); }
  60% {
    -webkit-filter: blur(0px) brightness(1);
            filter: blur(0px) brightness(1); }
  100% {
    -webkit-filter: blur(16px) brightness(2.5);
            filter: blur(16px) brightness(2.5);
    opacity: 1; } }

@-webkit-keyframes press_upgrade {
  0% {
    -webkit-filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3);
            filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3); }
  25% {
    -webkit-filter: drop-shadow(0px 0px 5px rgba(215, 255, 175, 0.8)) brightness(1.1);
            filter: drop-shadow(0px 0px 5px rgba(215, 255, 175, 0.8)) brightness(1.1); }
  50% {
    -webkit-filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3);
            filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3); }
  75% {
    -webkit-filter: drop-shadow(0px 0px 5px rgba(215, 255, 175, 0.8)) brightness(1.1);
            filter: drop-shadow(0px 0px 5px rgba(215, 255, 175, 0.8)) brightness(1.1); }
  100% {
    -webkit-filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3);
            filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3); } }

@keyframes press_upgrade {
  0% {
    -webkit-filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3);
            filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3); }
  25% {
    -webkit-filter: drop-shadow(0px 0px 5px rgba(215, 255, 175, 0.8)) brightness(1.1);
            filter: drop-shadow(0px 0px 5px rgba(215, 255, 175, 0.8)) brightness(1.1); }
  50% {
    -webkit-filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3);
            filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3); }
  75% {
    -webkit-filter: drop-shadow(0px 0px 5px rgba(215, 255, 175, 0.8)) brightness(1.1);
            filter: drop-shadow(0px 0px 5px rgba(215, 255, 175, 0.8)) brightness(1.1); }
  100% {
    -webkit-filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3);
            filter: drop-shadow(0px 0px 15px #d7ffaf) brightness(1.3); } }