/* ADDED FOR ARABIC WEBSITES */
html[lang*='ar-'] .description,
html[lang*='ar-'] .process-article-text,
html[lang*='ar-'] .process-article-text,
html[lang*='ar-'] .process-video-caption {
direction: rtl; }
/* ------------------------------ */
.enable-high-contrast-mode:not(.no_high_contrast)
.heading:not(.no_high_contrast):not(.live-chat-title):not(
.js-botique-heading
).heading--2 {
color: black !important; }
body {
overflow-x: hidden; }
.subfooter {
display: none; }
.hj {
letter-spacing: 0;
color: #fff; }
html[lang*='ar-'] .hj {
font-family: "abchanel-corpo", Cairo, sans-serif;
letter-spacing: -0.5px; }
.language-ja_JP .hj {
font-family: abchanel-corpo, Hiragino Sans, Meiryo, sans-serif;
font-weight: 600; }
.language-ko_KR .hj {
font-family: abchanel-corpo, Apple SD Gothic Neo, Malgun Gothic, sans-serif; }
.language-th_TH .hj {
font-family: "abchanel-corpo", Prompt, Arial, Helvetica, sans-serif; }
.language-vi_VN .hj {
font-family: "abchanel-corpo-vietnam", "PingFangHK-Semibold", "Microsoft YaHei", "sans-serif"; }
.language-zh_HK .hj {
font-family: abchanel-corpo, PingFangHK-Semibold, "Microsoft YaHei", sans-serif; }
.language-zh_TW .hj {
font-family: abchanel-corpo, PingFangTC-Semibold, "Microsoft YaHei", sans-serif; }
.language-zh_CN .hj {
font-family: abchanel-corpo, PingFangSC-Semibold, "Microsoft YaHei", sans-serif; }
html[lang*='ar-'] .hj .process-article-text p {
font-family: Helvetica, Tajawal, Arial, sans-serif; }
.language-ja_JP .hj .process-article-text p {
font-family: Helvetica, Hiragino Sans, Arial, Meiryo, sans-serif;
font-weight: 300; }
.language-ko_KR .hj .process-article-text p {
font-family: Helvetica, Apple SD Gothic Neo, Arial, Malgun Gothic, sans-serif; }
.language-th_TH .hj .process-article-text p {
font-family: Helvetica, Prompt, "Helvetica Neue", Arial, sans-serif; }
.language-vi_VN .hj .process-article-text p {
font-family: "Arial", "sans-serif"; }
.language-zh_HK .hj .process-article-text p {
font-family: Helvetica, PingFangHK-Regular, Arial, "Microsoft YaHei", sans-serif; }
.language-zh_TW .hj .process-article-text p {
font-family: Helvetica, PingFangTC-Regular, Arial, "Microsoft YaHei", sans-serif; }
.language-zh_CN .hj .process-article-text p {
font-family: Helvetica, PingFangSC-Regular, Arial, "Microsoft YaHei", sans-serif; }
.hj.process {
color: #1d1d1d; }
.enable-high-contrast-mode .hj.process {
color: white; }
@media (min-width: 600px) {
.hj.process {
padding-bottom: 150px; } }
@media (min-width: 960px) {
.hj.process {
padding-bottom: 225px; } }
.hj .section {
padding-top: 0;
padding-bottom: 0; }
.hj .justify-content-center {
justify-content: center; }
@media (min-width: 600px) {
.hj .justify-content-md--center {
justify-content: center; } }
.hj-container {
margin-right: auto;
margin-left: auto;
padding-left: 5.3333333333vw;
padding-right: 5.3333333333vw; }
@media (min-width: 600px) {
.hj-container {
padding-left: 8.0595238095vw;
padding-right: 8.0595238095vw; } }
@media (min-width: 960px) {
.hj-container {
padding-left: 90px;
padding-right: 90px;
max-width: 90rem;
margin: 0 auto; } }
@media (min-width: 1440px) {
.hj-container {
max-width: 100rem; } }
.hj-container-fluid {
margin: 0 auto;
max-width: 100rem; }
.hj-row {
margin-left: -2.66666666665vw;
margin-right: -2.66666666665vw;
display: flex;
flex-wrap: wrap; }
@media (min-width: 600px) {
.hj-row {
margin-left: -0.9722222222vw;
margin-right: -0.9722222222vw; } }
@media (min-width: 960px) {
.hj-row {
margin-left: -1vw;
margin-right: -1vw; } }
.hj-col-1 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 2.66666666665vw;
padding-left: 2.66666666665vw; }
.hj-col-1 {
flex: 0 0 16.66667%;
max-width: 16.66667%; }
.hj-offset-1 {
margin-left: 16.66667%; }
.hj-col-2 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 2.66666666665vw;
padding-left: 2.66666666665vw; }
.hj-col-2 {
flex: 0 0 33.33333%;
max-width: 33.33333%; }
.hj-offset-2 {
margin-left: 33.33333%; }
.hj-col-3 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 2.66666666665vw;
padding-left: 2.66666666665vw; }
.hj-col-3 {
flex: 0 0 50%;
max-width: 50%; }
.hj-offset-3 {
margin-left: 50%; }
.hj-col-4 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 2.66666666665vw;
padding-left: 2.66666666665vw; }
.hj-col-4 {
flex: 0 0 66.66667%;
max-width: 66.66667%; }
.hj-offset-4 {
margin-left: 66.66667%; }
.hj-col-5 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 2.66666666665vw;
padding-left: 2.66666666665vw; }
.hj-col-5 {
flex: 0 0 83.33333%;
max-width: 83.33333%; }
.hj-offset-5 {
margin-left: 83.33333%; }
.hj-col-6 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 2.66666666665vw;
padding-left: 2.66666666665vw; }
.hj-col-6 {
flex: 0 0 100%;
max-width: 100%; }
.hj-offset-6 {
margin-left: 100%; }
@media (max-width: 599px) {
.hj .m-0 {
flex: 0 0 calc(100% + 5.3333333333vw);
max-width: calc(100% + 5.3333333333vw);
margin-left: -2.66666666665vw;
margin-right: -2.66666666665vw;
padding-left: 0;
padding-right: 0; }
.hj .is-xs-hidden {
opacity: 0; } }
@media (min-width: 600px) {
.hj-col-sm-1 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%; }
.hj-offset-sm-1 {
margin-left: 8.33333%; }
.hj-col-sm-2 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%; }
.hj-offset-sm-2 {
margin-left: 16.66667%; }
.hj-col-sm-3 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-3 {
flex: 0 0 25%;
max-width: 25%; }
.hj-offset-sm-3 {
margin-left: 25%; }
.hj-col-sm-4 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%; }
.hj-offset-sm-4 {
margin-left: 33.33333%; }
.hj-col-sm-5 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%; }
.hj-offset-sm-5 {
margin-left: 41.66667%; }
.hj-col-sm-6 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-6 {
flex: 0 0 50%;
max-width: 50%; }
.hj-offset-sm-6 {
margin-left: 50%; }
.hj-col-sm-7 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%; }
.hj-offset-sm-7 {
margin-left: 58.33333%; }
.hj-col-sm-8 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%; }
.hj-offset-sm-8 {
margin-left: 66.66667%; }
.hj-col-sm-9 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-9 {
flex: 0 0 75%;
max-width: 75%; }
.hj-offset-sm-9 {
margin-left: 75%; }
.hj-col-sm-10 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%; }
.hj-offset-sm-10 {
margin-left: 83.33333%; }
.hj-col-sm-11 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%; }
.hj-offset-sm-11 {
margin-left: 91.66667%; }
.hj-col-sm-12 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-sm-12 {
flex: 0 0 100%;
max-width: 100%; }
.hj-offset-sm-12 {
margin-left: 100%; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-1.m-l-sm-0 {
flex: 0 0 calc(8.33333% + 8.0595238095vw);
max-width: calc(8.33333% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-1.m-r-sm-0 {
flex: 0 0 calc(8.33333% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(8.33333% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-2.m-l-sm-0 {
flex: 0 0 calc(16.66667% + 8.0595238095vw);
max-width: calc(16.66667% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-2.m-r-sm-0 {
flex: 0 0 calc(16.66667% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(16.66667% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-3.m-l-sm-0 {
flex: 0 0 calc(25% + 8.0595238095vw);
max-width: calc(25% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-3.m-r-sm-0 {
flex: 0 0 calc(25% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(25% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-4.m-l-sm-0 {
flex: 0 0 calc(33.33333% + 8.0595238095vw);
max-width: calc(33.33333% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-4.m-r-sm-0 {
flex: 0 0 calc(33.33333% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(33.33333% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-5.m-l-sm-0 {
flex: 0 0 calc(41.66667% + 8.0595238095vw);
max-width: calc(41.66667% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-5.m-r-sm-0 {
flex: 0 0 calc(41.66667% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(41.66667% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-6.m-l-sm-0 {
flex: 0 0 calc(50% + 8.0595238095vw);
max-width: calc(50% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-6.m-r-sm-0 {
flex: 0 0 calc(50% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(50% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-7.m-l-sm-0 {
flex: 0 0 calc(58.33333% + 8.0595238095vw);
max-width: calc(58.33333% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-7.m-r-sm-0 {
flex: 0 0 calc(58.33333% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(58.33333% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-8.m-l-sm-0 {
flex: 0 0 calc(66.66667% + 8.0595238095vw);
max-width: calc(66.66667% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-8.m-r-sm-0 {
flex: 0 0 calc(66.66667% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(66.66667% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-9.m-l-sm-0 {
flex: 0 0 calc(75% + 8.0595238095vw);
max-width: calc(75% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-9.m-r-sm-0 {
flex: 0 0 calc(75% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(75% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-10.m-l-sm-0 {
flex: 0 0 calc(83.33333% + 8.0595238095vw);
max-width: calc(83.33333% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-10.m-r-sm-0 {
flex: 0 0 calc(83.33333% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(83.33333% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-11.m-l-sm-0 {
flex: 0 0 calc(91.66667% + 8.0595238095vw);
max-width: calc(91.66667% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-11.m-r-sm-0 {
flex: 0 0 calc(91.66667% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(91.66667% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 600px) and (max-width: 959px) {
.hj-col-sm-12.m-l-sm-0 {
flex: 0 0 calc(100% + 8.0595238095vw);
max-width: calc(100% + 8.0595238095vw);
margin-left: -8.0595238095vw; }
.hj-col-sm-12.m-r-sm-0 {
flex: 0 0 calc(100% + 8.0595238095vw - 0.9722222222vw);
max-width: calc(100% + 8.0595238095vw - 0.9722222222vw);
margin-left: 0;
margin-right: -8.0595238095vw;
padding-right: 0; } }
@media (min-width: 768px) {
.hj-col-md-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%; }
.hj-offset-md-1 {
margin-left: 8.33333%; } }
@media (min-width: 768px) {
.hj-col-md-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%; }
.hj-offset-md-2 {
margin-left: 16.66667%; } }
@media (min-width: 768px) {
.hj-col-md-3 {
flex: 0 0 25%;
max-width: 25%; }
.hj-offset-md-3 {
margin-left: 25%; } }
@media (min-width: 768px) {
.hj-col-md-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%; }
.hj-offset-md-4 {
margin-left: 33.33333%; } }
@media (min-width: 768px) {
.hj-col-md-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%; }
.hj-offset-md-5 {
margin-left: 41.66667%; } }
@media (min-width: 768px) {
.hj-col-md-6 {
flex: 0 0 50%;
max-width: 50%; }
.hj-offset-md-6 {
margin-left: 50%; } }
@media (min-width: 768px) {
.hj-col-md-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%; }
.hj-offset-md-7 {
margin-left: 58.33333%; } }
@media (min-width: 768px) {
.hj-col-md-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%; }
.hj-offset-md-8 {
margin-left: 66.66667%; } }
@media (min-width: 768px) {
.hj-col-md-9 {
flex: 0 0 75%;
max-width: 75%; }
.hj-offset-md-9 {
margin-left: 75%; } }
@media (min-width: 768px) {
.hj-col-md-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%; }
.hj-offset-md-10 {
margin-left: 83.33333%; } }
@media (min-width: 768px) {
.hj-col-md-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%; }
.hj-offset-md-11 {
margin-left: 91.66667%; } }
@media (min-width: 768px) {
.hj-col-md-12 {
flex: 0 0 100%;
max-width: 100%; }
.hj-offset-md-12 {
margin-left: 100%; } }
@media (min-width: 960px) {
.hj-col-lg-1 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%; }
.hj-col-lg-1.m-l-lg-0 {
flex: 0 0 calc(8.33333% + 90px);
max-width: calc(8.33333% + 90px);
margin-left: -90px; }
.hj-col-lg-1.m-r-lg-0 {
flex: 0 0 calc(8.33333% + 90px - 0.9722222222vw);
max-width: calc(8.33333% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-1 {
margin-left: 8.33333%; } }
@media (min-width: 960px) {
.hj-col-lg-2 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%; }
.hj-col-lg-2.m-l-lg-0 {
flex: 0 0 calc(16.66667% + 90px);
max-width: calc(16.66667% + 90px);
margin-left: -90px; }
.hj-col-lg-2.m-r-lg-0 {
flex: 0 0 calc(16.66667% + 90px - 0.9722222222vw);
max-width: calc(16.66667% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-2 {
margin-left: 16.66667%; } }
@media (min-width: 960px) {
.hj-col-lg-3 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-3 {
flex: 0 0 25%;
max-width: 25%; }
.hj-col-lg-3.m-l-lg-0 {
flex: 0 0 calc(25% + 90px);
max-width: calc(25% + 90px);
margin-left: -90px; }
.hj-col-lg-3.m-r-lg-0 {
flex: 0 0 calc(25% + 90px - 0.9722222222vw);
max-width: calc(25% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-3 {
margin-left: 25%; } }
@media (min-width: 960px) {
.hj-col-lg-4 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%; }
.hj-col-lg-4.m-l-lg-0 {
flex: 0 0 calc(33.33333% + 90px);
max-width: calc(33.33333% + 90px);
margin-left: -90px; }
.hj-col-lg-4.m-r-lg-0 {
flex: 0 0 calc(33.33333% + 90px - 0.9722222222vw);
max-width: calc(33.33333% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-4 {
margin-left: 33.33333%; } }
@media (min-width: 960px) {
.hj-col-lg-5 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%; }
.hj-col-lg-5.m-l-lg-0 {
flex: 0 0 calc(41.66667% + 90px);
max-width: calc(41.66667% + 90px);
margin-left: -90px; }
.hj-col-lg-5.m-r-lg-0 {
flex: 0 0 calc(41.66667% + 90px - 0.9722222222vw);
max-width: calc(41.66667% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-5 {
margin-left: 41.66667%; } }
@media (min-width: 960px) {
.hj-col-lg-6 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-6 {
flex: 0 0 50%;
max-width: 50%; }
.hj-col-lg-6.m-l-lg-0 {
flex: 0 0 calc(50% + 90px);
max-width: calc(50% + 90px);
margin-left: -90px; }
.hj-col-lg-6.m-r-lg-0 {
flex: 0 0 calc(50% + 90px - 0.9722222222vw);
max-width: calc(50% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-6 {
margin-left: 50%; } }
@media (min-width: 960px) {
.hj-col-lg-7 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%; }
.hj-col-lg-7.m-l-lg-0 {
flex: 0 0 calc(58.33333% + 90px);
max-width: calc(58.33333% + 90px);
margin-left: -90px; }
.hj-col-lg-7.m-r-lg-0 {
flex: 0 0 calc(58.33333% + 90px - 0.9722222222vw);
max-width: calc(58.33333% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-7 {
margin-left: 58.33333%; } }
@media (min-width: 960px) {
.hj-col-lg-8 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%; }
.hj-col-lg-8.m-l-lg-0 {
flex: 0 0 calc(66.66667% + 90px);
max-width: calc(66.66667% + 90px);
margin-left: -90px; }
.hj-col-lg-8.m-r-lg-0 {
flex: 0 0 calc(66.66667% + 90px - 0.9722222222vw);
max-width: calc(66.66667% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-8 {
margin-left: 66.66667%; } }
@media (min-width: 960px) {
.hj-col-lg-9 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-9 {
flex: 0 0 75%;
max-width: 75%; }
.hj-col-lg-9.m-l-lg-0 {
flex: 0 0 calc(75% + 90px);
max-width: calc(75% + 90px);
margin-left: -90px; }
.hj-col-lg-9.m-r-lg-0 {
flex: 0 0 calc(75% + 90px - 0.9722222222vw);
max-width: calc(75% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-9 {
margin-left: 75%; } }
@media (min-width: 960px) {
.hj-col-lg-10 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%; }
.hj-col-lg-10.m-l-lg-0 {
flex: 0 0 calc(83.33333% + 90px);
max-width: calc(83.33333% + 90px);
margin-left: -90px; }
.hj-col-lg-10.m-r-lg-0 {
flex: 0 0 calc(83.33333% + 90px - 0.9722222222vw);
max-width: calc(83.33333% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-10 {
margin-left: 83.33333%; } }
@media (min-width: 960px) {
.hj-col-lg-11 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%; }
.hj-col-lg-11.m-l-lg-0 {
flex: 0 0 calc(91.66667% + 90px);
max-width: calc(91.66667% + 90px);
margin-left: -90px; }
.hj-col-lg-11.m-r-lg-0 {
flex: 0 0 calc(91.66667% + 90px - 0.9722222222vw);
max-width: calc(91.66667% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-11 {
margin-left: 91.66667%; } }
@media (min-width: 960px) {
.hj-col-lg-12 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 0.9722222222vw;
padding-left: 0.9722222222vw; }
.hj-col-lg-12 {
flex: 0 0 100%;
max-width: 100%; }
.hj-col-lg-12.m-l-lg-0 {
flex: 0 0 calc(100% + 90px);
max-width: calc(100% + 90px);
margin-left: -90px; }
.hj-col-lg-12.m-r-lg-0 {
flex: 0 0 calc(100% + 90px - 0.9722222222vw);
max-width: calc(100% + 90px - 0.9722222222vw);
margin-left: 0;
margin-right: -90px;
padding-right: 0; }
.hj-offset-lg-12 {
margin-left: 100%; } }
.hj-scroll {
height: calc(100vh - 60px);
height: calc(var(--vh, 1vh) * 100 - 60px);
position: absolute;
width: 100%;
z-index: 5; }
@media (min-width: 960px) {
.hj-scroll {
min-height: 550px;
height: calc(100vh - 140px); } }
.hj-scroll-position {
position: absolute;
bottom: 18px;
left: 50%;
transform: translate(-50%);
opacity: 0;
height: 57px;
overflow: hidden; }
@media (min-width: 600px) {
.hj-scroll-position {
height: 69px;
bottom: 27px; } }
.hj-scroll-position.is-FadeOut {
opacity: 0;
transition: opacity 1s ease; }
.hj-scroll-explore {
display: block;
font-size: 9px;
font-size: 0.5625rem;
line-height: 0.75rem;
font-family: abchanel-corpo, sans-serif;
text-align: center;
color: #1d1d1d; }
html[lang*='ar-'] .hj-scroll-explore {
font-family: "abchanel-corpo", Cairo, sans-serif;
letter-spacing: -0.5px; }
.language-ja_JP .hj-scroll-explore {
font-family: abchanel-corpo, Hiragino Sans, Meiryo, sans-serif;
font-weight: 600; }
.language-ko_KR .hj-scroll-explore {
font-family: abchanel-corpo, Apple SD Gothic Neo, Malgun Gothic, sans-serif; }
.language-th_TH .hj-scroll-explore {
font-family: "abchanel-corpo", Prompt, Arial, Helvetica, sans-serif; }
.language-vi_VN .hj-scroll-explore {
font-family: "abchanel-corpo-vietnam", "PingFangHK-Semibold", "Microsoft YaHei", "sans-serif"; }
.language-zh_HK .hj-scroll-explore {
font-family: abchanel-corpo, PingFangHK-Semibold, "Microsoft YaHei", sans-serif; }
.language-zh_TW .hj-scroll-explore {
font-family: abchanel-corpo, PingFangTC-Semibold, "Microsoft YaHei", sans-serif; }
.language-zh_CN .hj-scroll-explore {
font-family: abchanel-corpo, PingFangSC-Semibold, "Microsoft YaHei", sans-serif; }
@media (min-width: 600px) {
.hj-scroll-explore {
font-size: 11px;
font-size: 0.6875rem;
line-height: 0.9375rem; } }
.hj-scroll-explore::after {
content: "";
position: absolute;
top: 21px;
left: 50%;
width: 1px;
background-color: #1d1d1d;
animation: scrollExplorer 2s ease-in-out infinite; }
@media (min-width: 600px) {
.hj-scroll-explore::after {
top: 24px; } }
@keyframes scrollExplorer {
0% {
height: 1px; }
50% {
height: 36px;
@media (min-width: 600px) {
height: 45px; } }
50% {
height: 36px;
@media (min-width: 600px) {
height: 45px; } }
75% {
height: 36px;
@media (min-width: 600px) {
height: 45px; } }
100% {
margin-top: 36px;
@media (min-width: 600px) {
margin-top: 45px; } } }
.order--first {
order: -1; }
@media (min-width: 600px) {
.order-md--first {
order: -1; } }
@media (min-width: 960px) {
.order-lg--first {
order: -1; } }
.m--auto {
margin: 0 auto; }
@media (min-width: 600px) {
.align-items-end {
align-items: flex-end; }
.align-items-center {
align-items: center; } }
.is-relative {
position: relative; }
.section .description {
margin-top: 0.625rem;
margin-bottom: 1.125rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.125rem; }
html[lang*='ar-'] .section .description {
font-family: Helvetica, Tajawal, Arial, sans-serif; }
.language-ja_JP .section .description {
font-family: Helvetica, Hiragino Sans, Arial, Meiryo, sans-serif;
font-weight: 300; }
.language-ko_KR .section .description {
font-family: Helvetica, Apple SD Gothic Neo, Arial, Malgun Gothic, sans-serif; }
.language-th_TH .section .description {
font-family: Helvetica, Prompt, "Helvetica Neue", Arial, sans-serif; }
.language-vi_VN .section .description {
font-family: "Arial", "sans-serif"; }
.language-zh_HK .section .description {
font-family: Helvetica, PingFangHK-Regular, Arial, "Microsoft YaHei", sans-serif; }
.language-zh_TW .section .description {
font-family: Helvetica, PingFangTC-Regular, Arial, "Microsoft YaHei", sans-serif; }
.language-zh_CN .section .description {
font-family: Helvetica, PingFangSC-Regular, Arial, "Microsoft YaHei", sans-serif; }
/***
* PAGE PROCESS
*
***/
.process-video {
position: relative; }
.process-video.noMargin {
margin-top: 0;
margin-bottom: 0; }
.process-video-caption {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.75rem;
font-weight: 300;
font-family: abchanel-corpo, sans-serif;
margin-top: 21px;
text-align: center; }
html[lang*='ar-'] .process-video-caption {
font-family: "abchanel-corpo", Cairo, sans-serif;
letter-spacing: -0.5px; }
.language-ja_JP .process-video-caption {
font-family: abchanel-corpo, Hiragino Sans, Meiryo, sans-serif;
font-weight: 600; }
.language-ko_KR .process-video-caption {
font-family: abchanel-corpo, Apple SD Gothic Neo, Malgun Gothic, sans-serif; }
.language-th_TH .process-video-caption {
font-family: "abchanel-corpo", Prompt, Arial, Helvetica, sans-serif; }
.language-vi_VN .process-video-caption {
font-family: "abchanel-corpo-vietnam", "PingFangHK-Semibold", "Microsoft YaHei", "sans-serif"; }
.language-zh_HK .process-video-caption {
font-family: abchanel-corpo, PingFangHK-Semibold, "Microsoft YaHei", sans-serif; }
.language-zh_TW .process-video-caption {
font-family: abchanel-corpo, PingFangTC-Semibold, "Microsoft YaHei", sans-serif; }
.language-zh_CN .process-video-caption {
font-family: abchanel-corpo, PingFangSC-Semibold, "Microsoft YaHei", sans-serif; }
@media (min-width: 600px) {
.process-video-caption {
font-size: 31px;
font-size: 1.9375rem;
line-height: 2.5rem;
margin-top: 5px; } }
@media (min-width: 960px) {
.process-video-caption {
font-size: 45px;
font-size: 2.8125rem;
line-height: 3.6875rem; } }
.process-video .blockMedia {
width: 100%;
overflow: hidden; }
.process-video .blockMedia-content {
position: relative; }
.process-video .blockMedia-video {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden; }
.process-video .blockMedia-video [id^="playerFullCollection"] {
pointer-events: none; }
.process-video .blockMedia-video::before {
content: "";
display: block; }
@media (max-width: 600px) {
.process-video .blockMedia-video::before {
padding-top: 177.77%; } }
@media (min-width: 600px) {
.process-video .blockMedia-video::before {
padding-top: 56.5%; } }
.process-video .blockMedia-video-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 0; }
.process-video .blockMedia-video.is-mask {
clip-path: circle(30%);
-webkit-clip-path: circle(30%); }
.process-video .blockMedia-video.is-mask.is-play {
transition: all 1s ease;
clip-path: circle(80%);
-webkit-clip-path: circle(80%);
height: 100%; }
@media (max-width: 600px) {
.process-video.mask .blockMedia-video {
margin: -40% 0; }
.process-video.mask .blockMedia-video.is-play {
transition: margin 1s ease, clip-path 1.5s ease;
transition: margin 1s ease, -webkit-clip-path 1.5s ease;
margin: 0; } }
.process-video .akamai-player {
background: none; }
.process-video .akamai-player .akamai-play.akamai-overlay:focus {
outline: 0.0625rem solid #767676; }
.process-video .akamai-player#playerFullCollection2 .akamai-play {
background-position: 0 -434px; }
.process-video .akamai-player .akamai-play.akamai-overlay {
width: 60px !important;
transform: translate(-50%, -50%) scale(1) !important; }
.process-video .akamai-player .akamai-play.akamai-overlay::before {
content: "";
display: block;
width: 210px;
height: 210px;
background: red;
position: absolute;
opacity: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%; }
.process-intro {
height: 100vh;
/* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100 - 60px);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
position: relative;
padding: 0; }
@media (min-width: 600px) {
.process-intro {
height: calc(var(--vh, 1vh) * 100 - 70px); } }
@media (min-width: 960px) {
.process-intro {
height: calc(var(--vh, 1vh) * 100 - 140px);
min-height: 550px; } }
.process-intro .hj-row {
justify-content: center;
text-align: center; }
.process-intro .heading {
font-size: 25px;
font-size: 1.5625rem;
line-height: 1.9375rem;
font-weight: 600;
margin-bottom: 18px; }
@media (min-width: 600px) {
.process-intro .heading {
font-size: 45px;
line-height: 57px;
margin-bottom: 27px; } }
@media (min-width: 960px) {
.process-intro .heading {
font-size: 45px;
line-height: 57px; } }
.process-intro-text {
position: relative;
z-index: 10;
padding: 0; }
.process-intro .description {
margin: 0;
line-height: 1.4375rem; }
.enable-high-contrast-mode .process-intro .description {
color: white; }
@media (min-width: 600px) {
.process-intro .description {
font-size: 16px;
font-size: 1rem;
line-height: 1.5625rem; } }
@media (min-width: 960px) {
.process-intro .description {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.875rem; } }
html[lang*='ar-'] .process-intro .description {
font-family: Helvetica, Tajawal, Arial, sans-serif; }
.language-ja_JP .process-intro .description {
font-family: Helvetica, Hiragino Sans, Arial, Meiryo, sans-serif;
font-weight: 300; }
.language-ko_KR .process-intro .description {
font-family: Helvetica, Apple SD Gothic Neo, Arial, Malgun Gothic, sans-serif; }
.language-th_TH .process-intro .description {
font-family: Helvetica, Prompt, "Helvetica Neue", Arial, sans-serif; }
.language-vi_VN .process-intro .description {
font-family: "Arial", "sans-serif"; }
.language-zh_HK .process-intro .description {
font-family: Helvetica, PingFangHK-Regular, Arial, "Microsoft YaHei", sans-serif; }
.language-zh_TW .process-intro .description {
font-family: Helvetica, PingFangTC-Regular, Arial, "Microsoft YaHei", sans-serif; }
.language-zh_CN .process-intro .description {
font-family: Helvetica, PingFangSC-Regular, Arial, "Microsoft YaHei", sans-serif; }
.process-article {
margin-top: 110px;
margin-bottom: 110px; }
.process-article.noMargin {
margin-top: 0;
margin-bottom: 0; }
@media (max-width: 599px) {
.process-article .sticky {
position: sticky;
position: -webkit-sticky;
top: 150px;
display: flex;
flex-direction: column;
justify-content: center; } }
@media (min-width: 600px) {
.process-article .article {
display: flex;
width: 100%;
padding: 0; } }
.process-article-attach {
overflow-scrolling: touch; }
.process-article-text {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.125rem;
margin: 20px;
padding: 45px 30px;
background: #fff;
color: #1d1d1d;
position: relative;
transform: translate3d(0, 0, 0); }
@media (max-width: 600px) {
.process-article-text {
z-index: 10; } }
.process-article-text .heading {
font-family: abchanel-corpo, sans-serif;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.125rem;
font-weight: 600;
letter-spacing: 1px;
display: block;
margin-bottom: 9px; }
html[lang*='ar-'] .process-article-text .heading {
font-family: "abchanel-corpo", Cairo, sans-serif;
letter-spacing: -0.5px; }
.language-ja_JP .process-article-text .heading {
font-family: abchanel-corpo, Hiragino Sans, Meiryo, sans-serif;
font-weight: 600; }
.language-ko_KR .process-article-text .heading {
font-family: abchanel-corpo, Apple SD Gothic Neo, Malgun Gothic, sans-serif; }
.language-th_TH .process-article-text .heading {
font-family: "abchanel-corpo", Prompt, Arial, Helvetica, sans-serif; }
.language-vi_VN .process-article-text .heading {
font-family: "abchanel-corpo-vietnam", "PingFangHK-Semibold", "Microsoft YaHei", "sans-serif"; }
.language-zh_HK .process-article-text .heading {
font-family: abchanel-corpo, PingFangHK-Semibold, "Microsoft YaHei", sans-serif; }
.language-zh_TW .process-article-text .heading {
font-family: abchanel-corpo, PingFangTC-Semibold, "Microsoft YaHei", sans-serif; }
.language-zh_CN .process-article-text .heading {
font-family: abchanel-corpo, PingFangSC-Semibold, "Microsoft YaHei", sans-serif; }
@media (min-width: 960px) {
.process-article-text p {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4375rem; } }
@media (min-width: 600px) {
.process-article--1 .process-article-attach {
margin-left: -12%;
z-index: 0; }
.process-article--1 .process-article-block:first-child {
margin-top: 54px;
z-index: 1; }
.process-article--1 .process-article-block:last-child {
width: 66%;
margin-left: auto;
margin-right: -30px;
margin-top: -100px;
position: relative; }
.process-article--1 .process-article-text {
padding: 54px 30px 132px 84px;
margin: 0; } }
@media (min-width: 768px) {
.process-article--1 .process-article-text {
padding: 54px 50px 132px 124px; } }
@media (min-width: 960px) {
.process-article--1 .process-article-text {
padding: 54px 50px 132px 164px; }
.process-article--1 .process-article-block:last-child {
margin-right: -50px; } }
@media (min-width: 1440px) {
.process-article--1 .process-article-text {
padding: 81px 75px 192px 194px; }
.process-article--1 .process-article-block:first-child {
margin-top: 81px; } }
@media (min-width: 600px) {
.process-article--2 .process-article-attach {
display: flex;
flex-direction: column;
margin-left: 14%; }
.process-article--2 .process-article-text {
order: -1;
z-index: 0;
margin: 0;
padding: 63px 79px 107px 40px; }
.process-article--2 .process-article-block:first-child {
margin-top: -53px;
margin-left: -10%;
width: 75%;
z-index: 1; }
.process-article--2 .process-article-block:last-child {
width: 28%;
margin-left: -9%;
margin-top: 69px;
z-index: 1; } }
@media (min-width: 768px) {
.process-article--2 .process-article-text {
padding: 63px 119px 107px 50px; } }
@media (min-width: 960px) {
.process-article--2 .process-article-text {
padding: 81px 161px 190px 75px; }
.process-article--2 .process-article-block:first-child {
margin-top: -93px; } }
@media (min-width: 600px) {
.process-article--3 .process-article-attach {
display: flex;
flex-direction: column; }
.process-article--3 .process-article-text {
order: -1;
z-index: 0;
margin: 0;
padding: 63px 79px 107px 40px;
margin-top: 140px; }
.process-article--3 .process-article-block:first-child {
margin-top: -53px;
margin-left: 21%;
width: 95%;
z-index: 1; }
.process-article--3 .process-article-block:last-child {
margin-left: -8%;
z-index: 1; } }
@media (min-width: 768px) {
.process-article--3 .process-article-text {
padding: 63px 119px 107px 50px;
margin-top: 140px; } }
@media (min-width: 960px) {
.process-article--3 .process-article-text {
padding: 81px 150px 160px 75px;
margin-top: 220px; }
.process-article--3 .process-article-block:first-child {
margin-top: -80px;
width: 85%; } }
@media (min-width: 1440px) {
.process-article--3 .process-article-text {
margin-top: 290px; } }
@media (max-width: 599px) {
.process-article .isFlex {
display: flex;
flex-direction: column; }
.process-article .isFlex .isOrderFlex {
order: 2;
display: flex;
flex-direction: column; }
.process-article .isFlex .process-article-text {
order: -3;
z-index: 2; }
.process-article .isFlex .process-article-block {
order: -2; } }
.process-article--solo {
text-align: center; }
.process-article--solo .hj-row {
justify-content: center; }
.process-article--solo .process-article-text {
margin: 0; }
@media (min-width: 600px) {
.process-article--solo .process-article-text {
padding: 63px 8.33333%; } }
@media (min-width: 960px) {
.process-article--solo .process-article-text {
padding: 81px 8.33333%; } }
.process-article--solo .heading {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.75rem;
font-weight: 300;
letter-spacing: inherit; }
@media (min-width: 600px) {
.process-article--solo .heading {
font-size: 31px;
font-size: 1.9375rem;
line-height: 2.5625rem;
margin-bottom: 16px; } }
@media (min-width: 960px) {
.process-article--solo .heading {
font-size: 45px;
font-size: 2.8125rem;
line-height: 3.6875rem;
margin-bottom: 18px; } }
.js-process-article {
opacity: 0; }
.js-process-article.is-opacity--1 {
opacity: 1;
transition: opacity 2s ease-in; }
.js-process-caption {
opacity: 0; }
.js-process-caption.is-opacity--1 {
opacity: 1;
transition: opacity 800ms ease-in; }