@charset "UTF-8";
#mapChats .left > .container > .each > .MC-message .chat-tool, #mapChats > .right > .container > .each > .content .chat-tool {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

@media only screen and (max-width: 800px) {
  body#mapChats {
    overflow-y: auto; } }

body #mapChats {
  height: auto;
  top: calc(50% + 20px);
  left: 50%;
  width: calc(100vw - 100px);
  height: calc(100vh - 160px);
  max-width: 1500px;
  max-height: 1200px;
  padding: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 1px solid #3da0ba; }
  @media only screen and (max-width: 420px) {
    body #mapChats {
      width: calc(100% - 40px); } }

body #mapChats .d-flex {
  width: 100%;
}

#mapChats {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: fixed;
  left: 10vw;
  right: 10vw;
  top: 10vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding: 35px 20px 20px 20px;
  z-index: 9100;
  overflow-y: hidden;
  /*20180528 yulin style change*/
  background-color: rgba(25, 25, 25, 0.9);
  -webkit-transition: .3s all;
  transition: .3s all; }
  #mapChats.closed {
    opacity: 0;
    visibility: hidden;
    display: none; }
    #mapChats.closed .video-container {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      position: relative;
      overflow: hidden;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-color: black; }
  #mapChats .map-chats-close-btn {
    position: absolute;
    right: 9px;
    top: 3px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    z-index: 9000; }
    @media only screen and (max-width: 420px) {
      #mapChats .map-chats-close-btn {
        top: 2px;
        right: 9px; } }
  #mapChats .map-chat-mobile {
    display: none; }
  #mapChats .mapChats-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%; }
    @media only screen and (max-width: 420px) {
      #mapChats .mapChats-center .title.desktop-show {
        display: none; } }
  #mapChats .no-comments {
    width: 100%; }
    #mapChats .no-comments h2 {
      color: #fff; }
    #mapChats .no-comments.desktop-show {
      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-flex: 1;
          -ms-flex: 1;
              flex: 1; }
      @media only screen and (max-width: 420px) {
        #mapChats .no-comments.desktop-show {
          display: none; } }
    #mapChats .no-comments.mobile-show {
      padding: 10px;
      text-align: center; }
  #mapChats .left {
    width: 45%;
    height: 100%; }
    #mapChats .left > .title {
      font-size: 3rem;
      color: white;
      text-shadow: 1px 1px 3px black;
      padding-left: 5px;
      margin: -15px 0 25px 5px; }
      #mapChats .left > .title span {
        font-size: 2rem; }
      @media only screen and (max-width: 800px) {
        #mapChats .left > .title {
          text-align: center;
          margin: 0; } }
    #mapChats .left > .container {
      height: calc(100% - 40px);
      min-height: calc(100% - 95px);
      padding: 0px 10px 20px;
      margin: 10px;
      margin-left: 0;
      width: auto;
      overflow-y: auto;
      overflow-x: hidden;
      /*20180528 yulin change scrollbar style*/
      /*20180528 yulin style change*/ }
      #mapChats .left > .container::-webkit-scrollbar {
        width: 6px; }
      #mapChats .left > .container::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
      #mapChats .left > .container::-webkit-scrollbar-thumb {
        background-color: darkgrey;
        outline: 1px solid slategrey;
        border-radius: 6px; }
      @media only screen and (max-width: 800px) {
        #mapChats .left > .container {
          padding: 20px 0;
          margin: 10px 0; } }
      #mapChats .left > .container > .each {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 10px 10px 0;
        border-bottom: 1px solid #444; }
        #mapChats .left > .container > .each:not(:first-of-type) {
          margin-top: 5px; }
        #mapChats .left > .container > .each:last-of-type {
          border-bottom-width: 0; }
        @media only screen and (max-width: 800px) {
          #mapChats .left > .container > .each {
            padding: 10px 0; } }
        #mapChats .left > .container > .each > .MC-profile {
          width: 60px;
          margin-bottom: 10px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center; }
          #mapChats .left > .container > .each > .MC-profile .img {
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            position: relative;
            border: 2px solid white;
            border-radius: 50%;
            z-index: 1;
            overflow: hidden;
            background-repeat: no-repeat;
            background-size: cover;
            /*20180525 yulin layout change*/ }
        #mapChats .left > .container > .each > .MC-message {
          padding-left: 15px;
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
          color: white;
          font-size: 1.5rem;
          text-shadow: 1px 1px 3px black; }
          #mapChats .left > .container > .each > .MC-message > .post-info {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            margin-bottom: 8px; }
            #mapChats .left > .container > .each > .MC-message > .post-info .delete {
              position: absolute;
              width: 15px;
              height: 15px;
              top: 2px;
              right: -19px;
              cursor: pointer; }
              #mapChats .left > .container > .each > .MC-message > .post-info .delete:before, #mapChats .left > .container > .each > .MC-message > .post-info .delete:after {
                content: '';
                position: absolute;
                display: inline-block;
                width: 10px;
                height: 1px;
                top: 7px;
                background-color: #ddd; }
              #mapChats .left > .container > .each > .MC-message > .post-info .delete:before {
                -webkit-transform: rotate(-45deg);
                        transform: rotate(-45deg); }
              #mapChats .left > .container > .each > .MC-message > .post-info .delete:after {
                -webkit-transform: rotate(45deg);
                        transform: rotate(45deg); }
            #mapChats .left > .container > .each > .MC-message > .post-info .name {
              -webkit-box-flex: 1;
                  -ms-flex: 1;
                      flex: 1; }
              #mapChats .left > .container > .each > .MC-message > .post-info .name .post-info-member {
                display: inline; }
            #mapChats .left > .container > .each > .MC-message > .post-info .local-time {
              font-size: 1.2rem;
              margin-left: 10px; }
          #mapChats .left > .container > .each > .MC-message .chat-tags {
            margin-top: 5px; }
          #mapChats .left > .container > .each > .MC-message .chat-tool {
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            margin: 10px 0 5px;
            text-shadow: none; }
            @media only screen and (max-width: 420px) {
              #mapChats .left > .container > .each > .MC-message .chat-tool {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                -webkit-box-align: start;
                    -ms-flex-align: start;
                        align-items: flex-start; } }
            #mapChats .left > .container > .each > .MC-message .chat-tool .chat-rating {
              -webkit-box-flex: 1;
                  -ms-flex: 1;
                      flex: 1;
              margin-bottom: 5px; }
              #mapChats .left > .container > .each > .MC-message .chat-tool .chat-rating span {
                font-size: 14px; }
            #mapChats .left > .container > .each > .MC-message .chat-tool .chat-number > div {
              display: inline-block;
              vertical-align: middle;
              background-color: #333;
              padding: 0px 8px 4px;
              border-radius: 15px; }
              #mapChats .left > .container > .each > .MC-message .chat-tool .chat-number > div > * {
                display: inline-block;
                vertical-align: middle; }
              #mapChats .left > .container > .each > .MC-message .chat-tool .chat-number > div span {
                font-size: 12px; }
  #mapChats > .right {
    width: 55%;
    height: 100%;
    position: relative; }
    #mapChats > .right > .back-btn {
      position: absolute;
      left: 10px;
      top: -25px;
      color: white;
      font-size: 24px;
      cursor: pointer;
      display: none; }
    #mapChats > .right.open {
      display: -webkit-box !important;
      display: -ms-flexbox !important;
      display: flex !important; }
    #mapChats > .right > .container {
      padding: 10px 20px;
      /*20180528 yulin style change*/
      border-left: 1px solid #333;
      overflow-y: auto;
      overflow-x: hidden;
      /*20180528 yulin change scrollbar style*/
      min-height: calc(100% - 20px);
      height: 100%; }
      #mapChats > .right > .container::-webkit-scrollbar {
        width: 6px; }
      #mapChats > .right > .container::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
      #mapChats > .right > .container::-webkit-scrollbar-thumb {
        background-color: darkgrey;
        outline: 1px solid slategrey;
        border-radius: 6px; }
      @media only screen and (max-width: 800px) {
        #mapChats > .right > .container {
          border-left: 0;
          padding: 10px 0; } }
      @media only screen and (max-width: 420px) {
        #mapChats > .right > .container {
          padding: 10px 10px 80px; } }
      #mapChats > .right > .container > .each {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        /*20180528 yulin change location layout*/ }
        #mapChats > .right > .container > .each > .MC-profile {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          margin-bottom: 10px;
          /*20180524 yulin layout location info*/ }
          #mapChats > .right > .container > .each > .MC-profile > .MC-profile-img {
            width: 60px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column; }
            #mapChats > .right > .container > .each > .MC-profile > .MC-profile-img .img {
              width: 100%;
              height: 0;
              padding-bottom: 100%;
              border-radius: 50%;
              position: relative;
              border: 2px solid white;
              z-index: 1;
              overflow: hidden;
              background-repeat: no-repeat;
              background-size: cover; }
            #mapChats > .right > .container > .each > .MC-profile > .MC-profile-img .name {
              color: white;
              font-size: 1.6rem;
              text-shadow: 1px 1px 3px black;
              padding: 10px 0; }
          #mapChats > .right > .container > .each > .MC-profile > .profile-location {
            padding-left: 15px;
            color: white; }
            #mapChats > .right > .container > .each > .MC-profile > .profile-location .profile-location-info {
              color: #fff; }
              #mapChats > .right > .container > .each > .MC-profile > .profile-location .profile-location-info span {
                display: inline-block;
                vertical-align: baseline; }
                #mapChats > .right > .container > .each > .MC-profile > .profile-location .profile-location-info span.name {
                  font-weight: bold; }
            #mapChats > .right > .container > .each > .MC-profile > .profile-location .profile-location-date {
              margin-top: 2px;
              text-align: left;
              font-size: 1rem;
              font-family: "Verdana"; }
              #mapChats > .right > .container > .each > .MC-profile > .profile-location .profile-location-date .date {
                font-size: 1rem;
                line-height: 1.5;
                color: #fff; }
        #mapChats > .right > .container > .each > .content .profile-chat {
          margin: 10px 0 15px;
          color: white; }
        #mapChats > .right > .container > .each > .content .chat-tags {
          margin-bottom: 10px; }
        #mapChats > .right > .container > .each > .content .chat-tool {
          -webkit-box-pack: end;
              -ms-flex-pack: end;
                  justify-content: flex-end;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          margin: 20px 0 10px; }
          #mapChats > .right > .container > .each > .content .chat-tool .chat-rating {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            color: #fff;
            margin-bottom: 5px; }
            #mapChats > .right > .container > .each > .content .chat-tool .chat-rating span {
              font-size: 14px; }
        #mapChats > .right > .container > .each > .content .chat-input {
          margin-bottom: 10px;
          /*20180525 yulin style*/ }
          #mapChats > .right > .container > .each > .content .chat-input.default .member {
            display: block; }
          #mapChats > .right > .container > .each > .content .chat-input.default .visitor {
            display: none; }
          #mapChats > .right > .container > .each > .content .chat-input.active .member {
            display: none; }
          #mapChats > .right > .container > .each > .content .chat-input.active .visitor {
            display: block; }
          #mapChats > .right > .container > .each > .content .chat-input .member {
            position: relative;
            background-color: rgba(56, 56, 56, 0.7);
            color: white;
            font-size: 1.4rem;
            padding: 10px 20px 0;
            border-radius: 5px;
            position: relative; }
            #mapChats > .right > .container > .each > .content .chat-input .member a {
              display: inline-block;
              position: absolute;
              right: 20px;
              top: 20px; }
            #mapChats > .right > .container > .each > .content .chat-input .member .send-btn {
              position: absolute;
              right: 20px;
              top: 20px;
              cursor: pointer; }
          #mapChats > .right > .container > .each > .content .chat-input .visitor {
            padding: 10px 0;
            font-size: 1.2rem;
            text-align: center;
            background-color: rgba(35, 35, 35, 0.8);
            margin-bottom: 10px; }
            #mapChats > .right > .container > .each > .content .chat-input .visitor p:last-of-type {
              margin-bottom: 0; }
            #mapChats > .right > .container > .each > .content .chat-input .visitor a:hover {
              color: #3da0ba; }
        #mapChats > .right > .container > .each > .content .chat-each {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
          margin: 10px 0;
          padding: 5px 20px 10px 0;
          border-bottom: 1px solid #444;
          font-size: 1.6rem;
          color: white; }
          #mapChats > .right > .container > .each > .content .chat-each:last-of-type {
            border-bottom: none; }
          #mapChats > .right > .container > .each > .content .chat-each.active > .MC-message .delete {
            display: inline-block; }
          #mapChats > .right > .container > .each > .content .chat-each > .MC-profile {
            width: 40px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center; }
            #mapChats > .right > .container > .each > .content .chat-each > .MC-profile .img {
              width: 100%;
              height: 0;
              padding-bottom: 100%;
              position: relative;
              border: 1px solid white;
              border-radius: 50%;
              z-index: 1;
              overflow: hidden;
              background-repeat: no-repeat;
              background-size: cover;
              /*20180525 yulin layout change*/ }
          #mapChats > .right > .container > .each > .content .chat-each > .MC-message {
            position: relative;
            padding-left: 15px;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            color: white;
            font-size: 1.2rem;
            text-shadow: 1px 1px 3px black; }
            #mapChats > .right > .container > .each > .content .chat-each > .MC-message .delete {
              position: absolute;
              display: none;
              width: 15px;
              height: 15px;
              top: 2px;
              right: -22px;
              cursor: pointer; }
              #mapChats > .right > .container > .each > .content .chat-each > .MC-message .delete:before, #mapChats > .right > .container > .each > .content .chat-each > .MC-message .delete:after {
                content: '';
                position: absolute;
                display: inline-block;
                width: 11px;
                height: 1px;
                top: 7px;
                background-color: #ddd; }
              #mapChats > .right > .container > .each > .content .chat-each > .MC-message .delete:before {
                -webkit-transform: rotate(-45deg);
                        transform: rotate(-45deg); }
              #mapChats > .right > .container > .each > .content .chat-each > .MC-message .delete:after {
                -webkit-transform: rotate(45deg);
                        transform: rotate(45deg); }
            #mapChats > .right > .container > .each > .content .chat-each > .MC-message > .post-info {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: justify;
                  -ms-flex-pack: justify;
                      justify-content: space-between;
              -webkit-box-align: end;
                  -ms-flex-align: end;
                      align-items: flex-end;
              margin-bottom: 5px; }
              #mapChats > .right > .container > .each > .content .chat-each > .MC-message > .post-info .name {
                -webkit-box-flex: 1;
                    -ms-flex: 1;
                        flex: 1; }
              #mapChats > .right > .container > .each > .content .chat-each > .MC-message > .post-info .local-time {
                font-size: 1.2rem; }
          #mapChats > .right > .container > .each > .content .chat-each .collapse-btn {
            font-weight: 900;
            font-size: 1.2rem;
            border-bottom: 1px solid white;
            cursor: pointer; }
        #mapChats > .right > .container > .each .reply-tools {
          padding: 5px 0;
          font-size: 13px; }
          #mapChats > .right > .container > .each .reply-tools > a {
            margin-right: 10px; }
          #mapChats > .right > .container > .each .reply-tools .hide-replied > * {
            display: inline-block; }
          #mapChats > .right > .container > .each .reply-tools .hide-replied .show-message {
            display: none; }
          #mapChats > .right > .container > .each .reply-tools .hide-replied .hide-this {
            display: inline-block; }
          #mapChats > .right > .container > .each .reply-tools .hide-replied.active .show-message {
            display: inline-block; }
          #mapChats > .right > .container > .each .reply-tools .hide-replied.active .hide-this {
            display: none; }
          #mapChats > .right > .container > .each .reply-tools .hide-replied.active i.mdi-chevron-up {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
            -webkit-transition: all .2s;
            transition: all .2s; }
        #mapChats > .right > .container > .each .reply-message {
          margin-top: 10px; }
          #mapChats > .right > .container > .each .reply-message .imgbox {
            width: 40px;
            font-size: 14px; }
            #mapChats > .right > .container > .each .reply-message .imgbox .img {
              width: 100%;
              height: 0;
              padding-top: 100%;
              border-radius: 100%;
              overflow: hidden;
              background-size: cover;
              background-repeat: no-repeat;
              background-position: center; }
          #mapChats > .right > .container > .each .reply-message .txtbox {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            margin-left: 10px; }
            #mapChats > .right > .container > .each .reply-message .txtbox .info {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              padding-bottom: 10px;
              -webkit-box-align: center;
                  -ms-flex-align: center;
                      align-items: center;
              -webkit-box-pack: justify;
                  -ms-flex-pack: justify;
                      justify-content: space-between; }
              @media only screen and (max-width: 420px) {
                #mapChats > .right > .container > .each .reply-message .txtbox .info {
                  -webkit-box-orient: vertical;
                  -webkit-box-direction: normal;
                      -ms-flex-direction: column;
                          flex-direction: column; } }
            #mapChats > .right > .container > .each .reply-message .txtbox .name {
              -webkit-box-flex: 1;
                  -ms-flex: 1;
                      flex: 1; }
              @media only screen and (max-width: 420px) {
                #mapChats > .right > .container > .each .reply-message .txtbox .name {
                  -webkit-box-ordinal-group: 3;
                      -ms-flex-order: 2;
                          order: 2;
                  width: 100%; } }
            #mapChats > .right > .container > .each .reply-message .txtbox .txtdate {
              font-size: 12px; }
              @media only screen and (max-width: 420px) {
                #mapChats > .right > .container > .each .reply-message .txtbox .txtdate {
                  -webkit-box-ordinal-group: 2;
                      -ms-flex-order: 1;
                          order: 1;
                  width: 100%; } }
              @media only screen and (max-width: 420px) {
                #mapChats > .right > .container > .each .reply-message .txtbox .txtdate .date-tools {
                  float: right; } }
            #mapChats > .right > .container > .each .reply-message .txtbox .send-box {
              padding-top: 5px;
              text-align: right;
              text-shadow: none; }
          #mapChats > .right > .container > .each .reply-message .comment-item {
            padding: 10px 0; }
  @media only screen and (max-width: 800px) {
    #mapChats {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      left: 20px;
      right: 20px; }
      #mapChats .left, #mapChats .right {
        width: 100%;
        max-height: unset;
        overflow: unset;
        height: auto; }
        #mapChats .left .title, #mapChats .right .title {
          text-align: center; } }
  @media only screen and (max-width: 420px) {
    #mapChats {
      left: 0;
      right: 0;
      top: 52px;
      padding: 30px 5px 5px;
      overflow-y: auto;
      border: none;
      /* 20180621 yulin mobile punch style*/ }
      #mapChats .left, #mapChats .right {
        display: none; }
      #mapChats .right.open .back-btn {
        display: block; }
      #mapChats .map-chat-mobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
        #mapChats .map-chat-mobile.closed {
          display: none; }
        #mapChats .map-chat-mobile > .title {
          font-size: 3rem;
          color: white;
          text-shadow: 1px 1px 3px black;
          padding: 10px 0 20px 0;
          text-align: center;
          width: 100%; }
        #mapChats .map-chat-mobile .weather-container {
          margin-bottom: 15px; }
          #mapChats .map-chat-mobile .weather-container .weather-location {
            margin: 10px 0 15px; }
            #mapChats .map-chat-mobile .weather-container .weather-location .location-big {
              font-size: 30px; }
            #mapChats .map-chat-mobile .weather-container .weather-location .location-small {
              font-size: 20px;
              margin-left: 10px; }
          #mapChats .map-chat-mobile .weather-container .weather-content .font-thermometer {
            display: inline-block;
            vertical-align: middle; }
          #mapChats .map-chat-mobile .weather-container .weather-content .cc-weather {
            display: inline-block;
            vertical-align: middle;
            margin-right: 15px; }
        #mapChats .map-chat-mobile .each {
          width: calc(33.33% - 10px);
          margin: 5px; }
          #mapChats .map-chat-mobile .each .square-img-container {
            width: 100%;
            height: 0;
            position: relative;
            padding-bottom: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center; }
            #mapChats .map-chat-mobile .each .square-img-container .hover-area {
              opacity: 0;
              position: absolute;
              left: 0;
              top: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.5);
              color: white;
              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-transition: .3s all;
              transition: .3s all; }
              #mapChats .map-chat-mobile .each .square-img-container .hover-area > * {
                display: block;
                margin: 5px;
                cursor: pointer; }
            #mapChats .map-chat-mobile .each .square-img-container:hover .hover-area {
              opacity: 1; } }

