/********Font******/
/********Bold******/
@media screen and (max-width: 1023px) {
  .nav_desktop {
    visibility: hidden; }
  .nav_mobile {
    visibility: visible; } }

#content {
  margin-top: 6%; }

.character {
  height: 100%;
  width: 100%;
  text-align: center; }

.mark {
  background: #6bbcf7;
  padding: 0; }

.redd {
  background: #f76642; }

.baobao {
  background: #83c389; }

.justin {
  background: #fb9652; }

.fluffi {
  background: #F07D7D; }
  .fluffi .right {
    background: #F07D7D; }

.whiskers {
  background: #84bdc3; }

.dougie {
  background: #528ace; }

.log_txt {
  position: fixed;
  z-index: 100; }

.right {
  margin-top: 16%; }
  .right .name {
    z-index: 7;
    display: block;
    transition: all .3s ease-in;
    transform-origin: top right;
    position: fixed;
    top: 180px;
    width: 100%;
    transform: scale(0.6);
    left: -9%;
    max-width: inherit; }

.name_bg {
  z-index: 6;
  width: 48%;
  top: 80px;
  position: fixed;
  padding-top: 7%;
  right: 0; }

.right_name .name {
  position: fixed;
  top: 110px;
  left: -5% !important;
  transform: scale(0.28); }

.baobao .right .name {
  left: -4%; }

.en.whiskers .right .name {
  left: -18%; }

.en.baobao .right .name {
  left: -14%; }

.dougie .right .name,
.fluffi .right .name,
.justin .right .name {
  left: -18%; }

.sc.dougie .right .name,
.sc.fluffi .right .name,
.sc.justin .right .name,
.tc.dougie .right .name,
.tc.fluffi .right .name,
.tc.justin .right .name {
  left: -6%; }

.en.dougie .right .name,
.en.fluffi .right .name,
.en.justin .right .name {
  left: -28%; }

.mark .right .name,
.redd .right .name {
  left: -19%; }

.en.mark .right .name,
.en.redd .right .name {
  left: -29%; }

.left {
  z-index: 6; }
  .left .story_background {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 5; }
  .left .story_char {
    position: absolute;
    z-index: 6;
    transform: translateX(-10%);
    height: 90%;
    width: 140%;
    left: -10%;
    right: 0;
    bottom: -1%;
    margin: 0 auto; }
    @media screen and (max-width: 1100px) and (max-height: 800px) {
      .left .story_char {
        height: 80%; } }

.content {
  height: 100%;
  width: 100%; }
  .content .left,
  .content .right {
    width: 50%; }
  .content .left {
    height: 100%;
    position: fixed;
    top: 80px;
    left: 0; }
  .content .right {
    float: right;
    position: relative;
    z-index: 7; }
    .content .right .main_content {
      width: 80%;
      margin: 0 auto; }

.right {
  z-index: 7; }
  .right .lottie_animate {
    width: 50%;
    opacity: 1;
    display: table-cell;
    vertical-align: middle; }

.descipt {
  font-size: 20px; }

.title {
  font-size: 26px;
  font-weight: 600; }

#char {
  margin-top: 10%; }
  #char .small {
    margin: 0 auto;
    display: table;
    float: left; }
  #char img {
    width: 33%;
    display: inline-block;
    vertical-align: top;
    margin-right: 6%;
    display: none; }
  #char .small {
    width: 44%;
    display: inline-block;
    margin: 0 auto;
    margin-bottom: 8%;
    margin-right: 1%; }
  #char .lottie_animate {
    width: 40%;
    display: inline-block;
    vertical-align: top;
    margin-top: -3%;
    margin-left: -2%;
    margin-right: 3%; }
  #char .small_content {
    width: 58%;
    display: inline-block;
    vertical-align: top;
    padding-top: 7%;
    margin-right: -2%; }
  #char .title {
    top: -8px; }
  #char .one {
    color: #ead4ff; }
  #char .two {
    color: #ffe493; }
  #char .three {
    color: #a9e9fe; }
  #char .four {
    color: #ffbfbf; }
  #char .descipt {
    color: #ffffff;
    padding-top: 6%; }

#dialogue {
  background: #ffffff;
  margin-left: 9%;
  margin-top: 10%;
  border-radius: 43px;
  box-shadow: inset -9px -9px 0px 0px #f7f7f7;
  box-shadow: inset -2% -2% 0% 0% #f7f7f7;
  position: relative; }
  #dialogue .left_img {
    left: -14%;
    width: 26%;
    top: -8%;
    bottom: 0;
    position: absolute; }
  #dialogue .topright_img {
    right: 5%;
    top: -13%;
    position: absolute;
    width: 14%; }
  #dialogue .dialogue_content {
    text-align: left;
    margin: 0 auto;
    padding: 7%;
    padding-left: 15%; }
    #dialogue .dialogue_content h2 {
      color: #F4C50C; }
    #dialogue .dialogue_content p {
      margin-top: 16px;
      font-weight: 600;
      font-size: 20px;
      text-indent: -2%;
      padding-left: 2%; }

