@charset "UTF-8";
.f-app .f-app-main {
  margin-top: 0;
}
@media (min-width: 62rem) {
  .f-app-main-head {
    /* padding: 0.75rem; */
    padding: 0;
  }
  .f-app-back {
    display: block !important;
    float: right;
    height: 2.5rem;
    padding: 0.625rem;
  }
  .f-app-back svg {
    transform: scaleX(-1);
    width: 3rem;
    height: 1.25rem;
  }
  .f-app-breadcrumbs {
    margin-right: 4.25rem;
    margin-left: 3.5rem;
  }
}
@media (max-width: 61.9375rem) {
  .f-app-main {
    margin: 0 -1.5rem;
    background: 0 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  /* .f-app-main-head {
    padding-left: 4rem;
    font-size: 0.875rem;
    position: relative;
    margin-bottom: 0.75rem; */
  /* }
  .f-app-main-head .share-drop {
    position: absolute;
    left: 0.875rem;
    top: 0;
  } */
  /* .f-app-main-head::after,
  .f-app-main-head::before {
    content: "";
    position: absolute;
    top: 0;
    width: 1.5rem;
    height: 2.5rem;
  }
  .f-app-main-head::after {
    left: 4rem;
    background-image: linear-gradient(-90deg, #fbfdfd00 0%, #fbfdfd 100%);
  } */
  /* .f-app-main-head::before {
    right: 0;
    background-image: linear-gradient(90deg, #fbfdfd00 0%, #fbfdfd 100%);
  }  */
  .f-app-breadcrumbs-in::after,
  .f-app-breadcrumbs-in::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: top;
  }
}
.f-app-breadcrumbs {
  white-space: nowrap;
  color: #17202180;
  line-height: 1.5rem;
  overflow: hidden;
}
.f-app-breadcrumbs-in {
  padding: 0.5rem 0;
  padding-bottom: 2.5rem;
  margin-bottom: -2rem;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.f-app-main-head .share-drop {
  float: left;
}
.f-app-back svg,
.share-drop-btn svg {
  display: block;
}
.share-drop-btn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border: 0;
  background: 0 0;
  color: #29b1d8;
}
.share-drop-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}
.share-drop-box {
  right: auto;
  left: 0;
}
.share-list {
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}
.share-list::after {
  content: "";
  display: block;
  clear: both;
}
.share-btn {
  display: inline-block;
  vertical-align: top;
  margin-right: 0.5rem;
  color: #fff !important;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
}
.share-btn:first-child {
  margin-right: 0;
}
@media (min-width: 62rem) {
  .share-btn {
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .share-btn:hover {
    opacity: 0.8;
  }
  .share-btn:active {
    transform: scale(0.97);
    opacity: 1;
  }
}
.share-btn > svg {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
  display: block;
}
.share-fb {
  background-color: #0c8af0 !important;
}
.share-wa {
  background-color: #5fd56c !important;
}
.share-tw {
  background-color: #00aced !important;
}
.share-tg {
  background-color: #2ca5e0 !important;
}
.f-app-view-intro {
  background-color: #2d4376;
  color: #fff;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
.f-app-view-img {
  padding: 0.25rem;
  padding-top: 0;
  margin: -0.25rem auto 1rem;
  width: 7.75rem;
  height: 7.5rem;
  position: relative;
  z-index: 1;
}
.f-app-view-img > svg {
  position: absolute;
  width: 11rem;
  height: 7.5rem;
  right: 50%;
  top: 0;
  margin-right: -5.5rem;
  z-index: -1;
}
.f-app-view-img > figure {
  width: 7.25rem;
  height: 7.25rem;
  margin: 0;
  background-color: #fff;
  border-radius: 1.25rem;
  position: relative;
}
.f-app-view-img > figure img {
  width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.f-app-title {
  display: block;
  max-width: 25rem;
  margin: 0 auto;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  line-height: 1.3em;
  max-height: 3.9em;
  overflow: hidden;
}
.f-app-view-rate {
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin-bottom: 1.25rem;
  white-space: nowrap;
}
.f-app-view-intro-bg {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.f-app-view-intro-bg img {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(50%, -50%);
  min-width: 100%;
  height: auto;
  z-index: -1;
}
.f-app-view-intro-bg::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #18284dcc;
}
.f-app-view-screens {
  white-space: nowrap;
}
.f-app-view-screens * {
  display: inline-block;
  vertical-align: top;
  height: 100%;
}
.f-app-view-screens .screenshots > li:last-child img {
  border-top-left-radius: 0.875rem;
  border-bottom-left-radius: 0.875rem;
}
.f-app-view-screens .screenshots > li {
  margin-right: 0.25rem;
  background-color: #f2f7f8;
}
.f-app-view-screens .screenshots::after,
.f-app-view-screens .screenshots::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}
@media (max-width: 42.4375rem) {
  .f-app-view-over {
    padding-right: 20px;
    padding-left: 20px;
  }
  .f-app-view-screens {
    overflow: hidden;
  }
  .f-app-view-intro {
    border-radius: 1.25rem;
    height: 23.5rem;
    padding: 1.5rem;
    padding-top: 0;
    margin-bottom: 1.5rem;
  }
  .f-app-view-img {
    top: -0.25rem;
    margin-top: 0;
  }
  .f-app-view-intro-bg img {
    width: auto;
    min-height: 100%;
  }
  .f-app-view-rate .rate-star {
    width: 7.5rem;
    margin: 0 auto;
  }
  .f-app-view-screens {
    margin-right: -1.5rem;
    margin-left: -1.5rem;
    margin-bottom: 1.5rem;
  }
  .f-app-view-screens .screenshots {
    display: block;
    padding-bottom: 2rem;
    margin-bottom: -2rem;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .f-app-view-screens .screenshots > li:first-child {
    margin-right: 0;
  }
  .f-app-view-screens .screenshots > li:first-child img {
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
  }
  .f-app-view-screens .screenshots > li:last-child img {
    border-top-left-radius: 1.25rem;
    border-bottom-left-radius: 1.25rem;
  }
  .f-app-view-screens .screenshots > li img {
    height: 11rem;
  }
}
@media (min-width: 42.5rem) and (max-width: 61.9375rem) {
  .f-app-view-over {
    overflow: hidden;
  }
  .f-app-view {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
}
@media (min-width: 42.5rem) {
  .f-app-view-over {
    margin-top: 0.25rem;
  }
  .f-app-view {
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .f-app-view-list {
    display: flex;
    padding: 1.5rem;
    padding-top: 0.25rem;
    height: 23rem;
  }
  .f-app-view-list::after {
    content: "";
    display: block;
    clear: both;
  }
  .f-app-view-intro {
    min-width: 38rem;
    height: 100%;
    border-top-right-radius: 0.875rem;
    border-bottom-right-radius: 0.875rem;
    padding-right: 2rem;
    padding-left: 2rem;
  }
  .f-app-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    max-height: 2.6em;
  }
  .rate-star {
    display: inline-block;
    vertical-align: top;
  }
  .f-app-view-rate .rate-star {
    margin-left: 0.5rem;
  }
  .f-app-view-screens .screenshots::before {
    display: none;
  }
  .intro-scroll {
    display: block !important;
    position: absolute;
    transform: scaleX(-1);
    left: 0;
    top: 50%;
    width: 2.25rem;
    height: 4.5rem;
    margin-top: -2.75rem;
    color: #29b1d8;
  }
  .intro-scroll-arrow {
    animation: i-scroll-arrow 1.5s linear infinite;
  }
  @keyframes i-scroll-arrow {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-0.125rem);
    }
    75% {
      transform: translateX(0.125rem);
    }
    100% {
      transform: translateX(0);
    }
  }
}
@media (min-width: 62rem) {
  .f-app-view::-webkit-scrollbar {
    height: 16px;
  }
  .f-app-view::-webkit-scrollbar-thumb {
    background-color: #aed9e0;
    border-radius: 16px;
    border: 4px solid #fff;
  }
  .f-app-view::-webkit-scrollbar-track {
    background-color: #f2f7f8;
    border-radius: 16px;
    border: 4px solid #fff;
  }
}
.unit-rating {
  width: 7.5rem;
  height: 1.5rem;
  font-size: 1px;
}
.unit-rating,
.unit-rating li a:hover,
.unit-rating li.current-rating {
  background-size: auto 100%;
}
.unit-rating {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZmZmZjY2JyBkPSdNMTEuMTMsNC4yNmExLDEsMCwwLDEsMS4zMy0uNDEuOS45LDAsMCwxLC40MS40MUwxNC44MSw3LjlhMSwxLDAsMCwwLC43MS41MWw0LjA4LjY5YTEsMSwwLDAsMSwuODEsMS4xNC45My45MywwLDAsMS0uMjcuNTNsLTIuODgsMi45MWExLDEsMCwwLDAtLjI4Ljg0bC42LDQuMDVhMSwxLDAsMCwxLS44MiwxLjEyLDEsMSwwLDAsMS0uNTktLjA5bC0zLjc0LTEuODNhMSwxLDAsMCwwLS44NiwwTDcuODMsMTkuNmExLDEsMCwwLDEtMS4zMi0uNDUsMSwxLDAsMCwxLS4wOS0uNThMNywxNC41MmExLDEsMCwwLDAtLjI4LS44NEwzLjg2LDEwLjc3QTEsMSwwLDAsMSw0LjM5LDkuMWw0LjA5LS42OWExLDEsMCwwLDAsLjcxLS41MVonLz48L3N2Zz4=);
}
.unit-rating li {
  text-indent: -9000px;
  padding: 0;
  margin: 0;
  float: right;
  width: 20%;
  height: 100%;
}
.unit-rating li a {
  width: 20%;
  height: 100%;
  text-decoration: none !important;
  text-indent: -9000px;
  z-index: 17;
  position: absolute;
}
.unit-rating li a:hover {
  z-index: 2;
  right: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZDg1YycgZD0nTTExLjExLDQuMTFhMSwxLDAsMCwxLDEuNzgsMGwyLDMuNzJhMSwxLDAsMCwwLC43My41Mmw0LjE2LjdhMSwxLDAsMCwxLC44MywxLjE2LDEsMSwwLDAsMS0uMjguNTRsLTIuOTQsM2ExLDEsMCwwLDAtLjI4Ljg2bC42MSw0LjEyYTEsMSwwLDAsMS0xLjQzLDEuMDZsLTMuODItMS44N2ExLDEsMCwwLDAtLjg4LDBMNy43NCwxOS43NkExLDEsMCwwLDEsNi40LDE5LjNhMSwxLDAsMCwxLS4wOS0uNmwuNjEtNC4xMmExLDEsMCwwLDAtLjI4LS44NmwtMi45NC0zYTEsMSwwLDAsMSwwLTEuNDIsMSwxLDAsMCwxLC41NC0uMjhsNC4xNy0uN2ExLDEsMCwwLDAsLjczLS41MlonLz48L3N2Zz4=);
}
.unit-rating a.r1-unit {
  right: 0;
}
.unit-rating a.r1-unit:hover {
  width: 20%;
}
.unit-rating a.r2-unit {
  right: 20%;
}
.unit-rating a.r2-unit:hover {
  width: 40%;
}
.unit-rating a.r3-unit {
  right: 40%;
}
.unit-rating a.r3-unit:hover {
  width: 60%;
}
.unit-rating a.r4-unit {
  right: 60%;
}
.unit-rating a.r4-unit:hover {
  width: 80%;
}
.unit-rating a.r5-unit {
  right: 80%;
}
.unit-rating a.r5-unit:hover {
  width: 100%;
}
.unit-rating li.current-rating {
  position: absolute;
  height: 100%;
  text-indent: -9000px;
  z-index: 1;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmY2I1MCcgZD0nTTExLjEyLDQuMTdhMSwxLDAsMCwxLDEuMzUtLjQyLjkzLjkzLDAsMCwxLC40MS40MmwyLDMuNjlhMSwxLDAsMCwwLC43Mi41MWw0LjE0LjdhMSwxLDAsMCwxLC44MiwxLjE1LDEsMSwwLDAsMS0uMjguNTRsLTIuOTIsM2ExLDEsMCwwLDAtLjI4Ljg1bC42MSw0LjA5YTEsMSwwLDAsMS0uODQsMS4xNCwxLDEsMCwwLDEtLjU5LS4wOWwtMy43OC0xLjg1YTEsMSwwLDAsMC0uODgsMEw3Ljc4LDE5LjdhMSwxLDAsMCwxLTEuNDMtMS4wNUw3LDE0LjU2YTEsMSwwLDAsMC0uMjgtLjg1bC0yLjkyLTNhMSwxLDAsMCwxLDAtMS40MiwxLDEsMCwwLDEsLjU0LS4yN2w0LjE0LS43YTEsMSwwLDAsMCwuNzItLjUxWicvPjwvc3ZnPg==);
}
@media (max-width: 61.9375rem) {
  .f-app-main-text {
    padding: 0 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
  }
}
@media (min-width: 62rem) {
  .f-app-main-text {
    padding: 2rem;
    text-align: center;
  }
}
.f-app-main-text > p:last-child {
  margin-bottom: 0;
  text-align: center;
  
}
.f-app-main-text img {
  vertical-align: top;
  max-width: 100%;
  text-align: center;
}
.f-app-meta,
.f-app-seo {
  margin-top: 1rem;
}
.grid-list {
  margin: -0.5rem;
}
.grid-list::after {
  content: "";
  display: table;
  clear: both;
}
.b-grid {
  float: right;
  width: 100%;
  padding: 0.5rem;
}
.b-grid .block {
  margin-top: 0;
}
.grid4 > .b-grid {
  width: 50%;
}
.grid2 > .b-grid {
  width: 100%;
}
@media (min-width: 48rem) {
  .grid4 > .b-grid {
    width: 25%;
  }
  .grid2 > .b-grid {
    width: 50%;
  }
}
.f-app-meta,
.f-app-download {
  text-align: center;
}
.f-app-meta .block {
  padding: 1rem;
  position: relative;
}
.f-app-meta .block .f-app-meta-icon {
  display: block;
}
.f-app-meta .block .f-app-meta-icon svg {
  vertical-align: top;
  height: 1.5rem;
}
.f-app-download .block {
  position: relative;
  z-index: 1;
  padding: 2rem;
}
.f-app-download .block::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: #000;
  top: 0.5rem;
  right: 0.5rem;
  left: 0.5rem;
  bottom: 0.5rem;
  border-radius: 0.875rem;
  background-image: linear-gradient(90deg, #e1f5fa 0%, #e8eaf9 100%);
}
.f-app-download .block.f-app-obb::after {
  background-image: linear-gradient(90deg, #e9f8ea 0%, #e9effb 100%);
}
.f-app-download-info {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 2;
  padding: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  color: inherit;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.f-app-download-info:hover {
  opacity: 1;
}
.f-app-download-info svg {
  display: block;
}
.f-app-download .attachment-count {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-top: 0.5rem;
}
.f-app-download .attachment-name {
  font-weight: 700;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}
.f-app-meta-data,
.f-app-download .attachment-name {
  display: block;
}
.f-app-meta-data {
  overflow: hidden;
}
@media (max-width: 42.4375rem) {
  .f-app-meta .block {
    font-size: 0.875rem;
  }
  .f-app-meta .block .f-app-meta-icon {
    margin-bottom: 0.5rem;
  }
  .f-app-meta-data {
    line-height: 1.3em;
    height: 2.6em;
    margin-bottom: 0.25rem;
  }
  .f-app-download .block .muted {
    font-size: 0.875rem;
  }
}
@media (min-width: 42.5rem) {
  .f-app-download .attachment-name {
    font-size: 1.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .f-app-meta .block .f-app-meta-icon {
    text-align: left;
  }
  .f-app-meta-data {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .f-app-meta .block::after {
    content: "";
    display: block;
    height: 1.5rem;
    width: 1.5rem;
  }
}
@media (min-width: 62rem) {
  .f-app-download .block::after {
    transition: opacity 0.4s ease;
    opacity: 0.7;
  }
  .f-app-download .block:hover::after {
    opacity: 1;
  }
}
.f-app-seo {
  padding: 1.5rem;
}
.f-app-seo-virus > p:last-child {
  margin-bottom: 0;
}
.f-app-seo-text {
  position: relative;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: #17202180;
}
@media (max-width: 42.4375rem) {
  svg.f-app-seo-shield {
    margin-bottom: 0.75rem;
  }
  .f-app-seo-virus {
    text-align: center;
  }
  .f-app-seo-virus > p {
    font-size: 0.875rem;
  }
}
@media (min-width: 42.5rem) {
  .f-app-seo-virus {
    padding-right: 4.5rem;
    padding-bottom: 1.5rem;
    position: relative;
  }
  .f-app-seo-virus::after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: -0.0625rem;
    width: 100%;
    height: 0.125rem;
    border-radius: 0.125rem;
    background-color: #f2f7f8;
  }
  svg.f-app-seo-shield {
    position: absolute;
    right: 0;
    top: 0;
  }
}
@media (min-width: 62rem) {
  .f-app-seo {
    padding: 2rem;
  }
  .f-app-seo-virus {
    padding-bottom: 2rem;
  }
  .f-app-seo-text {
    margin-top: 2rem;
    font-size: 0.875rem;
  }
}
.f-app-view-intro .post-edit {
  margin: 0.5rem;
  right: 0;
  left: auto;
}
@media (min-width: 100rem) {
  .app-next-prev {
    display: block !important;
    position: fixed;
    top: 22%;
    right: 0;
    width: 100%;
    height: 0;
  }
  .app-next-prev > .wrp > a {
    display: block;
    width: 9rem;
    text-align: center;
    color: inherit;
  }
  .app-next-prev > .wrp > a > .fw-b {
    display: block;
    font-size: 0.875rem;
  }
  .app-next-prev > .wrp > a > .fw-b::before {
    content: attr(title);
    display: block;
    font-weight: 400;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
  }
  .app-next-prev > .wrp > a > .btn {
    vertical-align: top;
    color: #fff !important;
    margin-bottom: 0.75rem;
  }
  .app-next {
    float: left;
    margin-left: -11rem;
  }
  .app-prev {
    float: right;
    margin-right: -11rem;
  }
  .app-next > .fw-b::before {
    color: #29b1d8;
  }
  .app-prev > .fw-b::before {
    color: #de485f;
  }
}