#PunchChat-info {
  max-height: 90%;
  opacity: 1;
  visibility: visible;
  -webkit-transition: all .35s ease;
  transition: all .35s ease; }
  #PunchChat-info.closed {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .35s ease;
    transition: all .35s ease; }

#journal {
  position: fixed;
  width: 90%;
  max-width: 960px;
  height: 90%;
  max-height: 1200px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: rgba(25, 25, 25, 0.9);
  z-index: 1000; }
  #journal #journal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 5; }
  #journal .journal-container {
    position: relative;
    height: 100%;
    padding: 20px;
    padding-right: 0; }
  #journal .title {
    font-size: 3rem;
    margin-right: 20px; }
    #journal .title span {
      display: inline-block;
      vertical-align: baseling;
      margin-left: 8px;
      font-size: 0.8em; }
  #journal .filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 10px;
    margin-right: 20px;
    border-bottom: 1px solid #e6e6e6; }
    #journal .filters .filter {
      width: 25%; }
    #journal .filters a {
      color: #fff; }
      #journal .filters a.active, #journal .filters a:hover {
        color: #3085d6; }
    #journal .filters select {
      display: block;
      background-color: transparent;
      border: 0;
      color: #e9e9e9; }
      #journal .filters select option {
        background-color: rgba(25, 25, 25, 0.9); }
  #journal .content {
    height: calc(100% - 37px - 45px - 10px);
    margin-top: 10px;
    padding-right: 10px;
    overflow-y: auto; }
    #journal .content ul li {
      display: block;
      padding: 10px 0; }
      #journal .content ul li .journal-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch; }
        @media only screen and (max-width: 800px) {
          #journal .content ul li .journal-item {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column; } }
        #journal .content ul li .journal-item .photo {
          width: 48%;
          margin-right: 2rem; }
          @media only screen and (max-width: 800px) {
            #journal .content ul li .journal-item .photo {
              width: 100%;
              margin-right: 0; } }
          #journal .content ul li .journal-item .photo .bg-img {
            padding-top: 56.25%; }
        #journal .content ul li .journal-item .text {
          padding: 5px 0; }
          @media only screen and (max-width: 800px) {
            #journal .content ul li .journal-item .text {
              margin-top: 10px; } }
          #journal .content ul li .journal-item .text .user {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center; }
            #journal .content ul li .journal-item .text .user .photo {
              width: 60px;
              margin-right: 8px;
              border-radius: 100%;
              overflow: hidden; }
              @media only screen and (max-width: 420px) {
                #journal .content ul li .journal-item .text .user .photo {
                  width: 48px; } }
              #journal .content ul li .journal-item .text .user .photo .bg-img {
                padding-top: 100%; }
            #journal .content ul li .journal-item .text .user .info h3 {
              color: #fff; }
            #journal .content ul li .journal-item .text .user .info .date {
              font-size: 1rem; }
          #journal .content ul li .journal-item .text .journal {
            margin-top: 10px;
            padding-left: 5px; }
            @media only screen and (max-width: 800px) {
              #journal .content ul li .journal-item .text .journal {
                margin-top: 5px; } }