#intro {
  text-align: left;
  margin-top: 6%;
  margin-bottom: 0; }
  #intro img {
    width: 13%; }
  #intro h2 {
    padding-left: 50px;
    color: #B2FBAC;
    display: inline;
    vertical-align: middle; }
  #intro .descipt {
    color: #ffffff;
    line-height: 35px; }
    #intro .descipt p {
      margin-bottom: 35px; }
  #intro .back_to_intro {
    margin-top: 9%;
    height: 80px;
    min-height: 70px;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    display: block; }
    #intro .back_to_intro a {
      background: url("./../data/images/back_all_2.png") no-repeat 0px 5px;
      background-size: 20px auto;
      display: inline-block;
      padding-left: 30px;
      color: white; }
    #intro .back_to_intro a:hover {
      color: #007DFB;
      background-position-y: -21px; }

.footer_container {
  border-top: 1px solid #ffffff30;
  width: 100%;
  padding: 0;
  padding-top: 4%;
  padding-bottom: 6%; }
  .footer_container .footer_logo {
    width: 27.5%;
    padding-right: 2%; }
    .footer_container .footer_logo img {
      width: 179px; }
  .footer_container #footer {
    color: #ffffff;
    width: 40%;
    margin-top: 0; }
    .footer_container #footer .inline_style {
      display: inline-block; }
    .footer_container #footer p {
      padding-bottom: 6px;
      margin: 0; }
  .footer_container .footer_share {
    width: 30%;
    padding: 0;
    text-align: right; }
    .footer_container .footer_share img {
      width: 20%;
      max-width: 38px;
      margin-left: 2%; }

.bg {
  display: none; }

@media screen and (max-width: 1200px) {
  .title {
    font-size: 18px; }
  .descipt,
  #dialogue .dialogue_content p {
    font-size: 14px; }
  .right .name {
    top: 140px; }
  #char .small_content {
    padding-top: 2%; }
  .right_name .name {
    top: 13%; }
  .footer_container #footer {
    font-size: 8px; }
  .left .story_background {
    min-width: 90vh; } }

.without_nav #content {
  margin-top: 0; }
  .without_nav #content .content .left {
    top: 0; }
  .without_nav #content .right .name {
    top: 70px; }
  .without_nav #content .right .name_bg {
    height: 170px;
    top: 0; }
  .without_nav #content .left .story_background {
    min-height: 100vh;
    min-width: 100vh; }

/* Responsive: Portrait tablets and up */
@media screen and (max-width: 1023px) {
  #content {
    margin-top: 65px; }
  .descipt {
    font-size: 16px; }
  .title {
    font-size: 24px; }
  .content {
    height: 100%;
    width: 100%; }
    .content .left,
    .content .right {
      width: 100%;
      height: auto;
      position: initial; }
    .content .left {
      position: relative;
      top: 0px; }
  .name {
    position: absolute;
    top: 2%;
    left: 0;
    right: 0;
    width: 100%; }
  .introduction {
    height: 100%;
    width: 100%;
    text-align: center; }
  .bg {
    display: block;
    width: 100%;
    padding-top: 65px; }
  .right {
    padding: 0;
    margin: 0 auto;
    margin-top: 3%;
    width: 75%; }
    .right .name_bg,
    .right .name {
      display: none; }
  .lottie_animate,
  .story_background,
  .story_char,
  .back_to_intro {
    display: none; }
  #char img {
    display: inherit; }
  #char .small {
    padding-bottom: 5%;
    width: 100%; }
    #char .small img {
      width: 24%;
      display: inline-block;
      margin-right: 5%; }
    #char .small .lottie_animate {
      width: 40%;
      display: none; }
  #char .small_content {
    padding-top: 0%; }
  #dialogue {
    width: 92%;
    margin: 0 auto;
    margin-left: 10%;
    margin-top: 20px;
    border-radius: 30px; }
    #dialogue .left_img {
      width: 28%;
      left: -17%;
      top: 20%;
      min-width: auto; }
    #dialogue .topright_img {
      width: 22%;
      right: 7%;
      top: -9%; }
    #dialogue .dialogue_content {
      padding: 10% 10% 10% 18%; }
      #dialogue .dialogue_content h2 {
        text-indent: -2%; }
      #dialogue .dialogue_content p {
        margin-top: 8px;
        margin-left: -4px;
        text-indent: -4%;
        font-size: 15px; }
  #intro {
    margin-top: 10%; }
    #intro .intro_title {
      width: 80%;
      margin: 0 auto;
      text-align: center; }
    #intro img {
      width: 24%;
      min-width: auto; }
    #intro h2 {
      width: 76%;
      padding-left: 7%; }
    #intro .descipt {
      margin-top: 3%;
      line-height: 32px; }
  .footer_container {
    padding: 10% 0 20% 0 !important; }
    .footer_container .footer_share {
      width: 113% !important;
      margin-left: -6.5%; }
      .footer_container .footer_share img {
        width: 16% !important;
        max-width: inherit;
        padding-left: 1%;
        padding-right: 1%; } }