 #pre {
	 top: 0;
	 left: 0;
	 width: 100vw;
	 height: 100vh;
	 display: block;
	 z-index: 99;
	 position: fixed;
	 background: #fff;
}
 section {
	 outline: none;
}
 .smartbanner, #smartbanner {
	 z-index: 999;
}
 .data {
	 color: #fff;
	 z-index: 1;
	 padding: 0 40px;
	 position: relative;
	 background-color: #000;
}
 @media (max-width: 1080px) {
	 .data {
		 padding: 120px 36px;
	}
}
 @media (max-width: 360px) {
	 .data {
		 padding: 0 20px;
	}
}
 .data--wrap {
	 padding: 0;
	 display: flex;
	 max-width: 1000px;
	 align-items: flex-start;
}
 @media (max-width: 1080px) {
	 .data--wrap {
		 max-width: 448px;
	}
}
 .data--left {
	 width: 45%;
}
 @media (max-width: 1080px) {
	 .data--left {
		 width: 100%;
	}
}
 .data__meta {
	 height: 100vh;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
}
 @media (max-width: 1080px) {
	 .data__meta {
		 width: 100%;
		 height: auto;
		 margin: 0 auto 120px auto;
	}
	 .data__meta:last-child {
		 margin-bottom: 0;
	}
	 .data__meta br {
		 display: none;
	}
}
 .data__meta--num {
	 font-size: 16px;
	 margin-bottom: 24px;
}
 .data__meta--txt {
	 margin-bottom: 50px;
}
 .data__meta--txt small {
	 display: block;
	 font-size: 15px;
	 line-height: 1.5;
}
 @media (max-width: 720px) {
	 .data__meta--txt {
		 margin-bottom: 30px;
	}
}
 .data__meta--btns {
	 font-size: 0;
	 display: block !important;
}
 @media (max-width: 1080px) {
	 .data__meta--btns {
		 margin-bottom: 20px;
	}
}
 .data__meta--btn {
	 width: 60px;
	 height: 60px;
	 display: inline-block;
	 margin-right: 30px;
	 border-radius: 50%;
	 background-color: #fff;
	 background-size: contain;
	 background-repeat: no-repeat;
	 background-position: center center;
}
 @media (max-width: 720px) {
	 .data__meta--btn {
		 width: 50px;
		 height: 50px;
		 margin-right: 20px;
	}
}
 .data__meta--btn.apple {
	 background-image: url(../img/icon-download-apple.svg);
}
 .data__meta--btn.android {
	 background-image: url(../img/icon-download-android.svg);
}
 .data__meta--img {
	 width: 100%;
	 max-width: 290px;
	 margin: 10px auto 0 auto;
	 display: block;
}
 .data--right {
	 top: 90px;
	 width: 55%;
	 height: calc(100vh - 90px);
	 position: sticky;
}
 .data--right img {
	 top: 50%;
	 left: 50%;
	 width: auto;
	 height: 70vh;
	 max-height: 720px;
	 opacity: 0;
	 position: absolute;
	 transform: translate(-50%, -50%);
	 -webkit-transition: all 0.3s ease-in-out;
	 -moz-transition: all 0.3s ease-in-out;
	 -o-transition: all 0.3s ease-in-out;
	 transition: all 0.3s ease-in-out;
}
 .data--right img.active {
	 opacity: 1;
}

 @media (max-width: 1080px) {
	 .desktop {
		 display: none !important;
	}
}
 @media (max-width: 900px) {
	 .tablet {
		 display: none !important;
	}
}
 .mobile {
	 display: block;
}
 @media (min-width: 1081px) {
	 .mobile {
		 display: none !important;
	}
}
 .true-mobile {
	 display: block;
}
 @media (min-width: 901px) {
	 .true-mobile {
		 display: none !important;
	}
}
 .xs-mobile-counter {
	 display: block;
}
 @media (max-width: 720px) {
	 .xs-mobile-counter {
		 display: none !important;
	}
}
 .xs-mobile {
	 display: block;
}
 @media (min-width: 721px) {
	 .xs-mobile {
		 display: none !important;
	}
}
 .truest-mobile-counter {
	 display: block;
}
 @media (max-width: 550px) {
	 .truest-mobile-counter {
		 display: none !important;
	}
}
 .truest-mobile {
	 display: block;
}
 @media (min-width: 551px) {
	 .truest-mobile {
		 display: none !important;
	}
}
 @media (max-width: 1080px) {
	 *[data-parallax] {
		 transform: none !important;
	}
}
 .hero {
	 padding: 150px 40px 120px 40px;
	 min-height: 100vh;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
}
 @media (max-width: 900px) {
	 .hero {
		 padding: 150px 36px;
	}
}
 @media (max-width: 720px) {
	 .hero {
		 padding: 120px 36px;
	}
}
 @media (max-width: 360px) {
	 .hero {
		 padding: 90px 24px;
	}
}
 .hero.page {
	 padding: 190px 40px 120px 40px;
}
 @media (max-width: 900px) {
	 .hero.page {
		 padding: 150px 36px;
	}
}
 @media (max-width: 720px) {
	 .hero.page {
		 padding: 120px 36px;
	}
}
 @media (max-width: 360px) {
	 .hero.page {
		 padding: 90px 24px;
	}
}
 .hero--wrap {
	 padding: 0;
	 display: flex;
	 flex-wrap: wrap;
	 max-width: 990px;
	 justify-content: space-between;
}
 @media (max-width: 1080px) {
	 .hero--wrap {
		 flex-direction: column;
	}
	 .hero--wrap.invert-on-mobile {
		 flex-direction: column-reverse;
	}
}
 .hero.page .hero--meta {
	 width: 100%;
	 max-width: 100%;
	 text-align: center;
}
 @media (max-width: 1080px) {
	 .hero.page .hero--meta {
		 max-width: 448px;
		 margin: 0 auto;
	}
}
 @media (max-width: 720px) {
	 .hero.page .hero--meta {
		 width: 100%;
	}
}
 .hero.page .hero--meta > * {
	 margin-right: auto;
	 margin-left: auto;
}
 .hero--meta {
	 width: 480px;
	 margin: auto 0;
	 display: flex;
	 align-items: flex-start;
	 flex-direction: column;
}
 @media (max-width: 1080px) {
	 .hero--meta {
		 max-width: 448px;
		 margin: 0 auto;
	}
}
 @media (max-width: 720px) {
	 .hero--meta {
		 width: 100%;
	}
}
 .hero--icon {
	 width: 40px;
	 height: auto;
	 filter: brightness(0);
	 margin-bottom: 40px;
}
 @media (max-width: 720px) {
	 .hero--icon {
		 margin-bottom: 32px;
	}
}
 .hero--icon.wide {
	 width: 85px;
	 filter: brightness(0) invert(1);
}
 @media (max-width: 720px) {
	 .hero--icon.wide {
		 width: 70px;
	}
}
 .hero.peach .hero--sub {
	 color: #000;
}
 .hero.purple .hero--sub {
	 color: #fff;
}
 .hero--sub {
	 margin-bottom: 30px;
}
 @media (max-width: 720px) {
	 .hero--sub {
		 margin-bottom: 20px;
	}
}
 .hero--ttl {
	 margin-bottom: 24px;
}
 .hero.page .hero--txt {
	 max-width: 610px;
}
 .hero--txt {
	 margin-bottom: 40px;
}
 @media (max-width: 720px) {
	 .hero--txt br {
		 display: none;
	}
}
 .hero.page .hero--btn {
	 margin-bottom: 120px;
}
 .hero.page .hero--img {
	 width: auto;
	 margin: 0 auto;
	 max-width: 100%;
}
 .hero--img {
	 width: 350px;
	 margin: auto 0;
}
 @media (max-width: 1080px) {
	 .hero--img {
		 max-width: 265px;
		 margin: 80px auto 0 auto;
	}
}
 @media (max-width: 720px) {
	 .hero--img {
		 max-width: 265px;
		 margin: 40px auto 0 auto;
	}
}
 @keyframes fadeIn {
	 0% {
		 opacity: 0%;
	}
	 100% {
		 opacity: 100%;
	}
}

 @keyframes appear {
	 0% {
		 opacity: 0;
	}
	 50% {
		 opacity: 0;
	}
	 70% {
		 opacity: 1;
		 margin-top: 0;
	}
	 100% {
		 opacity: 1;
		 margin-top: 0;
	}
}