.container {
  z-index: 8900; }

#diving-info-area {
  position: fixed;
  left: 10vw;
  right: 10vw;
  top: 10vh;
  max-height: 80vh;
  z-index: 8900;
  overflow-y: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-transition: .3s all;
  transition: .3s all; }
  #diving-info-area.closed {
    opacity: 0;
    visibility: hidden; }
  #diving-info-area .title-text [btag="NameZh"] {
    font-size: 40px;
    line-height: 50px; }
  @media (max-width: 600px) {
    #diving-info-area {
      overflow-y: auto; } }
  @media (max-width: 420px) {
    #diving-info-area {
      top: 51px;
      left: 0;
      right: 0;
      bottom: 0;
      max-height: none; } }
  @media (max-width: 600px) {
    #diving-info-area .awd-flex-column .video-area {
      position: absolute;
      left: 18px;
      width: calc(100% - 36px); } }
  #diving-info-area .awd-flex-column .col-2 {
    max-height: calc(80vh - 3rem);
    overflow-y: auto; }
  @media (min-width: 601px) {
    #diving-info-area .awd-flex-column .d-flex-1 .video-container {
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%); } }
  @media (max-width: 600px) {
    #diving-info-area .awd-flex-column {
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
          -ms-flex-direction: column-reverse;
              flex-direction: column-reverse; }
      #diving-info-area .awd-flex-column .col-2 {
        width: 100%;
        max-height: none;
        overflow: visible; } }
  #diving-info-area .diving-info-image {
    height: 0;
    width: 90%;
    padding-bottom: 60%;
    overflow: hidden;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center; }
  #diving-info-area .diving-status .status-date, #diving-info-area .diving-status .temperature, #diving-info-area .diving-status .wave {
    width: 33%; }
  #diving-info-area .cancel-btn {
    position: absolute;
    right: 10px;
    top: 0px;
    cursor: pointer;
    z-index: 100; }
  #diving-info-area .video-container-hide {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    display: none; }
    @media (max-width: 600px) {
      #diving-info-area .video-container-hide {
        display: block;
        visibility: hidden; } }
  #diving-info-area .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    @media (min-width: 601px) and (max-width: 1025px) {
      #diving-info-area .title {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column; }
        #diving-info-area .title .col-2 {
          width: 100%; } }
    @media (max-width: 600px) {
      #diving-info-area .title {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row; }
        #diving-info-area .title .col-2 {
          max-width: 50%; }
        #diving-info-area .title .title-text {
          margin-right: 2rem;
          margin-top: 1rem; } }
    #diving-info-area .title .d-flex-1 {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; }
    #diving-info-area .title .title-img {
      height: 0;
      padding-bottom: 60%;
      border-radius: 3rem 0 3rem 0;
      border: 3px solid white;
      position: relative;
      background-position: center;
      background-size: auto 100%;
      z-index: 1; }
    #diving-info-area .title .title-text {
      position: relative; }
      #diving-info-area .title .title-text .text-en {
        white-space: nowrap; }
      #diving-info-area .title .title-text .bg {
        position: absolute;
        z-index: -1;
        left: -3.5rem;
        top: 25%;
        height: 50%;
        width: 110%;
        border-radius: 0 0 3rem 0;
        background: -webkit-gradient(linear, left top, left bottom, from(#aeaead), to(#939393));
        background: linear-gradient(to bottom, #aeaead 0%, #939393 100%); }
        @media (max-width: 1025px) {
          #diving-info-area .title .title-text .bg {
            display: none; } }

#controlPlace {
  position: fixed;
  left: 50px;
  /*20180528 yulin change width setting*/
  width: 100%;
  max-width: 300px;
  top: 340px;
  z-index: 500;
  display: none;
  /*20180528 yulin change width setting*/ }
  @media (min-width: 1200px) and (max-width: 1439px) {
    #controlPlace {
      max-width: 260px; } }
  @media (min-width: 992px) and (max-width: 1199) {
    #controlPlace {
      max-width: 220px; } }
  @media (max-width: 800px) {
    #controlPlace {
      left: 20px;
      top: 330px;
      max-width: 200px; } }
  @media (min-width: 421px) and (max-width: 600px) {
    #controlPlace {
      top: 270px; } }
  @media (max-width: 420px) {
    #controlPlace {
      width: 100% !important;
      max-width: 100%;
      position: fixed;
      top: auto !important;
      left: 0 !important;
      bottom: 0;
      padding: 0 10px 73px;
      background-color: #000;
      z-index: 8950; } }
  #controlPlace .font-rwd-xl {
    white-space: nowrap; }
  #controlPlace .info-icon {
    float: right; }
  #controlPlace .box {
    color: #3da0ba; }

