{"version":3,"sources":["components/footer/Banner.js","assets/gsk_Logo.png","components/footer/Copyright.js","components/footer/References.js","components/footer/index.js","components/sections/content.js","assets/website_cover_PCimageEn.jpg","assets/website_cover_PCimageZh.jpg","assets/website_cover_mobimageEn.jpg","assets/website_cover_mobimageZh.jpg","components/sections/homepage/contentEN.js","components/sections/homepage/contentZH.js","components/sections/homepage/index.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","assets/take-action-img1.png","assets/take-action-img2.png","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","ChineseCopyrightCopy","_templateObject4","CopyrightCopyContent","_templateObject5","ChineseCopyrightCopyContent","_templateObject6","FooterCopyright","i18n","rows","i","concat","language","_jsxs","srcSet","gskLogo","type","src","alt","References","ReferencesTitle","ReferencesItem","b","FooterReferences","target","className","href","FooterElem","footer","Footer","FixedPanel","Section","Background","VideoHolder","Wrapper","MainElem","span","_templateObject7","main","_templateObject8","Button","button","_templateObject9","_templateObject10","props","left","HomeElemEN","HomeElemZH","Homepage","_document$querySelect","HomeElem","secPos","document","querySelector","getBoundingClientRect","posY","y","posH","height","isVisible","window","innerHeight","scrollY","isFixed","pcimageZh","pcimageEn","join","mobimageZh","mobimageEn","ReactPlayer","url","controls","width","playing","muted","loop","IntroElemEN","IntroElemZH","Intro","_document$querySelect2","IntroElem","secHomePos","HomeposY","HomeposH","isVisibleHome","bgImg","bgImgMobile","PainStateElemEN","PainSymptonsElemEN","PainStateElemZH","PainSymptonsElemZH","PainState","PainStateElem","map","val","PainSymptons","PainSymptonsElem","VideoElement","_ref","_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","scrollIntoView","event","_document$getElementB","preventDefault","getElementById","behavior","renderMenu","forEach","idx","onClick","dtlinktype","dtlinkname","preventLink","onscroll","ChangeLang","langCode","changeLanguage","title","closeIcon","createGlobalStyle","App","_Fragment","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.9181f1da.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_Logo.bcf6faca.png\";","import { useTranslation } from 'react-i18next';\r\nimport styled from 'styled-components';\r\nimport gskLogo from '../../assets/gsk_Logo.png';\r\n\r\nconst Copyright = styled.section`\r\n  background-color: #f8f8f8;\r\n  padding:4vh 3vw;   \r\n   \r\n  @media only screen and (min-width: 600px) {\r\n    display:flex;\r\n  }\r\n  \r\n`;\r\n\r\nconst CopyrightLogo = styled.img`\r\n  width: 120px;\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\r\n  @media only screen and (min-width: 600px) {\r\n    font-size: 0.62rem;\r\n    padding-top:25px;\r\n    text-align: left;\r\n    white-space: nowrap;\r\n  }\r\n  @media only screen and (max-width: 600px) {\r\n    font-size: 0.62rem;\r\n    padding-right:20px;\r\n    text-align: center;\r\n    padding-right: 0vh;\r\n    padding-top: 0vh;\r\n    white-space: nowrap;\r\n\r\n  }\r\n`;\r\n\r\nconst ChineseCopyrightCopy = 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\r\n  @media only screen and (min-width: 600px) {\r\n    font-size: 0.55rem;\r\n    padding-top:23px;\r\n    text-align: left;\r\n    white-space: nowrap;\r\n  }\r\n  @media only screen and (max-width: 600px) {\r\n    font-size: 0.62rem;\r\n    padding-right:20px;\r\n    text-align: center;\r\n    padding-right: 0vh;\r\n    padding-top: 0vh;\r\n    white-space: nowrap;\r\n\r\n  }\r\n`;\r\n\r\nconst CopyrightCopyContent = styled.div`\r\n      font-size: 0.82rem;\r\n      padding-top: 44px;\r\n      padding-left: 70vh;\r\n      display: flex;\r\n      flex-direction: row;\r\n    \r\n      span{\r\n        text-decoration: underline;\r\n        margin-right: 10px;\r\n        a{\r\n          color: black;\r\n        }\r\n      }\r\n      @media only screen and (min-width: 768px) {\r\n        padding-left: 17vh;\r\n        span{\r\n          margin-right: 10px;;\r\n        }\r\n      }\r\n      @media only screen and (min-width: 1024px) {\r\n        padding-left: 62vh;\r\n        span{\r\n          margin-right: 5vh;\r\n        }\r\n      }\r\n\r\n      @media only screen and (max-width: 600px) {\r\n        font-size: 0.62rem;\r\n        padding-left:0vh;\r\n        flex-direction: column;\r\n        padding-right: 0vh;\r\n        padding-top: 0;\r\n        white-space: nowrap;\r\n        padding: 2vh 4vh;\r\n        text-align: center;\r\n        span{\r\n          margin-right: 0px;\r\n        }\r\n      }\r\n\r\n`;\r\n\r\nconst ChineseCopyrightCopyContent = styled.div`\r\n      font-size: 0.82rem;\r\n      padding-top: 44px;\r\n      padding-left: 70vh;\r\n      display: flex;\r\n      flex-direction: row;\r\n    \r\n      span{\r\n        text-decoration: underline;\r\n        margin-right: 10px;\r\n        a{\r\n          color: black;\r\n        }\r\n      }\r\n      @media only screen and (min-width: 768px) {\r\n        padding-left: 25vh;\r\n        span{\r\n          margin-right: 10px;;\r\n        }\r\n      }\r\n      @media only screen and (min-width: 1024px) {\r\n        padding-left: 73vh;\r\n        span{\r\n          margin-right: 5vh;\r\n        }\r\n      }\r\n\r\n      @media only screen and (max-width: 600px) {\r\n        font-size: 0.62rem;\r\n        padding-left:0vh;\r\n        flex-direction: column;\r\n        padding-right: 0vh;\r\n        padding-top: 0;\r\n        white-space: nowrap;\r\n        padding: 2vh 4vh;\r\n        text-align: center;\r\n        span{\r\n          margin-right: 0px;\r\n        }\r\n      }\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  const language = i18n.language;\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      {language === 'zh' ?\r\n      <ChineseCopyrightCopy>\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      </ChineseCopyrightCopy>\r\n      :\r\n      <CopyrightCopy>\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      </CopyrightCopy>\r\n    }   \r\n\r\n    {language === 'zh' ?\r\n      <ChineseCopyrightCopyContent>\r\n       <span dangerouslySetInnerHTML={{ __html: `<a href=\"https://privacy.gsk.com/en-gb/privacy-notice/general\" target = \"_blank\" >${t('footer.copyright.copy4')}</a>`, }} />\r\n        <span dangerouslySetInnerHTML={{ __html: `<a href=\"https://www.gsk.com/en-gb/terms-of-use/\" target = \"_blank\" >${t('footer.copyright.copy5')}</a>`, }} />\r\n        <span dangerouslySetInnerHTML={{ __html: `<a href=\"https://www.gsk.com/en-gb/cookie-policy/\" target = \"_blank\" >${t('footer.copyright.copy6')}</a>`, }} />\r\n      </ChineseCopyrightCopyContent> \r\n    :\r\n      <CopyrightCopyContent>\r\n        <span dangerouslySetInnerHTML={{ __html: `<a href=\"https://privacy.gsk.com/en-gb/privacy-notice/general\" target = \"_blank\">${t('footer.copyright.copy4')}</a>`, }} />\r\n        <span dangerouslySetInnerHTML={{ __html: `<a href=\"https://www.gsk.com/en-gb/terms-of-use/\" target = \"_blank\" >${t('footer.copyright.copy5')}</a>`, }} />\r\n        <span dangerouslySetInnerHTML={{ __html: `<a href=\"https://www.gsk.com/en-gb/cookie-policy/\" target = \"_blank\" >${t('footer.copyright.copy6')}</a>`, }} />\r\n      </CopyrightCopyContent>           \r\n}\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: 0.87rem;\r\n    word-break: break-word;\r\n    padding:5vh 5vw;\r\n    padding-left:50px;\r\n    padding-right:50px;\r\n\r\n    @media only screen and (min-width: 600px) {\r\n      font-size: 0.62rem;\r\n    }\r\n    @media only screen and (max-width: 600px) {\r\n      font-size: 0.62rem;\r\n      padding-left:20px;\r\n      padding-right:20px;\r\n    }\r\n\r\n\r\n  .referenceAnchor {\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n    font-size: 0.87rem;\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: 0.62rem;\r\n    }\r\n    @media only screen and (max-width: 600px) {\r\n      font-size: 0.62rem;\r\n      text-align: center;\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.section`\r\n padding-bottom: 1px;\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 < 26; i += 1) {\r\n    rows = [\r\n      ...rows,\r\n      <span key={i}>\r\n        <ReferencesItem>{i}.&nbsp;</ReferencesItem>\r\n        {i <= 9 ? ' ' : ''}\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        {t(`footer.references.copy${i}.copy1`)}\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 - 80px);\r\n    @media (min-width: 600px) {\r\n      height: calc(100vh - px);\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","export default __webpack_public_path__ + \"static/media/website_cover_PCimageEn.2a684bb5.jpg\";","export default __webpack_public_path__ + \"static/media/website_cover_PCimageZh.92411c1c.jpg\";","export default __webpack_public_path__ + \"static/media/website_cover_mobimageEn.607363d7.jpg\";","export default __webpack_public_path__ + \"static/media/website_cover_mobimageZh.6b85a40b.jpg\";","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 - 70vh);\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 - 70vh);\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\nimport pcimageEn from \"../../../assets/website_cover_PCimageEn.jpg\"\r\nimport pcimageZh from \"../../../assets/website_cover_PCimageZh.jpg\"\r\nimport mobimageEn from \"../../../assets/website_cover_mobimageEn.jpg\"\r\nimport mobimageZh from \"../../../assets/website_cover_mobimageZh.jpg\"\r\n\r\nimport { HomeElemEN } from './contentEN';\r\nimport { HomeElemZH } from './contentZH';\r\nimport { ButtonElement } from '../button';\r\n\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'? pcimageZh : pcimageEn]} className={['home', isFixed ? 'fixed': '', isVisible || posY === 0 ? 'active' : '', 'desktop-img'].join(' ') } />\r\n      <Background alt=\"Shingles The Experience Lab\" src={[i18n.language === 'zh'? mobimageZh : mobimageEn]} 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/EN version Annie's Enduring Pain from Shingles since 2022.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","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\r\n  @media (min-width: 600px) {\r\n    margin: 0;\r\n  }\r\n  .info-container {\r\n     width:100vh;\r\n     display: flex;\r\n     flex-direction: column;\r\n     align-items: center;\r\n     margin-right:100px;\r\n  }\r\n\r\n\r\n    h4 {\r\n    text-align: center;\r\n    width: 480px;\r\n    margin: 10px 0px;\r\n    color: #fbfdff;\r\n    text-transform:none;\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n    letter-spacing:normal;\r\n   \r\n}\r\n\r\n  }\r\n  li{\r\n    margin-top:5px;\r\n    margin-bottom:5px;\r\n    text-align: center;\r\n    color: #d5dbe1;\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n    font-weight:200;\r\n    span{\r\n      position:relative;\r\n      right:7px;\r\n      top:0px;\r\n    }\r\n    \r\n  }\r\n  li::marker{\r\n      font-size:12px;\r\n    }\r\n  .sub-li{\r\n    width:390px;\r\n    text-align: center;\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n  }\r\n  h2{\r\n    color:#ff4b00;\r\n    font-weight:bold;\r\n    text-align: center;\r\n    font-size: 44px;\r\n    margin:10px 0px;\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n    text-transform:none;\r\n  }\r\n  h5{\r\n    color:#ff4b00;\r\n    text-align: center;\r\n    width:500px;\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n    font-weight:500;\r\n    font-stretch: semi-condensed;\r\n    font-size:17px;\r\n    margin-top:10px;\r\n  }\r\n  @media (max-width: 1000px) {\r\n    .info-container {\r\n      width:100vh;\r\n      right:0px;\r\n      margin-right:-10px;\r\n      margin-top:40px;\r\n      }\r\n      li{\r\n        width:auto;\r\n        margin-top:5px;\r\n        margin-bottom:5px;\r\n        font-family: 'Barlow Semi Condensed', sans-serif;\r\n        font-weight:200;\r\n      }\r\n  }\r\n  @media (max-width: 600px) {\r\n    .info-container {\r\n      width:100%;\r\n      left:5px;\r\n      top:5px;\r\n      display:flex;\r\n      flex-direction: column;\r\n      justify-content:flex-end;\r\n      }\r\n   h2{\r\n    \r\n    font-weight:bold;\r\n    text-align: left;\r\n    font-size: 28px;\r\n    font-family: 'Barlow Semi Condensed', sans-serif;  \r\n   }\r\n   h4{\r\n    font-size:20px;\r\n   }\r\n   li{\r\n    width:300px;\r\n    margin-top:5px;\r\n    margin-bottom:5px;\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n    font-weight:200;\r\n  }  \r\n  h5{\r\n    width:315px;\r\n    font-size:14px;\r\n    margin-top:2px;\r\n    br{\r\n      display:none;\r\n    }\r\n  }\r\n}\r\n`;","import styled from 'styled-components';\r\n\r\nexport const IntroElemZH = styled.div`\r\n@media (min-width: 600px) {\r\n  margin: 0;\r\n}\r\n.info-container {\r\n   width:100vh;\r\n   display: flex;\r\n   flex-direction: column;\r\n   align-items: center;\r\n   margin-right:100px;\r\n  margin-top:40px;\r\n}\r\n\r\nh4 {\r\n   text-align: center;\r\n   width: 440px;\r\n   margin: 10px 0px;\r\n   color: #fbfdff;\r\n   font-family: 'Barlow Semi Condensed', sans-serif;\r\n}\r\n }\r\n li{\r\n   margin-top:5px;\r\n   margin-bottom:5px;\r\n   text-align: center;\r\n   color: #d5dbe1;\r\n   font-family: 'Barlow Semi Condensed', sans-serif;\r\n   font-weight:200;\r\n   span{\r\n    position:relative;\r\n    right:7px;\r\n    top:0px;\r\n  }\r\n  \r\n}\r\nli::marker{\r\n    font-size:12px;\r\n  }\r\n .sub-li{\r\n   width:390px;\r\n   text-align: center;\r\n   font-family: 'Barlow Semi Condensed', sans-serif;\r\n }\r\n h2{\r\n   color:#ff4b00;\r\n   font-weight:bold;\r\n   text-align: center;\r\n   font-size: 60px;\r\n   margin:10px 0px;\r\n   font-family: 'Barlow Semi Condensed', sans-serif;\r\n   letter-spacing:normal;\r\n }\r\n h5{\r\n   color:#cf4d17;\r\n   text-align: center;\r\n   width:450px;\r\n   font-family: 'Barlow Semi Condensed', sans-serif;\r\n   font-weight:600;\r\n   font-size: 16px;\r\n   font-stretch: semi-condensed;\r\n   width:500px;\r\n   font-family: 'Barlow Semi Condensed', sans-serif;\r\n   font-weight:500;\r\n   font-stretch: semi-condensed;\r\n   font-size:17px;\r\n   margin-top:10px;\r\n }\r\n @media (max-width: 1199px) {\r\n  .info-container {\r\n    width:100vh;\r\n    right:0px;\r\n    margin-right:0px;\r\n    margin-top:30px;\r\n    \r\n    }\r\n    li{\r\n      width:auto;\r\n      margin-top:5px;\r\n      margin-bottom:5px;\r\n      font-family: 'Barlow Semi Condensed', sans-serif;\r\n      font-weight:200;\r\n    }\r\n}\r\n @media (max-width: 600px) {\r\n  .info-container {\r\n    width:100%;\r\n    left:5px;\r\n    top:50px;\r\n    display:flex;\r\n    flex-direction: column;\r\n    }\r\n h2{\r\n  \r\n  font-weight:bold;\r\n  text-align: left;\r\n  font-size: 28px;\r\n  font-family: 'Barlow Semi Condensed', sans-serif;  \r\n }\r\n h4{\r\n  font-size:18px;\r\n  width:320px;\r\n }\r\n li{\r\n  width:300px;\r\n  margin-top:20px;\r\n  margin-bottom:5px;\r\n  font-family: 'Barlow Semi Condensed', sans-serif;\r\n  font-weight:200;\r\n}\r\nh5{\r\n  width:300px;\r\n  font-size:14px;\r\n  margin-top:2px;\r\n  br{\r\n    display:none;\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\nimport { ArrowElement } from '../arrow';\r\nimport bgImg from '../../../assets/video_placeholder.png';\r\nimport bgImgMobile from '../../../assets/video_placeholder_mobile.png';\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='info-container'>\r\n              <h2\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.secIntro.header.copy1'),\r\n                }}\r\n              ></h2>\r\n              <h4\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.secIntro.header.copy2'),\r\n                }}\r\n              ></h4>\r\n              <li>\r\n                <span dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.secIntro.header.copy3'),\r\n                }}></span>\r\n              </li>\r\n              <li className='sub-li'>\r\n                <span dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.secIntro.header.copy4'),\r\n                }}></span>\r\n              </li>\r\n              <h5\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.secIntro.header.copy5'),\r\n                }}\r\n              >\r\n              </h5>\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  \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  .pain-state {\r\n    width: 600px;\r\n    font-family: 'Barlow Semi Condensed', sans-serif;\r\n    margin-bottom: 14vh;\r\n    line-height: 1.01;\r\n\r\n    @media (max-width: 1050px) {\r\n        display: flex;\r\n        align-items: center;\r\n        flex-direction: column;\r\n        justify-content: flex-end;\r\n        margin-right: 0vh;\r\n        margin-top: 20vh;\r\n        width: 100 vh;\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        justify-content: center;\r\n        margin-right: 0vh;\r\n        margin-top: 20vh;\r\n        width: 100%;\r\n    }\r\n\r\n    .header h6 {\r\n        text-align: start;\r\n        color: #f1f2f3;\r\n        font-size: 14px;\r\n        font-weight: normal;\r\n\r\n        @media (max-width: 600px) {\r\n            font-size: 14px;\r\n            margin-bottom: 14px;\r\n            text-align:center;\r\n        }\r\n    }\r\n\r\n\r\n    .sub {\r\n        width: 400px;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 20px;\r\n\r\n        @media (max-width: 600px) {\r\n            width: 400px;\r\n        }\r\n\r\n        li {\r\n            font-size: 35px;\r\n            margin-bottom: 10px;\r\n            min-width: 100px;\r\n            font-weight: 500;\r\n            font-style: normal;\r\n            letter-spacing: normal;\r\n            color: #f1f2f3;\r\n            text-transform: initial;\r\n\r\n            span {\r\n                position: relative;\r\n                right: 6px;\r\n                top: 5px;\r\n            }\r\n\r\n            @media (max-width: 600px) {\r\n                min-width:80px;\r\n                font-size: 21px;\r\n                span {\r\n                    position: relative;\r\n                    right: 5px;\r\n                    top: 0px;\r\n                }\r\n            }\r\n            @media (max-width: 400px) {\r\n                span {\r\n                    left: 0px;\r\n                    top: 0px;\r\n                }\r\n            }\r\n        }\r\n        li:nth-child(2) {\r\n            margin-right: 35px;\r\n        }\r\n\r\n        li::marker {\r\n            font-size: 17px;\r\n        }\r\n    }\r\n    .disclaimer {\r\n        width:400px;\r\n        h6 {\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            font-size:14px;\r\n            }\r\n            @media (max-width: 600px) {\r\n              max-width:400px;\r\n              width:100%;\r\n              display:flex;\r\n              align-items:center;\r\n              justify-content:center;\r\n                br{\r\n                  display:none  ;\r\n                }\r\n        }\r\n    }\r\n}\r\n`;\r\n\r\nexport const PainSymptonsElemEN = styled.div`\r\n  height: calc(100vh - 0px);\r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 0px);\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 - 0px);\r\n    margin: 0;\r\n    .fixed-content {\r\n      height: calc(100vh - 0px);\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  .pain-symptoms {\r\n    margin-top:50px;\r\n    .pain-symptoms-cont1{\r\n      width:100%;\r\n      text-align:center;\r\n      color: #fff;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 21px;\r\n      right:3.5%;\r\n      margin-right:500px;\r\n      span{\r\n        display:block;\r\n        font-weight:100;\r\n        font-style:normal;\r\n\r\n      }\r\n      @media (max-width: 950px) {\r\n        max-width: 100%;\r\n        font-size:22px;\r\n        right:0%;\r\n        margin-top: 0px;\r\n        \r\n      }\r\n      @media (max-width: 600px) {\r\n        max-width: 100%;\r\n        \r\n        font-size:18px;\r\n        right:0%;\r\n      }\r\n    }\r\n    @media (max-width: 900px) {\r\n      margin-top:0px;\r\n    }\r\n    @media (max-width: 600px) {\r\n      margin-top:50px;\r\n    }\r\n\r\n    .pain-symptoms-cont2{\r\n      max-width:1300px;\r\n      color: #fff;\r\n      position:relative;\r\n      left:6%;\r\n      margin-top:20px;\r\n      @media (max-width: 600px) {\r\n        margin-top:10px;\r\n        br{\r\n          display:none;\r\n        }\r\n\r\n      }\r\n      .cont2-sub1{        \r\n        font-size: 25px;\r\n        color: #e85800;\r\n        position:relative;\r\n        bottom:10px;\r\n        left:7%;\r\n        text-align:center;\r\n        display:flex;\r\n        @media (max-width: 600px) {\r\n          left:-10px;\r\n          font-size:18px;\r\n          bottom:0px;\r\n        }\r\n      }\r\n      .cont2-sub2{\r\n        font-family: 'Barlow Semi Condensed', sans-serif;\r\n        text-transform:none;\r\n        font-size: 38px;\r\n        font-weight:600;\r\n        position:absolute;\r\n        right:200px;\r\n        top:0%;\r\n        color: #e85800;\r\n        text-align:center;\r\n        @media (max-width: 900px) {\r\n          padding:40px 0px;\r\n          font-size: 24px;\r\n        }\r\n        @media (max-width: 600px) {\r\n          font-size: 23px;\r\n          position:relative;\r\n          left:-20px;\r\n          padding:0px 0px;\r\n          font-weight:600;\r\n        }\r\n      }\r\n      .cont2-sub3{\r\n        font-size: 25px;\r\n        color: #e85800;\r\n        position:relative;\r\n        left:140px;\r\n        letter-spacing: 1px;\r\n        text-align:center;\r\n        display:flex;\r\n        padding-top:60px;\r\n        @media (max-width: 900px) {\r\n          top:0%;\r\n          padding-top:70px;\r\n          font-size: 22px;\r\n          left:20%;\r\n        }\r\n        @media (max-width: 600px) {\r\n          padding-top:0px;\r\n          font-size: 18px;\r\n          left:-20px;\r\n        }\r\n      }\r\n    }\r\n    .pain-symptoms-cont3{\r\n      color: #fff;\r\n      text-align:center;\r\n      position:relative;\r\n      left:10rem;\r\n      @media (max-width: 900px) {\r\n        left:4vh;\r\n        bottom:3%;\r\n      }\r\n      @media (max-width: 600px) {\r\n        left:0px;\r\n      }\r\n      .cont3-sub1{     \r\n        font-size:25px;\r\n        font-weight:600;\r\n        margin-top:20px;\r\n        margin-bottom: 10px;\r\n        @media (max-width: 600px) {\r\n          margin-top:15px;\r\n          font-size:20px;\r\n        }\r\n      }\r\n      .cont3-sub2{\r\n        font-size:14px;\r\n        font-weight:normal;\r\n        line-height:1.4;\r\n        letter-spacing:1px;\r\n        @media (max-width: 600px) {\r\n          color: #fff;\r\n          line-height:1;\r\n        }\r\n      }\r\n     \r\n    }\r\n    .pain-symptoms-cont4{\r\n      .cont4-sub1{\r\n        color: #fff; \r\n        font-size:13px;\r\n        margin-left:50px;\r\n        @media (max-width: 600px) {\r\n          width:100%;\r\n          margin:0px;\r\n          margin-bottom:50px;\r\n          display:flex;\r\n          align-items:center;\r\n          justify-content:center;\r\n        }\r\n      }\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemZH = styled.div`\r\nheight: 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  .holder {\r\n    padding-right: 9vw;\r\n    justify-content: flex-end;\r\n  }\r\n}\r\n.pain-state {\r\n  width: 500px;\r\n  font-family: 'Barlow Semi Condensed', sans-serif;\r\n  margin-bottom: 14vh;\r\n  line-height: 1.01;\r\n  margin-right: 130px;\r\n\r\n  @media (max-width: 1040px) {\r\n      display: flex;\r\n      align-items: center;\r\n      flex-direction: column;\r\n      justify-content: flex-end;\r\n      margin-right: 0vh;\r\n      margin-top: 20vh;\r\n      width: 100 vh;\r\n  }\r\n  @media (max-width: 600px) {\r\n      justify-content: center;\r\n      margin-left: 2vh;\r\n      margin-top: 20vh;\r\n      width: 100%;\r\n  }\r\n  .header h6 {\r\n      text-align: center;\r\n      color: white;\r\n      font-size:21px;\r\n      font-weight: 200;\r\n      @media (max-width: 600px) {\r\n          font-size: 20px;\r\n          margin-right:10px;\r\n          margin-bottom: 14px;\r\n      }\r\n  }\r\n  .sub {\r\n      width: 550px;\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      color: #f1f2f3;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 18px;\r\n      margin-left:0px;\r\n      @media (max-width: 600px) {\r\n          width: 400px;\r\n      }\r\n      li {\r\n          font-size: 34px;\r\n          min-width: 130px;\r\n          font-weight: 600;\r\n          font-style: normal;\r\n          letter-spacing: normal;\r\n          color:#f1f2f3;\r\n          text-transform: initial;\r\n          span {\r\n              position: relative;\r\n              right: 6px;\r\n              top: 5px;\r\n          }\r\n          @media (max-width: 600px) {\r\n              font-size: 21px;\r\n              gap: 0px;\r\n              min-width: 100px;\r\n          }\r\n          @media (max-width: 400px) {\r\n              font-size: 19px;\r\n              gap: 0px;\r\n              min-width: 90px;\r\n          }\r\n      }\r\n    li::marker {\r\n        font-size: 17px;\r\n    }\r\n  }\r\n      .disclaimer {\r\n          h6 {\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              font-size:21px;\r\n              font-weight: 200;\r\n              @media (max-width: 600px) {\r\n                max-width:400px;\r\n                width:100%;\r\n                display:flex;\r\n                align-items:center;\r\n                justify-content:center;\r\n                  br{\r\n                    display:none  ;\r\n                  }\r\n          }\r\n      }\r\n  }\r\n\r\n`;\r\n\r\nexport const PainSymptonsElemZH = styled.div`\r\n \r\n  height: calc(100vh - 0px);\r\n  .fixed-content {\r\n    background: rgba(0,0,0,.5);\r\n    height: calc(100vh - 0px);\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 - 0px);\r\n    margin: 0;\r\n    .fixed-content {\r\n      height: calc(100vh - 0px);\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  .pain-symptoms {\r\n      margin-bottom:40px;\r\n    .pain-symptoms-cont1{ \r\n      text-align:center;\r\n      color: #fff;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 29px;\r\n      margin-right:10px;\r\n \r\n      span{\r\n        display:block;\r\n        font-weight:200;\r\n        font-style:normal;\r\n\r\n      }\r\n      @media (max-width: 600px) {\r\n        max-width: 100%;\r\n        margin-top:10px;\r\n        font-size:20px;\r\n        \r\n        right:0%;\r\n  \r\n      }\r\n    }\r\n    @media (max-width: 600px) {\r\n      margin-top:10px;\r\n      margin-bottom:10px;\r\n    }\r\n\r\n    .pain-symptoms-cont2{\r\n      max-width:1300px;\r\n      color: #fff;\r\n      position:relative;\r\n      left:6%;\r\n      margin-top:20px;\r\n      @media (max-width: 600px) {\r\n        margin-top:10px;\r\n        br{\r\n          display:none;\r\n        }\r\n\r\n      }\r\n      .cont2-sub1{        \r\n        font-size: 29px;\r\n        color: #e85800;\r\n        position:relative;\r\n        left:13%;\r\n        text-align:center;\r\n        display:flex;\r\n        @media (max-width: 600px) {\r\n          left:0px;\r\n        }\r\n      }\r\n      .cont2-sub2{\r\n        font-family: 'Barlow Semi Condensed', sans-serif;\r\n        text-transform:none;\r\n        font-size: 46px;\r\n        font-weight:500;\r\n        position:absolute;\r\n        right:250px;\r\n        bottom:30px;\r\n        color: #e85800;\r\n        text-align:center;\r\n        @media (max-width: 950px) {\r\n             font-size:33px;\r\n             right:150px;\r\n             bottom:50px;\r\n        }\r\n        @media (max-width: 600px) {\r\n          font-size: 30px;\r\n          position:relative;\r\n          left:-30px;\r\n          bottom:20px;\r\n          br{\r\n            display:none;\r\n          }\r\n        }\r\n      }\r\n      .cont2-sub3{\r\n        font-size: 25px;\r\n        color: #e85800;\r\n        position:relative;\r\n        left:280px;\r\n        letter-spacing: 1px;\r\n        text-align:center;\r\n        display:flex;\r\n        padding-top:60px;\r\n        @media (max-width: 600px) {\r\n          padding-top:0px;\r\n          left:-30px;\r\n        }\r\n      }\r\n    }\r\n    .pain-symptoms-cont3{\r\n      color: #fff;\r\n      text-align:center;\r\n      position:relative;\r\n      left:0px;\r\n      top:50px;\r\n      @media (max-width: 950px) {\r\n        left:0px;\r\n        top:10px;\r\n      }\r\n      @media (max-width: 600px) {\r\n        left:0px;\r\n        top:0px;\r\n      }\r\n      .cont3-sub1{         \r\n        font-size:25px;\r\n        font-weight:600;\r\n        margin-top:20px;\r\n        margin-bottom: 10px;\r\n        @media (min-width: 600px) {\r\n          margin-top:10px;\r\n          margin-bottom: 0px;\r\n        }\r\n      }\r\n      .cont3-sub2{\r\n        font-size:14px;\r\n        font-weight:normal;\r\n        line-height:1.4;\r\n        letter-spacing:1px;\r\n        @media (max-width: 600px) {\r\n          color: #fff;\r\n        }\r\n      }\r\n     \r\n    }\r\n    .pain-symptoms-cont4{\r\n      position:relative;\r\n      top:80px;\r\n      @media (max-width: 600px) {\r\n        top:0px;\r\n      }\r\n      .cont4-sub1{\r\n        font-size:13px;\r\n        color: #fff; \r\n        font-weight:200;\r\n        margin-left:50px;\r\n      @media (max-width: 900px) {\r\n            margin-bottom:40px;\r\n        }\r\n        @media (max-width: 600px) {\r\n          margin-left:0px;\r\n          top:0px;\r\n          width:100%;\r\n          display:flex;\r\n          align-items:center;\r\n          justify-content:center;\r\n          color: #fff; \r\n        }\r\n      }\r\n      }\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-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=\"pain-state\">\r\n          <div className={\"header\"}>\r\n            <h6\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painState.header.copy1'),\r\n              }}\r\n            />\r\n          </div>\r\n          <div className={\"sub\"}>\r\n            {[1, 2, 3, 4, 5, 6].map((val) => <li\r\n              key={val}\r\n            >\r\n              <span dangerouslySetInnerHTML={{\r\n                __html: t(`content.sections.sec1.painState.sub.copy${val}`),\r\n              }}></span>\r\n            </li>)}\r\n          </div>\r\n          <div className={\"disclaimer\"}>\r\n            <h6\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painState.disclaimer.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 className={\"pain-symptoms\"}>\r\n          <div className={\"pain-symptoms-cont1\"}>\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={\"pain-symptoms-cont2\"}>\r\n            <span className={\"cont2-sub1\"}\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painSymptons.header.copy2'),\r\n              }}\r\n            />\r\n            <h3 className={\"cont2-sub2\"}\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painSymptons.header.copy3'),\r\n              }}\r\n            />\r\n            <span className={\"cont2-sub3\"}\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painSymptons.header.copy4'),\r\n              }}\r\n            />\r\n          </div>\r\n          <div className={\"pain-symptoms-cont3\"}>\r\n            <div className={\"cont3-sub1\"}\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painSymptons.header.copy5'),\r\n              }}\r\n            />\r\n            <div className={\"cont3-sub2\"}\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec1.painSymptons.header.copy6'),\r\n              }}\r\n            />\r\n          </div>\r\n          <div className={\"pain-symptoms-cont4\"}>\r\n          <div className={\"cont4-sub1\"}\r\n             dangerouslySetInnerHTML={{\r\n              __html: t('content.sections.sec1.painSymptons.header.copy7'),\r\n            }}/>\r\n          </div>\r\n\r\n\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\r\n  .fixed-content {\r\n    height: calc(100vh - 59px);\r\n    align-items: flex-end;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  .impact-on-life1 {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: 400px;\r\n    height: 400px;\r\n    color: #fff;\r\n    margin-left: 8%;\r\n    text-transform: none;\r\n\r\n    @media (max-width: 600px) {\r\n        width: 100vw;\r\n        margin-left: 0px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .sub-container1 {\r\n        width: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: flex-start;\r\n        align-items: flex-start;\r\n\r\n        @media (max-width: 600px) {\r\n            width: auto;\r\n\r\n        }\r\n\r\n        h1 {\r\n            font-size: 59px;\r\n            margin: 0;\r\n            padding: 0;\r\n            color: #ff4b00;\r\n\r\n            @media (max-width: 600px) {\r\n                font-size: 39px;\r\n            }\r\n        }\r\n\r\n        h2 {\r\n            font-size: 35px;\r\n            margin: 0;\r\n            padding: 0;\r\n            text-transform: none;\r\n\r\n            @media (max-width: 600px) {\r\n                font-size: 25px;\r\n            }\r\n        }\r\n    }\r\n\r\n    .sub-container2 {\r\n        margin-top: 20px;\r\n        width: 100%;\r\n        height: 300px;\r\n        display: flex;\r\n        justify-content: flex-start;\r\n        align-items: flex-start;\r\n        flex-direction: column;\r\n        text-align: center;\r\n        padding: 0px;\r\n\r\n        @media (max-width: 600px) {\r\n            width: auto;\r\n\r\n        }\r\n\r\n        .sub2-inner-cont {\r\n            position: relative;\r\n\r\n        }\r\n\r\n        .cont2-copy1 {\r\n            color: #ff4b00;\r\n            font-size: 14px;\r\n            font-weight: 200;\r\n            width: 100%;\r\n        }\r\n\r\n        .cont2-copy3 {\r\n            width: 100%;\r\n            font-size: 12px;\r\n            font-weight: 200;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n\r\n            @media (max-width: 600px) {\r\n                width: auto;\r\n                margin-left: 20px;\r\n\r\n            }\r\n\r\n        }\r\n\r\n        .corners {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 395px;\r\n\r\n            @media (max-width: 600px) {\r\n                width: 300px;\r\n\r\n            }\r\n\r\n            .cont2-copy2 {\r\n                line-height: 1.21;\r\n                font-size: 15px;\r\n                background: #323839;\r\n                text-transform: none;\r\n                padding: 11px 20px;\r\n                font-weight: 100;\r\n                text-align: start;\r\n                letter-spacing: 0.1px;\r\n                word-spacing: 2px;\r\n\r\n                @media (max-width: 600px) {\r\n                    width: 300px;\r\n                    padding: 5px 10px;\r\n                    line-height: normal;\r\n                    font-size: 13px;\r\n                    letter-spacing: 0.1px;\r\n                    word-spacing: 0px;\r\n\r\n                }\r\n\r\n\r\n            }\r\n\r\n        }\r\n\r\n        .top,\r\n        .bottom {\r\n            position: absolute;\r\n            width: 50px;\r\n            height: 50px;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .top {\r\n            top: 7px;\r\n            border-top: 10px solid #fff;\r\n            width: 20px;\r\n        }\r\n\r\n        .bottom {\r\n            bottom: 7px;\r\n            border-bottom: 10px solid #fff;\r\n            width: 20px;\r\n        }\r\n\r\n        .left {\r\n            left: 3px;\r\n            border-left: 10px solid #fff;\r\n            height: 40px;\r\n        }\r\n\r\n        .right {\r\n            right: 3px;\r\n            border-right: 10px solid #fff;\r\n            height: 40px;\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            .top {\r\n                top: 5px;\r\n            }\r\n\r\n            .bottom {\r\n                bottom: 5px;\r\n            }\r\n\r\n            .left {\r\n                left: -7px;\r\n            }\r\n\r\n            .right {\r\n                right: -7px;\r\n            }\r\n        }\r\n    }\r\n}\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  .impact-on-life2 {\r\n    width: 500px;\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    margin-top: 150px;\r\n\r\n    @media (max-width: 1024px) {\r\n        justify-content: center;\r\n        margin-top: 30px;\r\n\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        justify-content: center;\r\n        width: 100%;\r\n        margin-top: 30px;\r\n\r\n    }\r\n\r\n    @media (max-width: 400px) {\r\n        justify-content: center;\r\n\r\n    }\r\n\r\n    .impact-container {\r\n        color: #fff;\r\n        text-align: right;\r\n        padding: 0 15px;\r\n        max-width: 420px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 20px;\r\n\r\n\r\n\r\n        @media (max-width: 420px) {\r\n            width: 300px;\r\n\r\n        }\r\n\r\n        .cont-1 {\r\n            color: #ff4b00;\r\n            width: 400px;\r\n            text-align: center;\r\n\r\n        }\r\n\r\n        .cont-2 {\r\n            background: #323839;\r\n            text-align: justify;\r\n            padding: 10px 15px;\r\n\r\n            span {\r\n                font-weight: 100;\r\n                font-size: 16px;\r\n\r\n                br {\r\n                    display: none;\r\n                }\r\n\r\n                display:inline;\r\n\r\n            }\r\n\r\n            @media (max-width: 420px) {\r\n                padding: 5px 5px;\r\n\r\n                span {\r\n                    display: flex;\r\n                    flex-wrap: wrap;\r\n                    font-weight: 100;\r\n                    font-size: 13px;\r\n\r\n                    br {\r\n                        display: none;\r\n                    }\r\n\r\n                    display:inline;\r\n\r\n                }\r\n\r\n            }\r\n\r\n            .corners {\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n\r\n                .top,\r\n                .bottom {\r\n                    position: absolute;\r\n                    width: 50px;\r\n                    height: 50px;\r\n                    pointer-events: none;\r\n                }\r\n\r\n                .top {\r\n                    top: -16px;\r\n                    border-top: 10px solid #fff;\r\n                    width: 20px;\r\n                }\r\n\r\n                .bottom {\r\n                    bottom: -16px;\r\n                    border-bottom: 10px solid #fff;\r\n                    width: 20px;\r\n                }\r\n\r\n                .left {\r\n                    left: -20px;\r\n                    border-left: 10px solid #fff;\r\n                    height: 40px;\r\n                }\r\n\r\n                .right {\r\n                    right: -20px;\r\n                    border-right: 10px solid #fff;\r\n                    height: 40px;\r\n                }\r\n\r\n                @media (max-width: 420px) {\r\n                    .top {\r\n                        top: -13px;\r\n                    }\r\n\r\n                    .bottom {\r\n                        bottom: -13px;\r\n                    }\r\n\r\n                    .left {\r\n                        left: -13px;\r\n                    }\r\n\r\n                    .right {\r\n                        right: -13px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .cont-3 {\r\n            text-align: center;\r\n            font-size: 13px;\r\n            margin-top: 10px;\r\n        }\r\n    }\r\n}\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemZH = styled.div`\r\nheight: 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-start;\r\n}\r\n.impact-on-life1 {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 600px;\r\n  height: 350px;\r\n  gap: 5px;\r\n  color: #fff;\r\n  margin-left: 8%;\r\n  text-transform: none;\r\n\r\n  @media (max-width: 600px) {\r\n      width: 100vw;\r\n      margin-left: 0px;\r\n      margin: 0 auto;\r\n  }\r\n\r\n  .sub-container1 {\r\n      width: 100%;\r\n      display: flex;\r\n      justify-content: flex-start;\r\n      align-items: flex-start;\r\n\r\n      @media (max-width: 600px) {\r\n          width: auto;\r\n\r\n      }\r\n\r\n      h1 {\r\n          font-size: 59px;\r\n          margin: 0;\r\n          padding: 0;\r\n          color: #ff4b00;\r\n\r\n          @media (max-width: 600px) {\r\n            font-size: 33px;;\r\n          }\r\n      }\r\n\r\n      h2 {\r\n        font-size: 30px;\r\n        margin-bottom:5px;\r\n        position:relative;\r\n        top:-5px;\r\n        padding: 0;\r\n        text-transform:none;\r\n          sup{\r\n            font-size:20px;\r\n          }\r\n          @media (max-width: 600px) {\r\n            font-size: 20px;\r\n            top:-15px;\r\n          }\r\n      }\r\n  }\r\n\r\n  .sub-container2 {\r\n      margin-top: 0px;\r\n      width: 100%;\r\n      height: 300px;\r\n      display: flex;\r\n      align-items: flex-start;\r\n      flex-direction: column;\r\n\r\n      padding: 0px;\r\n\r\n      @media (max-width: 600px) {\r\n          width: auto;\r\n\r\n      }\r\n\r\n      .sub2-inner-cont {\r\n          position: relative;\r\n\r\n      }\r\n\r\n      .cont2-copy1 {\r\n          color: #ff4b00;\r\n          margin-left: 100px;\r\n          font-size: 14px;\r\n          font-weight: 200;\r\n          text-align: center;\r\n\r\n          @media (max-width: 600px) {\r\n              width: auto;\r\n              margin-left: 60px;\r\n\r\n          }\r\n      }\r\n\r\n      .cont2-copy3 {\r\n          width: 100%;\r\n          margin-left: 60px;\r\n          font-size: 12px;\r\n          font-weight: 200;\r\n          text-align: center;\r\n          display: flex;\r\n          align-items: center;\r\n\r\n          @media (max-width: 600px) {\r\n              width: auto;\r\n              margin-left: 20px;\r\n\r\n          }\r\n\r\n      }\r\n\r\n      .corners {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          width: 375px;\r\n\r\n          @media (max-width: 600px) {\r\n              width: 300px;\r\n\r\n          }\r\n\r\n          .cont2-copy2 {\r\n              line-height: 1.21;\r\n              font-size: 15px;\r\n              background:#323839;\r\n              text-transform: none;\r\n              padding: 11px 20px;\r\n              font-weight: normal;\r\n              text-align: start;\r\n              letter-spacing: 1px;\r\n              word-spacing: 2px;\r\n              span{\r\n                color:#ff4b00\r\n               }\r\n              @media (max-width: 600px) {\r\n                  width: 300px;\r\n                  padding: 5px 10px;\r\n                  line-height: normal;\r\n                  font-size: 13px;\r\n\r\n              }\r\n\r\n\r\n          }\r\n\r\n      }\r\n\r\n      .top,\r\n      .bottom {\r\n          position: absolute;\r\n          width: 50px;\r\n          height: 50px;\r\n          pointer-events: none;\r\n      }\r\n\r\n      .top {\r\n          top: 7px;\r\n          border-top: 10px solid #fff;\r\n          width: 20px;\r\n      }\r\n\r\n      .bottom {\r\n          bottom: 7px;\r\n          border-bottom: 10px solid #fff;\r\n          width: 20px;\r\n      }\r\n\r\n      .left {\r\n          left: 0px;\r\n          border-left: 10px solid #fff;\r\n          height: 40px;\r\n      }\r\n\r\n      .right {\r\n          right: 0px;\r\n          border-right: 10px solid #fff;\r\n          height: 40px;\r\n      }\r\n\r\n      @media (max-width: 600px) {\r\n\r\n\r\n          .left {\r\n              left: -7px;\r\n          }\r\n\r\n          .right {\r\n              right: -7px;\r\n          }\r\n      }\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  .impact-on-life2 {\r\n    width: 500px;\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    margin-top: 200px;\r\n\r\n    @media (max-width: 1024px) {\r\n        justify-content: center;\r\n        margin-top: 30px;\r\n\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        justify-content: center;\r\n        width: 100%;\r\n        margin-top: 30px;\r\n\r\n    }\r\n\r\n    @media (max-width: 400px) {\r\n        justify-content: center;\r\n\r\n    }\r\n\r\n    .impact-container {\r\n        color: #fff;\r\n        text-align: right;\r\n        padding: 0 15px;\r\n        max-width: 405px;\r\n\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 20px;\r\n\r\n        @media (max-width: 420px) {\r\n            width: 300px;\r\n\r\n        }\r\n\r\n        .cont-1 {\r\n            color: #ff4b00;\r\n            width: 400px;\r\n            text-align: center;\r\n            font-size: 19px;\r\n\r\n            sup {\r\n                font-size: 13px;\r\n            }\r\n\r\n        }\r\n\r\n        .cont-2 {\r\n            background: #323839;\r\n            text-align: justify;\r\n            padding: 10px 15px;\r\n            letter-spacing: 1px;\r\n\r\n            span {\r\n                font-weight: 100;\r\n                font-size: 16px;\r\n\r\n                br {\r\n                    display: none;\r\n                }\r\n\r\n                display:inline;\r\n\r\n            }\r\n\r\n            @media (max-width: 420px) {\r\n                padding: 5px 5px;\r\n\r\n                span {\r\n                    display: flex;\r\n                    flex-wrap: wrap;\r\n                    font-weight: 100;\r\n                    font-size: 13px;\r\n\r\n                    br {\r\n                        display: none;\r\n                    }\r\n\r\n                    display:inline;\r\n\r\n                }\r\n\r\n            }\r\n\r\n            .corners {\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n\r\n                .top,\r\n                .bottom {\r\n                    position: absolute;\r\n                    width: 50px;\r\n                    height: 50px;\r\n                    pointer-events: none;\r\n                }\r\n\r\n                .top {\r\n                    top: -16px;\r\n                    border-top: 10px solid #fff;\r\n                    width: 20px;\r\n                }\r\n\r\n                .bottom {\r\n                    bottom: -16px;\r\n                    border-bottom: 10px solid #fff;\r\n                    width: 20px;\r\n                }\r\n\r\n                .left {\r\n                    left: -20px;\r\n                    border-left: 10px solid #fff;\r\n                    height: 40px;\r\n                }\r\n\r\n                .right {\r\n                    right: -20px;\r\n                    border-right: 10px solid #fff;\r\n                    height: 40px;\r\n                }\r\n\r\n                @media (max-width: 420px) {\r\n                    .top {\r\n                        top: -13px;\r\n                    }\r\n\r\n                    .bottom {\r\n                        bottom: -13px;\r\n                    }\r\n\r\n                    .left {\r\n                        left: -13px;\r\n                    }\r\n\r\n                    .right {\r\n                        right: -13px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .cont-3 {\r\n            text-align: center;\r\n            font-size: 13px;\r\n            margin-top: 10px;\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-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=\"impact-on-life1\">\r\n          <div className=\"sub-container1\">\r\n            <h1 dangerouslySetInnerHTML={{ __html: t('content.sections.sec2.painState.header.copy1') }} className=\"new-h1-class\"></h1>\r\n            <h2 dangerouslySetInnerHTML={{ __html: t('content.sections.sec2.painState.header.copy2') }} className=\"new-h2-class\"></h2>\r\n          </div>\r\n          <div className=\"sub-container2\">\r\n            <div dangerouslySetInnerHTML={{ __html: t('content.sections.sec2.painState.header.copy3') }} className=\"cont2-copy1\" />\r\n\r\n            <div className=\"sub2-inner-cont\">\r\n              <div className=\"corners\">\r\n                <div className=\"top left\"></div>\r\n                <div className=\"bottom right\"></div>\r\n\r\n                <p dangerouslySetInnerHTML={{\r\n                  __html: t(`content.sections.sec2.painState.header.copy4`)\r\n                }} className=\"cont2-copy2\"></p>\r\n              </div>\r\n            </div>\r\n            <div dangerouslySetInnerHTML={{ __html: t(`content.sections.sec2.painState.header.copy5`) }} className=\"cont2-copy3\" />\r\n          </div>\r\n        </div>\r\n\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=\"impact-on-life2\">\r\n          <div className='impact-container'>\r\n            <div className=\"cont-1\">\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=\"cont-2\">\r\n              <div className=\"corners\">\r\n                <div className=\"top left\"></div>\r\n                <div className=\"bottom right\"></div>\r\n                <span\r\n                  dangerouslySetInnerHTML={{\r\n                    __html: t('content.sections.sec2.impact.header.copy2'),\r\n                  }}\r\n                />\r\n              </div>\r\n            </div>\r\n            <div className=\"cont-3\">\r\n              <span\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.sec2.impact.header.copy3'),\r\n                }}\r\n              />\r\n            </div>\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            color: #fff;\r\n            display: flex;\r\n            flex-direction: column;\r\n            font-size: 0.87rem;\r\n            margin-bottom: 10vh;\r\n            width: 450px;\r\n            text-transform: none;\r\n            @media only screen and (max-width: 600px) {\r\n              margin: 0 auto;\r\n              text-align: center;\r\n              padding: 0 20px;\r\n              width: auto;\r\n            }\r\n  \r\n   \r\n            .header_content0,.header_content1,.header_content2,.header_content3 {\r\n              margin-bottom: 20px;\r\n              font-family: 'Barlow Semi Condensed', sans-serif;\r\n              font-size: 0.87rem;           \r\n              text-align: left;\r\n              \r\n              @media only screen and (max-width: 600px) {\r\n                margin: 0 auto;\r\n                margin-top: 5px;\r\n                text-align: center;\r\n                padding-left: 20px;\r\n                padding-right: 20px;\r\n              }\r\n            }\r\n  \r\n            .header_content1 , .header_content2,.header_content3{\r\n              text-align-last: left;\r\n              margin-bottom: 25px;\r\n            }\r\n\r\n            @media only screen and (max-width: 600px) {\r\n              .header_content1,\r\n              .header_content2,\r\n              .header_content3 {\r\n                margin-left: 0; \r\n                text-align: left; \r\n                br {\r\n                  display: none;\r\n                }\r\n              }\r\n            }\r\n   \r\n            .header_content2--section {\r\n              .breakTag {\r\n                @media only screen and (max-width: 600px) {\r\n                  display: block;\r\n                }\r\n              }\r\n            }\r\n   \r\n            .header_content0 {\r\n                  h3 {\r\n                      font-size: 2.81rem;\r\n                      color: #ff5917;\r\n                      padding: 1vh 46vh 0 0vh;\r\n                      margin-bottom: 3px;\r\n                  \r\n                      @media only screen and  (max-width: 600px) {\r\n                        padding: 14px 75px 0 0;\r\n                        margin-bottom: 12px;\r\n                        font-size: 2.12rem;\r\n                        text-align: center;\r\n                      }\r\n                  }\r\n            }\r\n   \r\n            .header_content2{\r\n                  .header_content2--section{\r\n                    font-size: 1.56rem;\r\n                    @media only screen and (max-width: 600px) {\r\n                      font-size: 0.93rem;\r\n                      margin-bottom: 0;\r\n                    }\r\n                  }\r\n            }\r\n\r\n            .header_content3{\r\n                .header_content3--section{ \r\n                  @media only screen and (max-width: 600px) {\r\n                    font-size: 0.93rem;\r\n                    margin-bottom: 0;\r\n                  }\r\n                }\r\n              }\r\n   \r\n            .header_content2 ,.header_content3{\r\n                span {\r\n                  color: #ff5917;\r\n                  font-size: 1.56rem;\r\n                  @media only screen and (min-width: 300px) and (max-width: 600px) {\r\n                    font-size: 1.25rem;\r\n                    margin-bottom: 0;\r\n                  }\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            letter-spacing:0.8px;\r\n            diaplay: flex;\r\n            flex-direction: column;\r\n            text-transform : none;\r\n            width: 700px;\r\n            text-align: left;\r\n            font-family: 'Barlow Semi Condensed', sans-serif;\r\n        \r\n            @media only screen and (max-width: 600px) {\r\n              text-align: center;\r\n              padding: 0 20px;\r\n              width: auto;\r\n            }\r\n     \r\n            .header_content0{\r\n                margin-top: 4vh;\r\n                font-size: 1.06rem;\r\n                padding-left: 18vh;\r\n                sup{\r\n                  font-size: 1rem;\r\n                }                     \r\n                @media only screen and (max-width: 600px) {\r\n                    padding-left: 0;\r\n                    text-align: left;\r\n                    font-size: 0.75rem;\r\n                    margin-top: 10vh;\r\n                      br{\r\n                        display: none;\r\n                      }\r\n                      .breakTagSubPage {\r\n                        @media only screen and (max-width: 600px) {\r\n                          display: block;\r\n                        }\r\n                      }\r\n                      sup{\r\n                        font-size: 0.62rem;\r\n                      }\r\n                }\r\n                span {\r\n                  font-family: 'Barlow Semi Condensed', sans-serif;           \r\n\r\n                    &:nth-child(1) {\r\n                      font-size: 2.18rem;\r\n                      font-weight: 600;\r\n                      @media only screen and (max-width: 600px) {\r\n                        font-size: 2rem;               \r\n                      }\r\n                    }\r\n               \r\n                    &:nth-child(3) {\r\n                      font-size: 1.06rem;\r\n                      color: #ff5917;\r\n                      @media only screen and (max-width: 600px) {\r\n                        font-size: 0.9rem;\r\n                        font-weight: 600;\r\n                      }\r\n                    }\r\n              \r\n                    &:nth-child(4){\r\n                      font-size: 2.18rem;\r\n                      color: #ff5917;\r\n                      font-weight: 600;\r\n                      @media only screen and (max-width: 600px) {\r\n                        font-size: 2rem;\r\n                      }\r\n                    }\r\n              \r\n                    &:nth-child(5){\r\n                        font-size: 1.06rem;\r\n                        font-weight: 600;\r\n                        sup{\r\n                          font-size: 0.75rem;\r\n                          font-weight: 100;\r\n                        }\r\n                        @media only screen and (max-width: 600px) {\r\n                          font-size: 0.9rem;\r\n                          font-weight: 600;\r\n                          sup{\r\n                            font-size: 0.62rem;\r\n                          }\r\n                      }\r\n                    }\r\n                }    \r\n          }\r\n\r\n          .header_content1{\r\n                margin-left: 35vh;\r\n                font-family: 'Barlow Semi Condensed', sans-serif;\r\n                line-height: 1;\r\n                padding: 5vh 6vh;\r\n                @media only screen and  (max-width: 600px) {\r\n                  margin: 0;\r\n                  padding: 3vh 0 3vh 0;\r\n                  text-align: left;\r\n                }\r\n     \r\n                .header_content1_sub1{\r\n                    font-size: 1.37rem;\r\n                    margin-bottom: 10px;\r\n                    font-weight: 600;\r\n                    @media only screen and  (max-width: 600px) {\r\n                      font-size: 1.3rem;\r\n                    }\r\n                }\r\n                .header_list{\r\n                    padding-bottom: 5px;\r\n                    li{\r\n                        list-style:none;\r\n                        font-size: 1.06rem;\r\n                        font-weight: 300;\r\n                        @media only screen and  (max-width: 600px) {\r\n                          font-size: 0.8rem;\r\n                          br {\r\n                            display: none;\r\n                          }\r\n                        }\r\n                        &:before{\r\n                            content: \".\";\r\n                            margin-right: 5px;\r\n                            font-size: 1.25rem;\r\n                            font-weight: 800;\r\n                            @media only screen and  (max-width: 600px) {\r\n                              font-size: 0.62rem;\r\n                            }\r\n                        }\r\n                        span{\r\n                                vertical-align: sub;\r\n                        }\r\n                        &:nth-child(1) {\r\n                          span{\r\n                            &:nth-child(3) {\r\n                              padding-left: 12px;\r\n                              @media only screen and  (max-width: 600px) {\r\n                                padding-left: 0;\r\n                              }\r\n                              sup{\r\n                                font-size: 0.87rem;\r\n                                @media only screen and  (max-width: 600px) {\r\n                                  font-size: 0.5rem;;\r\n                                }\r\n                              }\r\n                            }\r\n                          }\r\n                        }\r\n                        &:nth-child(2) {\r\n                          span{\r\n                            &:nth-child(3) {\r\n                              padding-left: 12px;\r\n                              @media only screen and  (max-width: 600px) {\r\n                                padding-left: 0;\r\n                              }\r\n                              sup{\r\n                                  font-size: 0.87rem;\r\n                                  @media only screen and  (max-width: 600px) {\r\n                                    font-size: 0.5rem;\r\n                                  }\r\n                              }\r\n                            }\r\n                          }\r\n                        }\r\n                  }\r\n              }\r\n              .header_content1_sub2{\r\n                font-family: 'Barlow Semi Condensed', sans-serif;\r\n                font-size: 1.06rem;\r\n\r\n                @media only screen and  (max-width: 600px) { \r\n                  text-align: left; \r\n                  font-size: 0.9rem;\r\n                  br{\r\n                    display: none;\r\n                  }\r\n                }\r\n              }\r\n          }\r\n\r\n          .header_content2{\r\n                  padding-left: 28vh;\r\n                  line-height: 0.8;\r\n                  font-family: 'Barlow Semi Condensed', sans-serif;\r\n                  @media only screen and (max-width: 600px) {\r\n                    text-align: left;\r\n                    padding: 0;\r\n                    line-height: 0.4;\r\n                  }\r\n                  .header_content2_sub{\r\n                    span{\r\n                      &:nth-child(1){\r\n                        font-size: 1.37rem;\r\n                        sup{\r\n                          font-size: 0.81rem;\r\n                        }\r\n                        @media only screen and (max-width: 600px) {\r\n                          text-align: left;\r\n                          padding-left: 0;\r\n                          font-size: 1.3rem;\r\n                          padding-bottom: 5px;\r\n                          sup{\r\n                            font-size: 0.62rem;\r\n                          }\r\n                        }\r\n                      } \r\n                    }\r\n                  }     \r\n      \r\n                  .list {\r\n                      color: #ff5917;\r\n                      font-size: 1.37rem;\r\n                      display: flex;\r\n                      flex-wrap: wrap;\r\n                      padding-left: 2px; \r\n                      width: 80%;\r\n                      @media only screen and (max-width: 600px) {\r\n                        text-align: left;\r\n                        width: 100%;\r\n                        font-size: 1.3rem;\r\n                        padding-left: 0px;\r\n                      }\r\n                      li{\r\n                            list-style:none;\r\n                            font-size: 1.43rem;\r\n                            font-weight: 800;\r\n                            @media only screen and (max-width: 600px) {\r\n                              text-align: left;\r\n                              font-size: 1.08rem;\r\n                            }\r\n                            &:before{\r\n                                content: \".\";\r\n                                margin-right: 3px;\r\n                                font-size: 1.87rem;\r\n                                font-weight: 800;\r\n                            }\r\n                            span{\r\n                                vertical-align: sub;\r\n                            }\r\n                            &:nth-child(1),&:nth-child(3){\r\n                              padding-right: 10px;\r\n                            }                      \r\n                        }\r\n                        span {\r\n                          box-sizing: border-box;\r\n                          padding: 1px;\r\n                          box-sizing: border-box;\r\n                          margin-left: 8px;\r\n                          justify-content: space-between;\r\n                        }\r\n                  }\r\n                }\r\n      \r\n    strong {\r\n      font-style: normal;\r\n\r\n      @media (min-width: 600px) {\r\n        display: inline;\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: 1.87rem;\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\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\r\n      sup {\r\n        line-height: 0;\r\n        font-size: 0.75rem;\r\n      }\r\n    }\r\n\r\n    strong {\r\n      color: #fff;\r\n\r\n      sup {\r\n        font-size: 0.75rem;\r\n        line-height: 0;\r\n      }\r\n    }\r\n    \r\n    \r\n  \r\n      margin: 0;\r\n     // max-width: 800px;\r\n      text-align-last: right;\r\n      \r\n      span{\r\n        &:nth-child(1){\r\n          font-size: 1.56rem;\r\n          margin-right: 250px;\r\n        }\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: 10vh;\r\n            display: flex;\r\n            flex-direction: column;\r\n            color: #fff;\r\n            letter-spacing: 0.8px;\r\n            width: 500px;\r\n            padding-top: 25px;\r\n            \r\n            @media only screen and (max-width: 600px) {\r\n              margin: 0 auto;\r\n              text-align: center;\r\n              padding: 0 20px;\r\n              width: auto;\r\n            }\r\n\r\n            .header_content0,.header_content1,.header_content2,.header_content3 {\r\n              margin-bottom: 20px;\r\n              font-family: 'Barlow Semi Condensed', sans-serif;\r\n              font-size: 1.06rem;           \r\n              text-align: left;\r\n              \r\n              @media only screen and (max-width: 600px) {\r\n                margin: 0 auto;\r\n                margin-top: 15px;\r\n                text-align: center;\r\n                padding-left: 20px;\r\n                padding-right: 20px;\r\n              }\r\n            }\r\n  \r\n            .header_content1 , .header_content2,.header_content3{\r\n              text-align-last: left;\r\n              margin-bottom: 25px;\r\n              @media only screen and (max-width: 600px) {\r\n                margin-bottom: 0;\r\n              }\r\n            }\r\n\r\n            @media only screen and (max-width: 600px) {\r\n              .header_content1,\r\n              .header_content2,\r\n              .header_content3 {\r\n                margin-left: 0; \r\n                text-align: left; \r\n                br {\r\n                  display: none;\r\n                }\r\n              }\r\n            }\r\n            .header_content0 {\r\n              padding-left: 8vh;\r\n                  h3 {\r\n                      font-size: 4.37rem;\r\n                      color: #ff5917;\r\n                      margin-bottom: 2px;             \r\n                      padding: 0 20vh 0 0;\r\n                      \r\n                  @media only screen and (max-width: 600px) {\r\n                        padding: 0 20px;\r\n                        font-size: 2.18rem;\r\n                        text-align: center;\r\n                  }\r\n                }\r\n            }\r\n\r\n            .header_content2{\r\n              .header_content2--section{\r\n                font-size: 1.75rem;\r\n                @media only screen and (max-width: 600px) {\r\n                  font-size: 2rem;\r\n                  margin-bottom: 0;\r\n                  .breakTag {\r\n                      display: block;\r\n                    }\r\n                }\r\n              }\r\n            }\r\n\r\n            .header_content3{\r\n                .header_content3--section{ \r\n                  @media only screen and (max-width: 600px) {\r\n                    font-size: 0.98rem;\r\n                    margin-bottom: 0;\r\n                  }\r\n                }\r\n            }\r\n\r\n            .header_content2 ,.header_content3{\r\n                span {\r\n                  color: #ff5917;\r\n                  font-size: 2.06rem;\r\n                  @media only screen and (max-width: 600px) {\r\n                    font-size: 2rem;\r\n                    margin-bottom: 0;\r\n                  }\r\n                }\r\n            }\r\n\r\n            .header_content1,.header_content3{\r\n                padding-left: 10vh;\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            letter-spacing:0.8px;\r\n            diaplay: flex;\r\n            flex-direction: column;\r\n            text-transform : none;\r\n            width: 700px;\r\n            text-align: left;\r\n            font-family: 'Barlow Semi Condensed', sans-serif;\r\n        \r\n            @media only screen and (max-width: 600px) {\r\n              text-align: center;\r\n              padding: 0 20px;\r\n              width: auto;\r\n            }\r\n          \r\n            .header_content0{\r\n                margin-top: 4vh;\r\n                font-size: 1.09rem;\r\n                padding-left: 18vh;\r\n                sup{\r\n                  font-size: 1rem;\r\n                }\r\n                \r\n                @media only screen and (max-width: 600px) {\r\n                  padding-left: 0;\r\n                  text-align: left;\r\n                  font-size: 1rem;\r\n                  margin-top: 10vh;\r\n                    br{\r\n                      display: none;\r\n                    }\r\n                    .breakTagSubPage {\r\n                      @media only screen and (max-width: 600px) {\r\n                        display: block;\r\n                      }\r\n                    }\r\n                    sup{\r\n                      font-size: 0.62rem;\r\n                    }\r\n                }\r\n                span {\r\n                  font-family: 'Barlow Semi Condensed', sans-serif;           \r\n                    &:nth-child(1) {\r\n                      font-size: 2.18rem;\r\n                      font-weight: 600;\r\n                      @media only screen and (max-width: 600px) {\r\n                        font-size: 2.5rem;               \r\n                      }\r\n                    }\r\n                    \r\n                    &:nth-child(3) {\r\n                      font-size: 1.06rem;\r\n                      color: #ff5917;\r\n                      @media only screen and (max-width: 600px) {\r\n                        font-size: 1rem;\r\n                      }\r\n                    }\r\n                    \r\n                    &:nth-child(4){\r\n                      font-size: 2.18rem;\r\n                      color: #ff5917;\r\n                      font-weight: 600;\r\n                      @media only screen and (max-width: 600px) {\r\n                        font-size: 2.5rem;\r\n                      }\r\n                    }\r\n                    \r\n                    &:nth-child(5){\r\n                      font-size: 1.06rem;\r\n                      font-weight: 600;\r\n                      sup{\r\n                        font-size: 0.87rem;\r\n                        font-weight: 100;\r\n                      }\r\n                      @media only screen and (max-width: 600px) {\r\n                        font-size: 1rem;\r\n                        font-weight: 600;\r\n                        sup{\r\n                          font-size: 0.62rem;\r\n                        }\r\n                      }\r\n                    }\r\n                }             \r\n              }\r\n\r\n              .header_content1{\r\n                  margin-left: 35vh;\r\n                  font-family: 'Barlow Semi Condensed', sans-serif;\r\n                  line-height: 1;\r\n                  padding: 5vh 6vh;\r\n                  @media only screen and  (max-width: 600px) {\r\n                    margin: 0;\r\n                    padding: 6vh 0 6vh 0;\r\n                    text-align: left;\r\n                  }\r\n\r\n                  .header_content1_sub1{\r\n                    font-size: 1.37rem\r\n                    margin-bottom: 10px;\r\n                    font-weight: 600;\r\n                    @media only screen and  (max-width: 600px) {\r\n                      font-size: 1.4rem;\r\n                      margin-bottom: 10px;\r\n                    }\r\n                  }\r\n\r\n                  .header_list{\r\n                    padding-bottom: 5px;\r\n                    li{\r\n                      list-style:none;\r\n                      font-size: 1.06rem;\r\n                      font-weight: 300;\r\n                      @media only screen and  (max-width: 600px) {\r\n                        font-size: 1rem;\r\n                        br {\r\n                          display: none;\r\n                        }\r\n                      }\r\n\r\n                      &:nth-child(1) {\r\n                        span{\r\n                          &:nth-child(3) {\r\n                            padding-left: 12px;\r\n                            @media only screen and  (max-width: 600px) {\r\n                              padding-left: 0;\r\n                            }\r\n                            sup{\r\n                              font-size: 0.87rem;\r\n                              @media only screen and  (max-width: 600px) {\r\n                                font-size: 0.5rem;\r\n                              }\r\n                            }\r\n                          }\r\n                        }\r\n                      }\r\n                      &:nth-child(2) {\r\n                        span{\r\n                          &:nth-child(3) {\r\n                          padding-left: 12px;\r\n                          @media only screen and  (max-width: 600px) {\r\n                            padding-left: 0;\r\n                          }\r\n                          sup{\r\n                            font-size: 0.87rem;\r\n                            @media only screen and  (max-width: 600px) {\r\n                              font-size: 0.5rem;\r\n                            }\r\n                            }\r\n                          }\r\n                        }\r\n                      }\r\n                    }\r\n                  }\r\n                \r\n                  .header_content1_sub2{\r\n                    font-family: 'Barlow Semi Condensed', sans-serif;\r\n                    font-size: 1.06rem;\r\n              \r\n                    @media only screen and  (max-width: 600px) { \r\n                      text-align: left; \r\n                      font-size: 1rem;\r\n                    }\r\n                  }\r\n                }\r\n  \r\n\r\n                .header_content2{\r\n                  padding-left: 28vh;\r\n                  line-height: 1;\r\n                  font-family: 'Barlow Semi Condensed', sans-serif;\r\n                  @media only screen and (max-width: 600px) {\r\n                  text-align: left;\r\n                  padding: 0;\r\n                }\r\n                    .header_content2_sub{\r\n                      span{\r\n                        &:nth-child(1){\r\n                          font-size: 1.37rem;\r\n                          sup{\r\n                            font-size: 0.81rem;\r\n                          }\r\n                          @media only screen and (max-width: 600px) {\r\n                            text-align: left;\r\n                            padding-left: 0;\r\n                            font-size: 1.4rem;\r\n                            sup{\r\n                              font-size: 0.62rem;\r\n                            }\r\n                          }\r\n                        } \r\n                      }\r\n                    }     \r\n                  \r\n                .list {\r\n                  color: #ff5917;\r\n                  font-size: 1.37rem;\r\n                  display: flex;\r\n                  flex-wrap: wrap;\r\n                  padding-left: 5px; \r\n                  width: 50%;\r\n                  @media only screen and (max-width: 600px) {\r\n                    text-align: left;\r\n                    width: 60%;\r\n                    font-size: 1rem;\r\n                    padding-left: 0px;\r\n                    line-height: 0.6;\r\n                  }\r\n                  li{\r\n                    list-style:none;\r\n                    font-size: 1.43rem;\r\n                    font-weight: 800;\r\n                    @media only screen and (max-width: 600px) {\r\n                      text-align: left;\r\n                      font-size: 1.3rem;\r\n                    }\r\n                    &:before{\r\n                        content: \".\";\r\n                        margin-right: 3px;\r\n                        font-size: 1.87rem;\r\n                        font-weight: 800;\r\n                    }\r\n                    span{\r\n                        vertical-align: sub;\r\n                    }\r\n            \r\n                    &:nth-child(1),&:nth-child(3){\r\n                      padding-right: 10px;\r\n                    }\r\n                    \r\n                  }\r\n                  span {\r\n                    box-sizing: border-box;\r\n                    padding: 1px;\r\n                    box-sizing: border-box;\r\n                    margin-left: 8px;\r\n                    justify-content: space-between;\r\n                  }\r\n              }\r\n              \r\n    strong {\r\n      @media (min-width: 600px) {\r\n        display: inline;\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: 1.87rem;\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: 1rem;\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: 0.75rem;\r\n      }\r\n    }\r\n\r\n    strong {\r\n      color: #fff;\r\n\r\n      sup {\r\n        font-size: 0.75rem;\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: 1.25rem;\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            <div className =\"header_content0\">    \r\n              <h3\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.sec3.painState.header.copy1'),\r\n                }}\r\n              />\r\n          </div>\r\n          <div className = \"header_content1\">\r\n              <div className = \"header_content1--section\"\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.sec3.painState.header.copy2'),\r\n                }}\r\n              />\r\n          </div>          \r\n          <div className = \"header_content2\">\r\n              <div className = \"header_content2--section\"\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.sec3.painState.header.copy3'),\r\n                }}\r\n              />\r\n          </div>           \r\n          <div className = \"header_content3\">\r\n            <div className = \"header_content3--section\"\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec3.painState.header.copy4'),\r\n              }}\r\n            />\r\n          </div>\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 className=\"header_content0\">\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=\"header_content1\">\r\n            <div className=\"header_content1_sub1\"\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec3.complications.header.copy2'),\r\n              }}\r\n            />\r\n            <div className={'header_list'}>\r\n            {[1, 2].map((val) => <li\r\n              key={val}\r\n              dangerouslySetInnerHTML={{\r\n                __html: t(`content.sections.sec3.complications.header.header_list.copy${val}`),\r\n              }}\r\n            />)}\r\n            </div>\r\n          \r\n                      \r\n          <div className =\"header_content1_sub2\"\r\n            dangerouslySetInnerHTML={{\r\n              __html: t('content.sections.sec3.complications.header.copy3'),\r\n            }}\r\n          />\r\n          </div>\r\n          <div className=\"header_content2\">\r\n          <div className=\"header_content2_sub\"\r\n            dangerouslySetInnerHTML={{\r\n              __html: t('content.sections.sec3.complications.header.copy4'),\r\n            }}\r\n          />\r\n          <div className={'list'}>\r\n            {[1, 2, 3, 4].map((val) => <li\r\n              key={val}\r\n              dangerouslySetInnerHTML={{\r\n                __html: t(`content.sections.sec3.complications.header.list.copy${val}`),\r\n              }}\r\n            />)}\r\n            </div>\r\n          </div>\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          */}\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\nheight: 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    @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        .holder {\r\n            padding-left: 9vw;\r\n            justify-content: flex-end;\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        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            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            @media (min-width: 600px) {\r\n                display: block;\r\n                    &:first-child {\r\n                        transform: translateX(-30px);\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    .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            br {\r\n                display: none;\r\n                @media (max-width: 600px) {\r\n                    display: block;\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    .holder {\r\n        height: 100vh; \r\n        display: flex;\r\n        flex-direction: column;\r\n        font-family: 'Barlow Semi Condensed', sans-serif;\r\n        letter-spacing: 1px;\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: #ffffff;\r\n        text-align: center;\r\n        padding: 0 20px;\r\n        font-size: 1rem;\r\n        letter-spacing: 0.8px;\r\n        padding-bottom: 30px;\r\n        font-family: 'Barlow Semi Condensed', sans-serif;\r\n            @media only screen and (max-width: 600px){\r\n                padding-top: 16vh;\r\n                padding-bottom: 1vh;\r\n                font-size: 0.8rem;\r\n            }\r\n        }\r\n\r\n    .callout-box {\r\n        @media only screen and (max-width: 600px){\r\n            padding-left: 14px;\r\n            padding-right: 14px;\r\n        }\r\n        h4 {\r\n            text-align: center;\r\n            margin: 0 auto;\r\n            width: auto;\r\n            display: block;\r\n            text-transform: unset;\r\n            font-size: 1.8rem; \r\n            letter-spacing: 0.8px;\r\n            line-height: 1.6;\r\n            span {\r\n                &:nth-child(1),\r\n                &:nth-child(3){\r\n                    color: #ff5917;\r\n                }\r\n            }\r\n            sup {\r\n                font-size: 0.6rem;\r\n                line-height: 0;\r\n            }\r\n            @media only screen and (max-width: 600px) {\r\n                padding: 3vh 0 0;\r\n                font-size: 1.1rem;\r\n                line-height: 1.2;\r\n                br {\r\n                    display: none;\r\n                }\r\n            }\r\n        }\r\n        .box {\r\n\t\t\tbackground: rgba(230, 220, 220, 0.12);\r\n\t\t\tmargin: 25px auto 0;\r\n\t\t\twidth: 338px;\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-direction: column;\r\n\t\t\tfont-family: 'Barlow Semi Condensed', sans-serif;\r\n            @media only screen and (max-width: 600px){\r\n                width: auto;\r\n            }\r\n\t\t\t@media (min-width: 600px) {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\talign-items: center;\r\n\t\t\t\tpadding: 18px 15px 15px 15px;\r\n\t\t\t\twidth: 600px;\r\n\t\t\t\tfont-family: 'Barlow Semi Condensed', sans-serif;\r\n\t\t\t}\r\n\t\t\t.box__header {\r\n\t\t\t\t.box__header--content{\r\n\t\t\t\t\tcolor: #ff5917;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t\tfont-size: 1.8rem;\r\n                    letter-spacing: 0.8px;\r\n\t\t\t\t\t@media only screen and (max-width: 600px){\r\n\t\t\t\t\t\tfont-size: 1.1rem;\r\n\t\t\t\t\t\tpadding: 10px 10px 0px 10px;\r\n\t\t\t\t\t}\r\n\t\t\t\t}  \r\n\t\t\t}\r\n            .li_content{\r\n\t\t\t\tcolor:#ffffff;\r\n\t\t\t\tfont-size : 1rem;\r\n\t\t\t\tdisplay:flex;\r\n\t\t\t\tflex-wrap:wrap;\r\n\t\t\t\tcolor:white;\r\n\t\t\t\talign-items:center;\r\n\t\t\t\tjustify-content:center;\r\n\t\t\t\tgap:10px;\r\n\t\t\t\tpadding: 15px 25px 22px ;\r\n                letter-spacing: 0.8px;\r\n                line-height: 0.9;\r\n                @media only screen and (max-width: 600px){\r\n                    font-size: 0.6rem;\r\n                    gap: 10px;\r\n                    line-height: 0.3px;\r\n                    padding: 10px 25px 20px;\r\n                }\r\n\t\t\t\t\tli{\r\n\t\t\t\t\t\tlist-style:none;\r\n\t\t\t\t\t\t&:before{\r\n\t\t\t\t\t\t\tcontent: \".\";\r\n\t\t\t\t\t\t\tmargin-right: 5px;\r\n\t\t\t\t\t\t\tfont-size: 1.06rem;\r\n\t\t\t\t\t\t\tfont-weight: 800;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tspan{\r\n\t\t\t\t\t\t\tvertical-align: sub;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n    .disclaimer {\r\n        text-align: center;\r\n        margin-top:20px;\r\n        color: #ffffff;\r\n        padding: 10px 6px 30px 10px;\r\n        @media only screen and (min-width: 600px){\r\n            padding: 10px 20px 30px 20px;\r\n        }\r\n        @media only screen and (max-width: 600px){\r\n            margin-top: 0;\r\n        }\r\n        div.disclaimer_content--2 {\r\n            font-size: 0.8rem;\r\n            padding-top: 5px;\r\n            font-weight: 100;\r\n            letter-spacing: 0.8px;\r\n            @media only screen and (max-width: 600px){\r\n                font-size: 0.5rem;\r\n            }\r\n        }\r\n        div.disclaimer_content--1 {\r\n        font-size: 1rem;\r\n        letter-spacing: 0.8px;\r\n        text-transform: initial;\r\n        margin: 0 auto;\r\n        width: auto;\r\n        @media only screen and (max-width: 600px){\r\n            font-size: 0.8rem;\r\n        }\r\n            sup {\r\n                line-height: 0;\r\n                font-size: 9px;\r\n            }\r\n        }\r\n    }\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const PainStateElemZH = styled.div`\r\nheight: 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    .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        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                &: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            br {\r\n                display: none;\r\n                @media (max-width: 600px) {\r\n                    display: block;\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        font-family: 'Barlow Semi Condensed', sans-serif;\r\n        letter-spacing: 0.8px;\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    .header {\r\n        color: #ffffff;\r\n        text-align: center;\r\n        padding: 0 20px;\r\n        font-size: 1rem;\r\n        letter-spacing: 0.8px;\r\n        padding-bottom: 30px;\r\n        font-family: 'Barlow Semi Condensed', sans-serif;\r\n        @media only screen and (max-width: 600px){\r\n            padding-top: 16vh;\r\n            padding-bottom: 1vh;\r\n            font-size: 0.8rem;\r\n        }\r\n    }\r\n    .callout-box {\r\n        @media only screen and (max-width: 600px){\r\n            padding-left: 14px;\r\n            padding-right: 14px;\r\n        }\r\n        h4 {\r\n            text-align: center;\r\n            margin: 0 auto;\r\n            width: auto;\r\n            display: block;\r\n            text-transform: unset;\r\n            font-size: 1.8rem; \r\n            letter-spacing: 0.8px;\r\n            line-height: 1.6;\r\n            span{\r\n                    &:nth-child(1),\r\n                    &:nth-child(2) {\r\n                        color: #ff5917;\r\n                    }\r\n                }\r\n            sup {\r\n                font-size: 0.6rem;\r\n                line-height: 0;\r\n            }\r\n            @media only screen and (max-width: 600px) {\r\n                padding: 3vh 0 0;\r\n                font-size: 18px;\r\n                line-height: 1.2;\r\n                br {\r\n                    display: none;\r\n                }\r\n                sup {\r\n                    font-size: 0.8rem;\r\n                    line-height: 0;\r\n                }\r\n            }\r\n        }\r\n        .box {\r\n            background: rgba(230, 220, 220, 0.12);\r\n            margin: 25px auto 0;\r\n            width: 338px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            font-family: 'Barlow Semi Condensed', sans-serif;\r\n            @media only screen and (max-width: 600px){\r\n                width: auto;\r\n            }\r\n            @media (min-width: 600px) {\r\n                display: flex;\r\n                align-items: center;\r\n                padding: 18px 15px 15px 15px;\r\n                width: 600px;\r\n                font-family: 'Barlow Semi Condensed', sans-serif;\r\n            }\r\n            .box__header {\r\n                .box__header--content{\r\n\t\t\t\t\tcolor: #ff5917;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t\tfont-size: 28px;\r\n                    letter-spacing: 0.8px;\r\n\t\t\t\t\t@media only screen and (max-width: 600px){\r\n\t\t\t\t\t\tfont-size: 1.8rem;\r\n\t\t\t\t\t\tpadding: 10px 10px 0px 10px;\r\n                        text-align: center;\r\n\t\t\t\t\t}\r\n\t\t\t\t}   \r\n            }\r\n            .li_content {\r\n                color:#ffffff;\r\n                font-size : 1rem;\r\n                display:flex;\r\n                flex-wrap:wrap;\r\n                color:white;\r\n                align-items:center;\r\n                justify-content:center;\r\n                gap:10px;\r\n                padding: 14px 25px 20px ;\r\n                letter-spacing: 0.8px;\r\n                line-height: 0.9;\r\n                    @media only screen and (max-width: 600px){\r\n                        font-size: 0.6rem;\r\n                        gap: 5px;\r\n                        line-height: 0.3px;\r\n                        padding: 10px 25px 20px;  \r\n                    }\r\n                    li  {\r\n                            list-style:none;\r\n                            line-height: 0.9em;\r\n                            padding-right: 7px;\r\n                            &:before{\r\n                                content: \".\";\r\n                                margin-right: 5px;\r\n                                font-size: 0.93rem;\r\n                                font-weight: 800;\r\n                            }\r\n                            span{\r\n                                vertical-align: sub;\r\n                            }\r\n                            &:nth-child(5){\r\n                                padding-left: 100px;\r\n                                @media only screen and (max-width: 600px){\r\n                                    padding-left: 0; \r\n                                }\r\n                            }\r\n                            &:nth-child(6){\r\n                                padding-right: 100px;\r\n                                @media only screen and (max-width: 600px){\r\n                                    padding-right: 0;  \r\n                                }\r\n                            }\r\n                        }\r\n\t\t            } \r\n                }\r\n            }\r\n        }\r\n\r\n    .disclaimer {\r\n        text-align: center;\r\n        margin-top:20px;\r\n        color: #ffffff;\r\n        padding: 10px 6px 30px 10px;\r\n        @media only screen and (min-width: 600px){\r\n            padding: 10px 20px 30px 20px;\r\n        }\r\n        @media only screen and (max-width: 600px){\r\n            margin-top: 0;\r\n        }\r\n        div.disclaimer_content--2 {\r\n            font-size: 0.8rem;\r\n            padding-top: 10px;\r\n            font-weight: 100;\r\n            letter-spacing: 0.8px;\r\n            @media only screen and (max-width: 600px){\r\n                font-size: 0.5rem;\r\n            }\r\n        }\r\n        div.disclaimer_content--1 {\r\n            font-size: 1rem;\r\n            letter-spacing: 0.8px;\r\n            text-transform: initial;\r\n            margin: 0 auto;\r\n            width: auto;\r\n            @media only screen and (max-width: 600px){\r\n                font-size: 0.8rem;\r\n                padding-left: 20px;\r\n                padding-right: 21px;\r\n            }\r\n            sup {\r\n                line-height: 0;\r\n                font-size: 0.56rem;\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\tconst { t, i18n } = useTranslation('common');\r\n\r\n\tconst RiskElem = i18n.language === \"zh\" ? RiskElemZH : RiskElemEN;\r\n\r\n\tconst secPos = document\r\n\t\t.querySelector('#section-four .risk')\r\n\t\t?.getBoundingClientRect();\r\n\tconst posY = secPos?.y || 0;\r\n\tconst posH = secPos?.height || 0;\r\n\tconst isVisible = posY - (window.innerHeight / 2) <= 0 && (posY - (window.innerHeight / 2)) + posH > 0;\r\n\r\n\treturn (\r\n\t\t<RiskElem className={['content', 'risk'].join(' ')}>\r\n\t\t\t<FixedPanel className={['fixed-content', isVisible ? 'active' : ''].join(' ')}>\r\n\t\t\t\t<div className=\"holder\">\r\n\t\t\t\t\t<div className=\"header left-to-right\">\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\r\n\t\t\t\t\t\t\t\t__html: t('content.sections.sec4.risk.header.copy1'),\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"callout-box left-to-right\">\r\n\t\t\t\t\t\t<h4\r\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\r\n\t\t\t\t\t\t\t\t__html: t('content.sections.sec4.risk.calloutBox.copy1'),\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<div className=\"box\">\r\n\t\t\t\t\t\t\t<div className='box__header'>\r\n\t\t\t\t\t\t\t\t<div className='box__header--content'\r\n\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\r\n\t\t\t\t\t\t\t\t\t\t__html: t('content.sections.sec4.risk.calloutBox.box.copy1'),\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t<div className={'li_content'}>\r\n\t\t\t\t\t\t\t\t{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((val) => <li\r\n\t\t\t\t\t\t\t\t\tkey={val}\r\n\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\r\n\t\t\t\t\t\t\t\t\t\t__html: t(`content.sections.sec4.risk.calloutBox.box.li_content.copy${val}`),\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t/>)}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"disclaimer left-to-right\">\r\n\t\t\t\t\t\t<div className='disclaimer_content--1'\r\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\r\n\t\t\t\t\t\t\t\t__html: t('content.sections.sec4.risk.calloutBox.disclaimer.copy1'),\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<div className='disclaimer_content--2'\r\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\r\n\t\t\t\t\t\t\t\t__html: t('content.sections.sec4.risk.calloutBox.disclaimer.copy2'),\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</FixedPanel>\r\n\t\t</RiskElem>\r\n\t);\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    .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        .fixed-content {\r\n            height: calc(100vh - 59px);\r\n            align-items: flex-end;\r\n            justify-content: flex-end;\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    @media (min-width: 1160px) {\r\n        .holder {\r\n            padding-right: 10vw;\r\n            justify-content: center;\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            width: 600px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            @media only screen and (max-width: 600px){\r\n                padding: 0 20px;\r\n                width: auto;\r\n                margin: 0 auto;\r\n            }\r\n            h3, h2, .disclaimer{\r\n                padding-left: 91px;\r\n                @media only screen and (max-width: 600px){\r\n                    padding-left: unset;\r\n                }\r\n            }\r\n            h3 {\r\n                text-align: left;\r\n                font-size: 3rem;\r\n                color: #ff5917;\r\n                letter-spacing: 1.8px;\r\n                padding-top: 20vh;\r\n                line-height: 1.1;\r\n                text-transform: initial;\r\n                margin-bottom: 18px;\r\n                @media only screen and (max-width: 600px){\r\n                    font-size: 1.62rem;\r\n                    padding-top: 18vh;\r\n                    margin-bottom: 10px;\r\n                } \r\n            }\r\n            h2 { \r\n                text-transform: initial;\r\n                text-align: left;\r\n                font-size: 1.5rem;\r\n                letter-spacing: 1.6px;\r\n                line-height: 1.2;\r\n                sup{\r\n                    font-size: 0.9rem;\r\n                }\r\n                @media only screen and (max-width: 600px){\r\n                    font-size: 1rem;\r\n                }\r\n            }\r\n        }\r\n        .disclaimer{\r\n            .disclaimer--takeaction{\r\n                color: #ffffff;\r\n                letter-spacing: 0.8px;\r\n                font-size: 0.8rem;\r\n                text-align: right;\r\n                font-weight: 100;\r\n                padding-top: 15vh;\r\n                @media only screen and (max-width: 600px){\r\n                    text-align: center;\r\n                    padding-top: 6vh;\r\n                }\r\n            }\r\n        }\r\n        .sub {\r\n            padding: 0 0 17vh;\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            @media (min-width: 600px) and (max-width: 1160px) {\r\n                padding-right: 1vw;\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    .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: 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    .holder {\r\n        height: 100vh; \r\n        justify-content: center;\r\n        display: flex;\r\n        flex-direction: column;\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        @media (min-width: 1160px) {\r\n            padding-right: 12vw;\r\n        }\r\n    }\r\n    .header {\r\n        color: #ff5917;\r\n        text-align: center;\r\n        margin: 0 auto;\r\n        padding: 4vh 6vh 0;\r\n        font-size: 3.2rem;\r\n        width: 600px;\r\n        text-transform:initial;\r\n        line-height: 1.02;\r\n        letter-spacing: 1.7px;\r\n        @media only screen and (max-width: 600px){\r\n            width: auto;\r\n            margin: 0 auto;\r\n            font-size: 1.6rem;\r\n            padding-top: unset;\r\n        }\r\n        .header__takeaction {\r\n            display: flex;\r\n            flex-direction:row;\r\n            justify-content: center;\r\n            padding-top: 7vh;\r\n            @media only screen and (max-width: 600px){\r\n                flex-direction:column;\r\n                padding-top: 4vh;\r\n            }\r\n            .header__takeaction--img1, .header__takeaction--img2{\r\n                display: flex;\r\n                flex-direction: row;\r\n                img {\r\n                    width: 100px;\r\n                    height: 100px;\r\n                    @media only screen and (max-width: 600px){\r\n                        width: 80px;\r\n                        height: 80px;\r\n                    }\r\n                }\r\n            }\r\n            .header__takeaction--img1{\r\n                padding-right: 4vh;\r\n                @media only screen and (max-width: 600px){\r\n                    padding-right: unset;\r\n                }\r\n            }\r\n            .header__takeaction--img2{\r\n                @media only screen and (max-width: 600px){\r\n                    padding-left: unset;\r\n                    padding-top: 2vh;\r\n                }\r\n            }\r\n            .header__takeaction--content1, .header__takeaction--content2{\r\n                text-align: justify;\r\n                color: #ffffff;\r\n                font-size: 1rem;\r\n                letter-spacing: 0.2px;\r\n                line-height: 1.2;\r\n                padding: 29px 0 0 8px;\r\n                @media only screen and (max-width: 600px){\r\n                    font-size: 0.9rem;\r\n                }\r\n                sup{\r\n                    font-size: 0.6rem;\r\n                }\r\n            }\r\n            .header__takeaction--content2{\r\n                padding-top: 37px;\r\n        }\r\n        }\r\n        .disclaimer{\r\n            .disclaimer--content{\r\n                color: #ffffff;\r\n                font-size: 1.688rem;\r\n                letter-spacing: 0px;\r\n                padding-top: 6vh;\r\n                line-height: 1.2;\r\n                font-weight: 100;\r\n                text-align: center;\r\n                @media only screen and (max-width: 600px){\r\n                    padding-top: 4vh;\r\n                    font-size: 1rem;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    //.cta-copy {\r\n        // padding: 0 20px 5vh;\r\n        // br {\r\n        //     @media (min-width: 600px) {\r\n        //         display: none;\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        //     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\nheight: calc(100vh - 80px);\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@media (min-width: 600px) {\r\n    margin: 0 60px;\r\n    height: calc(100vh - 59px);\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    .holder {\r\n        justify-content: flex-end;\r\n        align-items: flex-end;\r\n        padding-right: 2vw;\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.header {\r\n        margin-bottom: 6vh;\r\n        line-height: 1;\r\n        letter-spacing: 3.9px;\r\n        width: 500px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        @media only screen and (max-width: 600px){\r\n            padding: 0 20px;\r\n            width: auto;\r\n            margin: 0 auto;\r\n        }\r\n        h3, h2, .disclaimer{\r\n            padding-left: 0;\r\n            @media only screen and (max-width: 600px){\r\n                padding-left: unset;\r\n            }\r\n        }\r\n        h3 {\r\n            text-align: left;\r\n            font-size: 4.06rem;\r\n            color: #ff5917;\r\n            letter-spacing: 1.8px;\r\n            padding-top: 11vh;  \r\n            line-height: 1.1;\r\n            text-transform: initial;\r\n            margin-bottom: 18px;\r\n            @media only screen and (max-width: 600px){\r\n                font-size: 1.62rem;\r\n                padding-top: 18vh;\r\n                margin-bottom: 10px;\r\n            } \r\n        }\r\n        h2 {\r\n            text-transform: initial;\r\n            text-align: left;\r\n            font-size: 1.81rem;\r\n            letter-spacing: 3px;\r\n            line-height: 1.3;\r\n            font-weight:100;\r\n            margin-top: 2px;\r\n            @media only screen and (max-width: 600px){\r\n                font-size: 1rem;\r\n                br{\r\n                    display: none;\r\n                }\r\n            }\r\n            sup{\r\n                font-size: 1.2rem;\r\n                @media only screen and (max-width: 600px){\r\n                    font-size: 0.9rem;\r\n                }\r\n            }\r\n        }\r\n        .disclaimer{\r\n            .disclaimer--takeaction{\r\n                color: #ffffff;\r\n                letter-spacing: 0.8px;\r\n                font-size: 0.9rem;\r\n                text-align: left;\r\n                font-weight: 100;\r\n                padding-top: 1vh;\r\n                @media only screen and (max-width: 600px){\r\n                    text-align: center;\r\n                    padding-top: 6vh;\r\n                }\r\n            }\r\n        }\r\n        .sub {\r\n            padding: 0 0 17vh;\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            br {\r\n                display: none;\r\n                @media (max-width: 600px) {\r\n                    display: block;\r\n                }\r\n            }\r\n            @media (min-width: 600px) and (max-width: 1160px) {\r\n                padding-right: 1vw;\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\nheight: 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: flex-end;\r\n    }   \r\n}\r\nh5{\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.holder {\r\n    height: 100vh; \r\n    justify-content: center;\r\n    display: flex;\r\n    flex-direction: column;\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    @media (min-width: 1160px) {\r\n        padding-right: 17vw;\r\n    }\r\n}\r\n.header {\r\n    color: #ff5917;\r\n    text-align: center;\r\n    margin: 0 auto;\r\n    padding: 11vh 9vh 0;\r\n    font-size: 4.25rem;\r\n    width: 715px;\r\n    text-transform:initial;\r\n    line-height: 1.02;\r\n    letter-spacing: 3px;\r\n    @media only screen and (max-width: 600px){\r\n        width: auto;\r\n        margin: 0 auto;\r\n        font-size: 1.6rem;\r\n        padding-top: unset;\r\n    }\r\n    .header__takeaction {\r\n        display: flex;\r\n        flex-direction:row;\r\n        justify-content: center;\r\n        padding-top: 7vh;\r\n        @media only screen and (max-width: 600px){\r\n            flex-direction:column;\r\n            padding-top: 4vh;\r\n        }\r\n        .header__takeaction--img1, .header__takeaction--img2{\r\n            display: flex;\r\n            flex-direction: row;\r\n            img {\r\n                width: 100px;\r\n                height: 100px;\r\n                @media only screen and (max-width: 600px){\r\n                    width: 80px;\r\n                    height: 80px;\r\n                }\r\n            }\r\n        }\r\n        .header__takeaction--img1{\r\n            padding-right: 4vh;\r\n            @media only screen and (max-width: 600px){\r\n                padding-right: unset;\r\n            }\r\n        }\r\n        .header__takeaction--img2{\r\n            @media only screen and (max-width: 600px){\r\n                padding-left: unset;\r\n                padding-top: 2vh;\r\n            }\r\n        }\r\n        .header__takeaction--content1, .header__takeaction--content2{\r\n            text-align: justify;\r\n            color: #ffffff;\r\n            font-size: 1rem;\r\n            letter-spacing: 1px;\r\n            line-height: 1.3;\r\n            padding: 29px 0 0 8px;\r\n            @media only screen and (max-width: 600px){\r\n                font-size: 0.9rem;\r\n            }\r\n            sup{\r\n                font-size: 0.6rem;\r\n            }\r\n        }\r\n        .header__takeaction--content2{\r\n            padding-top: 37px;\r\n        }\r\n    }\r\n    .disclaimer{\r\n        .disclaimer--content{\r\n            color: #ffffff;\r\n            font-size: 1.81rem;\r\n            letter-spacing: 1px;\r\n            padding-top: 5vh;\r\n            line-height: 1.1;\r\n            font-weight: 100;\r\n            text-align: center;\r\n            @media only screen and (max-width: 600px){\r\n                padding-top: 4vh;\r\n                padding-left: unset;\r\n                font-size: 1rem;\r\n            }\r\n        }\r\n    }\r\n}\r\n.cta-copy {\r\n        padding: 0 20px 5vh;\r\n        br {\r\n            @media (min-width: 600px) {\r\n                display: none;\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            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 className=\"disclaimer left-to-right\">\r\n              <div className='disclaimer--takeaction'\r\n                  dangerouslySetInnerHTML={{\r\n                    __html: t('content.sections.sec5.painState.header.copy3'),\r\n                  }}\r\n                />\r\n            </div>\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\nimport takeActionImg1 from '../../../assets/take-action-img1.png';\r\nimport takeActionImg2 from '../../../assets/take-action-img2.png';\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 className='header--heading'\r\n              dangerouslySetInnerHTML={{\r\n                __html: t('content.sections.sec5.takeAction.header.copy1'),\r\n              }}\r\n            />\r\n            <div className='header__takeaction'>\r\n              <div className='header__takeaction--img1'>\r\n                <img src={takeActionImg1} alt=\"Maintain a healthy lifestyle\"/>\r\n                <div className='header__takeaction--content1'\r\n                    dangerouslySetInnerHTML={{\r\n                      __html: t('content.sections.sec5.takeAction.header.header__takeaction.copy1'),\r\n                    }}\r\n                />\r\n              </div>\r\n              <div className='header__takeaction--img2'>\r\n                <img src={takeActionImg2} alt=\"Vaccination25\"/>\r\n                <div className='header__takeaction--content2'\r\n                    dangerouslySetInnerHTML={{\r\n                      __html: t('content.sections.sec5.takeAction.header.header__takeaction.copy2'),\r\n                    }}\r\n                />\r\n              </div>\r\n            </div>\r\n            <div className=\"disclaimer\">\r\n              <div className='disclaimer--content'\r\n                dangerouslySetInnerHTML={{\r\n                  __html: t('content.sections.sec5.takeAction.disclaimer.copy1'),\r\n                }}\r\n              />\r\n            </div>\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","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","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: 40px;\r\n  left: 40px;\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: 20px;\r\n  a{\r\n    text-decoration:none;\r\n    position:relative;\r\n    width:400px;\r\n    left:0px;\r\n    top:-11px;\r\n  }\r\n  &:before {\r\n    content: \" \";\r\n    background-color: white; //main menu bar\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: 200;\r\n    line-height: 26px;\r\n    letter-spacing: 1.50px;\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//mobile \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":""}