{"version":3,"sources":["components/footer/Banner.js","assets/GSK_Signal_Full_Colour_RGB.png","components/footer/Copyright.js","components/footer/References.js","components/footer/index.js","components/sections/content.js","components/sections/homepage/contentEN.js","components/sections/homepage/contentZH.js","components/sections/homepage/index.js","components/sections/arrow.js","assets/video_placeholder.png","assets/video_placeholder_mobile.png","components/sections/intro/contentEN.js","components/sections/intro/contentZH.js","components/sections/intro/index.js","components/sections/section1/contentEN.js","components/sections/section1/contentZH.js","components/sections/section1/painState.js","components/sections/section1/painSymptons.js","components/sections/video.js","components/sections/section1/index.js","components/sections/section2/contentEN.js","components/sections/section2/contentZH.js","components/sections/section2/painState.js","components/sections/section2/impact.js","components/sections/section2/index.js","components/sections/section3/contentEN.js","components/sections/section3/contentZH.js","components/sections/section3/painState.js","components/sections/section3/complications.js","components/sections/section3/index.js","components/sections/section4/contentEN.js","components/sections/section4/contentZH.js","components/sections/section4/risk.js","components/sections/section4/index.js","components/sections/section5/contentEN.js","components/sections/section5/contentZH.js","components/sections/section5/painState.js","components/sections/section5/takeAction.js","components/sections/section5/index.js","components/sections/index.js","components/menu/content.js","assets/close.png","components/menu/index.js","styles/global.js","App.js","index.js"],"names":["Banner","styled","section","_templateObject","_taggedTemplateLiteral","FooterBanner","t","useTranslation","_jsx","id","children","dangerouslySetInnerHTML","__html","Copyright","CopyrightLogo","img","_templateObject2","CopyrightCopy","div","_templateObject3","FooterCopyright","i18n","rows","i","concat","_jsxs","srcSet","gskLogo","type","src","alt","_Fragment","References","ReferencesTitle","strong","ReferencesItem","b","FooterReferences","target","className","href","FooterElem","footer","Footer","FixedPanel","Section","Background","VideoHolder","_templateObject4","Wrapper","_templateObject5","_templateObject6","Arrow","span","_templateObject7","MainElem","main","_templateObject8","Button","button","_templateObject9","_templateObject10","props","left","HomeElemEN","HomeElemZH","Homepage","_document$querySelect","HomeElem","language","secPos","document","querySelector","getBoundingClientRect","posY","y","posH","height","isVisible","window","innerHeight","scrollY","isFixed","join","ReactPlayer","url","controls","width","playing","muted","loop","ArrowElement","_ref","onClick","scrollTo","_document$getElementB","getElementById","scrollIntoView","behavior","IntroElemEN","IntroElemZH","Intro","_document$querySelect2","IntroElem","secHomePos","HomeposY","HomeposH","isVisibleHome","bgImg","bgImgMobile","dtlinktype","dtlinkname","event","preventDefault","preventLink","PainStateElemEN","PainSymptonsElemEN","PainStateElemZH","PainSymptonsElemZH","PainState","PainStateElem","PainSymptons","PainSymptonsElem","VideoElement","_document$querySelect3","_document$querySelect4","_document$querySelect5","source","sourceMobile","sec1Pos","sec2Pos","posSec1Y","footerPos","posFooterY","active","localStorage","getItem","setItem","desktopVideo","mobileVideo","play","bannerHeight","clientHeight","preload","playsInline","Section1","playedVideos","sectionActive","status","ImpactElemEN","ImpactElemZH","Impact","ImpactElem","Section2","ComplicationElemEN","ComplicationElemZH","Complications","ComplicationElem","Section3","RiskElemEN","RiskElemZH","Risk","RiskElem","Section4","TakeActionElemEN","TakeActionElemZH","TakeAction","TakeActionElem","Section5","Sections","togglePlayedVideo","useState","scrollPosition","setScrollPosition","handleScroll","position","pageYOffset","useEffect","addEventListener","passive","removeEventListener","MenuContainer","LangIcon","MenuToggle","MenuBar","MobileMenuToggle","MobileMenuBar","MobileMenu","CloseIcon","MobileMenuItem","Menu","isOpened","setOpened","visibleSection","setVisibleSection","menu","setMenu","lang","setLang","sections","renderMenu","forEach","idx","onscroll","ChangeLang","langCode","changeLanguage","title","closeIcon","createGlobalStyle","App","GlobalStyle","i18next","init","interpolation","escapeValue","lng","resources","en","common","commonEn","zh","commonZh","ReactDOM","render","React","StrictMode","I18nextProvider"],"mappings":"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","file":"static/js/main.abca749e.chunk.js","sourcesContent":["import { useTranslation } from 'react-i18next';\r\nimport styled from 'styled-components';\r\n\r\nconst Banner = styled.section`\r\n  display: flex;\r\n  position: fixed;\r\n  z-index: 100;\r\n  bottom: 0;\r\n  right: 0;\r\n  left: 0;\r\n  flex-direction: column;\r\n  background-color: #172f3c;\r\n  font-family: 'Barlow Semi Condensed', sans-serif;\r\n  font-size: 17.5px;\r\n  font-style: normal;\r\n  line-height: 1.2;\r\n  letter-spacing: 1.75px;\r\n  text-align: center;\r\n  color: #f1f2f3;\r\n  height: 59px;\r\n  justify-content: center;\r\n  text-transform: uppercase;\r\n\r\n  @media only screen and (min-width: 600px) {\r\n    height: 80px;\r\n    font-size: 30px;\r\n    line-height: 30px;\r\n    letter-spacing: 3px;\r\n    br {\r\n      display: none;\r\n    }    \r\n  }\r\n`;\r\n\r\nexport const FooterBanner = () => {\r\n  const { t } = useTranslation('common');\r\n\r\n  return (\r\n    <Banner id=\"banner-footer\">\r\n      <span\r\n        dangerouslySetInnerHTML={{\r\n          __html: t('footer.banner.copy'),\r\n        }}>\r\n      </span>\r\n    </Banner>\r\n  );\r\n};\r\n","export default __webpack_public_path__ + \"static/media/GSK_Signal_Full_Colour_RGB.d65d65f7.png\";","import { useTranslation } from 'react-i18next';\r\nimport styled from 'styled-components';\r\nimport gskLogo from '../../assets/GSK_Signal_Full_Colour_RGB.png';\r\n\r\nconst Copyright = styled.section`\r\n  background-color: #f8f8f8;\r\n  padding:4vh 4vw;\r\n  @media only screen and (min-width: 600px) {\r\n    display:flex;\r\n    justify-content:space-between;\r\n  }\r\n`;\r\n\r\nconst CopyrightLogo = styled.img`\r\n  width: 70px;\r\n \r\n  margin: auto;\r\n  display: block;\r\n`;\r\n\r\nconst CopyrightCopy = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding-top:20px;\r\n  font-family: 'Barlow Semi Condensed', sans-serif;\r\n  font-size: 13.5px;\r\n  text-align: center;\r\n  line-height:1.5em;\r\n  @media only screen and (min-width: 600px) {\r\n    font-size: 15px;\r\n    padding-top:0;\r\n    text-align: right;\r\n  }\r\n`;\r\n\r\nexport const FooterCopyright = () => {\r\n  const { t , i18n } = useTranslation('common');\r\n\r\n  let rows = [];\r\n  for (let i = 1; i < 4; i += 1) {\r\n    rows = [...rows, <span key={i}>{t(`footer.copyright.copy${i}`)}</span>];\r\n  }\r\n\r\n  return (\r\n    <Copyright>\r\n      <picture>\r\n        <source srcSet={gskLogo} type=\"image/png\" />\r\n        <CopyrightLogo src={gskLogo} alt=\"GSK Logo\" />\r\n      </picture>\r\n\r\n      <CopyrightCopy>\r\n         <>\r\n          <span\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('footer.copyright.copy1'),\r\n              }}\r\n            />\r\n            <span\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('footer.copyright.copy2'),\r\n              }}\r\n            />\r\n            <span\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('footer.copyright.copy3'),\r\n              }}\r\n            />\r\n         </>\r\n      </CopyrightCopy>\r\n    </Copyright>\r\n  );\r\n};\r\n","import { useTranslation } from 'react-i18next';\r\nimport styled from 'styled-components';\r\n\r\nconst References = styled.section`\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: unset;\r\n  background-color: unset;\r\n  border: none;\r\n  font-family: 'Barlow Semi Condensed', sans-serif;\r\n  font-size: 14px;\r\n  line-height: 19px;\r\n  word-break: break-word;\r\n  padding:5vh 5vw;\r\n\r\n  @media only screen and (min-width: 600px) {\r\n    font-size: 15px;\r\n    line-height: 26px;\r\n  }\r\n\r\n  .referenceAnchor {\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n    font-size: 14px;\r\n    line-height: 19px;\r\n    word-break: break-word;\r\n    color: black;\r\n    text-decoration: none;\r\n\r\n    @media only screen and (min-width: 600px) {\r\n      font-size: 15px;\r\n      line-height: 26px;\r\n    }\r\n  }\r\n  .referenceAnchor:hover {\r\n    text-decoration: underline;\r\n  }\r\n  .referenceAnchor:visited {\r\n    color: gray;\r\n  }\r\n\r\n  @media only screen and (min-width: 600px) {\r\n   /*  padding: 70px 10vw; */\r\n  }\r\n`;\r\n\r\nconst ReferencesTitle = styled.strong`\r\n`;\r\n\r\nconst ReferencesItem = styled.b`\r\n  @media only screen and (min-width: 600px) {\r\n    font-weight: normal;\r\n  }\r\n`;\r\n\r\nexport const FooterReferences = () => {\r\n  const { t } = useTranslation('common');\r\n\r\n  let rows = [];\r\n  for (let i = 1; i < 10; i += 1) {\r\n    rows = [\r\n      ...rows,\r\n      <span key={i}>\r\n        <ReferencesItem>{i}.&nbsp;</ReferencesItem>\r\n        {t(`footer.references.copy${i}.copy`)}\r\n        &nbsp;\r\n        <a target=\"_blank\" className=\"referenceAnchor\" href={t(`footer.references.copy${i}.link`)}>\r\n          {t(`footer.references.copy${i}.link`)}\r\n        </a>\r\n      </span>\r\n    ];\r\n  }\r\n\r\n  return (\r\n    <References>\r\n      <ReferencesTitle>{t('footer.references.title')}</ReferencesTitle>\r\n      {rows}\r\n    </References>\r\n  );\r\n};\r\n","import styled from 'styled-components';\r\nimport { FooterBanner } from './Banner';\r\nimport { FooterCopyright } from './Copyright';\r\nimport { FooterReferences } from './References';\r\n\r\nconst FooterElem = styled.footer`\r\n  position: relative;\r\n  z-index: 20;\r\n  background: #fff;\r\n`;\r\n\r\nexport const Footer = () => {\r\n  return (\r\n    <FooterElem>\r\n      <FooterReferences />\r\n      <FooterCopyright />\r\n      <FooterBanner />\r\n    </FooterElem>\r\n  );\r\n};\r\n","import styled from 'styled-components';\r\n\r\nexport const FixedPanel = styled.div`\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  opacity: 0;\r\n  transition: opacity 1s;\r\n  \r\n  &.intro {\r\n    display: block;\r\n    height: calc(100vh - 59px);\r\n    @media (min-width: 600px) {\r\n      height: calc(100vh - 80px);\r\n      display: flex;\r\n      justify-content: center;\r\n      flex-direction: column;\r\n      align-items: flex-end;\r\n    }\r\n  }\r\n   \r\n  &.home {\r\n    display: block;\r\n  }\r\n  &.event {\r\n    display: block;\r\n    height: calc(100vh - 67vh);\r\n    justify-content: left;\r\n    margin-top: calc(100vh - 80vh);\r\n    margin-left: 13vh;\r\n    @media (min-width: 600px) {\r\n      height: calc(100vh - 80px);\r\n      display: flex;\r\n      justify-content: center;\r\n      flex-direction: row;\r\n      align-items: start;\r\n      margin-top: calc(100vh - 52vh);\r\n      margin-left:  calc(100vh - 85vh);\r\n    }\r\n  }\r\n  &.sec6 {\r\n    display: block;\r\n    justify-content: left;\r\n    margin-top: calc(100vh - 95vh);\r\n    @media (max-width: 600px) {\r\n      height: calc(100vh - 65vh);\r\n    }\r\n    @media (min-width: 600px) {\r\n      display: flex;\r\n      justify-content: center;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      margin-top: 43vh;\r\n      margin-left: 0vh;\r\n    }\r\n  }\r\n\r\n  &.active {\r\n    opacity: 1;\r\n    z-index: 4; \r\n  }\r\n`\r\n\r\nexport const Section = styled.section`\r\n  position: relative;\r\n  width: 100%;\r\n\r\n  &.section-home {\r\n   \r\n    height: calc(100vh - 59px);\r\n    \r\n    @media (min-width: 600px) {\r\n      height: calc(100vh - 80px);\r\n    }\r\n  }\r\n\r\n  &.section-intro {\r\n    height: calc(100vh - 59px);\r\n    @media (min-width: 600px) {\r\n      height: calc(100vh - 80px);\r\n    }\r\n  }\r\n\r\n  &.section-event{\r\n    height: calc(100vh - 59px);\r\n    @media (min-width: 600px) {\r\n      height: calc(100vh - 80px);\r\n    }\r\n  }\r\n  &.section-six{\r\n    height: calc(100vh - 59px);\r\n    @media (min-width: 600px) {\r\n      height: calc(100vh - 80px);\r\n    }\r\n  }\r\n\r\n  &.active {\r\n    z-index: 2;\r\n  }\r\n\r\n  &#section-one {\r\n    video:not(.fixed) {\r\n      top: 0;\r\n      opacity: 1;\r\n      z-index: 2;\r\n    }\r\n  }\r\n  &#section-five.active {\r\n    video {\r\n      opacity: 1;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const Background = styled.img`\r\n  position: fixed;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  top: 0;\r\n  opacity: 0;\r\n  height: calc(100vh - 59px);\r\n  width: 100vw;\r\n  object-fit: cover;\r\n  object-position: center;\r\n  overflow:hidden;\r\n  \r\n  &.active {\r\n    opacity: 1;\r\n  }\r\n\r\n  &.fixed {\r\n    position: fixed;\r\n    height: calc(100vh - 59px);\r\n  }\r\n  &.event{\r\n    object-position: center;\r\n   }\r\n  &.home{\r\n    object-position: top;\r\n    object-fit: cover;\r\n  }\r\n  &.sec6{\r\n    object-position: top;\r\n    object-fit: cover;\r\n  }\r\n  @media (min-width: 600px) {\r\n    height: calc(100vh - 80px);\r\n  }\r\n\r\n  &.desktop-img {\r\n    display: none;\r\n\r\n    @media (min-width: 600px) {\r\n        display: block;\r\n        \r\n    }\r\n  }\r\n\r\n  &.mobile-img {\r\n    display: block;\r\n    @media (min-width: 600px) {\r\n      display: none;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const VideoHolder = styled.div`\r\n  position: absolute;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  display: none;\r\n  z-index: 1;\r\n  transform: translateZ(0);\r\n\r\n  &.active {\r\n    z-index: 2;\r\n    display: block;\r\n    animation: opacity 1s;\r\n  }\r\n\r\n  &.fixed {\r\n    position: fixed;\r\n    top: 0;\r\n  }\r\n\r\n  video {\r\n    height: calc(100vh - 59px);\r\n    width: 100vw;\r\n    object-fit: cover;\r\n    object-position: center;\r\n\r\n    @media (min-width: 600px) {\r\n      height: calc(100vh - 80px);\r\n    }\r\n\r\n    &.desktop-video {\r\n      display: none;\r\n\r\n      @media (min-width: 600px) {\r\n          display: block;\r\n      }\r\n    }\r\n\r\n    &.mobile-video {\r\n      display: block;\r\n\r\n      @media (min-width: 600px) {\r\n        display: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  @keyframes opacity {\r\n    from { opacity: 0.5; }\r\n    to   { opacity: 1; }\r\n  }\r\n`;\r\n\r\nexport const Item = styled.div`\r\n  height: 100vh;\r\n  width: 100vw;\r\n  display: flex;\r\n  position: relative;\r\n  z-index: 2;\r\n  align-items: center;\r\n`;\r\n\r\nexport const Wrapper = styled.div`\r\n  max-width: 100vw;\r\n  \r\n  &.intro {\r\n    \r\n  }\r\n`;\r\n\r\nexport const Arrow = styled.span`\r\n  background: url(/arrow.png);\r\n  width: 56px;\r\n  height: 31px;\r\n  display: block;\r\n  margin: 0 auto;\r\n  cursor: pointer;\r\n  -moz-animation: bounce 2s infinite;\r\n  -webkit-animation: bounce 2s infinite;\r\n  animation: bounce 2s infinite;\r\n\r\n  @keyframes bounce {\r\n    0%, 20%, 50%, 80%, 100% {\r\n      transform: translateY(0);\r\n    }\r\n    40% {\r\n      transform: translateY(-30px);\r\n    }\r\n    60% {\r\n      transform: translateY(-15px);\r\n    }\r\n  }\r\n`\r\n\r\nexport const MainElem = styled.main`\r\n  \r\n`\r\nexport const Button = styled.button`\r\ndisplay: block;\r\n\r\nborder-radius: 50px;\r\ncolor: #fff;\r\nbackground-color: #505c6a;\r\nborder-color: #fff;\r\nborder-style: solid;\r\nfont-size: 18px;\r\ntext-transform: uppercase;\r\nbackground-size: 40px;\r\nmax-width: 294px;\r\nopacity: 0.7;\r\nfont-weight:bold;\r\n\r\n@media (max-width: 600px) {\r\n  font-size: 12px;\r\n  width: 100%;\r\n}\r\nspan img{\r\n  width:30px;\r\n}\r\n\r\n`\r\nexport const ArrowButton = styled(Button)`\r\nbackground-image: ${props => props.left ? 'url(\"../../assets/leftarrowIcon.PNG\")':'url(\"../../assets/arrowIcon.PNG\")'};\r\nbackground-position: ${props => props.left ? 'left 25px center' :'right 25px center'};\r\nbackground-repeat: no-repeat; \r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const HomeElemEN = styled.div`\r\nmargin: 0 auto;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  opacity: 0;\r\n  transition: opacity 1s;\r\n&.active {\r\n  opacity: 1;\r\n  z-index: 4;\r\n  \r\n}\r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n  }\r\n  .display-block{display:block}\r\n  .display-none{display:none}\r\n  .column1 {\r\n    top: calc(100vh - 250px);\r\n    left: 77px;\r\n    @media (max-width: 600px) {\r\n      top: calc(100vh - 165px);\r\n      left: 8px;\r\n      width:51%;\r\n    }\r\n    button{\r\n      padding: 10px 5px 10px 0px;\r\n      @media (min-width: 600px) {\r\n        padding: 10px 10px 10px 10px;\r\n      }\r\n      .btnText{\r\n        width:72%;\r\n        @media (min-width: 600px) {\r\n          margin-right:3px;\r\n        }\r\n      }\r\n      span{\r\n        display:inline-block;\r\n        vertical-align:middle;\r\n      }\r\n      .arrowImg{\r\n        margin-right:0px;\r\n        \r\n        img{\r\n          width:100%;\r\n          height:100%;\r\n          @media (max-width: 600px) {\r\n            width:45%;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  .column2 {\r\n    top: calc(100vh - 60vh);\r\n  right: 0;\r\n  left: 47vw;\r\n  width: 40vw;\r\n    @media (max-width: 600px) {\r\n      top: 22vh;\r\n      right: 0px;\r\n      width:79%;\r\n      margin: 0 auto;\r\n      left:0;\r\n    }\r\n  }\r\n  .column2 button{\r\n    padding: 10px 0px 10px 15px;\r\n    @media (min-width: 600px) {\r\n      padding: 10px 5px 10px 50px;\r\n    }\r\n    .btnText{\r\n      width:50%;\r\n      @media (min-width: 600px) {\r\n        margin-left:10px;\r\n      }\r\n    }\r\n    span{\r\n      display:inline-block;\r\n      vertical-align:middle;\r\n    }\r\n    .arrowImg{\r\n      margin-left:20px;\r\n      @media (max-width: 600px) {\r\n        margin-left: 0px;\r\n      }\r\n      img{\r\n        width: 100%;\r\n         height:100%;\r\n         @media (max-width: 600px) {\r\n          width:45%;\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const HomeElemZH = styled.div`\r\nmargin: 0 auto;\r\nposition: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  opacity: 0;\r\n  transition: opacity 1s;\r\n&.active {\r\n  opacity: 1;\r\n  z-index: 4; \r\n}\r\n\r\n@media (min-width: 600px) {\r\n  margin: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: space-between;\r\n}\r\n.display-block{display:block}\r\n.display-none{display:none}\r\n.column1 {\r\n  top: calc(100vh - 250px);\r\n  left: 77px;\r\n  @media (max-width: 600px) {\r\n    top: calc(100vh - 165px);\r\n    left: 8px;\r\n    width:46%;\r\n  }\r\n  button{\r\n    padding: 10px 20px 10px 20px;\r\n    \r\n    @media (max-width: 600px) {\r\n      padding: 10px 5px 10px 0px;\r\n    }\r\n    .btnText{\r\n      letter-spacing: 2px;\r\n      @media (max-width: 600px) {\r\n        margin-right:5px;\r\n        letter-spacing: 1px;\r\n        margin-left: -3px;\r\n      }\r\n    }\r\n    span{\r\n      display:inline-block;\r\n    }\r\n    .arrowImg{\r\n      margin-right: 20px;\r\n      vertical-align:middle;\r\n      @media (max-width: 600px) {\r\n        margin-right: 0px;\r\n      }\r\n      img{\r\n        width:100%;\r\n        height:100%;\r\n        @media (max-width: 600px) {\r\n          width:45%;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n.awareness-video {\r\n  margin: 0 auto;\r\n  cursor: pointer;\r\n  padding-top: 5vh;\r\n  @media (max-width: 599px) {\r\n    padding-bottom: 3vh;\r\n  }\r\n  padding-bottom: 5vh;\r\n  // @media (min-width: 800px) {\r\n  //   width: 640px;\r\n  //   height: 360px;\r\n  // }\r\n}\r\n.column2 {\r\n  top: calc(100vh - 65vh);\r\n  right: 0;\r\n  left: 47vw;\r\n  width: 40vw;\r\n  @media (max-width: 600px) {\r\n    top: 20vh;\r\n      right: 0px;\r\n      width:79%;\r\n      margin: 0 auto;\r\n      left:0;\r\n  }\r\n  button{\r\n    padding: 10px 22px 10px 60px;\r\n    \r\n    @media (max-width: 600px) {\r\n      padding: 10px 0px 10px 8px;\r\n    }\r\n    .btnText{\r\n      letter-spacing: 2px;\r\n      @media (max-width: 600px) {\r\n        margin-left:5px;\r\n        letter-spacing: 1px;\r\n      }\r\n    }\r\n    span{\r\n      display:inline-block;\r\n    }\r\n    .arrowImg{\r\n      margin-left: 20px;\r\n      vertical-align:middle;\r\n      @media (max-width: 600px) {\r\n        margin-left: 0px;\r\n      }\r\n      img{\r\n        width: 100%;\r\n         height:100%;\r\n         @media (max-width: 600px) {\r\n          width:45%;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n`;\r\n\r\n","/* eslint-disable react/no-danger */\r\nimport React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Section, Wrapper, Background, FixedPanel } from '../content';\r\n\r\n\r\nimport ReactPlayer from \"react-player\";\r\n\r\n\r\nimport { HomeElemEN } from './contentEN';\r\nimport { HomeElemZH } from './contentZH';\r\nimport { ButtonElement } from '../button';\r\n\r\nexport const Homepage = () => {\r\n  const {t,i18n} = useTranslation('common');\r\n\r\n  const HomeElem = i18n.language === \"zh\" ? HomeElemZH :  HomeElemEN;\r\n    \r\n  const secPos = document\r\n    .querySelector('#section-home')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = (posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0) || window.scrollY === 0;\r\n  /*if (isVisible)\r\n    window.localStorage.setItem('activeVideo', 'section-home')*/\r\n\r\n  const isFixed = posY < 0;\r\n \r\n  return (\r\n    <Section id=\"section-home\" className=\"section-home\" >\r\n      <Background alt=\"Shingles The Experience Lab\" src={[i18n.language === 'zh'? 'https://assets.gskinternet.com/pharma/shingles_com_hk/website_chi_1920x1080_1200.png' : 'https://assets.gskinternet.com/pharma/shingles_com_hk/website_eng_1920x1080_1200.png']} className={['home', isFixed ? 'fixed': '', isVisible || posY === 0 ? 'active' : '', 'desktop-img'].join(' ') } />\r\n      <Background alt=\"Shingles The Experience Lab\" src={[i18n.language === 'zh'? 'https://assets.gskinternet.com/pharma/shingles_com_hk/website_chi_1080x1920_600.png' : 'https://assets.gskinternet.com/pharma/shingles_com_hk/website_eng_1080x1920_600.png']} className={['home', isFixed ? 'fixed': '', isVisible || posY === 0 ? 'active' : '', 'mobile-img'].join(' ') } />\r\n      <HomeElem className={[isVisible ? 'active' : ''].join(' ')}>\r\n        \r\n       \r\n        <div className={['column2 desArrow', i18n.language === 'zh'? 'display-block' : 'display-none'].join(' ')}>\r\n        <ReactPlayer\r\n              className=\"awareness-video\"\r\n              url=\"https://videos.gskinternet.com/pharma/shingles_com_hk/patient-Annie-1080-5.mp4\"\r\n              controls={true}\r\n              width=\"200\"\r\n              height=\"200\"\r\n              playing={true}\r\n              muted={true}\r\n              loop={true}\r\n            />\r\n        </div>\r\n        <div className={['column2 desArrow', i18n.language === 'zh'? 'display-none' : 'display-block'].join(' ')}>\r\n        <ReactPlayer\r\n              className=\"awareness-video\"\r\n              url=\"https://videos.gskinternet.com/pharma/shingles_com_hk/SAW 2024 Patient Stories Video2 with full EN.mp4\"\r\n              controls={true}\r\n              width=\"200\"\r\n              height=\"200\"\r\n              playing={true}\r\n              muted={true}\r\n              loop={true}\r\n            />\r\n        </div>\r\n        \r\n        </HomeElem>\r\n    </Section>\r\n  );\r\n};\r\n","import { Arrow } from './content';\r\n\r\nexport const ArrowElement = ({section}) => {\r\n  const scrollTo = () => {\r\n    document.getElementById(section)?.scrollIntoView({\r\n      behavior: 'smooth',\r\n    });\r\n  }\r\n  return (\r\n    <Arrow onClick={() => { scrollTo() }} />\r\n  );\r\n};\r\n","export default __webpack_public_path__ + \"static/media/video_placeholder.92b01b6e.png\";","export default __webpack_public_path__ + \"static/media/video_placeholder_mobile.80ebb495.png\";","import styled from 'styled-components';\r\n\r\nexport const IntroElemEN = styled.div`\r\n  margin: 0 auto;\r\n  max-width: 400px;\r\n    \r\n  @media (min-width: 600px) {\r\n    min-width: 800px;\r\n    margin: 0;\r\n  }\r\n  .header {\r\n    padding-top: 14vh;\r\n    @media (min-width: 600px) {\r\n      padding-top: 0;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n    }\r\n    h1 {\r\n      font-size: 70px;\r\n      font-weight: bold;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      margin: 0;\r\n      line-height: 1.02;\r\n      letter-spacing: 1.75px;\r\n      text-align: center;\r\n      color: #f1f2f3;\r\n      position: relative;\r\n\r\n      sup {\r\n        font-size: 14px;\r\n        position:absolute;\r\n        top: 26px;\r\n        @media (max-width: 600px) {\r\n          top: 13px;\r\n        }\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        font-size: 120px;\r\n        letter-spacing: 3.33px;\r\n      }\r\n    }\r\n    h3 {\r\n      margin: 5px 32px;\r\n      font-size: 19px;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.16;\r\n      letter-spacing: 1.52px;\r\n      text-align: center;\r\n      color: #f1f2f3;\r\n      max-width: 690px;\r\n      @media (min-width: 600px) {\r\n        font-size: 35px;\r\n        line-height: 1.13;\r\n        letter-spacing: 2.84px;\r\n        color: #f1f2f3;\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub {\r\n    margin-top: 23vh;\r\n    @media (min-width: 600px) {\r\n      margin-top: 5vh;\r\n      max-width: 800px;\r\n      display: flex;\r\n      justify-content: center;\r\n    }\r\n    h4 {\r\n      font-size: 16px;\r\n      font-weight: 500;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.11;\r\n      letter-spacing: 0.9px;\r\n      text-transform: initial;\r\n      text-align: center;\r\n      color: #f1f2f3;\r\n      margin: 0;\r\n      @media (max-width: 600px) {\r\n        max-width: 240px;\r\n        margin: 0 auto;\r\n      }\r\n      @media (min-width: 600px) {\r\n        line-height: 25px;\r\n        letter-spacing: 1.28px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .intro-arrow {\r\n    margin-top: 5vh;\r\n    max-width: 690px;\r\n    @media (min-width: 600px) {\r\n      max-width: 800px;\r\n      margin-top: 6vh;\r\n    }\r\n  }\r\n\r\n  .disclaimer {\r\n    margin-top: 4vh;\r\n    max-width: 690px;\r\n    @media (min-width: 600px) {\r\n      max-width: 800px;\r\n      margin-top: 6vh;\r\n    }\r\n    p {  \r\n      font-size: 11px;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      text-align: center;\r\n      color: #f1f2f3;\r\n      text-transform: initial;\r\n      @media (min-width: 600px) {\r\n        font-size: 11px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const IntroElemZH = styled.div`\r\n  margin: 0 auto;\r\n  max-width: 500px;\r\n  @media (min-width: 600px) {\r\n    min-width: 800px;\r\n    margin: 0;\r\n  }\r\n  .header {\r\n    padding-top: 13vh;\r\n\r\n    @media (min-width: 600px) {\r\n      padding-top: 0;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n    }\r\n    h1 {\r\n      font-size: 60px;\r\n      font-weight: bold;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      margin: 0;\r\n      line-height: 1.02;\r\n      letter-spacing: 1.75px;\r\n      text-align: center;\r\n      color: #f1f2f3;\r\n      position: relative;\r\n\r\n      sup {\r\n        font-size: 14px;\r\n        position:absolute;\r\n        top: 26px;\r\n        @media (max-width: 600px) {\r\n          top: 13px;\r\n        }\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        font-size: 100px;\r\n        letter-spacing: 3.33px;\r\n      }\r\n    }\r\n    h3 {\r\n      margin: 5px 32px;\r\n      font-size: 19px;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.16;\r\n      letter-spacing: 1.52px;\r\n      text-align: center;\r\n      color: #f1f2f3;\r\n      max-width: 690px;\r\n      strong{\r\n        font-size: 60px;\r\n      }\r\n      sup{\r\n        font-size:14px;\r\n      }\r\n      \r\n      @media (min-width: 600px) {\r\n        font-size: 35px;\r\n        line-height: 1.13;\r\n        letter-spacing: 2.84px;\r\n        color: #f1f2f3;\r\n        strong{\r\n          font-size: 100px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub {\r\n    margin-top: 18vh;\r\n    @media (min-width: 600px) {\r\n      margin-top: 5vh;\r\n      max-width: 800px;\r\n      display: flex;\r\n      justify-content: center;\r\n    }\r\n    h4 {\r\n      font-size: 16px;\r\n      font-weight: 500;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.11;\r\n      letter-spacing: 0.9px;\r\n      text-transform: initial;\r\n      text-align: center;\r\n      color: #f1f2f3;\r\n      margin: 0;\r\n      @media (max-width: 600px) {\r\n        max-width: 240px;\r\n        margin: 0 auto;\r\n      }\r\n      @media (min-width: 600px) {\r\n        line-height: 25px;\r\n        letter-spacing: 1.28px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .intro-arrow {\r\n    margin-top: 5vh;\r\n    max-width: 690px;\r\n    @media (min-width: 600px) {\r\n      max-width: 800px;\r\n      margin-top: 6vh;\r\n    }\r\n  }\r\n\r\n  .disclaimer {\r\n    margin-top: 4vh;\r\n    max-width: 690px;\r\n    @media (min-width: 600px) {\r\n      max-width: 800px;\r\n      margin-top: 6vh;\r\n    }\r\n    p {  \r\n      font-size: 11px;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      text-align: center;\r\n      color: #f1f2f3;\r\n      text-transform: initial;\r\n      @media (min-width: 600px) {\r\n        font-size: 11px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","/* eslint-disable react/no-danger */\r\nimport React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Section, Wrapper, Background, FixedPanel } from '../content';\r\nimport { ArrowElement } from '../arrow';\r\nimport bgImg from '../../../assets/video_placeholder.png';\r\nimport bgImgMobile from '../../../assets/video_placeholder_mobile.png';\r\n\r\nimport { IntroElemEN } from './contentEN';\r\nimport { IntroElemZH } from './contentZH';\r\n\r\nexport const Intro = () => {\r\n  const {t,i18n} = useTranslation('common');\r\n  const IntroElem = i18n.language === \"zh\" ? IntroElemZH :  IntroElemEN;\r\n  \r\n  const secHomePos = document\r\n  .querySelector('#section-home')\r\n    ?.getBoundingClientRect();\r\n  const HomeposY = secHomePos?.y || 0;\r\n  const HomeposH = secHomePos?.height || 0;\r\n  const isVisibleHome = (HomeposY - (window.innerHeight / 2) <= 0 && (HomeposY - (window.innerHeight / 2)) + HomeposH > 0) || window.scrollY === 0;\r\n  \r\n  const secPos = document\r\n    .querySelector('#section-intro')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  \r\n  const isVisible = !isVisibleHome && ((posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0) || window.scrollY === 0);\r\n  /*if (isVisible)\r\n    window.localStorage.setItem('activeVideo', 'section-home')*/\r\n\r\n  const isFixed = posY < 0;\r\n  const preventLink = (event)=>{\r\n    event.preventDefault()\r\n  }\r\n \r\n  return (\r\n    <Section id=\"section-intro\" className=\"section-intro\">\r\n      <Background alt=\"Man with shingles rash\" src={bgImg} className={[ isVisible ? 'active' : '', 'desktop-img'].join(' ') } />\r\n      <Background alt=\"Man with shingles rash\" src={bgImgMobile} className={[isFixed ? 'fixed': '', isVisible  ? 'active' : '', 'mobile-img'].join(' ') } />\r\n      <FixedPanel className={['intro',isVisible ? 'active' : ''].join(' ')}>\r\n        <Wrapper className={[isVisible ? 'intro active' : ''].join(' ')}>\r\n          <IntroElem>\r\n            <div className=\"header\">\r\n              <h1\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.secIntro.header.copy1'),\r\n                }}\r\n              />\r\n              <h3\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.secIntro.header.copy2'),\r\n                }}\r\n              />\r\n              {i18n.language === \"zh\" ?  <h3\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.secIntro.header.copy3'),\r\n                }}\r\n              /> :  <h1\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.secIntro.header.copy3'),\r\n              }}\r\n            />}\r\n             \r\n            </div>\r\n            <div className=\"sub\">\r\n              <h4\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.secIntro.sub.copy'),\r\n                }}\r\n              />\r\n            </div>\r\n            <div className=\"intro-arrow\">\r\n            <a href=\"#\" dtlinktype = \"dtclickablelink\" dtlinkname={`PAIN SYMPTOMS_${i18n.language}`} onClick={ (event) => preventLink(event)} ><ArrowElement section=\"section-one\" /></a>\r\n            </div>\r\n            <div className=\"disclaimer\">\r\n              <p\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.secIntro.disclaimer.copy1'),\r\n                }}\r\n              />\r\n          </div>\r\n          </IntroElem>\r\n        </Wrapper>\r\n      </FixedPanel>\r\n    </Section>\r\n  );\r\n};\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemEN = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    height: calc(100vh - 59px);\r\n    flex-direction: column;  \r\n    justify-content: space-between;\r\n  }\r\n\r\n  .holder {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    height: 100vh;\r\n  }\r\n\r\n  @media (min-width: 600px) {\r\n    height: calc(100vh - 80px);\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      margin: 0;\r\n      align-items: flex-end;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    .holder {\r\n      padding-right: 9vw;\r\n      justify-content: flex-end;\r\n    }\r\n  }\r\n  .header {\r\n    margin-bottom: 20vh;\r\n    line-height: 1.01;\r\n    letter-spacing: 3.5px;\r\n\r\n    @media (min-width: 600px) {\r\n      margin-bottom: 5vh;\r\n    }\r\n\r\n    h3 {\r\n      font-size: 16px;\r\n      text-align: center;\r\n      padding: 14vh 0 1vh;\r\n      @media (min-width: 600px) {\r\n        padding: 0;\r\n        font-size: 33px;\r\n        margin-bottom: 20px;\r\n      }\r\n    }\r\n\r\n    h2 {\r\n      font-size: 36px;\r\n      margin: 0;\r\n      font-style: italic;\r\n\r\n      @media (min-width: 600px) {\r\n        font-size: 66px;\r\n\r\n        span {\r\n          &:first-child {\r\n            transform: translateX(-140px);\r\n            display: inline-block;\r\n          }\r\n          &:last-child {\r\n            transform: translateX(100px);\r\n            display: inline-block;\r\n          }\r\n        }\r\n      }\r\n\r\n      br {\r\n        display: none;\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      strong {\r\n        display: block;\r\n        position: relative;\r\n\r\n        @media (min-width: 600px) {\r\n          display: inline;\r\n        }\r\n\r\n        sup {\r\n          font-size: 12px;\r\n          position: absolute;\r\n          line-height: 0;\r\n          top: 21px;\r\n\r\n          @media (max-width: 600px) {\r\n            top: 12px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub {\r\n    padding: 0 0 10vh;\r\n    h4 {\r\n      font-size: 16px;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      text-align: center;\r\n      color: #f1f2f3;\r\n      text-transform: initial;\r\n      br {      \r\n        display: block;\r\n        @media (min-width: 600px) {\r\n          display: none;\r\n        }\r\n      }\r\n      @media (min-width: 600px) {\r\n        max-width: inherit;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const PainSymptonsElemEN = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 59px);\r\n    flex-direction: column;\r\n    justify-content: center\r\n  }\r\n\r\n  @media (min-width: 600px) {\r\n    height: calc(100vh - 80px);\r\n    margin: 0;\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      justify-content: center;\r\n    }\r\n\r\n    .holder {\r\n      min-width: 800px;\r\n    }\r\n  }\r\n\r\n  .header {\r\n    color: #fff;\r\n    text-align: left;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    font-size: 22px;\r\n    text-transform: uppercase;\r\n    line-height: 1.01;\r\n    letter-spacing: 3.5px;\r\n    br {\r\n      display: none;\r\n    }\r\n    @media (min-width: 600px) {\r\n      max-width: 800px;\r\n      font-size: 52.5px;\r\n\r\n      /* br {\r\n        display: none;\r\n      } */\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n      transform: translateX(130px);\r\n    }\r\n\r\n    span {      \r\n      @media (max-width: 600px) {\r\n        em {\r\n          font-style: normal;\r\n          width: 100%;\r\n\r\n          &:nth-child(2) {\r\n            transform: translateX(40px);\r\n          }  \r\n          &:nth-child(4) {\r\n            transform: translateX(20px);\r\n          }  \r\n        \r\n        }\r\n      }\r\n      strong {\r\n        &:first-child {\r\n          text-align: left;\r\n          font-size: 70px;\r\n          display: block;\r\n          @media (min-width: 600px) {\r\n            text-align: center;\r\n            transform: translateX(-128px);\r\n            font-size: 107px;\r\n          }\r\n        }\r\n        &:last-child {\r\n          font-size: 45px;\r\n          @media (min-width: 600px) {\r\n            display: block;\r\n            font-size: 66px;\r\n            text-align: right;\r\n            transform: translateX(-58px);\r\n          }\r\n        }\r\n      }\r\n\r\n    }\r\n  }\r\n\r\n  .callout-box {\r\n    font-size: 18px;\r\n    line-height: 24px;\r\n    color: #fff;\r\n    text-align: justify;\r\n    line-height: 1.5;\r\n    letter-spacing: 0.5px;\r\n    padding: 0 20px;\r\n    margin:30px auto;\r\n    @media (min-width: 600px) {\r\n      max-width: 800px;\r\n      font-size: 20px;\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n      transform: translateX(129px);\r\n    }\r\n\r\n    sup {\r\n      line-height: 0;\r\n      font-size: 11px;\r\n    }\r\n  }\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemZH = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    height: calc(100vh - 59px);\r\n    flex-direction: column;  \r\n    justify-content: space-between;\r\n  }\r\n\r\n  .holder {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    height: 100vh;\r\n  }\r\n\r\n  @media (min-width: 600px) {\r\n    height: calc(100vh - 80px);\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      margin: 0;\r\n      align-items: flex-end;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    .holder {\r\n      padding-right: 9vw;\r\n      justify-content: flex-end;\r\n    }\r\n  }\r\n  .header {\r\n    margin-bottom: 20vh;\r\n    line-height: 1.01;\r\n    letter-spacing: 3.5px;\r\n\r\n    @media (min-width: 600px) {\r\n      margin-bottom: 5vh;\r\n    }\r\n\r\n    h3 {\r\n      font-size: 16px;\r\n      text-align: center;\r\n      padding: 14vh 0 1vh;\r\n      @media (min-width: 600px) {\r\n        padding: 0;\r\n        font-size: 33px;\r\n        margin-bottom: 20px;\r\n      }\r\n    }\r\n\r\n    h2 {\r\n      font-size: 36px;\r\n      margin: 0;\r\n      font-style: italic;\r\n      sup{\r\n        font-size: 12px;\r\n        vertical-align:top;\r\n        font-weight:bold;\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        font-size: 66px;\r\n\r\n        span {\r\n          &:first-child {\r\n            transform: translateX(-140px);\r\n            display: inline-block;\r\n          }\r\n          &:last-child {\r\n            transform: translateX(100px);\r\n            display: inline-block;\r\n          }\r\n        }\r\n      }\r\n\r\n      br {\r\n        display: none;\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      strong {\r\n        display: block;\r\n        position: relative;\r\n\r\n        @media (min-width: 600px) {\r\n          display: inline;\r\n        }\r\n\r\n        sup {\r\n          font-size: 12px;\r\n          position: absolute;\r\n          line-height: 0;\r\n          top: 21px;\r\n\r\n          @media (max-width: 600px) {\r\n            top: 12px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub {\r\n    padding: 0 0 10vh;\r\n    h4 {\r\n      font-size: 16px;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      text-align: center;\r\n      color: #f1f2f3;\r\n      text-transform: initial;\r\n      br {      \r\n        display: block;\r\n        @media (min-width: 600px) {\r\n          display: none;\r\n        }\r\n      }\r\n      @media (min-width: 600px) {\r\n        max-width: inherit;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const PainSymptonsElemZH = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 59px);\r\n    flex-direction: column;\r\n    justify-content: center\r\n  }\r\n\r\n  @media (min-width: 600px) {\r\n    height: calc(100vh - 80px);\r\n    margin: 0;\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      justify-content: center;\r\n    }\r\n\r\n    .holder {\r\n      min-width: 800px;\r\n    }\r\n  }\r\n\r\n  .header {\r\n    color: #fff;\r\n    text-align: left;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    font-size: 22px;\r\n    text-transform: uppercase;\r\n    line-height: 1.01;\r\n    letter-spacing: 3.5px;\r\n    br {\r\n      display: none;\r\n    }\r\n    @media (min-width: 600px) {\r\n      max-width: 800px;\r\n      font-size: 52.5px;\r\n      /* br {\r\n        display: none;\r\n      } */\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n      transform: translateX(130px);\r\n    }\r\n\r\n    span {      \r\n      @media (max-width: 600px) {\r\n        em {\r\n          font-style: normal;\r\n          width: 100%;\r\n\r\n          &:nth-child(2) {\r\n            transform: translateX(40px);\r\n          }  \r\n          &:nth-child(4) {\r\n            transform: translateX(20px);\r\n          }  \r\n        }\r\n      }\r\n      strong {\r\n        &:first-child {\r\n          text-align: left;\r\n          font-size: 70px;\r\n          display: block;\r\n          @media (min-width: 600px) {\r\n            text-align: center;\r\n            transform: translateX(-128px);\r\n            font-size: 107px;\r\n          }\r\n        }\r\n        &:last-child {\r\n          font-size: 45px;\r\n          @media (min-width: 600px) {\r\n            display: block;\r\n            font-size: 66px;\r\n            text-align: center;\r\n            transform: translateX(-58px);\r\n          }\r\n        }\r\n      }\r\n\r\n    }\r\n  }\r\n\r\n  .callout-box {\r\n    font-size: 18px;\r\n    line-height: 24px;\r\n    color: #fff;\r\n    text-align: justify;\r\n    line-height: 1.5;\r\n    letter-spacing: 0.5px;\r\n    padding: 0 20px;\r\n    margin:30px auto;\r\n    @media (min-width: 600px) {\r\n      max-width: 800px;\r\n      font-size: 20px;\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n      transform: translateX(129px);\r\n    }\r\n\r\n    sup {\r\n      line-height: 0;\r\n      font-size: 11px;\r\n    }\r\n  }\r\n`;\r\n","/* eslint-disable react/no-danger */\r\nimport { useTranslation } from 'react-i18next';\r\nimport { PainStateElemEN } from './contentEN';\r\nimport { PainStateElemZH } from './contentZH';\r\nimport { FixedPanel } from '../content';\r\n\r\nexport const PainState = () => {\r\n  const { t ,i18n } = useTranslation('common');\r\n\r\n  const PainStateElem = i18n.language === \"zh\" ? PainStateElemZH :  PainStateElemEN; \r\n\r\n  const secPos = document\r\n    .querySelector('#section-one .pain-state-1-shocks')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  \r\n  return (\r\n    <PainStateElem className={ ['content', 'pain-state-1-shocks'].join(' ')}>\r\n      <FixedPanel className={['fixed-content', isVisible ? 'active' : ''].join(' ')}>\r\n        <div className=\"holder\">\r\n          <div className={['header', 'left-to-right'].join(' ')}>\r\n            <h3\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painState.header.copy1'),\r\n              }}\r\n            />\r\n            <h2\r\n              className=\"left\"\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painState.header.copy2'),\r\n              }}\r\n            />\r\n          </div>\r\n          <div className={['sub', 'left-to-right'].join(' ')}>\r\n            <h4\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painState.sub.copy1'),\r\n              }}\r\n            />\r\n          </div>\r\n        </div>\r\n      </FixedPanel>\r\n    </PainStateElem>\r\n  );\r\n};\r\n","/* eslint-disable react/no-danger */\r\nimport { useTranslation } from 'react-i18next';\r\nimport { PainSymptonsElemEN } from './contentEN';\r\nimport { PainSymptonsElemZH } from './contentZH';\r\nimport { FixedPanel } from '../content';\r\n\r\nexport const PainSymptons = () => {\r\n  const { t,i18n } = useTranslation('common');\r\n  \r\n  const PainSymptonsElem = i18n.language === \"zh\" ? PainSymptonsElemZH :  PainSymptonsElemEN; \r\n\r\n  const secPos = document\r\n    .querySelector('#section-one .pain-symptoms')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  \r\n  return (\r\n    <PainSymptonsElem className={ ['content', 'pain-symptoms'].join(' ') }>\r\n      <FixedPanel className={['fixed-content', isVisible ? 'active' : ''].join(' ')}>\r\n        <div>\r\n          <div className={['header', 'left-to-right'].join(' ')}>\r\n            <span\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painSymptons.header.copy1'),\r\n              }}\r\n            />\r\n          </div>\r\n          <div className={['callout-box', 'left-to-right'].join(' ')}>\r\n            <span\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painSymptons.calloutBox.copy1'),\r\n              }}\r\n            />\r\n          </div>\r\n        </div>\r\n      </FixedPanel>\r\n    </PainSymptonsElem>\r\n  );\r\n};\r\n","import { VideoHolder } from './content';\r\n\r\nexport const VideoElement = ({ section, source, sourceMobile }) => {\r\n  const secPos = document\r\n    .querySelector(`#${section}`)\r\n    ?.getBoundingClientRect();\r\n  const sec1Pos = document\r\n    .querySelector(`#section-home`)\r\n    ?.getBoundingClientRect();\r\n  const sec2Pos = document\r\n  .querySelector(`#section-intro`)\r\n  ?.getBoundingClientRect();\r\n  /*const sec3Pos = document\r\n  .querySelector(`#section-event`)\r\n  ?.getBoundingClientRect();\r\n  const sec6Pos = document\r\n  .querySelector(`#section-six`)\r\n  ?.getBoundingClientRect();\r\n  const posSec1Y = (sec1Pos && sec2Pos && sec3Pos)?.y || 0;*/\r\n  const posSec1Y = sec1Pos && sec2Pos?.y || 0;\r\n  const footerPos = document\r\n    .querySelector(`footer`)\r\n    ?.getBoundingClientRect();\r\n  const posFooterY = footerPos?.y || 0;\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  const active = window.localStorage.getItem('activeVideo')\r\n  if (isVisible && active !== section) {\r\n    window.localStorage.setItem('activeVideo', section)\r\n    const desktopVideo = document.querySelector(`#${section} video.desktop-video`);\r\n    const mobileVideo = document.querySelector(`#${section} video.mobile-video`);\r\n    if (desktopVideo)\r\n      desktopVideo.play()\r\n    if (mobileVideo)\r\n      mobileVideo.play()\r\n  }\r\n  const bannerHeight = document.querySelector(`#banner-footer`)?.clientHeight;\r\n  const isFixed = posSec1Y < 0 && (posFooterY-(window.innerHeight-bannerHeight)) > 0;\r\n\r\n  return (\r\n    <VideoHolder className={[isFixed ? 'fixed': '', isVisible ? 'active' : ''].join(' ') }>\r\n      <video id=\"video\" preload=\"auto\" playsInline muted className=\"desktop-video\">     \r\n        <source src={source} />          \r\n      </video>\r\n      <video id=\"video\" preload=\"auto\" className=\"mobile-video\" playsInline muted>     \r\n        <source src={sourceMobile} />          \r\n      </video>\r\n    </VideoHolder>\r\n  );\r\n};\r\n","import { useTranslation } from 'react-i18next';\r\nimport { Section } from '../content';\r\nimport { PainState } from './painState';\r\nimport { PainSymptons } from './painSymptons';\r\nimport { VideoElement } from '../video';\r\nimport { Wrapper } from '../content';\r\n\r\nexport const Section1 = (playedVideos, sectionActive) => {\r\n  const { t } = useTranslation('common');\r\n  const secPos = document\r\n    .querySelector('#section-one')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY <= 0 && posY + posH > 0;\r\n  return (\r\n    <Section id=\"section-one\" className=\"section-one\">\r\n      <VideoElement\r\n        playedVideos={playedVideos}\r\n        section=\"section-one\"\r\n        source={t('content.sections.sec1.video')}\r\n        sourceMobile={t('content.sections.sec1.videoMobile')}\r\n        status={isVisible}\r\n      />\r\n      <Wrapper>\r\n        <PainState />\r\n        <PainSymptons />\r\n      </Wrapper>\r\n    </Section>\r\n  );\r\n};\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemEN = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    height: calc(100vh - 59px);\r\n  }\r\n  .holder {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    height: 100vh;\r\n    @media (max-width: 600px) {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 600px) {\r\n    height: calc(100vh - 80px);\r\n    margin: 0;\r\n    .fixed-content {\r\n      align-items: flex-end;\r\n      justify-content: flex-start;\r\n      height: calc(100vh - 80px);\r\n    }\r\n\r\n    .holder {\r\n      padding-left: 4vw;\r\n      justify-content: flex-end;\r\n\r\n      @media (min-width: 600px) and (max-width: 1160px) {\r\n        justify-content: center;\r\n        transform: translateY(64px);\r\n      }\r\n    }\r\n  }\r\n\r\n  .header {\r\n    margin-bottom: 20vh;\r\n    line-height: 1.01;\r\n    letter-spacing: 3.5px;\r\n    @media (min-width: 600px) { \r\n      margin-bottom: 5vh;\r\n    }\r\n    h3 {\r\n      font-size: 16px;\r\n      text-align: center;\r\n      padding: 14vh 0 1vh;\r\n      @media (min-width: 600px) {\r\n        padding: 0;\r\n        font-size: 33px;\r\n        margin-bottom: 20px;\r\n      }\r\n    }\r\n\r\n    h2 {\r\n      font-size: 30px;\r\n      font-style: italic;\r\n      @media (min-width: 600px) {\r\n        text-align: left;\r\n        font-size: 66px;\r\n        margin: 0;\r\n      }\r\n\r\n      span {\r\n        display: block;\r\n        position: relative;\r\n        sup {\r\n          font-size: 14px;\r\n          line-height: 0;\r\n          position: absolute;\r\n          top: 17px;\r\n          @media (max-width: 600px) {\r\n            top: 10px;\r\n          }\r\n        }\r\n\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n          &:first-child {\r\n            transform: translateX(-30px);\r\n          }\r\n\r\n          &:last-child {\r\n            text-align: right;\r\n            transform: translateX(50px);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub {\r\n    padding: 0 0 17vh;\r\n    @media (min-width: 600px) {\r\n      padding: 0 0 13vh;\r\n    }\r\n    h4 {\r\n      font-size: 16px;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      color: #f1f2f3;\r\n      text-transform: initial;\r\n      max-width: 280px;\r\n      margin: 0 auto;\r\n      br {\r\n        display: none;\r\n        @media (max-width: 600px) {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        max-width: inherit;\r\n        text-align: center;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const ImpactElemEN = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 59px);\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n\r\n  @media (min-width: 600px) {\r\n    height: calc(100vh - 80px);\r\n    margin: 0;\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      justify-content: center;\r\n    }\r\n\r\n    .holder {\r\n      min-width: 800px;\r\n      transform: translateY(54px);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .holder {\r\n      transform: translateY(25px);\r\n    }\r\n  }\r\n  @media (max-width: 800px) {\r\n    .holder {\r\n      min-width: 100vw;\r\n    }      \r\n  }\r\n\r\n  .header {\r\n    color: #fff;\r\n    text-align: right;\r\n    margin: 0 auto;\r\n    padding: 0 15px;\r\n    font-size: 30px;\r\n    text-transform: uppercase;\r\n    /* margin-bottom: 9vh; */\r\n    max-width: 400px;\r\n    line-height: 1.02;\r\n    letter-spacing: 4.8px;\r\n    @media (min-width: 600px) {\r\n      max-width: 756px;\r\n      font-size: 60px;\r\n      text-align: left;\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n      transform: translateX(80px);\r\n      margin-bottom: 8vh;\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n      text-align: center;\r\n    }\r\n\r\n    span {\r\n      br {\r\n        display: none;\r\n        @media (min-width: 600px) {\r\n          display: none;\r\n        }\r\n      }\r\n      strong {\r\n        &:first-child {\r\n          text-align: center;\r\n          font-size: 50px;\r\n          padding-bottom:15px;\r\n          display: block;\r\n          @media (min-width: 600px) {\r\n            font-size: 69px;\r\n          }\r\n          @media (min-width: 1160px) {\r\n            text-align: center;\r\n            transform: translateX(-282px);\r\n          }\r\n        }\r\n        &:last-child {\r\n          font-size: 30px;\r\n          @media (min-width: 600px) {\r\n            font-size: 60px;\r\n            display: inline;\r\n            text-align: right;\r\n          }          \r\n        }\r\n      }\r\n      em {\r\n        @media (min-width: 600px) {\r\n          span {\r\n            display: inline;\r\n          }\r\n        }\r\n      }\r\n      span {\r\n        strong{\r\n          text-align: right;\r\n        }\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n          text-align: right;\r\n          transform: translateX(-33px);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .callout-box {\r\n    font-size: 16px;\r\n    line-height: 1.8;\r\n    letter-spacing: 0.5px;\r\n    color: #fff;\r\n    text-align: justify;\r\n    margin: 0 0 65px;\r\n    padding: 10px 25px 0; \r\n    strong {\r\n      display: block;\r\n      font-size: 18px;\r\n      text-transform: uppercase;\r\n      letter-spacing:2.5px;\r\n      text-align:center;\r\n      @media (max-width: 600px) {\r\n        margin-bottom: 1vh;\r\n      }\r\n      @media (min-width: 600px) {\r\n        br {\r\n          display: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    span {\r\n      sup {\r\n        line-height: 0;\r\n        font-size: 11px;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 600px) {\r\n      max-width: 800px;\r\n      font-size: 20px;\r\n      margin: 0 auto;\r\n      strong {\r\n        font-size: 20px;\r\n        margin-bottom: 2vh;\r\n      }\r\n    }    \r\n\r\n    @media (min-width: 1024px) {\r\n      transform: translateX(130px);\r\n    }\r\n  }\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemZH = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    height: calc(100vh - 59px);\r\n  }\r\n  .holder {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    height: 100vh;\r\n    @media (max-width: 600px) {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 600px) {\r\n    height: calc(100vh - 80px);\r\n    margin: 0;\r\n    .fixed-content {\r\n      align-items: flex-end;\r\n      justify-content: flex-start;\r\n      height: calc(100vh - 80px);\r\n    }\r\n\r\n    .holder {\r\n      padding-left: 4vw;\r\n      justify-content: flex-end;\r\n\r\n      @media (min-width: 600px) and (max-width: 1160px) {\r\n        justify-content: center;\r\n        transform: translateY(64px);\r\n      }\r\n    }\r\n  }\r\n\r\n  .header {\r\n    margin-bottom: 20vh;\r\n    line-height: 1.01;\r\n    letter-spacing: 3.5px;\r\n    padding:0px 10px;\r\n    @media (min-width: 600px) { \r\n      margin-bottom: 5vh;\r\n    }\r\n    h3 {\r\n      font-size: 16px;\r\n      text-align: center;\r\n      padding: 14vh 0 1vh;\r\n      @media (min-width: 600px) {\r\n        padding: 0;\r\n        font-size: 33px;\r\n        margin-bottom: 20px;\r\n      }\r\n    }\r\n\r\n    h2 {\r\n      font-size: 30px;\r\n      font-style: italic;\r\n      @media (min-width: 600px) {\r\n        text-align: left;\r\n        font-size: 66px;\r\n        margin: 0;\r\n      }\r\n\r\n      span {\r\n        display: block;\r\n        position: relative;\r\n        sup {\r\n          font-size: 14px;\r\n          line-height: 0;\r\n          position: absolute;\r\n          top: 17px;\r\n          @media (max-width: 600px) {\r\n            top: 10px;\r\n          }\r\n        }\r\n\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n          &:first-child {\r\n            transform: translateX(-30px);\r\n          }\r\n\r\n          &:last-child {\r\n            text-align: right;\r\n            transform: translateX(50px);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub {\r\n    padding: 0 0 17vh;\r\n    @media (min-width: 600px) {\r\n      padding: 0 0 13vh;\r\n    }\r\n    h4 {\r\n      font-size: 16px;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      color: #f1f2f3;\r\n      text-transform: initial;\r\n      max-width: 280px;\r\n      margin: 0 auto;\r\n      br {\r\n        display: none;\r\n        @media (max-width: 600px) {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        max-width: inherit;\r\n        text-align: center;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const ImpactElemZH = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 59px);\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n\r\n  @media (min-width: 600px) {\r\n    height: calc(100vh - 80px);\r\n    margin: 0;\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      justify-content: center;\r\n    }\r\n\r\n    .holder {\r\n      min-width: 800px;\r\n      transform: translateY(54px);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .holder {\r\n      transform: translateY(25px);\r\n    }\r\n  }\r\n  @media (max-width: 800px) {\r\n    .holder {\r\n      min-width: 100vw;\r\n    }      \r\n  }\r\n\r\n  .header {\r\n    color: #fff;\r\n    text-align: right;\r\n    margin: 0 auto;\r\n    padding: 0 15px;\r\n    font-size: 30px;\r\n    text-transform: uppercase;\r\n    margin-bottom: 4vh;\r\n    max-width: 400px;\r\n    line-height: 1.02;\r\n    letter-spacing: 4.8px;\r\n    @media (min-width: 600px) {\r\n      max-width: 756px;\r\n      font-size: 60px;\r\n      text-align: left;\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n      transform: translateX(80px);\r\n      margin-bottom: 8vh;\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n      text-align: center;\r\n    }\r\n\r\n    span {\r\n      br {\r\n        display: none;\r\n        @media (min-width: 600px) {\r\n          display: none;\r\n        }\r\n      }\r\n      strong {\r\n        &:first-child {\r\n          text-align: center;\r\n          font-size: 50px;\r\n          padding-bottom:15px;\r\n          display: block;\r\n          @media (min-width: 600px) {\r\n            font-size: 69px;\r\n          }\r\n          @media (min-width: 1160px) {\r\n            text-align: center;\r\n            transform: translateX(-282px);\r\n          }\r\n        }\r\n        &:last-child {\r\n          font-size: 30px;\r\n          @media (min-width: 600px) {\r\n            font-size: 60px;\r\n            display: inline;\r\n            text-align: right;\r\n          }          \r\n        }\r\n      }\r\n      em {\r\n        @media (min-width: 600px) {\r\n          span {\r\n            display: inline;\r\n          }\r\n        }\r\n      }\r\n      span {\r\n        strong{\r\n          text-align: right;\r\n        }\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n          text-align: right;\r\n          transform: translateX(-33px);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .callout-box {\r\n    font-size: 16px;\r\n    line-height: 1.8;\r\n    letter-spacing: 0.5px;\r\n    color: #fff;\r\n    text-align: justify;\r\n    margin: 0 0 65px;\r\n    padding: 10px 25px 0; \r\n    strong {\r\n      display: block;\r\n      font-size: 18px;\r\n      text-transform: uppercase;\r\n      letter-spacing:2.5px;\r\n      text-align:center;\r\n      @media (max-width: 600px) {\r\n        margin-bottom: 1vh;\r\n      }\r\n      @media (min-width: 600px) {\r\n        br {\r\n          display: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    span {\r\n      sup {\r\n        line-height: 0;\r\n        font-size: 11px;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 600px) {\r\n      max-width: 800px;\r\n      font-size: 20px;\r\n      margin: 0 auto;\r\n      strong {\r\n        font-size: 20px;\r\n        margin-bottom: 2vh;\r\n      }\r\n    }    \r\n\r\n    @media (min-width: 1024px) {\r\n      transform: translateX(130px);\r\n    }\r\n  }\r\n`;\r\n","/* eslint-disable react/no-danger */\r\nimport { useTranslation } from 'react-i18next';\r\nimport { PainStateElemEN } from './contentEN';\r\nimport { PainStateElemZH } from './contentZH';\r\nimport { FixedPanel } from '../content';\r\n\r\nexport const PainState = () => {\r\n  const { t,i18n} = useTranslation('common');\r\n \r\n  const PainStateElem = i18n.language === \"zh\" ? PainStateElemZH :  PainStateElemEN;\r\n\r\n  const secPos = document\r\n    .querySelector('#section-two .pain-state-2-boiling')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  \r\n  return (\r\n    <PainStateElem className={ ['content', 'pain-state-2-boiling'].join(' ') }>\r\n      <FixedPanel className={['fixed-content', isVisible ? 'active' : ''].join(' ')}>\r\n        <div className=\"holder\">\r\n          <div className=\"header left-to-right\">\r\n            <h3\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec2.painState.header.copy1'),\r\n              }}\r\n            />\r\n            <h2\r\n                className=\"left\"\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.sec2.painState.header.copy2'),\r\n                }}\r\n              />\r\n          </div>\r\n          <div className=\"sub left-to-right\">\r\n            <h4\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec2.painState.sub'),\r\n              }}\r\n            />\r\n          </div>\r\n        </div>\r\n      </FixedPanel>\r\n    </PainStateElem>\r\n  );\r\n};\r\n","/* eslint-disable react/no-danger */\r\nimport { useTranslation } from 'react-i18next';\r\nimport { ImpactElemEN } from './contentEN';\r\nimport { ImpactElemZH } from './contentZH';\r\nimport { FixedPanel } from '../content';\r\n\r\nexport const Impact = () => {\r\n  const { t,i18n } = useTranslation('common');\r\n\r\n  const ImpactElem = i18n.language === \"zh\" ? ImpactElemZH :  ImpactElemEN;\r\n\r\n  const secPos = document\r\n    .querySelector('#section-two .impact-on-life')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  \r\n  return (\r\n    <ImpactElem className={ ['content', 'impact-on-life'].join(' ') }>\r\n      <FixedPanel className={['fixed-content', isVisible ? 'active' : ''].join(' ')}>\r\n        <div className=\"holder\">\r\n          <div className=\"header left-to-right\">\r\n            <span\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec2.impact.header.copy1'),\r\n              }}\r\n            />\r\n          </div>\r\n          <div className=\"callout-box left-to-right\">\r\n            <span\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec2.impact.calloutBox.copy1'),\r\n              }}\r\n            />\r\n          </div>\r\n        </div>\r\n      </FixedPanel>\r\n    </ImpactElem>\r\n  );\r\n};\r\n","import { useTranslation } from 'react-i18next';\r\nimport { Section } from '../content';\r\nimport { PainState } from './painState';\r\nimport { VideoElement } from '../video';\r\nimport { Impact } from './impact';\r\nimport { Wrapper } from '../content';\r\n\r\nexport const Section2 = (playedVideos) => {\r\n  const { t } = useTranslation('common');\r\n  const secPos = document\r\n    .querySelector('#section-two')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  return (\r\n    <Section id=\"section-two\" className={['section-two', isVisible ? 'active' : ''].join(' ')}>\r\n      <VideoElement\r\n        playedVideos={playedVideos}\r\n        section=\"section-two\"\r\n        source={t('content.sections.sec2.video')}\r\n        sourceMobile={t('content.sections.sec2.videoMobile')}\r\n        status={isVisible}\r\n      />\r\n      <Wrapper>\r\n        <PainState />\r\n        <Impact />\r\n      </Wrapper>\r\n    </Section>\r\n  );\r\n};\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemEN = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    height: calc(100vh - 59px);\r\n  }\r\n  \r\n  .holder {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    height: 100vh;\r\n    @media (max-width: 600px) {\r\n      width: 100%;\r\n    }\r\n  }\r\n  \r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    height: calc(100vh - 80px);\r\n\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      align-items: flex-end;\r\n      justify-content: flex-end;\r\n    }\r\n    .holder {\r\n      padding-right: 9vw;\r\n      justify-content: flex-end;\r\n\r\n    }\r\n  }\r\n\r\n  .header {\r\n    margin-bottom: 20vh;\r\n    @media (min-width: 600px) { \r\n      margin-bottom: 5vh;\r\n    }\r\n    h3 {\r\n      font-size: 16px;\r\n      text-align: center;\r\n      padding: 14vh 0 1vh;\r\n      @media (min-width: 600px) {\r\n        padding: 0;\r\n        font-size: 33px;\r\n        transform: translateX(38px);\r\n        margin-bottom: 20px;\r\n      }\r\n    }\r\n\r\n    h2 {\r\n      font-size: 36px;\r\n      font-style: italic;\r\n      line-height: 1;\r\n      letter-spacing: 2.63px;\r\n\r\n      @media (min-width: 600px) {\r\n        text-align: left;\r\n        font-size: 66px;\r\n        margin: 0;\r\n      }\r\n\r\n      span {\r\n        position: relative;\r\n\r\n        &:first-child {\r\n          strong {\r\n            display: block;\r\n            @media (min-width: 600px) {\r\n              display: inline;\r\n            }\r\n          }\r\n        }\r\n\r\n        sup {\r\n          font-size: 12px;\r\n          position: absolute;\r\n          top: 10px;\r\n          @media (max-width: 600px) {\r\n            top: 8px;\r\n          }\r\n        }\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n\r\n          &:last-child {\r\n            text-align: right;\r\n            transform: translateX(50px);\r\n          }\r\n        }\r\n\r\n        @media (min-width: 1160px) {\r\n          &:first-child {\r\n            transform: translateX(-30px);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub {\r\n    font-size: 11px;\r\n    text-transform: initial;\r\n    max-width: 280px;\r\n    margin: 0 auto;\r\n\r\n    @media (min-width: 600px) {\r\n      max-width: inherit;\r\n    }\r\n\r\n    padding: 0 0 17vh;\r\n    h4 {\r\n      font-size: 16px;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      color: #f1f2f3;\r\n      text-transform: initial;\r\n\r\n      br {\r\n        display: none;\r\n        @media (max-width: 600px) {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        max-width: inherit;\r\n        text-align: right;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const ComplicationElemEN = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 59px);\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n\r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    height: calc(100vh - 80px);\r\n\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      align-items: flex-end;\r\n      justify-content: center;\r\n    }\r\n\r\n    .holder {\r\n      min-width: 800px;\r\n    }\r\n  }\r\n\r\n  .header {\r\n    color: #fff;\r\n    text-align: center;\r\n    margin: 12px auto;\r\n    padding: 0 20px;\r\n    font-size: 27px;\r\n    text-transform: uppercase;\r\n    letter-spacing:2px;\r\n\r\n    br {\r\n      @media (min-width: 600px) {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n\r\n    @media (min-width: 600px) {\r\n      margin: 10vh 0 2vh;\r\n      max-width: 850px;\r\n      font-size: 61px;\r\n      text-align: center;\r\n      width: calc(100% - 40px);\r\n      em {\r\n        transform: translateX(-39px);\r\n        display: inline-block;\r\n      }\r\n      span {\r\n        display: block;\r\n        &:first-child {\r\n          text-align: left;\r\n          font-weight: bold;\r\n          font-size: 72px;\r\n\r\n          strong {\r\n            font-size: 72px;\r\n          }\r\n        }\r\n        &:last-child {\r\n          text-align: right;\r\n        }\r\n      }\r\n    }\r\n\r\n    strong {\r\n      font-size: 36px;\r\n      display: block;\r\n      text-align: left;\r\n      line-height: 1.03;\r\n      letter-spacing: 3.75px;   \r\n      font-style: normal;\r\n\r\n      @media (min-width: 600px) {\r\n        display: inline;\r\n        font-size: 61px;\r\n      }\r\n\r\n      &.mobile {\r\n        @media (min-width: 600px) {\r\n          font-weight: normal;\r\n        }\r\n      }\r\n\r\n      &.desktop {\r\n        @media (max-width: 600px) {\r\n          font-weight: normal;\r\n          display: inline;\r\n          font-size: 30px;\r\n        }\r\n      }\r\n\r\n      &:first-child {\r\n        transform: translateX(10px);\r\n      }\r\n    }\r\n  }\r\n\r\n  .callout-box {\r\n    line-height: 24px;\r\n    color: #fff;\r\n    text-align: justify;\r\n    margin: 0 auto;\r\n    padding: 0 25px;\r\n    text-transform: initial;\r\n\r\n    p {\r\n      font-size: 16px;\r\n      text-transform: initial;  \r\n      line-height: 1.5;\r\n      letter-spacing: 0.5px;\r\n      text-align: justify;\r\n\r\n      sup {\r\n        line-height: 0;\r\n        font-size: 12px;\r\n      }\r\n    }\r\n\r\n    strong {\r\n      color: #fff;\r\n\r\n      sup {\r\n        font-size: 12px;\r\n        line-height: 0;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 600px) {\r\n      margin: 0;\r\n      max-width: 800px;\r\n\r\n      p {\r\n        font-size: 20px;\r\n        line-height: 1.5;\r\n        letter-spacing: 0.5px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemZH = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    height: calc(100vh - 59px);\r\n  }\r\n  \r\n  .holder {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    height: 100vh;\r\n    @media (max-width: 600px) {\r\n      width: 100%;\r\n    }\r\n  }\r\n  \r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    height: calc(100vh - 80px);\r\n\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      align-items: flex-end;\r\n      justify-content: flex-end;\r\n      \r\n    }\r\n    .holder {\r\n      padding-right: 9vw;\r\n      justify-content: flex-end;\r\n\r\n    }\r\n  }\r\n\r\n  .header {\r\n    margin-bottom: 20vh;\r\n    @media (min-width: 600px) { \r\n      margin-bottom: 5vh;\r\n    }\r\n    h3 {\r\n      font-size: 16px;\r\n      text-align: center;\r\n      padding: 14vh 0 1vh;\r\n      @media (min-width: 600px) {\r\n        padding: 0;\r\n        font-size: 33px;\r\n        transform: translateX(38px);\r\n        margin-bottom: 20px;\r\n      }\r\n    }\r\n\r\n    h2 {\r\n      font-size: 36px;\r\n      font-style: italic;\r\n      line-height: 1;\r\n      letter-spacing: 2.63px;\r\n\r\n      @media (min-width: 600px) {\r\n        text-align: left;\r\n        font-size: 66px;\r\n        margin: 0;\r\n      }\r\n\r\n      span {\r\n        position: relative;\r\n\r\n        &:first-child {\r\n          strong {\r\n            display: block;\r\n            @media (min-width: 600px) {\r\n              display: inline;\r\n            }\r\n          }\r\n        }\r\n\r\n        sup {\r\n          font-size: 12px;\r\n          position: absolute;\r\n          top: 10px;\r\n          @media (max-width: 600px) {\r\n            top: 8px;\r\n          }\r\n        }\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n\r\n          &:last-child {\r\n            text-align: right;\r\n            transform: translateX(50px);\r\n          }\r\n        }\r\n\r\n        @media (min-width: 1160px) {\r\n          &:first-child {\r\n            transform: translateX(-30px);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub {\r\n    font-size: 11px;\r\n    text-transform: initial;\r\n    max-width: 280px;\r\n    margin: 0 auto;\r\n\r\n    @media (min-width: 600px) {\r\n      max-width: inherit;\r\n    }\r\n\r\n    padding: 0 0 17vh;\r\n    h4 {\r\n      font-size: 16px;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      color: #f1f2f3;\r\n      text-transform: initial;\r\n\r\n      br {\r\n        display: none;\r\n        @media (max-width: 600px) {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        max-width: inherit;\r\n        text-align: right;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const ComplicationElemZH = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 59px);\r\n    justify-content: center;\r\n    flex-direction: column;\r\n   \r\n  }\r\n\r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    height: calc(100vh - 80px);\r\n\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      align-items: flex-end;\r\n      justify-content: center;\r\n    }\r\n\r\n    .holder {\r\n      min-width: 800px;\r\n    }\r\n  }\r\n\r\n  .header {\r\n    color: #fff;\r\n    text-align: center;\r\n    margin: 12px auto;\r\n    padding: 0 20px;\r\n    font-size: 27px;\r\n    text-transform: uppercase;\r\n    letter-spacing:2px;\r\n\r\n    br {\r\n      @media (min-width: 600px) {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n\r\n    @media (min-width: 600px) {\r\n      margin: 10vh 0 2vh;\r\n      max-width: 850px;\r\n      font-size: 61px;\r\n      text-align: center;\r\n      width: calc(100% - 40px);\r\n      em {\r\n        transform: translateX(-39px);\r\n        display: inline-block;\r\n      }\r\n      span {\r\n        display: block;\r\n        &:first-child {\r\n          text-align: left;\r\n          font-weight: bold;\r\n          font-size: 72px;\r\n          strong {\r\n            font-size: 72px;\r\n          }\r\n        }\r\n        &:last-child {\r\n          text-align: center;\r\n        }\r\n      }\r\n    }\r\n\r\n    strong {\r\n      font-size: 36px;\r\n      display: block;\r\n      text-align: left;\r\n      line-height: 1.03;\r\n      letter-spacing: 3.75px;   \r\n      font-style: normal;\r\n\r\n      @media (min-width: 600px) {\r\n        display: inline;\r\n        font-size: 61px;\r\n      }\r\n\r\n      &.mobile {\r\n        @media (min-width: 600px) {\r\n          font-weight: normal;\r\n        }\r\n      }\r\n\r\n      &.desktop {\r\n        @media (max-width: 600px) {\r\n          font-weight: normal;\r\n          display: inline;\r\n          font-size: 30px;\r\n        }\r\n      }\r\n\r\n      &:first-child {\r\n        transform: translateX(10px);\r\n      }\r\n    }\r\n  }\r\n\r\n  .callout-box {\r\n    line-height: 24px;\r\n    color: #fff;\r\n    text-align: justify;\r\n    margin: 0 auto;\r\n    padding: 0 25px;\r\n    text-transform: initial;\r\n\r\n    p {\r\n      font-size: 16px;\r\n      text-transform: initial;  \r\n      line-height: 1.5;\r\n      letter-spacing: 0.5px;\r\n      text-align: justify;\r\n\r\n      sup {\r\n        line-height: 0;\r\n        font-size: 12px;\r\n      }\r\n    }\r\n\r\n    strong {\r\n      color: #fff;\r\n\r\n      sup {\r\n        font-size: 12px;\r\n        line-height: 0;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 600px) {\r\n      margin: 0;\r\n      max-width: 800px;\r\n\r\n      p {\r\n        font-size: 20px;\r\n        line-height: 1.5;\r\n        letter-spacing: 0.5px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","/* eslint-disable react/no-danger */\r\nimport { useTranslation } from 'react-i18next';\r\nimport { PainStateElemEN } from './contentEN';\r\nimport { PainStateElemZH } from './contentZH';\r\nimport { FixedPanel } from '../content';\r\n\r\nexport const PainState = () => {\r\n   const { t,i18n } = useTranslation('common');\r\n \r\n   const PainStateElem = i18n.language === \"zh\" ? PainStateElemZH :  PainStateElemEN;\r\n\r\n\r\n  const secPos = document\r\n    .querySelector('#section-three .pain-state-3-lava')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  \r\n  return (\r\n    <PainStateElem className={ ['content', 'pain-state-3-lava'].join(' ') }>\r\n      <FixedPanel className={['fixed-content', isVisible ? 'active' : ''].join(' ')}>\r\n        <div className=\"holder\">\r\n          <div className=\"header left-to-right\">        \r\n            <h3\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec3.painState.header.copy1'),\r\n              }}\r\n            />\r\n            <h2\r\n              className=\"left\"\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec3.painState.header.copy2'),\r\n              }}\r\n            />\r\n          </div>\r\n          <div className=\"sub left-to-right\">\r\n            <h4\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec3.painState.sub'),\r\n              }}\r\n            />\r\n          </div>\r\n        </div>\r\n      </FixedPanel>\r\n    </PainStateElem>\r\n  );\r\n};\r\n","/* eslint-disable react/no-danger */\r\nimport { useTranslation } from 'react-i18next';\r\nimport { ComplicationElemEN } from './contentEN';\r\nimport { ComplicationElemZH } from './contentZH';\r\nimport { FixedPanel } from '../content';\r\n\r\nexport const Complications = () => {\r\n  const { t , i18n} = useTranslation('common');\r\n\r\n  const ComplicationElem = i18n.language === \"zh\" ? ComplicationElemZH :  ComplicationElemEN;\r\n  \r\n  const secPos = document\r\n    .querySelector('#section-three .complications')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  \r\n  return (\r\n    <ComplicationElem className={ ['content', 'complications'].join(' ') }>\r\n      <FixedPanel className={['fixed-content', isVisible ? 'active' : ''].join(' ')}>\r\n        <div className=\"header left-to-right\">\r\n          <div\r\n            dangerouslySetInnerHTML={{\r\n              __html: t('content.sections.sec3.complications.header.copy1'),\r\n            }}\r\n          />\r\n        </div>\r\n        <div className=\"callout-box left-to-right\">\r\n          <div\r\n            dangerouslySetInnerHTML={{\r\n              __html: t('content.sections.sec3.complications.calloutBox.copy1'),\r\n            }}\r\n          />\r\n        </div>\r\n      </FixedPanel>\r\n    </ComplicationElem>\r\n  );\r\n};\r\n","import { useTranslation } from 'react-i18next';\r\nimport { Section } from '../content';\r\nimport { PainState } from './painState';\r\nimport { VideoElement } from '../video';\r\nimport { Complications } from './complications';\r\nimport { Wrapper } from '../content';\r\n\r\nexport const Section3 = (playedVideos) => {\r\n  const { t } = useTranslation('common');\r\n  const secPos = document\r\n    .querySelector('#section-three')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  return (\r\n    <Section id=\"section-three\" className={['section-three', isVisible ? 'active' : ''].join(' ')}>\r\n      <VideoElement\r\n        playedVideos={playedVideos}\r\n        section=\"section-three\"\r\n        source={t('content.sections.sec3.video')}\r\n        sourceMobile={t('content.sections.sec3.videoMobile')}\r\n        status={isVisible}\r\n      />\r\n      <Wrapper>\r\n        <PainState />\r\n        <Complications />\r\n      </Wrapper>\r\n    </Section>\r\n  );\r\n};\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemEN = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    height: calc(100vh - 59px);\r\n  }\r\n  \r\n  .holder {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    height: 100vh;\r\n    @media (max-width: 600px) {\r\n      width: 100%;\r\n    }\r\n  }\r\n  \r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    height: calc(100vh - 80px);\r\n    \r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      align-items: flex-end;\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    .holder {\r\n      padding-left: 9vw;\r\n      justify-content: flex-end;\r\n\r\n    }\r\n  }\r\n\r\n  .header {\r\n    margin-bottom: 20vh;\r\n    @media (min-width: 600px) { \r\n      margin-bottom: 5vh;\r\n    }\r\n    h3 {\r\n      font-size: 16px;\r\n      text-align: center;\r\n      padding: 14vh 0 1vh;\r\n      @media (min-width: 600px) {\r\n        padding: 0;\r\n        font-size: 33px;\r\n        margin-bottom: 20px;\r\n      }\r\n    }\r\n\r\n    h2 {\r\n      font-size: 30px;\r\n      font-style: italic;\r\n      line-height: 1;\r\n      letter-spacing: 3.9px;\r\n      @media (min-width: 600px) {\r\n        text-align: left;\r\n        font-size: 66px;\r\n        margin: 0;\r\n\r\n        br {\r\n          display: none;\r\n        }\r\n      }\r\n\r\n      span {\r\n        position: relative;\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n        }\r\n        sup {\r\n          font-size: 12px;\r\n          position: absolute;\r\n          top: 10px;\r\n          @media (max-width: 600px) {\r\n            top: 36px;\r\n          }\r\n        }\r\n\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n          &:first-child {\r\n            transform: translateX(-30px);\r\n          }\r\n\r\n          &:last-child {\r\n            text-align: center;\r\n            transform: translateX(50px);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }  \r\n\r\n  .sub {\r\n    padding: 0 0 17vh;\r\n    h4 {\r\n      font-size: 11px;\r\n      max-width: 280px;\r\n      margin: 0 auto;\r\n      text-transform: initial;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      color: #f1f2f3;\r\n\r\n      br {\r\n        display: none;\r\n        @media (max-width: 600px) {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        max-width: inherit;\r\n        text-align: center;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const RiskElemEN = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 59px);\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    height: calc(100vh - 80px);\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  .holder {\r\n    height: 100vh; \r\n    display: flex;\r\n    flex-direction: column;\r\n    @media (max-width: 600px) {\r\n      justify-content: center;\r\n    }\r\n    @media (min-width: 600px) {\r\n      justify-content: center;\r\n      max-width: 900px;\r\n      transform: translateY(28px);\r\n    }\r\n  }\r\n\r\n  .header {\r\n    color: #fff;\r\n    text-align: center;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    font-size: 28px;\r\n    text-transform: uppercase;\r\n    padding: 0 0 3vh;\r\n\r\n    span {\r\n      display: block;\r\n      letter-spacing: 2.7px;\r\n      @media (min-width: 600px) {\r\n        font-size: 54px;\r\n        span {\r\n          &:nth-child(1) {\r\n            transform: translateX(-60px);\r\n          }\r\n          &:nth-child(3) {\r\n            transform: translateX(40px);\r\n            font-size: 49px;\r\n          }\r\n        }\r\n      }\r\n      &:nth-child(2) {\r\n\r\n        strong {\r\n          display: block;\r\n          font-size: 50px;\r\n          letter-spacing: 4.85px;\r\n\r\n          @media (min-width: 600px) {\r\n            display: inline;\r\n            font-size: 78px;\r\n          }\r\n        }\r\n        @media (min-width: 600px) {\r\n          font-size: 78px;\r\n        }\r\n      }\r\n      &:nth-child(3) {\r\n        transform: translateX(22px);\r\n      }\r\n    }\r\n  }\r\n\r\n  .callout-box {\r\n    h4 {\r\n      text-align: center;\r\n      font-size: 19px;\r\n      margin: 0 auto;\r\n      max-width: 300px;\r\n      width: auto;\r\n      display: block;\r\n      font-weight: bold;\r\n\r\n      sup {\r\n        font-size: 14px;\r\n        line-height: 0;\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        font-size: 30px;\r\n        max-width: 600px;\r\n      }\r\n    }\r\n\r\n    .box {\r\n      background: rgba(255,255,255,.66);\r\n      color: #17262e;\r\n      display: block;\r\n      margin: 1vh auto 1vh;\r\n      max-width: 300px;\r\n      @media (min-width: 600px) {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 2vh;\r\n        max-width: 338px;\r\n      }\r\n\r\n      h4 {\r\n        color: #17262e;\r\n        &:first-child {\r\n          padding: 1vh 0;\r\n          font-size: 20px;\r\n          @media (min-width: 600px) {\r\n            padding: 0 1vw;\r\n            border-right: 1px solid #17262e;\r\n            font-size: 15px;\r\n          }\r\n          \r\n          strong {\r\n            font-size: 80px;\r\n            display: block;\r\n            line-height: 70px;\r\n            @media (min-width: 600px) {\r\n              font-size: 90px;\r\n              margin-bottom: 9px;\r\n              line-height: 70px;\r\n            }\r\n          }\r\n        }\r\n\r\n        &:last-child {\r\n          font-size: 14px;\r\n          text-transform: initial;\r\n          padding: 0 1vw 3vh;\r\n          @media (min-width: 600px) {\r\n            font-size: 16px;\r\n            padding: 0 1vw;\r\n            text-align: left;\r\n            max-width: 194px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  p{\r\n    font-size:16px;\r\n    text-transform:lowercase;\r\n    &::first-letter{\r\n      text-transform:uppercase;\r\n    }\r\n  }\r\n\r\n  .disclaimer {\r\n    margin-top:20px;\r\n    span {\r\n      text-align: center;\r\n      font-size: 11px;\r\n      text-transform: initial;\r\n      color: #fff;\r\n      margin: 0 auto;\r\n      max-width: 242px;\r\n      width: auto;\r\n      display: block;\r\n\r\n\r\n      sup {\r\n        line-height: 0;\r\n        font-size: 9px;\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        max-width: 404px;\r\n        font-size: 14px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemZH = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    height: calc(100vh - 59px);\r\n  }\r\n  \r\n  .holder {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    height: 100vh;\r\n    @media (max-width: 600px) {\r\n      width: 100%;\r\n    }\r\n  }\r\n  \r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    height: calc(100vh - 80px);\r\n    \r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      align-items: flex-end;\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    .holder {\r\n      padding-left: 9vw;\r\n      justify-content: flex-end;\r\n\r\n    }\r\n  }\r\n\r\n  .header {\r\n    margin-bottom: 20vh;\r\n    @media (min-width: 600px) { \r\n      margin-bottom: 5vh;\r\n    }\r\n    h3 {\r\n      font-size: 16px;\r\n      text-align: center;\r\n      padding: 14vh 0 1vh;\r\n      @media (min-width: 600px) {\r\n        padding: 0;\r\n        font-size: 33px;\r\n        margin-bottom: 20px;\r\n      }\r\n    }\r\n\r\n    h2 {\r\n      font-size: 30px;\r\n      font-style: italic;\r\n      line-height: 1;\r\n      letter-spacing: 3.9px;\r\n      @media (min-width: 600px) {\r\n        text-align: left;\r\n        font-size: 66px;\r\n        margin: 0;\r\n\r\n        br {\r\n          display: none;\r\n        }\r\n      }\r\n\r\n      span {\r\n        position: relative;\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n        }\r\n        sup {\r\n          font-size: 12px;\r\n          position: absolute;\r\n          top: 10px;\r\n          @media (max-width: 600px) {\r\n            top: 36px;\r\n          }\r\n        }\r\n\r\n        @media (min-width: 600px) {\r\n          display: block;\r\n          &:first-child {\r\n            transform: translateX(-30px);\r\n          }\r\n\r\n          &:last-child {\r\n            text-align: center;\r\n            transform: translateX(50px);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }  \r\n\r\n  .sub {\r\n    padding: 0 0 17vh;\r\n    h4 {\r\n      font-size: 11px;\r\n      max-width: 280px;\r\n      margin: 0 auto;\r\n      text-transform: initial;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      color: #f1f2f3;\r\n\r\n      br {\r\n        display: none;\r\n        @media (max-width: 600px) {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        max-width: inherit;\r\n        text-align: center;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const RiskElemZH = styled.div`\r\n  height: calc(100vh - 59px);\r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 59px);\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    height: calc(100vh - 80px);\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  .holder {\r\n    height: 100vh; \r\n    display: flex;\r\n    flex-direction: column;\r\n    @media (max-width: 600px) {\r\n      justify-content: center;\r\n    }\r\n    @media (min-width: 600px) {\r\n      justify-content: center;\r\n      max-width: 900px;\r\n      transform: translateY(28px);\r\n    }\r\n  }\r\n\r\n  .header {\r\n    color: #fff;\r\n    text-align: center;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    font-size: 28px;\r\n    text-transform: uppercase;\r\n    padding: 0 0 3vh;\r\n    span {\r\n      display: block;\r\n      letter-spacing: 2.7px;\r\n      @media (min-width: 600px) {\r\n        font-size: 54px;\r\n        span {\r\n          &:nth-child(1) {\r\n            transform: translateX(-60px);\r\n          }\r\n          &:nth-child(3) {\r\n            transform: translateX(40px);\r\n            font-size: 49px;\r\n          }\r\n        }\r\n      }\r\n      &:nth-child(2) {\r\n\r\n        strong {\r\n          display: block;\r\n          font-size: 30px;\r\n          letter-spacing: 4.85px;\r\n\r\n          @media (min-width: 600px) {\r\n            display: inline;\r\n            font-size: 58px;\r\n          }\r\n        }\r\n        @media (min-width: 600px) {\r\n          font-size: 58px;\r\n        }\r\n      }\r\n      &:nth-child(3) {\r\n        transform: translateX(22px);\r\n      }\r\n    }\r\n  }\r\n\r\n  .callout-box {\r\n    h4 {\r\n      text-align: center;\r\n      font-size: 19px;\r\n      margin: 0 auto;\r\n      max-width: 300px;\r\n      width: auto;\r\n      display: block;\r\n      font-weight: bold;\r\n\r\n      sup {\r\n        font-size: 14px;\r\n        line-height: 0;\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        font-size: 30px;\r\n        max-width: 600px;\r\n      }\r\n    }\r\n\r\n    .box {\r\n      background: rgba(255,255,255,.66);\r\n      color: #17262e;\r\n      display: block;\r\n      margin: 1vh auto 1vh;\r\n      max-width: 300px;\r\n      @media (min-width: 600px) {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 2vh;\r\n        max-width: 338px;\r\n      }\r\n\r\n      h4 {\r\n        color: #17262e;\r\n        &:first-child {\r\n          padding: 1vh 0;\r\n          font-size: 20px;\r\n          @media (min-width: 600px) {\r\n            padding: 0 1vw;\r\n            border-right: 1px solid #17262e;\r\n            font-size: 15px;\r\n          }\r\n          \r\n          strong {\r\n            font-size: 80px;\r\n            display: block;\r\n            line-height: 70px;\r\n            @media (min-width: 600px) {\r\n              font-size: 90px;\r\n              margin-bottom: 9px;\r\n              line-height: 70px;\r\n            }\r\n          }\r\n        }\r\n\r\n        &:last-child {\r\n          font-size: 14px;\r\n          text-transform: initial;\r\n          padding: 0 1vw 3vh;\r\n          @media (min-width: 600px) {\r\n            font-size: 16px;\r\n            padding: 0 1vw;\r\n            text-align: left;\r\n            max-width: 194px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  p{\r\n    font-size:16px;\r\n    text-transform:lowercase;\r\n    &::first-letter{\r\n      text-transform:uppercase;\r\n    }\r\n  }\r\n\r\n  .disclaimer {\r\n    margin-top:20px;\r\n    span {\r\n      text-align: center;\r\n      font-size: 11px;\r\n      text-transform: initial;\r\n      color: #fff;\r\n      margin: 0 auto;\r\n      max-width: 242px;\r\n      width: auto;\r\n      display: block;\r\n\r\n\r\n      sup {\r\n        line-height: 0;\r\n        font-size: 9px;\r\n      }\r\n\r\n      @media (min-width: 600px) {\r\n        max-width: 404px;\r\n        font-size: 14px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","/* eslint-disable react/no-danger */\r\nimport { useTranslation } from 'react-i18next';\r\nimport { RiskElemEN } from './contentEN';\r\nimport { RiskElemZH } from './contentZH';\r\nimport { FixedPanel } from '../content';\r\n\r\nexport const Risk = () => {\r\n  const { t , i18n } = useTranslation('common');\r\n\r\n  const RiskElem = i18n.language === \"zh\" ? RiskElemZH :  RiskElemEN;\r\n  \r\n  const secPos = document\r\n    .querySelector('#section-four .risk')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  \r\n  return (\r\n    <RiskElem className={ ['content', 'risk'].join(' ') }>\r\n      <FixedPanel className={['fixed-content', isVisible ? 'active' : ''].join(' ')}>\r\n        <div className=\"holder\">\r\n          <div className=\"header left-to-right\">\r\n            <span\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec4.risk.header.copy1'),\r\n              }}\r\n            />\r\n          </div>\r\n          <div className=\"callout-box left-to-right\">\r\n            <h4\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec4.risk.calloutBox.copy1'),\r\n              }}\r\n            />\r\n            <div className=\"box\">\r\n\r\n              <h4\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.sec4.risk.calloutBox.box.copy1'),\r\n                }}\r\n              />\r\n              <h4\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.sec4.risk.calloutBox.box.copy2'),\r\n                }}\r\n              />\r\n            </div>\r\n          </div>\r\n        {/*   <p>*Based on actual patient testimonial. Shingles symptoms may vary.</p> */}\r\n          <div className=\"disclaimer left-to-right\">\r\n            <span\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec4.risk.calloutBox.disclaimer.copy'),\r\n              }}\r\n            />\r\n          </div>\r\n        </div>\r\n      </FixedPanel>\r\n    </RiskElem>\r\n  );\r\n};\r\n","import { useTranslation } from 'react-i18next';\r\nimport { Section } from '../content';\r\nimport { PainState } from './painState';\r\nimport { VideoElement } from '../video';\r\nimport { Risk } from './risk';\r\nimport { Wrapper } from '../content';\r\n\r\nexport const Section4 = (playedVideos) => {\r\n  const { t } = useTranslation('common');\r\n  const secPos = document\r\n    .querySelector('#section-four')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  return (\r\n    <Section id=\"section-four\" className={['section-four', isVisible ? 'active' : ''].join(' ')}>\r\n      <VideoElement\r\n        playedVideos={playedVideos}\r\n        section=\"section-four\"\r\n        source={t('content.sections.sec4.video')}\r\n        sourceMobile={t('content.sections.sec4.videoMobile')}\r\n        status={isVisible}\r\n      />\r\n      <Wrapper>\r\n        <Risk />\r\n      </Wrapper>\r\n    </Section>\r\n  );\r\n};\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemEN = styled.div`\r\n  height: calc(100vh - 80px);\r\n  \r\n  .fixed-content {\r\n    height: calc(100vh - 80px);\r\n  }\r\n  .holder {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    height: 100vh;\r\n    width: 100%;\r\n  }\r\n  \r\n  @media (min-width: 600px) {\r\n    margin: 0 60px;\r\n    height: calc(100vh - 59px);\r\n    \r\n    .fixed-content {\r\n      height: calc(100vh - 59px);\r\n      align-items: flex-end;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    .holder {\r\n      justify-content: flex-end;\r\n      align-items: flex-end;\r\n      padding-right: 2vw;\r\n     \r\n    }\r\n  }\r\n\r\n  @media (min-width: 1160px) {\r\n    .holder {\r\n      padding-right: 10vw;\r\n      justify-content: center;\r\n    }\r\n  }\r\n  \r\n  .header {\r\n    margin-bottom: 20vh;\r\n    line-height: 1;\r\n    letter-spacing: 3.9px;\r\n    @media (min-width: 600px) { \r\n     /*  margin-bottom: 5vh; */\r\n    }\r\n    h3 {\r\n      font-size: 16px;\r\n      text-align: center;\r\n      padding: 14vh 0 1vh;\r\n      @media (min-width: 600px) {\r\n        padding: 0;\r\n        font-size: 33px;     \r\n        margin-bottom: 20px;  \r\n      }\r\n    }\r\n\r\n    h2 {\r\n      font-size: 36px;\r\n      font-style: italic;\r\n\r\n      @media (min-width: 600px) {\r\n        font-size: 60px;\r\n        margin: 0;\r\n\r\n        span {\r\n          position: relative;\r\n          \r\n          &:first-child {\r\n            transform: translateX(-140px);\r\n            display: inline-block;\r\n          }\r\n          &:last-child {\r\n            transform: translateX(-42px);\r\n            display: inline-block;\r\n          }\r\n        }\r\n      }\r\n\r\n      span {\r\n        position: relative;\r\n      }\r\n\r\n      sup {\r\n        font-size: 12px;\r\n        position: absolute;\r\n        top: 10px;\r\n        right: -28px;\r\n\r\n        @media (max-width: 600px) {          \r\n          top: 7px;\r\n        }\r\n      }\r\n\r\n      strong {\r\n        font-size: 36px;\r\n\r\n        @media (min-width: 600px) {\r\n          font-size: 60px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub {\r\n    padding: 0 0 17vh;\r\n\r\n    @media (min-width: 600px) and (max-width: 1160px) {\r\n      padding: 0 3vw 17vh;\r\n      white-space: nowrap;\r\n    }\r\n    h4 {\r\n      font-size: 11px;\r\n      text-transform: initial;\r\n      max-width: 280px;\r\n      margin: 0 auto;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      color: #f1f2f3;\r\n\r\n      br {\r\n        display: none;\r\n        @media (max-width: 600px) {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      @media (min-width: 600px) and (max-width: 1160px) {\r\n        padding-right: 1vw;\r\n      }\r\n\r\n      @media (min-width: 1160px) {\r\n        max-width: inherit;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const TakeActionElemEN = styled.div`\r\n  height: calc(100vh - 59px);\r\n  \r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 59px);\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    height: calc(100vh - 80px);\r\n\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      align-items: flex-end;\r\n    }\r\n  }\r\n  h5{\r\n    color:#fff;\r\n    font-size:16px;\r\n    font-weight:normal;\r\n    text-align:center;\r\n    br{\r\n      display:none;\r\n    }\r\n  }\r\n\r\n  .holder {\r\n    height: 100vh; \r\n    justify-content: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    @media (min-width: 600px) {\r\n      justify-content: center;\r\n      max-width: 574px;\r\n      padding-right: 3vw;\r\n    }\r\n\r\n    @media (min-width: 1160px) {\r\n      padding-right: 17vw;\r\n    }\r\n  }\r\n\r\n  .header {\r\n    color: #fff;\r\n    text-align: center;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    font-size: 30px;\r\n    text-transform: uppercase;\r\n    padding-top: 9vh;\r\n    line-height: 1.02;\r\n    letter-spacing: 4.99px;\r\n\r\n    @media (max-width: 600px) {\r\n      margin-bottom: 15vh;\r\n    }\r\n\r\n    div {\r\n      @media (max-width: 600px) {\r\n        span {\r\n          white-space: nowrap;\r\n        }\r\n      }\r\n      @media (min-width: 600px) {\r\n        span {\r\n          transform: translateX(-40px);\r\n          display: block;\r\n        }\r\n      }\r\n      br {\r\n        @media (min-width: 600px) {\r\n          display: none;\r\n        }\r\n      }\r\n      strong {\r\n        &:nth-child(2) {\r\n          display: block;\r\n          font-size: 60px;\r\n        }\r\n      }\r\n    }\r\n\r\n    em {\r\n      font-style: normal;\r\n\r\n      @media (min-width: 600px) {\r\n        &:first-child {\r\n          text-align: left;\r\n        }  \r\n        &:last-child {\r\n          text-align: right;\r\n        }  \r\n      }\r\n    }\r\n\r\n    br {      \r\n      display: contents;\r\n      @media (min-width: 600px) {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    strong {      \r\n      @media (max-width: 600px) {\r\n        em {\r\n          font-style: normal;\r\n          display: inline-block;\r\n          width: 100%;\r\n\r\n          &:last-child {\r\n            transform: translateX(60px);\r\n          }  \r\n        \r\n        }\r\n      }\r\n      @media (min-width: 600px) {\r\n        em {\r\n          font-size: 66px !important;\r\n        }\r\n      }\r\n    }\r\n\r\n    @media (min-width: 600px) {\r\n      font-size: 34px;\r\n      padding: 0;\r\n      text-align: center;\r\n      width: 100%;\r\n\r\n      div {\r\n        width: 100%;\r\n\r\n        em {\r\n          font-size: 44px;\r\n          transform: translateY(-5px) translateX(-54px);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .cta-copy {\r\n    padding: 0 20px 5vh;\r\n\r\n    br {\r\n      @media (min-width: 600px) {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 600px) {\r\n      margin-top: 2vh;\r\n      border-top: 1px solid rgba(255,255,255,0.62);\r\n      padding: 3vh 0 0;\r\n\r\n      h4 {\r\n        margin: 0;\r\n        font-size: 23px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemZH = styled.div`\r\n  height: calc(100vh - 80px);\r\n  \r\n  .fixed-content {\r\n    height: calc(100vh - 80px);\r\n  }\r\n  .holder {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    height: 100vh;\r\n    width: 100%;\r\n  }\r\n  \r\n  @media (min-width: 600px) {\r\n    margin: 0 60px;\r\n    height: calc(100vh - 59px);\r\n    \r\n    .fixed-content {\r\n      height: calc(100vh - 59px);\r\n      align-items: flex-end;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    .holder {\r\n      justify-content: flex-end;\r\n      align-items: flex-end;\r\n      padding-right: 2vw;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 1160px) {\r\n    .holder {\r\n      padding-right: 10vw;\r\n      justify-content: center;\r\n    }\r\n  }\r\n  \r\n  .header {\r\n    margin-bottom: 20vh;\r\n    line-height: 1;\r\n    letter-spacing: 3.9px;\r\n    @media (min-width: 600px) { \r\n     /*  margin-bottom: 5vh; */\r\n    }\r\n    h3 {\r\n      font-size: 16px;\r\n      text-align: center;\r\n      padding: 14vh 0 1vh;\r\n      @media (min-width: 600px) {\r\n        padding: 0;\r\n        font-size: 33px;     \r\n        margin-bottom: 20px;  \r\n      }\r\n    }\r\n\r\n    h2 {\r\n      font-size: 36px;\r\n      font-style: italic;\r\n\r\n      @media (min-width: 600px) {\r\n        font-size: 60px;\r\n        margin: 0;\r\n\r\n        span {\r\n          position: relative;\r\n          \r\n          &:first-child {\r\n            transform: translateX(-140px);\r\n            display: inline-block;\r\n          }\r\n          &:last-child {\r\n            transform: translateX(-42px);\r\n            display: inline-block;\r\n          }\r\n        }\r\n      }\r\n\r\n      span {\r\n        position: relative;\r\n      }\r\n\r\n      sup {\r\n        font-size: 12px;\r\n        position: absolute;\r\n        top: 10px;\r\n        right: -28px;\r\n\r\n        @media (max-width: 600px) {          \r\n          top: 7px;\r\n        }\r\n      }\r\n\r\n      strong {\r\n        font-size: 36px;\r\n\r\n        @media (min-width: 600px) {\r\n          font-size: 60px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .sub {\r\n    padding: 0 0 17vh;\r\n\r\n    @media (min-width: 600px) and (max-width: 1160px) {\r\n      padding: 0 3vw 17vh;\r\n      white-space: nowrap;\r\n    }\r\n    h4 {\r\n      font-size: 11px;\r\n      text-transform: initial;\r\n      max-width: 280px;\r\n      margin: 0 auto;\r\n      font-weight: normal;\r\n      font-stretch: semi-condensed;\r\n      font-style: normal;\r\n      line-height: 1.21;\r\n      letter-spacing: normal;\r\n      color: #f1f2f3;\r\n\r\n      br {\r\n        display: none;\r\n        @media (max-width: 600px) {\r\n          display: block;\r\n        }\r\n      }\r\n\r\n      @media (min-width: 600px) and (max-width: 1160px) {\r\n        padding-right: 1vw;\r\n      }\r\n\r\n      @media (min-width: 1160px) {\r\n        max-width: inherit;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const TakeActionElemZH = styled.div`\r\n  height: calc(100vh - 59px);\r\n  \r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 59px);\r\n    justify-content: center;\r\n    flex-direction: column;\r\n  }\r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n    height: calc(100vh - 80px);\r\n\r\n    .fixed-content {\r\n      height: calc(100vh - 80px);\r\n      align-items: flex-end;\r\n    }\r\n  }\r\n  h5{\r\n    color:#fff;\r\n    font-size:16px;\r\n    font-weight:normal;\r\n    text-align:center;\r\n    br{\r\n      display:none;\r\n    }\r\n  }\r\n\r\n  .holder {\r\n    height: 100vh; \r\n    justify-content: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    @media (min-width: 600px) {\r\n      justify-content: center;\r\n      max-width: 574px;\r\n      padding-right: 3vw;\r\n    }\r\n\r\n    @media (min-width: 1160px) {\r\n      padding-right: 17vw;\r\n    }\r\n  }\r\n\r\n  .header {\r\n    color: #fff;\r\n    text-align: center;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    font-size: 30px;\r\n    text-transform: uppercase;\r\n    padding-top: 9vh;\r\n    line-height: 1.02;\r\n    letter-spacing: 4.99px;\r\n\r\n    @media (max-width: 600px) {\r\n      margin-bottom: 15vh;\r\n    }\r\n\r\n    div {\r\n      @media (max-width: 600px) {\r\n        span {\r\n          white-space: nowrap;\r\n        }\r\n      }\r\n      @media (min-width: 600px) {\r\n        span {\r\n          transform: translateX(-40px);\r\n          display: block;\r\n        }\r\n      }\r\n      br {\r\n        @media (min-width: 600px) {\r\n          display: none;\r\n        }\r\n      }\r\n      strong {\r\n        &:nth-child(2) {\r\n          display: block;\r\n          font-size: 60px;\r\n        }\r\n      }\r\n    }\r\n\r\n    em {\r\n      font-style: normal;\r\n\r\n      @media (min-width: 600px) {\r\n        &:first-child {\r\n          text-align: left;\r\n        }  \r\n        &:last-child {\r\n          text-align: right;\r\n        }  \r\n      }\r\n    }\r\n\r\n    br {      \r\n      display: block;\r\n      @media (min-width: 600px) {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    strong {      \r\n      @media (max-width: 600px) {\r\n        em {\r\n          font-style: normal;\r\n          display: inline-block;\r\n          width: 100%;\r\n\r\n          &:last-child {\r\n            transform: translateX(60px);\r\n          }  \r\n        \r\n        }\r\n      }\r\n      @media (min-width: 600px) {\r\n        em {\r\n          font-size: 66px !important;\r\n        }\r\n      }\r\n    }\r\n\r\n    @media (min-width: 600px) {\r\n      font-size: 34px;\r\n      padding: 0;\r\n      text-align: center;\r\n      width: 100%;\r\n\r\n      div {\r\n        width: 100%;\r\n\r\n        em {\r\n          font-size: 44px;\r\n          transform: translateY(-5px) translateX(-54px);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .cta-copy {\r\n    padding: 0 20px 5vh;\r\n\r\n    br {\r\n      @media (min-width: 600px) {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 600px) {\r\n      margin-top: 2vh;\r\n      border-top: 1px solid rgba(255,255,255,0.62);\r\n      padding: 3vh 0 0;\r\n\r\n      h4 {\r\n        margin: 0;\r\n        font-size: 23px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","/* eslint-disable react/no-danger */\r\nimport { useTranslation } from 'react-i18next';\r\nimport { PainStateElemEN } from './contentEN';\r\nimport { PainStateElemZH } from './contentZH';\r\nimport { FixedPanel } from '../content';\r\n\r\nexport const PainState = () => {\r\n  const { t , i18n} = useTranslation('common');\r\n\r\n  const PainStateElem = i18n.language === \"zh\" ? PainStateElemZH :  PainStateElemEN;\r\n\r\n  const secPos = document\r\n    .querySelector('#section-five .pain-state-5-blowtorch')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  \r\n  return (\r\n    <PainStateElem className={ ['content', 'pain-state-5-blowtorch'].join(' ') }>\r\n      <FixedPanel className={['fixed-content', isVisible ? 'active' : ''].join(' ')}>\r\n        <div className=\"holder left-to-right\">\r\n          <div className=\"header\">\r\n            <h3\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec5.painState.header.copy1'),\r\n              }}\r\n            />\r\n            <h2\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec5.painState.header.copy2'),\r\n              }}\r\n            />\r\n          </div>\r\n         {/*  <div className=\"sub left-to-right\">\r\n            <h4\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec5.painState.sub.copy1'),\r\n              }}\r\n            />\r\n          </div> */}\r\n        </div>\r\n      </FixedPanel>\r\n    </PainStateElem>\r\n  );\r\n};\r\n","/* eslint-disable react/no-danger */\r\nimport { useTranslation } from 'react-i18next';\r\nimport { TakeActionElemEN } from './contentEN';\r\nimport { TakeActionElemZH } from './contentZH';\r\nimport { FixedPanel } from '../content';\r\n\r\nexport const TakeAction = () => {\r\n  const { t ,i18n} = useTranslation('common');\r\n\r\n  const TakeActionElem = i18n.language === \"zh\" ? TakeActionElemZH :  TakeActionElemEN;\r\n  \r\n\r\n  const secPos = document\r\n    .querySelector('#section-five .take-action')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n  \r\n  return (\r\n    <TakeActionElem className={ ['content', 'take-action'].join(' ') }>\r\n      <FixedPanel className={['fixed-content', isVisible ? 'active' : ''].join(' ')}>\r\n        <div className=\"holder\">\r\n          <div className=\"header left-to-right\">\r\n            <div\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec5.takeAction.header.copy1'),\r\n              }}\r\n            />\r\n          </div>\r\n          \r\n          <div className=\"cta-copy left-to-right\">\r\n            <h4\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec5.takeAction.cta-copy'),\r\n              }}\r\n            />\r\n          </div>\r\n          <div className=\"sub left-to-right\">\r\n            <h5\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec5.painState.sub.copy1'),\r\n              }}\r\n            />\r\n          </div>\r\n        </div>\r\n      </FixedPanel>\r\n    </TakeActionElem>\r\n  );\r\n};\r\n","import { useTranslation } from 'react-i18next';\r\nimport { Section } from '../content';\r\nimport { PainState } from './painState';\r\nimport { VideoElement } from '../video';\r\nimport { TakeAction } from './takeAction';\r\nimport { Wrapper } from '../content';\r\n\r\nexport const Section5 = (playedVideos) => {\r\n  const { t } = useTranslation('common');\r\n  const secPos = document\r\n    .querySelector('#section-five')\r\n    ?.getBoundingClientRect();\r\n  const posY = secPos?.y || 0;\r\n  const posH = secPos?.height || 0;\r\n  const isVisible = posY < 0;\r\n  return (\r\n    <Section id=\"section-five\" className={['section-five', isVisible ? 'active' : ''].join(' ')}>\r\n      <VideoElement\r\n        playedVideos={playedVideos}\r\n        section=\"section-five\"\r\n        source={t('content.sections.sec5.video')}\r\n        sourceMobile={t('content.sections.sec5.videoMobile')}\r\n        status={isVisible}\r\n      />\r\n      <Wrapper>\r\n        <PainState />\r\n        <TakeAction />\r\n      </Wrapper>\r\n    </Section>\r\n  );\r\n};\r\n","import { useEffect, useState } from 'react';\r\nimport { Homepage } from './homepage';\r\n\r\nimport { Intro } from './intro';\r\nimport { Section1 } from './section1';\r\nimport { Section2 } from './section2';\r\nimport { Section3 } from './section3';\r\nimport { Section4 } from './section4';\r\nimport { Section5 } from './section5';\r\n\r\nimport { MainElem } from './content';\r\n\r\nexport const Sections = (sectionActive) => {\r\n  const [playedVideos, togglePlayedVideo] = useState([])\r\n  const [scrollPosition, setScrollPosition] = useState(0);\r\n  const handleScroll = () => {\r\n    const position = window.pageYOffset;\r\n    setScrollPosition(position);\r\n  };\r\n\r\n  useEffect(() => {\r\n    window.addEventListener('scroll', handleScroll, { passive: true });\r\n    return () => {\r\n      window.removeEventListener('scroll', handleScroll);\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <MainElem>\r\n      <Homepage playedVideos={playedVideos} />\r\n      \r\n      <Intro playedVideos={playedVideos} />\r\n      <Section1 playedVideos={playedVideos} />\r\n      <Section2 playedVideos={playedVideos} />\r\n      <Section3 playedVideos={playedVideos} />\r\n      <Section4 playedVideos={playedVideos} />\r\n      \r\n      <Section5 playedVideos={playedVideos} />\r\n    </MainElem>\r\n  );\r\n};\r\n","import styled from 'styled-components';\r\n\r\nexport const MenuContainer = styled.div`\r\n  .menu-active {\r\n    opacity: 1;\r\n    z-index: 9999;\r\n  }\r\n`;\r\n\r\nexport const LangIcon = styled.div` \r\n   position: fixed;\r\n   top: 20px;\r\n   right: 100px;\r\n   z-index: 8;\r\n   background-color:#172f3c;\r\n   color:white;\r\n   display:flex;\r\n   width:50px;\r\n   .slide{\r\n    width:25px;\r\n    height:25px;\r\n    background:green;\r\n    position:absolute;\r\n    z-index:1;\r\n    transition:margin-left 0.3s;\r\n   }\r\n   .slide.active{\r\n     margin-left:25px;\r\n   }\r\n   .langCode{\r\n     position:absolute;\r\n     z-index:2;\r\n     display:flex;\r\n     justify-content: space-between;\r\n     span{\r\n      display:flex;\r\n      width:25px;\r\n      height:25px;\r\n      align-items:center;\r\n      justify-content: center;\r\n      cursor:pointer;\r\n    }\r\n   }\r\n  \r\n  \r\n`\r\n\r\nexport const MenuToggle = styled.div`\r\n  position: fixed;\r\n  top: 70px;\r\n  left: 77px;\r\n  z-index: 8;\r\n  display: none;\r\n  @media only screen and (min-width: 1150px) {\r\n    display: unset;\r\n  }\r\n`;\r\n\r\nexport const MenuBar = styled.div`\r\n  opacity: 0.46;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  height: 30px;\r\n  a{\r\n    text-decoration:none;\r\n    position:relative;\r\n    width:240px;\r\n    left:0;\r\n    top:-11px;\r\n  }\r\n  &:before {\r\n    content: \" \";\r\n    background-color: white;\r\n    width: 44px;\r\n    height: 3px;\r\n    display: block;\r\n  }\r\n  strong {\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n    font-size: 25.5px;\r\n    font-weight: bold;\r\n    font-style: italic;\r\n    line-height: 26px;\r\n    letter-spacing: 2.55px;\r\n    color: #f1f2f3;\r\n    margin-left: 0px;\r\n    opacity: 0;\r\n    position: absolute;\r\n    left: 15px;\r\n  }\r\n\r\n  &:hover,\r\n  &.active {\r\n    &:before {\r\n      width: 57px;\r\n      opacity: 0.78;\r\n    }\r\n\r\n    strong {\r\n      opacity: 1;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const MobileMenuToggle = styled.div`\r\n  position: fixed;\r\n  top: 21px;\r\n  right: 65px;\r\n  z-index: 8;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  height: 22px;\r\n  cursor: pointer;\r\n  @media only screen and (min-width: 1150px) {\r\n    display: none;\r\n  }\r\n`;\r\n\r\nexport const MobileMenuBar = styled.div`\r\n  width: 30px;\r\n  height: 2px;\r\n  background-color: white;\r\n`;\r\n\r\nexport const MobileMenu = styled.div`\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  background-color: rgba(0, 0, 0, 0.9);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  opacity: 0;\r\n  transition: all 0.3s;\r\n  @media only screen and (max-height: 400px) {\r\n    justify-content: center;\r\n  }\r\n`;\r\n\r\nexport const CloseIcon = styled.span`\r\n  color: #f1f2f3;\r\n  font-family: 'Barlow Semi Condensed', sans-serif;\r\n  font-size: 3rem;\r\n  font-weight: bold;\r\n  line-height: 1.02;\r\n  letter-spacing: 1.01px;\r\n  cursor: pointer;\r\n\r\n  align-self: flex-end;\r\n  margin: 24px 33px 40px 0;\r\n\r\n  @media only screen and (max-height: 400px) {\r\n    position: absolute;\r\n  }\r\n`;\r\n\r\nexport const MobileMenuItem = styled.div`\r\n  color: #f1f2f3;\r\n  font-family: 'Barlow Semi Condensed', sans-serif;\r\n  font-size: 40.5px;\r\n  font-weight: bold;\r\n  line-height: 41.5px;\r\n  letter-spacing: 1.01px;\r\n  margin-bottom: 30px;\r\n  cursor: pointer;\r\n  text-decoration:none;\r\n  text-align: center;\r\n  @media (min-width: 600px) {\r\n    font-size: 30px;\r\n    line-height: 36px;\r\n  }\r\n  @media only screen and (max-height: 400px) {\r\n    margin-bottom: 20px;\r\n  }\r\n`;\r\n\r\n","export default __webpack_public_path__ + \"static/media/close.7f927420.png\";","import { useTranslation } from 'react-i18next';\r\nimport { useEffect, useState } from 'react';\r\nimport {\r\n  MobileMenu,\r\n  MobileMenuToggle,\r\n  MobileMenuBar,\r\n  CloseIcon,\r\n  MobileMenuItem,\r\n  MenuContainer,\r\n  MenuBar,\r\n  MenuToggle,\r\n  LangIcon\r\n} from './content';\r\nimport closeIcon from '../../assets/close.png';\r\n\r\nexport const Menu = (props) => {\r\n  \r\n  const [isOpened, setOpened] = useState(false);\r\n  const [visibleSection, setVisibleSection] = useState('section-home');\r\n  const [menu, setMenu] = useState(null);\r\n  const { t, i18n} = useTranslation('common');\r\n  const [lang,setLang] =  useState(i18n.language);\r\n\r\n\r\n  const sections = ['section-home','section-intro','section-one', 'section-two', 'section-three', 'section-four','section-five'];\r\n\r\n  const isVisible = (section) => {\r\n    const secPos = document.querySelector(`#${section}`)?.getBoundingClientRect();\r\n    const posY = secPos?.y || 0;\r\n    const posH = secPos?.height || 0;\r\n    const isV = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n    return isV;\r\n  };\r\n\r\n  const scrollIntoView = (event,id) => {\r\n    event.preventDefault();\r\n    setOpened(false) \r\n    document.getElementById(id)?.scrollIntoView({\r\n      behavior: 'smooth',\r\n    });\r\n  };\r\n\r\n  const renderMenu = () => {\r\n    let menu = [];\r\n\r\n    sections.forEach((section, idx) => {\r\n      menu = [...menu, <MenuBar    onClick={(event) => scrollIntoView(event,section)} key={idx} className={visibleSection === section ? 'active' : ''}>\r\n          <a href=\"#\" dtlinktype = \"dtclickablelink\" dtlinkname={t(`menu.${section}`)+`_${i18n.language}`}  onClick={ (event) => preventLink(event)}><strong>{t(`menu.${section}`)}</strong></a>\r\n        </MenuBar>];\r\n    });\r\n    return menu;\r\n  }\r\n  \r\n  window.onscroll = () => {\r\n    setVisibleSection(null);\r\n    sections.forEach((section) => {\r\n      if (isVisible(section)) {\r\n        setVisibleSection(section);\r\n      }\r\n    });\r\n  };\r\n\r\n  useEffect(() => {\r\n    setMenu(renderMenu());\r\n  }, [visibleSection]);\r\n\r\n  const preventLink = (event)=>{\r\n    event.preventDefault()\r\n  }\r\n\r\n \r\n\r\n  const ChangeLang = (langCode)=>{\r\n     i18n.changeLanguage(langCode);\r\n     setMenu(renderMenu());\r\n     setLang(langCode)\r\n  }\r\n\r\n  return (\r\n    <MenuContainer>\r\n      \r\n      <MenuToggle>\r\n        {menu}     \r\n      </MenuToggle>\r\n\r\n\r\n      <LangIcon > \r\n          <div className ={lang === \"en\" ? 'slide active' :'slide'}></div>\r\n          <div className =\"langCode\" dtlinktype = \"dtclickablelink\" dtlinkname={i18n.language}> \r\n            <span title = \"Chinese\"  onClick={()=> ChangeLang(\"zh\")}>ZH</span>\r\n            <span title = \"English\"  onClick={()=> ChangeLang(\"en\")}>EN</span>\r\n          </div>\r\n      </LangIcon>\r\n\r\n      <MobileMenuToggle onClick={() => setOpened(true)}>\r\n        <MobileMenuBar />\r\n        <MobileMenuBar />\r\n        <MobileMenuBar />\r\n      </MobileMenuToggle>\r\n\r\n      <MobileMenu className={isOpened ? 'menu-active' : ''}>\r\n        <CloseIcon onClick={() => setOpened(false)}>\r\n          <img src={closeIcon} height=\"28\" width=\"28\" />\r\n        </CloseIcon>\r\n\r\n        <MobileMenuItem onClick={(event) => scrollIntoView(event,'section-home')}><a dtlinktype = \"dtclickablelink\" dtlinkname={t(`menu.section-home`)+`_${i18n.language}`}>{t('menu.section-home')}</a></MobileMenuItem>\r\n        <MobileMenuItem onClick={(event) => scrollIntoView(event,'section-intro')}><a dtlinktype = \"dtclickablelink\" dtlinkname={t(`menu.section-intro`)+`_${i18n.language}`}>{t('menu.section-intro')}</a></MobileMenuItem>\r\n        <MobileMenuItem onClick={(event) => scrollIntoView(event,'section-one')}><a dtlinktype = \"dtclickablelink\" dtlinkname={t(`menu.section-one`)+`_${i18n.language}`}>{t('menu.section-one')}</a></MobileMenuItem>\r\n        <MobileMenuItem onClick={(event) => scrollIntoView(event,'section-two')}><a dtlinktype = \"dtclickablelink\" dtlinkname={t(`menu.section-two`)+`_${i18n.language}`}>{t('menu.section-two')}</a></MobileMenuItem>\r\n        <MobileMenuItem onClick={(event) => scrollIntoView(event,'section-three')}><a dtlinktype = \"dtclickablelink\" dtlinkname={t(`menu.section-three`)+`_${i18n.language}`}>{t('menu.section-three')}</a></MobileMenuItem>\r\n        <MobileMenuItem onClick={(event) => scrollIntoView(event,'section-four')}><a dtlinktype = \"dtclickablelink\" dtlinkname={t(`menu.section-four`)+`_${i18n.language}`}>{t('menu.section-four')}</a></MobileMenuItem>\r\n        <MobileMenuItem onClick={(event) => scrollIntoView(event,'section-five')}><a dtlinktype = \"dtclickablelink\" dtlinkname={t(`menu.section-five`)+`_${i18n.language}`}>{t('menu.section-five')}</a></MobileMenuItem>\r\n    \r\n      </MobileMenu>\r\n    </MenuContainer>\r\n  );\r\n};\r\n","import { createGlobalStyle } from 'styled-components';\r\n\r\nexport default createGlobalStyle`\r\n  html,\r\n  body {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    outline: 0;\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n    -webkit-font-smoothing: antialiased;\r\n    overflow-x: hidden;\r\n    background-color: black;\r\n  }\r\n\r\n  body {\r\n    padding-bottom: 59px;\r\n\r\n    @media (min-width: 600px) {\r\n      padding-bottom: 80px;\r\n    }\r\n  }\r\n\r\n  em {\r\n    font-style: normal;\r\n  }\r\n  \r\n  :root {\r\n    --background: #fff;\r\n    --sections-text-color: #fff;\r\n  }\r\n\r\n  html {\r\n      // font-size: 16px (default)\r\n      @media (max-width: 1080px) {\r\n          font-size: 93.75%; // 15px\r\n      }\r\n      @media (max-width: 720px) {\r\n          font-size: 87.5%; // 14px\r\n      }\r\n  }\r\n  \r\n  button {\r\n    cursor: pointer;\r\n  }\r\n  [disabled] {\r\n    opacity: 0.6;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  nav {\r\n    position: fixed;\r\n    top: 10px;\r\n    left: 10px;\r\n    background: black;\r\n    padding: 0px 10px;\r\n    z-index: 1;\r\n  }\r\n\r\n  nav a {\r\n    color: white;\r\n    font-size: 1.3em;\r\n    line-height: 1.7;\r\n    text-decoration: none;\r\n  }\r\n\r\n  nav a:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  section {\r\n    .video {\r\n      display: none;\r\n      position: fixed;\r\n      top: 0;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n      opacity: 0;\r\n      transition: all 0.3s;\r\n      object-fit: fill;\r\n\r\n      &.active {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    div {\r\n      position: relative;\r\n      z-index: 2;\r\n\r\n      h1,\r\n      h2,\r\n      h3,\r\n      h4,\r\n      p {\r\n        color: var(--sections-text-color);\r\n        text-transform: uppercase;\r\n        font-weight: normal;\r\n        font-style: normal;\r\n        font-stretch: semi-condensed;\r\n        text-align: center;\r\n      }\r\n\r\n      h1 {\r\n        font-size: 66px;\r\n        font-weight: bold;\r\n        line-height: 1.02;\r\n        letter-spacing: 3.33px;\r\n      }\r\n\r\n      h3 {\r\n        text-align: center;\r\n        font-size: 35.5px;\r\n        line-height: 1.13;\r\n        letter-spacing: 2.84px;\r\n      }\r\n\r\n      h4 {\r\n        font-size: 25.5px;\r\n        line-height: 1.27;\r\n        letter-spacing: 1.28px;\r\n      }\r\n\r\n      p {\r\n        font-size: 20px;\r\n        line-height: 1.23;\r\n        letter-spacing: normal;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import { Footer } from './components/footer';\r\nimport { Sections } from './components/sections';\r\nimport { Menu } from './components/menu';\r\nimport GlobalStyle from './styles/global';\r\n\r\nlet sectionActive = ''\r\n\r\nexport function App() {\r\n  return (\r\n    <>\r\n      <GlobalStyle />\r\n      <Sections sectionActive={ sectionActive } />\r\n      <Footer />\r\n      <Menu />\r\n    </>\r\n  );\r\n}\r\n","// eslint-disable-next-line no-use-before-define\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport i18next from 'i18next';\r\nimport { I18nextProvider } from 'react-i18next';\r\nimport { App } from './App';\r\nimport commonEn from './translations/commonEn.json';\r\nimport commonZh from './translations/commonZh.json';\r\n\r\nwindow.localStorage.setItem('activeVideo', '')\r\n\r\ni18next.init({\r\n  interpolation: { escapeValue: false },\r\n  lng: 'zh',\r\n  resources: {\r\n    en: { common: commonEn },\r\n    zh: { common: commonZh }\r\n  },\r\n});\r\n\r\nReactDOM.render(\r\n  <React.StrictMode>\r\n    <I18nextProvider i18n={i18next}>\r\n      <App />\r\n    </I18nextProvider>\r\n  </React.StrictMode>,\r\n  document.getElementById('root'),\r\n);\r\n"],"sourceRoot":""}