#controlDatainfo {
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  position: fixed;
  top: 50%;
  right: 5%;
  width: 25%;
  z-index: 9999;
  display: none;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 35px 20px 20px;
  border-radius: 3px;
  z-index: 1000; }
  #controlDatainfo .cancel-btn {
    position: absolute;
    right: 4px;
    top: -3px;
    cursor: pointer; }
  #controlDatainfo .video iframe {
    width: 100%; }
  #controlDatainfo .video-text {
    margin: 10px 0;
    max-height: 100px;
    overflow-y: auto;
    /*20180528 yulin change scrollbar style*/ }
    #controlDatainfo .video-text::-webkit-scrollbar {
      width: 6px; }
    #controlDatainfo .video-text::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
    #controlDatainfo .video-text::-webkit-scrollbar-thumb {
      background-color: darkgrey;
      outline: 1px solid slategrey;
      border-radius: 6px; }
  #controlDatainfo .link-row {
    text-align: right; }
    #controlDatainfo .link-row .btn {
      display: inline-block;
      vertical-align: middle;
      margin: 2px; }
      #controlDatainfo .link-row .btn a {
        font-size: 1.3rem; }
  #controlDatainfo .more-btn-style {
    margin-left: 3px; }
  #controlDatainfo .jjwork-wrap {
    position: relative; }
    #controlDatainfo .jjwork-wrap .jjwork-tidal-info {
      position: absolute;
      -webkit-backdrop-filter: blur(8px);
              backdrop-filter: blur(8px);
      background-color: rgba(29, 55, 82, 0.5);
      width: 0%;
      top: -35px;
      left: calc(0% - 20px); }
      #controlDatainfo .jjwork-wrap .jjwork-tidal-info table th, #controlDatainfo .jjwork-wrap .jjwork-tidal-info table td {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        border-top: none;
        background-color: transparent; }
      #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-toggle {
        -webkit-writing-mode: vertical-lr;
            -ms-writing-mode: tb-lr;
                writing-mode: vertical-lr;
        position: absolute;
        left: calc(-31px + .25rem);
        background-color: #f7c232;
        color: #1d3752;
        font-size: 16px;
        font-size: 1.6rem;
        padding: 1rem .25rem; }
        #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-toggle i {
          margin-top: .5rem; }
      #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-main {
        width: 0%;
        overflow-x: scroll; }
        #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-main table, #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-main tr {
          background-color: transparent; }
          #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-main table:hover, #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-main tr:hover {
            background-color: transparent; }
        #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-main::-webkit-scrollbar {
          width: 6px; }
        #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-main::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); }
        #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-main::-webkit-scrollbar-thumb {
          background-color: darkgrey;
          outline: 1px solid slategrey;
          border-radius: 6px; }
  #controlDatainfo #tidal:checked ~ .jjwork-tidal-info {
    width: 230%;
    left: calc(-230% - 20px); }
    #controlDatainfo #tidal:checked ~ .jjwork-tidal-info label i {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg); }
    #controlDatainfo #tidal:checked ~ .jjwork-tidal-info .tidal-main {
      width: 100%; }
  @media (min-width: 421px) and (max-width: 900px) {
    #controlDatainfo {
      left: 40px;
      right: 40px;
      height: 80%;
      max-height: 480px;
      overflow: auto;
      width: auto;
      background-color: rgba(0, 0, 0, 0.5); }
      #controlDatainfo .cancel-btn {
        -webkit-transform: scale(1.3);
                transform: scale(1.3); }
      #controlDatainfo .video-text {
        margin-top: auto;
        max-height: 200px;
        overflow-y: auto; }
      #controlDatainfo .jjwork-wrap .jjwork-tidal-info {
        width: 100%;
        position: unset; }
        #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-toggle {
          display: none; }
        #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-main {
          height: auto;
          width: 100%;
          padding: 0 !important; }
      #controlDatainfo #tidal:checked ~ .jjwork-tidal-info {
        width: 100%; } }
  @media (max-width: 420px) {
    #controlDatainfo {
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
      left: 20px;
      right: 20px;
      top: 100px;
      bottom: 100px;
      padding: 60px 20px 20px;
      width: auto;
      background-color: rgba(0, 0, 0, 0.5);
      overflow: auto; }
      #controlDatainfo .cancel-btn {
        display: none; }
      #controlDatainfo .video-text {
        margin-top: auto;
        overflow-y: auto; }
      #controlDatainfo .jjwork-wrap .jjwork-tidal-info {
        width: 100%;
        position: unset; }
        #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-toggle {
          display: none; }
        #controlDatainfo .jjwork-wrap .jjwork-tidal-info .tidal-main {
          height: auto;
          width: 100%;
          padding: 0 !important; }
      #controlDatainfo #tidal:checked ~ .jjwork-tidal-info {
        width: 100%; } }

