/* ribbon-animte-start */

.section-hero .ribbon {
  bottom: 0;
  top: auto;
  transform: translateY(100%);
  transition: transform 1s ease-out;
  transition-delay: 0.2s;
  will-change: transform;
  position: fixed;
  z-index: 99;
  width: 100%;
}

.section-hero .ribbon a {
  color: inherit;
}

.section-hero .ribbon p {
  font-size: 17px;
  line-height: 1.23536;
  font-weight: 400;
  letter-spacing: -0.022em;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  font-weight: 600;
}

.section-hero .ribbon p:lang(ar) {
  letter-spacing: 0em;
  font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons",
    "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.section-hero .ribbon p:lang(ja) {
  letter-spacing: 0em;
  font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons",
    "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo",
    "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.section-hero .ribbon p:lang(ko) {
  line-height: 1.35296;
  letter-spacing: 0em;
  font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic",
    "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue",
    "Helvetica", "Arial", sans-serif;
}

.section-hero .ribbon p:lang(zh) {
  letter-spacing: 0em;
}

.section-hero .ribbon p:lang(th) {
  line-height: 1.35296;
  letter-spacing: 0em;
  font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue",
    "Helvetica", "Arial", sans-serif;
}

.section-hero .ribbon p:lang(zh-CN) {
  font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
    "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.section-hero .ribbon p:lang(zh-HK) {
  font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK",
    "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.section-hero .ribbon p:lang(zh-MO) {
  font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons",
    "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.section-hero .ribbon p:lang(zh-TW) {
  font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC",
    "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

@media only screen and (max-width: 380px) {
  .section-hero .ribbon p {
    font-size: 14px;
  }
}

@media only screen and (max-width: 734px) {
  .section-hero .ribbon {
    transform: translateY(130%);
  }
}

@media only screen and (max-width: 734px) and (max-height: 380px) and (orientation: landscape) {
  .section-hero .ribbon p {
    font-size: 14px;
  }
}

.section-hero .ribbon.animate {
  transform: translateY(0);
}

@media only screen and (max-width: 1068px) {
  .section-hero .ribbon-content {
    width: 100%;
  }
}

.section-hero .ribbon-content-wrapper {
  background: #e0edfe;
  padding: 20px;
}

.section-hero .ribbon.hide {
  transform: translateY(100%);
  animation: hide-ribbon 0.2s forwards ease 1s;
}

.section-hero .ribbon:focus-within {
  transform: translateY(0);
  animation: none;
}

.section-hero .ribbon a {
  white-space: nowrap;
}

html.reduced-motion .section-hero .ribbon {
  position: absolute;
  transform: translateY(0);
  transition: none;
}

html.text-zoom .section-hero .section-content {
  width: 90%;
}

@keyframes hide-ribbon {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes hero-hardware-fade {
  0% {
    opacity: 0.001;
  }

  70%,
  100% {
    opacity: 1;
  }
}

@keyframes hero-hardware-rise {
  0% {
    transform: translateY(12%);
  }

  100% {
    transform: translateY(-2%);
  }
}

@keyframes icloud-animation {
  to {
    transform: translateY(-2%);
  }
}

.ac-gn-noscroll .ribbon.animate {
  opacity: 0;
  transition: opacity 0.2s ease;
  transition-delay: 0.5s;
}

@media only screen and (orientation: landscape) {
  .ios13 .ribbon.animate {
    position: absolute;
    transform: translateY(0);
    transition: none;
  }

  .ios13 .ribbon.animate.hide {
    animation: none;
    transform: none;
  }
}

/* ribbon-animte-end */

/* homekit image start */

@media only screen and (max-width: 734px) {

	.section-memories .tile-drive .picture-wrapper {
		margin-top: 82px;
	}
}

/* homekit image end */