@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { /* small, strike, strong, sub, sup, tt, var, b, u, i, center,*/
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* General */
html {
	height: 100%;
	white-space: normal;
	-webkit-text-size-adjust:none;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
	color: #000;
	line-height: 125%;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.25;
	background: ##fff;
	margin: 0px;
	padding: 0px;
	text-align: center;
	word-wrap: normal;
	/* outline: none; */
	min-height: 100%;
}
body[dir="rtl"] {font-family: "Alef", sans-serif;}

/* body * {
	outline: none;
} */
h1 {
	padding: 0;
	margin: 0;
	margin-bottom: 0.5em;
	font-size: 3.5em;
	font-weight: bold;
	color:#2D3C8B;
}
h2 {
	padding: 0;
	margin: 0;
	font-size:3em;
	margin-bottom:0.25em;
	line-height: normal;
	font-weight: bold;
	color:#2D3C8B;
}
.sectionHeader h2 {
	font-size: 3.6875em;
	font-weight: bold;
}
h3 {
	padding: 0;
	margin: 0;
	margin-bottom:0.125em;
	font-size:1.25em;
	line-height: normal;
	font-weight: bold;
	color:#E30613;
}
h4,h5,h6 {
	padding: 0;
	margin: 0;
	margin-bottom:0.125em;
	line-height: normal;
	font-weight: bold;
	color:inherit;
}
h4 {font-size:1.25em;}
h5 {font-size:1.125em;}
h6 {font-size:1em;}

p, ol, ul {font-size: inherit;color: inherit;line-height: 1.25em;padding: 0;}
p {text-align: justify; margin:0; font-size: 1.25em; text-align: inherit;}
p.text-center { text-align: center; }
ol, ul {text-align: left; margin: 0 0 0 2em;}
body[dir="rtl"] ol, 
body[dir="rtl"] ul {text-align: right; margin: 0 2em 0 0;} 
ul {list-style-type: disc;}
form {margin: 0px;padding: 0px;}
img {max-width:100%;margin: 0;}
a {color: #2D3C8B;text-decoration: underline;}
a:hover, a:focus {color: #2D3C8B;text-decoration: underline;}

.outerContainer {min-width: 480px;height: auto;position: relative;clear: both;display: block; text-align:center;}
.innerContainer {max-width:1340px;width: 100%; margin-left: auto;margin-right: auto;height: auto;position: relative;clear: both;display: block;overflow: visible;}


/* ------------- Header ------------- */
.main-header { position: relative;  width: 90%; max-width: 100em; z-index: 16; padding: 2.25em 1em; box-sizing: border-box; border-bottom: 1px solid #e5e5e5; margin: 0 auto; display: flex; justify-content: space-between; background-color: #fff; }
.main-header__logo { flex-shrink: 1; height: auto; align-items: center; display: flex; margin-right: 1em;}
.main-header__logo img { max-height: 2.5em; width: auto; height: auto; }
.main-header__language { text-align: right; display: flex; align-items: center; }
.main-header__language-select { border-radius: 30px; font-size: 0.85em; padding: 0.65em 1.25em; appearance: none; background-color: transparent; border: 1px solid #000; text-align: center; color: #000; font-weight: 600; font-weight: bold; cursor: pointer; }
@media screen and (min-width: 768px) {
	.main-header__language-select { font-size: 0.85em; }
}

/* ------------- Footer ------------- */
.main-footer { position: relative;  width: 90%; max-width: 100em; z-index: 16; padding: 3em 1em; box-sizing: border-box; border-top: 1px solid #e5e5e5; margin: 0 auto; display: flex; justify-content: center;  }
.main-footer__link { font-size: 1.25em; color: #000; padding: 0.25em 1em; text-decoration: none; text-underline-offset: 3px; }
.main-footer__link:hover { text-decoration: underline; color: #000; }
@media screen and (min-width: 768px) {
}


/* ------------- Content ------------- */

/* General */
.main-content { background-color: #fff; }
.main-content .title { color: #000; font-size: 2.1875em; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight: 500; letter-spacing: -0.05em; margin-bottom: 0; }
body[dir="rtl"] .main-content .title {font-family: "Alef", sans-serif;}
.main-content .pretitle { color: #000; font-size: 1.25em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.65em; }
.main-content .paragraph { color: #040404; font-size: 1.5em; text-align: center; font-weight: 300;}

.lang-zh_CN .main-content .paragraph b, .lang-zh_HK .main-content .paragraph b, .lang-yue .main-content .paragraph b {font-weight: 300;}

/* Cover */
.main-content__cover { position: relative; background: url(../_images/header_bg.jpg) no-repeat center; background-size: cover; padding-top: 4.5em; transition: opacity 0.6s ease-in-out; opacity: 0; padding-bottom: 2em; }
.main-content__cover.animate { opacity: 1; }
/*.main-content__cover.active-video { padding-bottom: 0; }*/
.main-content__cover-content { text-align: center; padding: 0 1em; box-sizing: border-box; }
.main-content__cover-content .paragraph { text-align: center; margin: 1em auto; }
.main-content__cover-video { margin-top: 2em; }
.main-content__cover-video .video-outer { flex-grow: 1; }
.main-content__cover-video-placeholder { position: relative; display: flex; align-items: flex-end; position: relative; min-height: 15em; max-width: 60em; margin: 0 auto; /*min-height: 540px;*/ }
.main-content__cover-video-placeholder::after,
.main-content__cover-video-placeholder::before { content: ''; position: absolute; width: 25%; right: 0; top: 0; height: 100%; z-index: 2;}
.main-content__cover-video-placeholder::before { left: 0; right: auto; }
body[dir="rtl"] .main-content__cover-video-placeholder::before {left: auto; right: 0; } 
.main-content__cover-video-play { position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); }
.main-content__cover-content .cover__separator { max-width: 15em; margin: 0.85em auto 0 auto; }
.main-content__cover-content .cover__title { font-size: 2.5em; }
@media screen and (min-width: 768px) {
	.main-content__cover-video-placeholder::after,
	.main-content__cover-video-placeholder::before { display: none; }
	.main-content__cover { background: url(../_images/header_bg_desktop.jpg) no-repeat center; background-size: cover; padding-top: 4em; }
}

/* Steps */
.main-content__steps { background: url(../_images/bg.jpg) no-repeat center; background-size: cover; padding: 2em 1em 0 1em; transition: opacity 0.6s ease-in-out; opacity: 0; }
.main-content__steps.animate { opacity: 1; }
.main-content__steps-content .step { width: 100%; max-width: 20.9em; margin: 0 auto; }
.main-content__steps-content .step:first-child .step__image { margin-top: 0; }
.main-content__steps-content .step__image { max-width: 15em; margin: 3em auto 0 auto; }
.main-content__steps-content .step__title { margin: 0.45em 0; font-style: italic; }
.main-content__steps-decoration { display: block; margin: 0 auto; }
@media screen and (min-width: 768px) {
	.main-content__steps { background: url(../_images/bg_main.jpg) no-repeat center; background-size: cover; }
	.main-content__steps-content { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; max-width: 60em; margin: 1em auto 0 auto; padding: 0 1em; }
	.main-content__steps-content .step { width: 40%; max-width: none; }
	.main-content__steps-content .step:first-child .step__image { margin-top: 3em; }
}
@media screen and (min-width: 1024px) {
	.main-content__steps-content { justify-content: space-between; }
	.main-content__steps-content .step { width: 30%; }
}

/* Product */
.main-content__product { position: relative; text-align: center;  padding: 4em 1em 4em 1em; width: 90%; max-width: 100em; margin: 0 auto; display: flex; flex-direction: column-reverse; justify-content: space-between; gap: 1em; align-items: center; box-sizing: border-box; }
.product__image { background-color: #e5e5e5; background-color: transparent; width: 100%; display: flex; align-items: center; justify-content: center; }
.product__image-img { object-fit: cover; height: 100%; max-height: 25rem; }
.product__text { text-align: left; margin-bottom: 2em; font-size: 0.95em; }
.product-title { margin: 0 0 0.45em 0; }
.product-description { margin-bottom: 1em; }

@media screen and (min-width: 80em) {
	.main-content__product { flex-direction: row; }
	.product__text { width: 50%; margin-left: 2em; padding-left: 2em; margin-bottom: 0; }
	.main-content__product::before {
		content: "";
		position: absolute;
		top: 1em;
		width: 1px; 
		left: 0;
		right: 0;
		margin: 0 auto;
		height: 95%;
		border-left: 1px dashed #000;
		transform: scaleY(0);
		animation: campaignLP_separatorFade 0.65s linear  0s 1 forwards;
	}
	.product__image { width: 50%; aspect-ratio: 1/1; }
	.product__image-img { max-height: 45rem; }
}
@keyframes campaignLP_separatorFade {
	0% { transform:  scaleY(0); opacity: 0;}
	100% { transform: scaleY(1); opacity: 1; border-color: #e5e5e5; }
  }

/* ------------- Animations ------------- */
@keyframes campaignLP_blurIn {
	0% {opacity: 0; filter: blur(30px); }
	100% {opacity: 1; filter: blur(0); }
  }
  @keyframes campaignLP_blurInLeft {
	0% { transform: translateX(-40px) scale(1); opacity: 0; filter: blur(30px); }
	100% { transform: translateX(0) scale(1); opacity: 1; filter: blur(0); }
  }
  @keyframes campaignLP_blurInRight {
	0% { transform: translateX(40px) scale(1); opacity: 0; filter: blur(30px); }
	100% { transform: translateX(0) scale(1); opacity: 1; filter: blur(0); }
  }
  @keyframes campaignLP_scaleIn {
	0% { opacity: 0; transform: scale(0); }
	100% { opacity: 1; transform: scale(1); }
  }
  @keyframes campaignLP_fadeIn {
	0% { opacity: 0;}
	100% { opacity: 1;}
  }
  @keyframes campaignLP_fadeInDown {
	0% { transform: translateY(-40px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
  }
  @keyframes campaignLP_fadeInRight {
	0% { transform: translateX(-40px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
  }
  @keyframes campaignLP_fadeInLeft {
	0% { transform: translateX(40px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
  }
  @keyframes campaignLP_fadeInDownBlurred {
	0% { transform: translateY(-40px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
  }
  @keyframes campaignLP_fadeInUp {
	0% { transform: translateY(40px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
  }
  @keyframes campaignLP_fadeInUpBlurred {
	0% { transform: translateY(40px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
  }
  
  @keyframes campaignLP_slideInRight {
	0% { transform: translateX(-50%); opacity: 1;}
	100% { transform: translateX(0); opacity: 1;}
  }
  @keyframes campaignLP_slideInLeft {
	0% { transform: translateX(50%); opacity: 1;}
	100% { transform: translateX(0); opacity: 1;}
  }
  
.animate .blurIn {animation: campaignLP_blurIn 1s linear 0s 1 forwards;}
.animate .blurInLeft {animation: campaignLP_blurInLeft 1s linear 0s 1 forwards;}
.animate .blurInRight {animation: campaignLP_blurInRight 1s linear 0s 1 forwards;}
body[dir="rtl"] .animate .blurInLeft  {animation-name: campaignLP_blurInRight;} 
body[dir="rtl"] .animate .blurInRight  {animation-name: campaignLP_blurInLeft;} 

.animate .scaleIn {animation: campaignLP_scaleIn 1s linear 0s 1 forwards;}
.animate .fadeIn {animation: campaignLP_fadeIn 1s linear 0s 1 forwards;}
.animate .fadeInDown {animation: campaignLP_fadeInDown 1s linear  0s 1 forwards;}
.animate .fadeInRight {animation: campaignLP_fadeInRight 1s linear  0s 1 forwards;}
.animate .fadeInLeft {animation: campaignLP_fadeInLeft 1s linear  0s 1 forwards;}

.animate .fadeInUp {animation: campaignLP_fadeInUp 1s linear  0s 1 forwards;}
.animate .fadeInDownBlurred {animation: campaignLP_fadeInDownBlurred 1s linear  0s 1 forwards;}
.animate .fadeInUpBlurred {animation: campaignLP_fadeInUpBlurred 1s linear  0s 1 forwards;}
  
.animate .slideInLeft {animation: campaignLP_slideInLeft 1s linear  0s 1 forwards;}
.animate .slideInRight {animation: campaignLP_slideInRight 1s linear  0s 1 forwards;}
body[dir="rtl"] .animate .slideInLeft  {animation-name: campaignLP_slideInRight;} 
body[dir="rtl"] .animate .slideInRight  {animation-name: campaignLP_slideInLeft;} 
  
.anim {opacity: 0;animation-play-state:paused;}
.animate .anim {animation-play-state:running;}
  
.animate .delay-0s {animation-delay:0s;}
.animate .delay-0s5 {animation-delay:0.5s;}
.animate .delay-1s {animation-delay:1s;}
.animate .delay-1s5 {animation-delay:1.5s;}
.animate .delay-2s {animation-delay:2s;}
.animate .delay-2s5 {animation-delay:2.5s;}
.animate .delay-3s {animation-delay:3s;}
.animate .delay-3s5 {animation-delay:3.5s;}
.animate .delay-4s {animation-delay:4s;}
.animate .delay-4s5 {animation-delay:4.5s;}
.animate .delay-5s {animation-delay:5s;}
  
  
.animate .duration-0s25 {animation-duration:0.25s;}
.animate .duration-0s5 {animation-duration:0.5s;}
.animate .duration-0s75 {animation-duration:0.75s;}
.animate .duration-1s {animation-duration:1s;}
.animate .duration-1s25 {animation-duration:1.25s;}
.animate .duration-1s5 {animation-duration:1.5s;}
.animate .duration-2s {animation-duration:2s;}
.animate .duration-2s5 {animation-duration:2.5s;}
.animate .duration-3s {animation-duration:3s;}