#mapid {
  height: 100vh;
  width: 100%; }
  #mapid .map-marker-diving .map-diving-icon-url {
    height: 100%;
    width: 100%;
    position: relative; }
    #mapid .map-marker-diving .map-diving-icon-url img {
      border-radius: 50%; }
    #mapid .map-marker-diving .map-diving-icon-url .map-diving-icon-img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-size: cover;
      border: 3px solid white; }
    #mapid .map-marker-diving .map-diving-icon-url .img {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center; }
    #mapid .map-marker-diving .map-diving-icon-url .map-diving-icon-txt {
      position: absolute;
      top: -30px;
      font-size: 1.6rem;
      top: -35px;
      left: 50%;
      text-shadow: 1px 1px 5px black;
      font-size: 1.4em;
      white-space: nowrap;
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0); }
      #mapid .map-marker-diving .map-diving-icon-url .map-diving-icon-txt span {
        color: #3da0ba; }
  #mapid .leaflet-control {
    display: none; }
  #mapid .map-marker-init {
    position: relative;
    margin: 0 auto;
    background-image: url("../images/map/flag.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1; }
    #mapid .map-marker-init:before, #mapid .map-marker-init:after {
      display: block;
      width: 150%;
      height: 150%;
      border-radius: 50%;
      border: 1px dotted #fff;
      opacity: 0.6;
      position: absolute;
      top: -25%;
      left: -25%;
      visibility: inherit;
      -webkit-animation: sk-bounce 2.0s linear infinite;
              animation: sk-bounce 2.0s linear infinite;
      background: #6d6d6d; }
    #mapid .map-marker-init:after {
      -webkit-animation-delay: -1.5s;
              animation-delay: -1.5s;
      width: 35px;
      height: 35px;
      top: 16px;
      left: 20px; }
  #mapid .marker-cluster-small, #mapid .marker-cluster-medium, #mapid .marker-cluster-large {
    background-color: transparent; }

a[bname]::after {
  opacity: 0;
  display: block;
  position: absolute;
  left: 50%;
  top: -2.2rem;
  font-size: 1.6rem;
  line-height: 1.6rem;
  color: white;
  white-space: nowrap;
  -webkit-transition: 1s all;
  transition: 1s all;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }

a[bname="goBack"]::after {
  content: '回世界地圖';
  font-size: 1.2rem;
  line-height: 1.4rem;
  left: 50%;
  top: auto;
  bottom: -1.8rem; }

/*20180529 yulin add [flow]*/
a[bname="Flow"]::after {
  content: '流況'; }

a[bname="Terrain"]::after {
  content: '地形'; }

a[bname="Point"]::after {
  content: '潛點'; }

a[bname="Animal"]::after {
  content: '海生物'; }

a[bname="Vr"]::after {
  content: 'VR'; }

a[bname="Remain"]::after {
  content: '人造物'; }

a[bname="chkpoint"]::after {
  content: '打卡'; }

a[bname]:hover::after {
  opacity: 1; }

@-webkit-keyframes sk-bounce {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  20% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  40% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5); }
  60% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: .5; }
  80% {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: .25; }
  100% {
    -webkit-transform: scale(3);
            transform: scale(3);
    opacity: 0; } }

@keyframes sk-bounce {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  20% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  40% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5); }
  60% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: .5; }
  80% {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: .25; }
  100% {
    -webkit-transform: scale(3);
            transform: scale(3);
    opacity: 0; } }

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.5;
  z-index: 100;
  display: none; }

.category-box {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  right: 40px;
  top: 90px;
  z-index: 999;
  height: calc(100vh - 203px);
  width: 286px; }
  @media only screen and (max-width: 420px) {
    .category-box {
      right: 20px;
      top: 70px;
      width: calc(100% - 40px); } }
  .category-box div::after {
    content: unset !important; }
  .category-box .search-box {
    margin-bottom: 40px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 0px;
    border: 0px solid transparent;
    width: 100%; }
    .category-box .search-box .input-field {
      margin: 0;
      margin-right: 30px;
      padding: 8px 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      background: rgba(0, 0, 0, 0.7);
      border: 1px solid #ffffff; }
      @media only screen and (max-width: 420px) {
        .category-box .search-box .input-field {
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1; } }
      .category-box .search-box .input-field i {
        margin: 0;
        padding-right: 10px; }
      .category-box .search-box .input-field input {
        padding: 0; }
        .category-box .search-box .input-field input:focus {
          border: 0px solid transparent;
          -webkit-box-shadow: none;
                  box-shadow: none; }
        .category-box .search-box .input-field input::-webkit-input-placeholder {
          color: #888888; }
        .category-box .search-box .input-field input:-ms-input-placeholder {
          color: #888888; }
        .category-box .search-box .input-field input::-ms-input-placeholder {
          color: #888888; }
        .category-box .search-box .input-field input::placeholder {
          color: #888888; }
    .category-box .search-box .search-close {
      color: #ffffff;
      font-size: 2.5rem; }
  @media only screen and (max-width: 420px) {
    .category-box .result-box {
      width: 90px; } }
  .category-box .result-box .item-list {
    padding-right: 42px;
    margin-right: 7px;
    max-height: calc(100vh - 282px);
    overflow: auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: auto; }
    @media only screen and (max-width: 420px) {
      .category-box .result-box .item-list {
        padding-right: 12px;
        margin-right: 0px; } }
    .category-box .result-box .item-list::-webkit-scrollbar {
      width: 9px;
      background: transparent; }
    .category-box .result-box .item-list::-webkit-scrollbar-thumb {
      background: rgba(23, 40, 84, 0.4);
      border-radius: 10px;
      border: 1px solid #ffffff; }
    .category-box .result-box .item-list::-webkit-scrollbar-track {
      background: transparent; }
    .category-box .result-box .item-list a.item-box {
      margin-bottom: 10px;
      padding: 10px;
      width: 100%;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      background: rgba(0, 0, 0, 0.6);
      border: 1px solid #ffffff;
      border-radius: 50px 0 0 50px;
      -webkit-transition: .3s ease;
      transition: .3s ease; }
      @media only screen and (max-width: 420px) {
        .category-box .result-box .item-list a.item-box {
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
          border-radius: 0px; } }
      .category-box .result-box .item-list a.item-box:hover {
        background: rgba(255, 255, 255, 0.6); }
        .category-box .result-box .item-list a.item-box:hover .title {
          color: #000000;
          font-size: 2rem; }
          @media only screen and (max-width: 420px) {
            .category-box .result-box .item-list a.item-box:hover .title {
              font-size: 1.4rem; } }
        .category-box .result-box .item-list a.item-box:hover .actived {
          -webkit-transform: scale(1);
                  transform: scale(1); }
      .category-box .result-box .item-list a.item-box.active {
        background: rgba(255, 255, 255, 0.6); }
        .category-box .result-box .item-list a.item-box.active .title {
          color: #000000;
          font-size: 2rem; }
          @media only screen and (max-width: 420px) {
            .category-box .result-box .item-list a.item-box.active .title {
              font-size: 1.4rem; } }
        .category-box .result-box .item-list a.item-box.active .actived {
          -webkit-transform: scale(1);
                  transform: scale(1); }
    .category-box .result-box .item-list .title {
      color: #ffffff;
      font-size: 2rem;
      -webkit-transition: .3s ease;
      transition: .3s ease; }
      @media only screen and (max-width: 420px) {
        .category-box .result-box .item-list .title {
          width: 100%;
          text-align: center;
          font-size: 1.4rem; } }
    .category-box .result-box .item-list .img,
    .category-box .result-box .item-list .actived {
      padding-bottom: 25%;
      margin-right: 10px;
      width: 25%;
      border-radius: 100px;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center; }
      @media only screen and (max-width: 420px) {
        .category-box .result-box .item-list .img,
        .category-box .result-box .item-list .actived {
          display: none; } }
    .category-box .result-box .item-list .actived {
      margin-right: 0;
      margin-left: auto;
      margin-right: 0px;
      background-repeat: no-repeat;
      background-size: 60%;
      -webkit-transition: .3s ease;
      transition: .3s ease;
      -webkit-transform: scale(0);
              transform: scale(0); }

.autocomplete-suggestions {
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #ffffff; }
  .autocomplete-suggestions .autocomplete-suggestion {
    padding: 5px 8px;
    cursor: pointer; }
    .autocomplete-suggestions .autocomplete-suggestion.autocomplete-selected {
      background: rgba(255, 255, 255, 0.5); }