{"version":3,"sources":["components/GlobalStyle.js","components/ScrollToTop.js","components/homePage/data.js","images/homepage/caseC.jpg","images/homepage/caseB.jpg","images/homepage/caseA.jpg","images/homepage/title.png","components/homePage/HomeCase.js","images/homepage/storyCar.jpg","components/homePage/HomeStory.js","images/homepage/story-title-2.png","images/homepage/aboutA.jpg","images/homepage/aboutB.jpg","components/homePage/HomeAbout.js","images/homepage/story-title-w.png","images/homepage/homePageBg.jpg","components/Masthead.js","components/homePage/HomePage.js","components/case/CaseTitle.js","utility/trimSpaceAndNewline.js","utility/mapStrToBr.js","utility/convertArrayIntoSingleFragment.js","images/case/caseBg.jpg","components/case/Temporarily.js","components/case/Case.js","images/case/kestrel1.jpg","images/case/kestrel2.jpg","images/case/kestrel3.jpg","images/case/kestrel4.jpg","images/case/kestrel5.jpg","images/case/kestrel6.jpg","images/case/kestrel7.jpg","images/case/kestrel8.jpg","images/case/kestrel9.jpg","images/case/kestrel10.jpg","images/case/kestrel11.jpg","images/case/kestrel12.jpg","images/case/formosan-1.jpg","images/case/formosan-2.jpg","images/case/formosan-3.jpg","images/case/formosan-4.jpg","images/case/formosan-5.jpg","images/case/formosan-6.jpg","images/case/formosan-7.jpg","images/case/formosan-8.jpg","images/case/formosan-9.jpg","images/case/ruddy-1.jpg","images/case/ruddy-2.jpg","images/case/ruddy-3.jpg","images/case/ruddy-4.jpg","images/case/ruddy-5.jpg","images/case/ruddy-6.jpg","images/case/ruddy-7.jpg","images/case/case1Kv.jpg","images/case/case2Kv.jpg","images/case/case3Kv.jpg","components/case/data.js","components/case/CaseA.js","components/case/CaseB.js","components/case/CaseC.js","images/story/storyHistory.png","components/story/Bar.js","images/story/left.png","images/story/right.png","components/story/data.js","images/story/episode-1.jpg","images/story/episode-2.jpg","images/story/episode-3.jpg","images/story/episode-4.jpg","images/story/episode-5.jpg","images/story/episode-6.jpg","images/story/episode-7.jpg","components/story/Story.js","Routes.js","components/Menu.js","images/logo.png","images/header-bg.jpg","components/Header.js","components/Footer.js","components/Top.js","App.js","reportWebVitals.js","index.js"],"names":["GlobalStyle","styles","css","ScrollToTopOnMount","window","scrollTo","Component","caseData","bg","caseText","bird","text","link","Container","styled","div","Title","h1","Note","p","Line","LinkBox","LinkItem","LinkIntro","props","LinkCase","CaseName","CaseText","P","More","HomeCase","src","titleImg2","alt","map","items","keys","to","className","onClick","ReactGA","event","category","action","label","Left","h2","TextContainer","H3","h3","Text","Right","storyCar","Box","BoxItem","a","aboutA","aboutB","Deep","Anima","HomeAbout","href","target","rel","MastheadBox","MastheadContainer","Masthead","ytId","url","width","height","playing","muted","volume","playsinline","loop","config","file","attributes","poster","onReady","onError","err","console","log","Group","homeBg","Section","section","withRouter","useEffect","pageview","document","title","ScrollToTop","HomeStory","CaseTitle","num","Str","str","replace","intersperse","trimSpaceAndNewline","split","Arr","arr","React","createElement","Fragment","Kv","Mobile","Temporarily","img","minWidth","maxWidth","Bg","CaseSection","CasrLinkBox","CaseInfoContainer","CaseInfoImg","CaseInfoText","CaseInfoItem","Case","data","info","t","useState","prev","setPrev","next","setNext","i","location","pathname","indexOf","convertArrayIntoSingleFragment","mapStrToBr","dataA","case1Kv","kestrel1","kestrel2","kestrel3","kestrel4","kestrel5","kestrel6","kestrel7","kestrel8","kestrel9","kestrel10","kestrel11","kestrel12","dataB","case2Kv","formosan1","formosan2","formosan3","formosan4","formosan5","formosan6","formosan7","formosan8","formosan9","dataC","case3Kv","ruddy1","ruddy2","ruddy3","ruddy4","ruddy5","ruddy6","ruddy7","CaseA","CaseB","CaseC","BarContainer","opacityState","l","r","liData","Bar","scrollEl","useRef","scrollToggle","setScrollToggle","ref","onScroll","el","current","scrollLeft","clientWidth","scrollWidth","smooth","scroll","setTimeout","top","offsetTop","behavior","scrollOffset","episodeData","HistoryBox","Episode","EpisodeItem","EpisodeTextContainer","EpisodeTitle","Routes","path","component","HomePage","exact","id","historyImg","Ul","ul","Li","li","k","handleClose","style","color","HeaderContainer","header","headerBg","Logo","DesktopMenuContainer","MenuOpenContainer","Hamburger","button","MenuOpenContainerOpacity","HamburgerBox","span","HamburgerInner","Header","isShow","setIsShow","handleMenuOpen","transitions","useTransition","from","transform","enter","leave","MenuList","useSpring","opacity","delay","logo","item","FooterBox","footer","FooterB","FooterContainer","FooterService","FooterCompany","FooterLi","FooterRecommend","Alone","Footer","ft","TopBox","Square","Top","show","scrollEvent","pageYOffset","addEventListener","removeEventListener","left","key","App","route","routes","render","routeProps","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","initialize","ReactDOM","basename","process","getElementById"],"mappings":"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","file":"static/js/main.1469b9fe.chunk.js","sourcesContent":["import React from \"react\";\r\nimport { Global, css } from \"@emotion/react\";\r\n\r\nconst GlobalStyle = () => (\r\n  <Global\r\n    styles={css`\r\n      @import url(\"https://fonts.googleapis.com/css?family=Noto+Sans+TC\");\r\n      \r\n      * {\r\n        box-sizing: border-box;\r\n        margin: 0;\r\n        padding: 0;\r\n        line-height: 1.5;\r\n        outline: none;\r\n        font-family: \"Noto Sans TC\", \"微軟正黑體\";\r\n        -webkit-tap-highlight-color: transparent;\r\n        letter-spacing: 0.8px;\r\n      }\r\n      li {\r\n        list-style-type: none;\r\n      }\r\n      button {\r\n        background-color: transparent;\r\n        border: none;\r\n      }\r\n      a {\r\n        text-decoration: none;\r\n      }\r\n      html > body {\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        padding-right: 0px !important;\r\n      }\r\n      br {\r\n        line-height: 0;\r\n      }\r\n      img {\r\n        vertical-align: middle;\r\n      }\r\n      .toyotaFont {\r\n        font-family: toyota;\r\n      }\r\n      /* wrc */\r\n      .schedule.slick-initialized .slick-slide {\r\n        padding: 0px 5px;\r\n      }\r\n      .schedule .slick-center {\r\n        * div {\r\n          opacity: 1;\r\n          transition: all 0.5s;\r\n        }\r\n      }\r\n      .schedule .slick-dots {\r\n        bottom: -50px;\r\n      }\r\n      .schedule .slick-dots li.slick-active button:before {\r\n        color: #fff;\r\n      }\r\n      .schedule .slick-dots li button:before {\r\n        color: #555;\r\n      }\r\n      .thumbY,\r\n      .trackX {\r\n        background-color: #585858 !important;\r\n        > div {\r\n          background-color: #afafaf !important;\r\n        }\r\n      }\r\n      .thumbY {\r\n        right: -10px !important;\r\n        width: 5px !important;\r\n      }\r\n      .trackX {\r\n        left: 50% !important;\r\n        transform: translateX(-50%);\r\n        bottom: -10px !important;\r\n        height: 5px !important;\r\n      }\r\n      .question input[type=\"radio\"] {\r\n        display: none;\r\n        visibility: hidden;\r\n      }\r\n      .question  input[type=\"radio\"]:checked + label {\r\n        > div {\r\n          opacity: 1;\r\n        }\r\n      }\r\n\r\n      input[type=\"checkbox\"] {\r\n        display: none;\r\n        visibility: hidden;\r\n      }\r\n      input[type=\"checkbox\"]:checked + label {\r\n        > div {\r\n          /* background-color: #fff; */\r\n          img {\r\n            opacity: 1;\r\n          }\r\n        }\r\n      }\r\n      .slick-dots li {\r\n        margin: 0;\r\n      }\r\n    `}\r\n  />\r\n);\r\n\r\nexport default GlobalStyle;\r\n","import { Component } from \"react\";\r\n\r\nclass ScrollToTopOnMount extends Component {\r\n  componentDidMount() {\r\n    window.scrollTo(0, 0);\r\n  }\r\n\r\n  render() {\r\n    return null;\r\n  }\r\n}\r\n\r\nexport default ScrollToTopOnMount;\r\n","import caseA from \"../../images/homepage/caseC.jpg\";\r\nimport caseB from \"../../images/homepage/caseB.jpg\";\r\nimport caseC from \"../../images/homepage/caseA.jpg\";\r\n\r\nconst caseData = [\r\n  {\r\n    bg: caseA,\r\n    caseText: \"CASE 01\",\r\n    bird: \"紅隼\",\r\n    text: '協助治療因傷無法飛行的虛弱紅隼，並細心照料直到它能變得強壯，再次飛翔…',\r\n    link: '/kestrel/'\r\n  },\r\n  {\r\n    bg: caseB,\r\n    caseText: \"CASE 02\",\r\n    bird: `白鼻心`,\r\n    text: '年幼白鼻心，因為遭到土狗的追逐而與母親走散，無法獨自在野外生存…',\r\n    link: '/formosan-masked-civet/'\r\n  },\r\n  {\r\n    bg: caseC,\r\n    caseText: \"CASE 03\",\r\n    bird: \"赤翡翠\",\r\n    text: '一隻頸部嚴重受傷且虛弱的赤翡翠，火速被送來野灣動物醫院…',\r\n    link: '/ruddy-kingfisher/'\r\n  }\r\n];\r\n\r\nexport {caseData};","export default __webpack_public_path__ + \"static/media/caseC.8d20a9a6.jpg\";","export default __webpack_public_path__ + \"static/media/caseB.9d734b8c.jpg\";","export default __webpack_public_path__ + \"static/media/caseA.810144f1.jpg\";","export default __webpack_public_path__ + \"static/media/title.fc8179e9.png\";","import React from \"react\";\r\nimport ReactGA from \"react-ga\";\r\nimport styled from \"@emotion/styled\";\r\nimport { Link } from \"react-router-dom\";\r\nimport {caseData} from \"./data\";\r\n// import titleImg from \"../../images/homepage/title.png\";\r\nimport titleImg2 from \"../../images/homepage/title.png\";\r\nimport { css } from \"@emotion/css\";\r\n\r\nconst Container = styled.div`\r\n  width: 90%;\r\n  max-width: 1180px;\r\n  margin: auto;\r\n`;\r\n\r\nconst Title = styled.h1`\r\n  color: #30251D;\r\n  margin-bottom: 30px;\r\n  img {\r\n    display: block;\r\n    margin: auto;\r\n    width: 90%;\r\n    max-width: 540px;\r\n    @media screen and (max-width: 767px) {\r\n      width: 80%;\r\n    }\r\n  }\r\n  span {\r\n    display: block;\r\n    font-weight: 900;\r\n    font-size: 100px;\r\n    line-height: 148px;\r\n    text-align: center;\r\n    letter-spacing: 0.4em;\r\n    @media screen and (max-width: 1000px) {\r\n      font-size: 70px;\r\n      line-height: 100px;\r\n    }\r\n    @media screen and (max-width: 767px) {\r\n      font-size: 38px;\r\n      line-height: 72px;\r\n      margin-top: 10px;\r\n    }\r\n  }\r\n  \r\n`;\r\n\r\nconst Note = styled.p`\r\n  font-weight: 500;\r\n  font-size: 24px;\r\n  line-height: 36px;\r\n  text-align: center;\r\n  letter-spacing: 0.1rem;\r\n  color: #30251D;\r\n  @media screen and (max-width: 767px) {\r\n    font-size: 17px;\r\n  }\r\n`;\r\n\r\nconst Line = styled.div`\r\n  width: 40px;\r\n  height: 2px;\r\n  background-color: #30251D;\r\n  margin: 60px auto;\r\n  @media screen and (max-width: 767px) {\r\n    margin: 40px auto;\r\n  }\r\n`;\r\n\r\nconst LinkBox = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  @media screen and (max-width: 800px) {\r\n    justify-content: center;\r\n  }\r\n`;\r\n\r\nconst LinkItem = css`\r\n  width: 30%;\r\n  max-width: 360px;\r\n  @media screen and (max-width: 1024px) {\r\n    width: 100%;\r\n    margin-bottom: 80px;\r\n  }\r\n`;\r\nconst LinkIntro = styled.div`\r\n  position: relative;\r\n  width: 100%;\r\n  background-position: center;\r\n  background-image: url(${props => props.bg});\r\n  &::before {\r\n    content: '';\r\n    display: block;\r\n    padding-bottom: 100%;\r\n  }\r\n`;\r\nconst LinkCase = styled.div`\r\n  width: 100%;\r\n  max-width: 145px;\r\n  padding: 15px;\r\n  height: 130px;\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  &::before {\r\n    content: '';\r\n    background-color: rgba(48, 37, 29, 0.8);\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n  }\r\n`;\r\n\r\nconst CaseName = styled.p`\r\n  font-weight: bold;\r\n  font-size: 22px;\r\n  letter-spacing: 0.1rem;\r\n  color: #FFFFFF;\r\n  position: relative;\r\n  z-index: 1;\r\n  white-space: break-spaces;\r\n`;\r\n\r\n\r\nconst CaseText = styled.p`\r\n  font-weight: 900;\r\n  font-size: 26px;\r\n  line-height: 44px;\r\n  color: rgba(255, 255, 255, 0.3);\r\n  position: relative;\r\n  z-index: 1;\r\n`;\r\n\r\nconst P = styled.p`\r\n  font-size: 18px;\r\n  letter-spacing: 0.1rem;\r\n  color: #30251D;\r\n  margin-top: 20px;\r\n  height: 85px;\r\n  @media screen and (max-width: 767px) {\r\n    height: auto;\r\n    font-size: 16px;\r\n  }\r\n`;\r\n\r\nconst More = styled.div`\r\n  position: relative;\r\n  width: 45%;\r\n  margin-left: auto;\r\n  padding: 2px 4px;\r\n  margin-top: 50px;\r\n  border: 1px solid #30251D;\r\n  font-size: 16px;\r\n  text-align: right;\r\n  letter-spacing: 0.1rem;\r\n  color: #30251D;\r\n  &::before {\r\n    content: '';\r\n    width: 40px;\r\n    height: 1px;\r\n    display: block;\r\n    background-color: #30251D;\r\n    position: absolute;\r\n    top: 50%;\r\n    left: -30px;\r\n  }\r\n`;\r\n\r\nconst HomeCase = () => {\r\n  return (\r\n    <Container>\r\n      <Title>\r\n        <p>\r\n          <img src={titleImg2} alt=\"\"/>\r\n          <span>最重要的乘客</span>\r\n        </p>\r\n      </Title>\r\n      <Note>三段冒險、三則故事、三個最重要的乘客</Note>\r\n      <Line />\r\n      <LinkBox>\r\n        {/* <LinkItem>\r\n          <LinkIntro>\r\n            <LinkCase>\r\n              <CaseName>赤翡翠</CaseName>\r\n              <CaseText>CASE 01</CaseText>\r\n            </LinkCase>\r\n          </LinkIntro>\r\n        </LinkItem> */}\r\n\r\n        {caseData.map((items, keys) => {\r\n          const {bg, caseText, bird, text, link} = items;\r\n          return (\r\n            <Link to={link} key={keys} className={LinkItem} onClick={()=>{\r\n              ReactGA.event({\r\n                category: \"202012_PRADO\",\r\n                action: \"Click\",\r\n                label: `HomePageCase-${bird}`,\r\n              });\r\n            }}>\r\n              {/* <LinkItem > */}\r\n                <LinkIntro bg={bg}>\r\n                  <LinkCase>\r\n                    <CaseName>{bird}</CaseName>\r\n                    <CaseText>{caseText}</CaseText>\r\n                  </LinkCase>\r\n                </LinkIntro>\r\n                <P>{text}</P>\r\n                <More>\r\n                  MORE\r\n                </More>\r\n              {/* </LinkItem> */}\r\n            </Link>\r\n          )\r\n        })}\r\n\r\n\r\n\r\n\r\n      </LinkBox>\r\n    </Container>\r\n  )\r\n};\r\n\r\nexport default HomeCase;","export default __webpack_public_path__ + \"static/media/storyCar.0f4d3f8d.jpg\";","import React from \"react\";\r\nimport ReactGA from \"react-ga\";\r\nimport styled from \"@emotion/styled\";\r\nimport { Link } from \"react-router-dom\";\r\nimport storyCar from \"../../images/homepage/storyCar.jpg\";\r\nimport title from \"../../images/homepage/story-title-2.png\"\r\n\r\nconst Container = styled.div`\r\n  width: 100%;\r\n  max-width: 1440px;\r\n  margin: auto;\r\n  position: relative;\r\n`;\r\n\r\nconst Left = styled.div`\r\n  width: 51.38888%;\r\n  @media screen and (max-width: 1024px) {\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\nconst Title = styled.h2`\r\n  font-weight: bold;\r\n  font-size: 48px;\r\n  line-height: 71px;\r\n  letter-spacing: 0.1rem;\r\n  color: #30251D;\r\n  padding: 0px 130px;\r\n  margin-bottom: 20px;\r\n  @media screen and (min-width: 767px) {\r\n    display: flex;\r\n    align-items: flex-end;\r\n  }\r\n  p {\r\n    img {\r\n      max-width: 90%;\r\n      /* @media screen and (max-width: 767px) {\r\n\r\n      } */\r\n    }\r\n  }\r\n  /* &::after {\r\n    content: '';\r\n    width: 40px;\r\n    height: 1px;\r\n    background-color: #30251D;\r\n    display: inline-block;\r\n    margin-left: 20px;\r\n    @media screen and (max-width: 1024px) {\r\n      display: block;\r\n      margin-left: 0px;\r\n      margin: auto;\r\n      margin-top: 20px;\r\n    }\r\n  } */\r\n  @media screen and (max-width: 1300px) {\r\n    padding: 0px 60px;\r\n  }\r\n  @media screen and (max-width: 1024px) {\r\n    text-align: center;\r\n    p {\r\n      img {\r\n        /* max-width: 200px; */\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  width: 100%;\r\n  margin: auto;\r\n  background: #30251D;\r\n  padding: 40px 160px 40px 130px;\r\n  @media screen and (max-width: 1300px) {\r\n    padding: 40px 160px 40px 60px;\r\n  }\r\n  @media screen and (max-width: 1024px) {\r\n    padding: 40px;\r\n  }\r\n`;\r\n\r\nconst H3 = styled.h3`\r\n  font-weight: 500;\r\n  font-size: 26px;\r\n  letter-spacing: 0.1rem;\r\n  color: #FFFFFF;\r\n  margin-bottom: 40px;\r\n  @media screen and (max-width: 767px) {\r\n    font-size: 24px;\r\n  }\r\n`;\r\n\r\nconst Text = styled.p`\r\n  font-size: 18px;\r\n  line-height: 27px;\r\n  letter-spacing: 0.1em;\r\n  color: #FFFFFF;\r\n  text-align: justify;\r\n  @media screen and (max-width: 767px) {\r\n    font-size: 16px;\r\n  }\r\n`;\r\n\r\nconst More = styled.div`\r\n  position: relative;\r\n  width: 45%;\r\n  border: 1px solid #FFF;\r\n  padding: 8px 10px 8px 20px;\r\n  margin-top: 50px;\r\n  a {\r\n    font-size: 18px;\r\n    text-align: left;\r\n    letter-spacing: 0.1rem;\r\n    color: #FFF;\r\n    display: block;\r\n  }\r\n  &::after {\r\n    content: '';\r\n    width: 50px;\r\n    height: 1px;\r\n    display: block;\r\n    background-color: #FFF;\r\n    position: absolute;\r\n    top: 50%;\r\n    right: -30px;\r\n  }\r\n  @media screen and (max-width: 767px) {\r\n    font-size: 16px;\r\n  }\r\n`;\r\n\r\nconst Right = styled.div`\r\n  width: 56.38888%;\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  img {\r\n    width: 100%;\r\n  }\r\n  @media screen and (max-width: 1024px) {\r\n    width: 100%;\r\n    position: relative;\r\n  }\r\n`;\r\n\r\n\r\n\r\nconst HomeCase = () => {\r\n  return (\r\n    <Container>\r\n      <Left>\r\n        <Title>\r\n          <p>\r\n            <img src={title} alt=\"\"/>\r\n          </p>\r\n          品牌故事\r\n        </Title>\r\n        <TextContainer>\r\n          <H3>全球最受愛戴的4WD</H3>\r\n          <Text>\r\n            自首次亮相以來已有60多年的歷史。\r\n            <br />\r\n            <br />\r\n            LAND CRUISER 是TOYOTA歷史最悠久的車系也是世界上許多人喜愛的四驅車。特別是在沙漠地形佔該國大部分地區的中東，市占率很高。\r\n            <br />\r\n            <br />\r\n            對於警察和邊防人員而言，它是執行重要任務不可或缺的夥伴。\r\n          </Text>\r\n          <More>\r\n              <Link to={\"/story/\"} onClick={()=>{\r\n                ReactGA.event({\r\n                  category: \"202012_PRADO\",\r\n                  action: \"Click\",\r\n                  label: `HomePageStory-品牌故事`,\r\n                });\r\n              }}>MORE</Link>\r\n          </More>\r\n        </TextContainer>\r\n      </Left>\r\n      <Right>\r\n        <img src={storyCar} alt=\"\"/>\r\n      </Right>\r\n    </Container>\r\n  )\r\n};\r\n\r\nexport default HomeCase;","export default \"data:image/png;base64,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\"","export default __webpack_public_path__ + \"static/media/aboutA.32a06bad.jpg\";","export default __webpack_public_path__ + \"static/media/aboutB.58c4b055.jpg\";","import React from \"react\";\r\nimport ReactGA from \"react-ga\";\r\nimport styled from \"@emotion/styled\";\r\nimport aboutA from \"../../images/homepage/aboutA.jpg\";\r\nimport aboutB from \"../../images/homepage/aboutB.jpg\";\r\nimport title from '../../images/homepage/story-title-w.png';\r\n\r\nconst Container = styled.div`\r\n  width: 90%;\r\n  max-width: 1180px;\r\n  margin: auto;\r\n`;\r\n\r\nconst Title = styled.h2`\r\n  font-weight: bold;\r\n  font-size: 48px;\r\n  line-height: 71px;\r\n  text-align: center;\r\n  letter-spacing: 0.1rem;\r\n  color: #30251D;\r\n`;\r\n\r\nconst Line = styled.div`\r\n  width: 40px;\r\n  height: 2px;\r\n  background-color: #30251D;\r\n  margin: 60px auto;\r\n  @media screen and (max-width: 767px) {\r\n    margin: 40px auto;\r\n  }\r\n`;\r\n\r\nconst Box = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  @media screen and (max-width: 767px) {\r\n    justify-content: center;\r\n  }\r\n`;\r\n\r\nconst BoxItem = styled.a`\r\n  width: 47.8%;\r\n  position: relative;\r\n  background-size: cover;\r\n  background-position: center;\r\n  &:hover {\r\n    &::after {\r\n      opacity: 0;\r\n    }\r\n    > h3 {\r\n      opacity: 0;\r\n    }\r\n  }\r\n  &:before {\r\n    content: '';\r\n    display: block;\r\n    padding-bottom: 42.4778%;\r\n  }\r\n  &::after {\r\n    transition: all .2s;\r\n    content: '';\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: rgba(48, 37, 29, 0.5);\r\n    border: 1px solid #30251D;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n  }\r\n  &:first-child {\r\n    background-image: url(${aboutA});\r\n    @media screen and (max-width: 767px) {\r\n      margin-bottom: 40px;\r\n    }\r\n  }\r\n  &:last-child {\r\n    background-image: url(${aboutB});\r\n  }\r\n  @media screen and (max-width: 767px) {\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\nconst Deep = styled.h3`\r\n  white-space: pre;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  z-index: 1;\r\n  color: #FFF;\r\n  font-size: 72px;\r\n  font-weight: 900;\r\n  line-height: 1.1;\r\n  letter-spacing: 0.1rem;\r\n  transition: all .2s;\r\n  img {\r\n    width: 100%;\r\n    max-width: 400px;\r\n  }\r\n  &::before {\r\n    content: '深入了解';\r\n    font-weight: 500;\r\n    font-size: 36px;\r\n    display: block;\r\n    @media screen and (max-width: 767px) {\r\n      font-size: 32px;\r\n    }\r\n  }\r\n  @media screen and (max-width: 767px) {\r\n    font-size: 52px;\r\n  }\r\n`;\r\n\r\nconst Anima = styled.h3`\r\n  white-space: pre;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  z-index: 1;\r\n  font-weight: bold;\r\n  font-size: 48px;\r\n  line-height: 120%;\r\n  letter-spacing: 0.1rem;\r\n  color: #FFFFFF;\r\n  transition: all .2s;\r\n  @media screen and (max-width: 767px) {\r\n    font-size: 32px;\r\n  }\r\n`;\r\n\r\nconst HomeAbout = () => {\r\n  return (\r\n    <Container>\r\n      <Title>關於這次冒險</Title>\r\n      <Line />\r\n      <Box>\r\n        <BoxItem href=\"https://www.toyota.com.tw/showroom/PRADO\" target=\"_blank\" rel=\"noreferrer\" onClick={()=>{\r\n              ReactGA.event({\r\n                category: \"202012_PRADO\",\r\n                action: \"Click\",\r\n                label: `HomePageAbout-深入了解PRADO`,\r\n              });\r\n            }}>\r\n          <Deep>\r\n            <img src={title} alt=\"\"/>\r\n          </Deep>\r\n        </BoxItem>\r\n        <BoxItem href=\"http://www.wildonetaiwan.org/\" target=\"_blank\" rel=\"noreferrer\" onClick={()=>{\r\n              ReactGA.event({\r\n                category: \"202012_PRADO\",\r\n                action: \"Click\",\r\n                label: `HomePageAbout-臺灣野灣野生動物保育協會`,\r\n              });\r\n            }}>\r\n          <Anima>\r\n            臺灣野灣野生\r\n            <br />\r\n            動物保育協會</Anima>\r\n        </BoxItem>\r\n      </Box>\r\n    </Container>\r\n  )\r\n};\r\n\r\nexport default HomeAbout;","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAakAAAAvCAYAAABZsjUqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAA+RSURBVHgB7Z3tdZw4F8f/k5Pvj7eCaCtItoIlFaxTwbIV7KSCTCqIU0EmFcRbgUkFcSqwUkG8FejRHS42ZgToSoKBWf3OUYiBAQSSru6LpA0ymQVhjFGYh/vNZnOPibD5uLCbC6Rn0ueeEv6272y6hN+7qWx6b/NbYULscxmcFm3TPW9vbfo6dZ4JLqOvbPrDJoX6myjHqQoydOfv+1YS52+DTGYh2EpT2s0nnJ6mwaB0jbpSackFbF5u7KbAaWg3eBUCnj81LKDonSjIeT1lo70AIeVC2/TZpn3qb8ff4m+bSkzTkfJB47ETopHJrAESUma5fLPpT0Febsyy+GJTgRNh7/3JhHOHCTHL5s4Iyp1HXrc2/TTL4c6M5O8ZMpmMD2QW2XOlKrA+yMR2Y2phoTAjfL8S4SiTsKFeGQp1ufuASOw19nZD1zmV9uRCYSR/z+1BqnxHD51aveaK/dKmf3nX/2z6Ye9z7fl7es5Xnd3a5znNo+21y21j3ze1qSmExtaKzQx25MzJUagbezJT7LA+SpsK+/xv7PPfYh7eIZ4StfnrvwppQBf2m/2FAFhALVnQU/6oDX17dMS4zRJJ1WszbMbx8kGYfvPJNxZCIff/nY8rkw4yqyhkxJhlm/tcbAfycmOWDZl8FCbGpK1bBSbArIttQP52Zj0c5Y/MfQoTYh4jevqghqlAOKQh3ZgRQTUjZFa5s89zicy5886st0NC9eUG05NCi5riWmvlg6mtSl54tL9L46hOzeGTohekRs6JjehamqAiPi3seTLpoe+7hGjEUEjLmawBM/G+qC6FWac/MDUS/9TaBPtRnZpUSAkKaYrKMoWg2m1GsOf8YhPZibtjV+g5/kbm3Fl7wyk2HwkokZ6sTXmWOda4SqyPoq0tPse0SMwJ5Dj7HBkzfxBUNv2GmeDAC4pOoe2XzuHCpvfInDs0GLLCOrmgBm+CQCmFaRz1xRTPK6QZlBqLM2jNE+oAVx7nhKJxPCjXF9XZhkBl5/COJxNSpo6WU45DFeoP07WrNmrea8Txyt77U2gUTASVY5+37Tizasj/+BZxPESJBhIzw8UUQrbAdP5u0qYqnA6KCo5tpw60fEYlZJCwvhiZfaSEnGvUFqTvSICpg9P2kJeFEk2dMvW4jy5R0X2mjui564neUJz6BpQVPde8MTI+tX4bGt0nMi0Yd56zX8oTExbd90Jw/Rd959N34vvfmTBedK53Y2REBzGYuhx/M3K+ITEm/D36UiARRk7ygBN7zXdGzh8D17s0ciYxpZq6bt0YOQX9fiqfVF+wxGGKDzbpXfX89pPxb9gr9Kuk1ODM7dTWjn3/Q2YR2HL3g1LPMZoTb4/aVKwh5+RaM9cr6uFryFBIiOm3oqTkrAb32m9HbgGvMaMtioFjv0PGnp8hOaztvYHcUkDjatMLKdPvrNN46p/5CHdlUvC3pWrUjUqfffgUgiqzYrhChVRWhQXAz38l/NmFSavxzxHcQHVb4byQlrsi8FiKe4sILJeHjt8UmtSXnv0KdfTdnanNiWRi6KsYW98CyJmn3mOvoMJ8UXZHvem+nntm0Uh7tMSSzLr/QE4SjX8mLarhrKJneQaQSvCTVwOdC4lmX23mmeT1o/D89ELKvrAdhguo6qS+Fywaf+IhqCY3xRj39FIpIoAyM7MJWwpDYSFsTjur9Jwh4qU5P59vBRmqu8MIBvsye8wA16tK8BNF//QJKfGHN4/Tv6eColcufU9mnwKZ/k41v5ercmYhlfnPEKFFkeYa0jE4x7GIXyHjpWOfwrT3jEFipTiYoZ8PHCRNRsMfEigu4abhltRNyG2B/lBJmgKkkvRs7bnUu6L/pnCsFmZ8qRnKM+VdOY7lMVIrJKAnSoQ0spMQ+Pz/Ip4QLYrCud9wJFdI1By5Bj5uVroQpANpx9bV5npHvKJeRFNjPqSh7WponFSJNLweeQmfbSGj4zvHMYW6pyRq7BMKqgLhC9ddbfJiXmtFGhlFLKmRFJf72EaerR4Kcq74/hV1SCGvb402dRYdQvoO3B4qz5+4zpNYwua29kjv9+IZpn1I31UlyaHWV0l2IVE8JKhwOtPf3jnlfGYtbCFnEaZdEzZfXopnDzG70XCUdh0NFTTbM/NNSb6HK98K/mjMCHeGJB2ig7mPCsYUH9g7lJd7D3Ru3+A06hlqHL/Q+5HrlhxJ2GeKbKMRR+MUvLb3ndPGm0kEN3TUs1eQc/IoTjaZkZleWp+jhBTft4CcXfuPrE09IGrEEYfG/Gj4B7Op5xz2mGSKjxjsc1DjcIXE8AC19yPnaLv5FZk1svfwG/riitD04X4Tv4BgYeJmeomZFim2cQ/Roqgh/trzLAXknJNvKlZILV2rFGtSmcyaKXB6rpEGhfnxNck7YfPiJeRcu+47tza10AHBsYJWIqQ05kcLzlVzrCeVyZw7qYTU3GjEa1Gh46KG7htqUQnxJWaWzUUWUplMHOT8D5nh4dRojEfeDmLCFzUcnOGA36eGHBo6c1Zz+s2AwsLJQiqTiaPE+tCIFFBMqBa1T3SOix0yGmdEr0+Ke0kKw2je3p/RYLpkcLRYgf5Bzs02v791slthJGdl05sE46IUwgR0N+y8DxqWQuY7aRAALVdSnHhRxFgkeZ7Tf5UKJThXPwgpblCpUNBAxgJCOMKKIpwqmz62e2k80O8DwtF83c/d3l8r7PYJ9jxRtJ6p14hRnd27pkLZ4/T8XQex7i5+1qq8FE7vG2YJHsBX2fTe1cO1x78g3RyENND4Y+vaMVFlmtM/9ppr9c2EMNnSBhPTRAHGNm6hWtQ9T5/kA7UnBeScelHEWJTg3DUKKdE9D0KKp1GhRlAhjlecaMGttjnhIvLaCnVhpYG9V46BsgrxKBxfp/33aB5YGH9B+P1L1KHIb9sNPgvikAiqPi4c9w5F8bZkQZvCjLR0tm0hvzKoft7RuESbhx0CiNCimvtPvXzOEpaYjyFWk9LwJ1XHV4ISnKufcYFLIaC6DzHVxI80HmKpUTxj2qLuJFcBU5At/LgkFMKF9BqobPptxQKqzbuItdbmnOk8lDU8Yx8SwaEd+yQDyxVmhOWNSAiTJlXA/aAV6lDQpiGlCSh/8v+755PQ6Pb0SzRr1PdzjWF1tZm8tcs7TDDwNwbWRpXjkEb9Lr67/ACmXsJ+j2OtjcyFY7Z7en+3kOPjR9EYNpnQM7ry/OoMfAIN9L0aE/b+DNcGI+33h0Sj4kamwPJZpTbVs+TPENqxT2ICpIjIFzOWbanmdvBJuUI2j3wtHZ5kyGaSZrbtChOfzG/HXo69BgmkXcC1l0I15FynYzYvtMRId9E5n1mprz2d0CHQc/81dAI3WK7FK0nwVpgH6qyk9oVpm/6dOZiFhOEOww2Mam0LpBEWpFFdC2bMKLGCsGVmjb4paSPuagOlHVdqu+eyDvwhPP8HCSmX1K4ggOfeU479KYSIT69/Ceie/Zc8gp4EuXY1fAGTLi4C8j3ZvNFzn9I0ebvCCDsX9x7jrdr5PARtcBACNcYK4ZCZ+rXnuWsah7RGbUr0fl2di4B6OaeQKiQnU/5ISCnHMXGDGSiQFMbtp30fLcX6N8lgQU09+iONEq0xHxwFqfnP9pbSV2GFujTyaV3uU/lUBoYpaGRmwX7LPer5C10WB1+oMb8Y0xxnXho+FavRpgJMqdXAMUlk5CzCPKD8HARwnyY1V6/+iiV+H43f4+h3m2WOKyLzWJ9vqo3qbB/gCLkn0X0DXEIe9afh12sqOCx/CNe38R0Hk0kIhcOTfwnhkXPUGRwrF2sMRqByrFYScSr9drcjxwr4M4cwl5afByF1SqT2V8IVgr4IWHD+yj0GqvRSJyihbPrCIfwVToeCvNessYAZ9f+rkFbFgTgl5AzWxZVqUQ3UOP6FBWPf7w5yH2M1cIxMx1v4Q8J8FzosYQzOn4KMQ0edhNSpfQoS6Fn/ceyb8n5iGhMM/Z9DyV/icRCl4tNU629XA7FGp+/1Snqs5wz5qkrIKUaOrzmku+Sxh4uzvvAYSHq3BYQM+TB5Nnlp205BNC/QM6FACBytSD7PAnIOPtg+IaUwD7pnf9Ogu/bfcIG74n3OgudjY/cgulDzMww69nm8StnZrTBOOaFprQm/7tJngiW2XOleL9Qce/aw07xC2FIXTiK1qD3S+CipzElN221SLor4ysMU7oNC3Hv1OUeiTRElaqFeoW4DYupxgYj8NW0ICalbJBBKPQMDP46EtpZ9kVk944caSOLvR6LiqFBX8CBFAABrTEeNt6fJTuO0uDoq130h6Py+yJy5dfyO3sE5rZK6RqT+COJioGMXqkWNDmPwZWQeTB9SLorYPMsp2XucIzX5tSlwWh7aD5oFvXKcQFFj3vHsrWlSuukFAiHhxfPvVY7DVEj+5POo0GnHOR9Y1RyEe/59syRIIhYPWl43kfAemj2Cj5WOQxrzIaq41Fvneeve9JxSInNKQhvi7li9FFpUErieVwiH6tlUs+DMzeDYywbuIFdYH08W4iQhReaibqGmD3ptan7SBKRDyZ7bN0Hpd97G9F6ue/a3BdC+5/i3njz85P0UD34Dt/mqkthl+dzKcai06eF+XVDP4qEcv9tjnL0J4w4JGNASFTKnRNK5avOLY1/ouKgpojxjh05szTqnG+si0U4XGWQ2whMrzDPuoVBEVp8gaZz7Q8nFVauRjxFSo+OhuFc/ZFbs5mGsoNLzhpgpUg2Iq3IYd+YEPNGk2MpQIIxrJCaBZnAO2tRO2HmmdnFNguoof4dFDzkjNDXPHnFmpkYl354gTJwE7RXiqRA4kzePbSLhdgs5zbsrHFNShVwvk4klJqJvqhkMYjtva9amgpaH4SCzNXR6r1z5exgnxY3yQXtgX067V6UwjEat3veZGaiRLR37fcwSFdy9uSe/ZY3wrX12yiSFfCsMDJrtoFELia8DgR6fcdyLO9IQWzMANNobvcd2tKLq/J5S75RJfE2azYL8cy+RZrhA9z6l4xxfk5FC5uzgNqBAGPvNdEMRqCNIIc2h9aDRptYW2LOPCUKxv6WIPXItbLFM9puFjn/NZB4gJ72Rs8i55Oxz3RgZKUKam3uHvMcn79LUAT+h/I4Jsdd/Z+IgH/EFX0uZZUPPmsxEaa+1NS2f/AIYzd8zZDKZTAsTt6jhHBP+xpoSSUBJZ+OeG416LsZfNwnXL2PTXwrXTixkzTk8y1j+Tj0tUiaTSQ+ZdTTkNGbg4KXhMYMZjc3fOzyO09Otw23T+hD02yX4ae5b6ZbTkNshmo5rh7TeSzxO4TY6bGcE7djX5E/zlky23zeeY9b+DxPXGRNEc3KQAAAAAElFTkSuQmCC\"","export default __webpack_public_path__ + \"static/media/homePageBg.87180811.jpg\";","import React from \"react\";\r\nimport styled from \"@emotion/styled\";\r\nimport ReactPlayer from \"react-player/youtube\";\r\n// import video from \"../../images/video.mp4\";\r\n\r\nconst MastheadBox = styled.div`\r\n  width: auto;\r\n  height: auto;\r\n  /* height: 100vh; */\r\n`;\r\n\r\nconst MastheadContainer = styled.div`\r\n  position: relative;\r\n  padding-top: 56.25%; // Percentage ratio for 16:9\r\n  position: relative; \r\n  overflow: hidden;\r\n  > div {\r\n    pointer-events: none;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n  }\r\n`;\r\n\r\n// const MastheadVideo = styled.div`\r\n//   position: absolute;\r\n//   top: 0;\r\n//   left: 0;\r\n//   right: 0;\r\n//   bottom: 0;\r\n//   background-color: black;\r\n//   pointer-events: none;\r\n \r\n//   > div > video {\r\n//     object-fit: cover;\r\n//   }\r\n// `;\r\n\r\nconst Masthead = props => {\r\n  const {ytId} = props;\r\n  return (\r\n    <MastheadBox>\r\n      <MastheadContainer>\r\n        <ReactPlayer\r\n          url={\"https://www.youtube.com/embed/\"+ytId+\"?autoplay=1&control=0&rel=0&fs=0\"}\r\n          width=\"100%\"\r\n          height=\"100%\"\r\n          playing={true}\r\n          muted\r\n          volume={0}\r\n          playsinline\r\n          loop\r\n          config={{\r\n            file: {\r\n              attributes: {\r\n                poster: \"\"\r\n              }\r\n            }\r\n          }}\r\n          onReady={() => {\r\n            // console.log(\"ready\");\r\n          }}\r\n          // onDuration={5000}\r\n          onError={err => {\r\n            console.log(err);\r\n          }}\r\n        />\r\n        {/* <MastheadVideo>\r\n          \r\n        </MastheadVideo> */}\r\n      </MastheadContainer>\r\n      \r\n    </MastheadBox>\r\n  );\r\n};\r\n\r\nexport default Masthead;\r\n","import React, {useEffect} from \"react\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport ReactGA from \"react-ga\";\r\nimport ScrollToTop from \"../ScrollToTop\";\r\nimport styled from \"@emotion/styled\";\r\n// import homePageKv from \"../../images/homepage/homepage.jpg\";\r\nimport HomeCase from \"./HomeCase\";\r\nimport HomeStory from \"./HomeStory\";\r\nimport HomeAbout from \"./HomeAbout\";\r\nimport homeBg from \"../../images/homepage/homePageBg.jpg\";\r\nimport Masthead from \"../Masthead\";\r\n\r\nconst Group = styled.div`\r\n  width: 100%;\r\n  background-image: url(${homeBg});\r\n  background-size: 360px;\r\n  background-position: -50% -50%;\r\n`;\r\n\r\n// const Kv = styled.div`\r\n//   width: 100%;\r\n//   height: 100vh;\r\n//   background-image: url(${homePageKv});\r\n//   background-size: cover;\r\n//   background-repeat: no-repeat;\r\n//   background-position: center;\r\n// `;\r\n\r\nconst Section = styled.section`\r\n  width: 100%;\r\n  margin: auto;\r\n  padding: 120px 0px;\r\n  /* border-left: 0.25px solid rgba(48, 37, 29, 0.1);\r\n  border-right: 0.25px solid rgba(48, 37, 29, 0.1); */\r\n`;\r\n\r\nconst HomePage = () => {\r\n  useEffect(() => {\r\n    ReactGA.pageview(`/202012_PRADO/`);\r\n    document.title = \"TOYOTA Prado - 最重要的乘客\";\r\n  }, []);\r\n  return (\r\n    <>\r\n      <ScrollToTop />\r\n      <Masthead ytId={\"WP2Ua70V9qk\"}/>\r\n      <Group>\r\n        <Section>\r\n          <HomeCase />\r\n        </Section>\r\n        <Section>\r\n          <HomeStory />\r\n        </Section>\r\n        <Section>\r\n          <HomeAbout />\r\n        </Section>\r\n      </Group>\r\n    </>\r\n  )\r\n};\r\n\r\nexport default withRouter(HomePage);","import React from \"react\";\r\nimport styled from \"@emotion/styled\";\r\n\r\nconst P = styled.p`\r\n  font-weight: normal;\r\n  font-size: 24px;\r\n  line-height: 36px;\r\n  text-align: center;\r\n  color: #30251D;\r\n`;\r\nconst Title = styled.h1`\r\n  font-weight: bold;\r\n  font-size: 64px;\r\n  line-height: 95px;\r\n  text-align: center;\r\n  color: #30251D;\r\n  @media screen and (max-width: 767px) {\r\n    font-size: 42px;\r\n    line-height: 80px;\r\n  }\r\n`;\r\n\r\nconst CaseTitle = (props) => {\r\n  const {num, text} = props.title;\r\n  return (\r\n    <div>\r\n      <P>CASE {num}</P>\r\n      <Title>{text}</Title>\r\n    </div>\r\n  )\r\n};\r\n\r\nexport default CaseTitle;","\r\nconst Str = (str) => str.replace(/^\\s+|\\s+$/g, '');\r\n\r\nexport default Str;\r\n","import React from 'react';\r\n\r\nimport intersperse from 'intersperse';\r\nimport trimSpaceAndNewline from './trimSpaceAndNewline';\r\n\r\nconst Text = (text) =>\r\nintersperse(trimSpaceAndNewline(text).split('\\n'), <br />);\r\n\r\nexport default Text;\r\n","import React, { Fragment } from 'react';\r\n\r\nconst Arr = (arr) => React.createElement(Fragment, null, ...arr);\r\n\r\nexport default Arr;\r\n","export default __webpack_public_path__ + \"static/media/caseBg.84c54bd2.jpg\";","import React from \"react\";\r\nimport styled from \"@emotion/styled\";\r\nimport MediaQuery from \"react-responsive\";\r\n\r\nconst Kv = styled.div`\r\n  width: 100%;\r\n  height: 100vh;\r\n  background-image: url(${props=>props.bg});\r\n  background-size: cover;\r\n  background-position: center;\r\n`;\r\n\r\nconst Mobile = styled.div`\r\n  width: 100%;\r\n  img {\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\n\r\nconst Temporarily = ({img}) => {\r\n  return (\r\n    <>\r\n      <MediaQuery minWidth={1024}>\r\n        <Kv bg={img}/>\r\n      </MediaQuery>\r\n      <MediaQuery maxWidth={1023}>\r\n        <Mobile>\r\n          <img src={img} alt=\"\"/>\r\n        </Mobile>\r\n      </MediaQuery>\r\n    </>\r\n  )\r\n};\r\n\r\nexport default Temporarily;","import React, {useState, useEffect} from \"react\";\r\nimport ReactGA from \"react-ga\";\r\nimport ScrollToTop from \"../ScrollToTop\";\r\nimport styled from '@emotion/styled/macro';\r\nimport Masthead from \"../Masthead\";\r\nimport CaseTitle from \"./CaseTitle\";\r\nimport mapStrToBr from \"../../utility/mapStrToBr\";\r\nimport convertArrayIntoSingleFragment from \"../../utility/convertArrayIntoSingleFragment\";\r\nimport { Link } from \"react-router-dom\";\r\nimport bg from \"../../images/case/caseBg.jpg\";\r\nimport Temporarily from \"./Temporarily\";\r\n\r\nconst Bg = styled.div`\r\n  width: 100%;\r\n  background-image: url(${bg});\r\n  background-size: 360px;\r\n`;\r\n\r\n// const CaseKv = styled.div`\r\n//   width: 100%;\r\n//   height: 100vh;\r\n//   background-color: steelblue;\r\n// `;\r\n\r\nconst CaseSection = styled.section`\r\n  padding: 60px 0px;\r\n  width: 90%;\r\n  max-width: 1200px;\r\n  margin: auto;\r\n  border-left: 0.25px solid rgba(48, 37, 29, 0.1);\r\n  border-right: 0.25px solid rgba(48, 37, 29, 0.1);\r\n  @media screen and (max-width: 767px) {\r\n    padding: 30px 0px;\r\n  }\r\n`;\r\n\r\nconst CasrLinkBox = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: flex-end;\r\n  margin: 60px auto;\r\n  > * {\r\n    flex: 0 0 33.3333%;\r\n  }\r\n  a {\r\n    font-weight: bold;\r\n    font-size: 24px;\r\n    line-height: 36px;\r\n    letter-spacing: 0.1rem;\r\n    color: #30251D;\r\n    @media screen and (max-width: 767px) {\r\n      font-size: 14px;\r\n    }\r\n  }\r\n  > div:last-child {\r\n    text-align: right;\r\n  }\r\n  @media screen and (max-width: 767px) {\r\n    margin: 30px auto 60px;\r\n  }\r\n`;\r\n\r\nconst Line = styled.div`\r\n  /* display: flex;\r\n  justify-content: center;\r\n  align-items: flex-end; */\r\n  &::before {\r\n    content: '';\r\n    width: 40px;\r\n    height: 2px;\r\n    display: block;\r\n    background-color: #30251D;\r\n    margin: auto;\r\n  }\r\n`;\r\n\r\nconst CaseInfoContainer = styled.div`\r\n  width: 100%;\r\n`;\r\n\r\nconst CaseInfoImg = styled.div`\r\n  img {\r\n    width: 100%;\r\n  }\r\n`;\r\nconst CaseInfoText = styled.div`\r\n  p {\r\n    font-size: 18px;\r\n    text-align: justify;\r\n    letter-spacing: 0.1rem;\r\n    color: #30251D;\r\n    @media screen and (max-width: 1024px) {\r\n      font-size: 16px;\r\n      margin-top: 20px;\r\n    }\r\n  }\r\n`;\r\n\r\nconst CaseInfoItem = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  > div {\r\n    width: 50%;\r\n    @media screen and (max-width: 1024px) {\r\n      width: 100%;\r\n    }\r\n  }\r\n  &:nth-of-type(odd) {\r\n    flex-direction: row-reverse;\r\n    @media screen and (min-width: 767px) {\r\n      ${CaseInfoText} {\r\n        padding-right: 40px;\r\n      }\r\n    }\r\n  }\r\n  &:nth-of-type(even) {\r\n    @media screen and (min-width: 767px) {\r\n      ${CaseInfoText} {\r\n        padding-left: 40px;\r\n      }\r\n    }\r\n  }\r\n  &:not(:last-child) {\r\n    margin-bottom: 100px;\r\n  }\r\n`;\r\n\r\nconst Note = styled.p`\r\n  font-size: 16px;\r\n  letter-spacing: 0.1rem;\r\n  color: #30251D;\r\n  margin-top: 60px;\r\n  text-align: center;\r\n  @media screen and (max-width: 767px) {\r\n    text-align: left;\r\n  }\r\n`;\r\n\r\n\r\n\r\nconst link = [\"kestrel\", \"formosan-masked-civet\", \"ruddy-kingfisher\"];\r\n\r\nconst Case = (props) => {\r\n  const {title, info, ytId, t} = props.data;\r\n  const [linkIndex] = useState(0);\r\n  const [prev, setPrev] = useState('/kestrel/');\r\n  const [next, setNext] = useState('/formosan-masked-civet/');\r\n  useEffect(()=>{\r\n    const i = window.location.pathname.split('/event/202012_PRADO/')[1].split('/')[0];\r\n    switch (link.indexOf(i)) {\r\n      case 0:\r\n        setPrev('/ruddy-kingfisher/');\r\n        setNext('/formosan-masked-civet/');\r\n        break;\r\n      case 1:\r\n        setPrev('/kestrel/');\r\n        setNext('/ruddy-kingfisher/');\r\n        break;\r\n      case 2:\r\n        setPrev('/formosan-masked-civet/');\r\n        setNext('/kestrel/');\r\n       break;\r\n       default:\r\n        setPrev('/kestrel/');\r\n        setNext('/formosan-masked-civet/');\r\n         break;\r\n    }\r\n    ReactGA.pageview(`/202012_PRADO/${i}`);\r\n    document.title = `TOYOTA Prado - ${i}`;\r\n  }, [])\r\n  return (\r\n    <>\r\n      <ScrollToTop />\r\n      <Bg>\r\n        {ytId ? <Masthead ytId={ytId}/> : <Temporarily img={t}/>}\r\n        \r\n        <CaseSection>\r\n          <CaseTitle title={title}/>\r\n          <CasrLinkBox>\r\n            <div>\r\n              <Link to={prev} onClick={()=>{\r\n                ReactGA.event({\r\n                  category: \"202012_PRADO\",\r\n                  action: \"Click\",\r\n                  label: `Case-上一段冒險:${prev}`,\r\n                });\r\n              }}>← 上一段冒險</Link>\r\n            </div>\r\n            <Line />\r\n            <div>\r\n              <Link to={next} onClick={()=>{\r\n                ReactGA.event({\r\n                  category: \"202012_PRADO\",\r\n                  action: \"Click\",\r\n                  label: `Case-下一段冒險:${next}`,\r\n                });\r\n              }}>下一段冒險 →</Link>\r\n            </div>\r\n          </CasrLinkBox>\r\n          {/* {props.children} */}\r\n          \r\n          <CaseInfoContainer>\r\n            {info.map((items, keys) => {\r\n              const {text, img} = items;\r\n              return (\r\n                <CaseInfoItem key={keys}>\r\n                  <CaseInfoImg>\r\n                    <img src={img} alt=\"\"/>\r\n                  </CaseInfoImg>\r\n                  <CaseInfoText>\r\n                    <p>{convertArrayIntoSingleFragment(mapStrToBr(text))}</p>\r\n                  </CaseInfoText>\r\n                </CaseInfoItem>\r\n              )\r\n            })}\r\n            {/* <CaseInfoItem>\r\n              <CaseInfoImg>\r\n                <img src=\"\" alt=\"\"/>\r\n              </CaseInfoImg>\r\n              <CaseInfoText>\r\n                <p></p>\r\n              </CaseInfoText>\r\n            </CaseInfoItem> */}\r\n\r\n\r\n          </CaseInfoContainer>\r\n          <Note>註：為保護野生動物，影片中部分野放點非真實地點，廣告效果請勿模仿</Note>\r\n        </CaseSection>\r\n      </Bg>\r\n    </>\r\n  )\r\n}\r\n\r\nexport default Case;","export default __webpack_public_path__ + \"static/media/kestrel1.4a34a663.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel2.9faf1485.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel3.18b1bf03.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel4.bf39c9e5.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel5.d3bc16bc.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel6.faa0c7ae.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel7.756b2e60.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel8.4dc08149.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel9.82910c40.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel10.0d7b44e8.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel11.c9496141.jpg\";","export default __webpack_public_path__ + \"static/media/kestrel12.c35c6717.jpg\";","export default __webpack_public_path__ + \"static/media/formosan-1.703cdcf9.jpg\";","export default __webpack_public_path__ + \"static/media/formosan-2.96212994.jpg\";","export default __webpack_public_path__ + \"static/media/formosan-3.f713b7d1.jpg\";","export default __webpack_public_path__ + \"static/media/formosan-4.1fbeca1a.jpg\";","export default __webpack_public_path__ + \"static/media/formosan-5.241ca447.jpg\";","export default __webpack_public_path__ + \"static/media/formosan-6.7994f84f.jpg\";","export default __webpack_public_path__ + \"static/media/formosan-7.e64bb0e6.jpg\";","export default __webpack_public_path__ + \"static/media/formosan-8.1b34accb.jpg\";","export default __webpack_public_path__ + \"static/media/formosan-9.fb5ff0d3.jpg\";","export default __webpack_public_path__ + \"static/media/ruddy-1.519914c3.jpg\";","export default __webpack_public_path__ + \"static/media/ruddy-2.b6aae489.jpg\";","export default __webpack_public_path__ + \"static/media/ruddy-3.345eba99.jpg\";","export default __webpack_public_path__ + \"static/media/ruddy-4.b0460a7d.jpg\";","export default __webpack_public_path__ + \"static/media/ruddy-5.7ad12a5e.jpg\";","export default __webpack_public_path__ + \"static/media/ruddy-6.f664056b.jpg\";","export default __webpack_public_path__ + \"static/media/ruddy-7.558ac40c.jpg\";","export default __webpack_public_path__ + \"static/media/case1Kv.5cddd500.jpg\";","export default __webpack_public_path__ + \"static/media/case2Kv.aafe2b5a.jpg\";","export default __webpack_public_path__ + \"static/media/case3Kv.a71ef957.jpg\";","import kestrel1 from \"../../images/case/kestrel1.jpg\";\r\nimport kestrel2 from \"../../images/case/kestrel2.jpg\";\r\nimport kestrel3 from \"../../images/case/kestrel3.jpg\";\r\nimport kestrel4 from \"../../images/case/kestrel4.jpg\";\r\nimport kestrel5 from \"../../images/case/kestrel5.jpg\";\r\nimport kestrel6 from \"../../images/case/kestrel6.jpg\";\r\nimport kestrel7 from \"../../images/case/kestrel7.jpg\";\r\nimport kestrel8 from \"../../images/case/kestrel8.jpg\";\r\nimport kestrel9 from \"../../images/case/kestrel9.jpg\";\r\nimport kestrel10 from \"../../images/case/kestrel10.jpg\";\r\nimport kestrel11 from \"../../images/case/kestrel11.jpg\";\r\nimport kestrel12 from \"../../images/case/kestrel12.jpg\";\r\n\r\nimport formosan1 from \"../../images/case/formosan-1.jpg\";\r\nimport formosan2 from \"../../images/case/formosan-2.jpg\";\r\nimport formosan3 from \"../../images/case/formosan-3.jpg\";\r\nimport formosan4 from \"../../images/case/formosan-4.jpg\";\r\nimport formosan5 from \"../../images/case/formosan-5.jpg\";\r\nimport formosan6 from \"../../images/case/formosan-6.jpg\";\r\nimport formosan7 from \"../../images/case/formosan-7.jpg\";\r\nimport formosan8 from \"../../images/case/formosan-8.jpg\";\r\nimport formosan9 from \"../../images/case/formosan-9.jpg\";\r\n\r\nimport ruddy1 from \"../../images/case/ruddy-1.jpg\";\r\nimport ruddy2 from \"../../images/case/ruddy-2.jpg\";\r\nimport ruddy3 from \"../../images/case/ruddy-3.jpg\";\r\nimport ruddy4 from \"../../images/case/ruddy-4.jpg\";\r\nimport ruddy5 from \"../../images/case/ruddy-5.jpg\";\r\nimport ruddy6 from \"../../images/case/ruddy-6.jpg\";\r\nimport ruddy7 from \"../../images/case/ruddy-7.jpg\";\r\n\r\nimport case1Kv from \"../../images/case/case1Kv.jpg\";\r\nimport case2Kv from \"../../images/case/case2Kv.jpg\";\r\nimport case3Kv from \"../../images/case/case3Kv.jpg\";\r\n\r\n\r\n\r\nconst dataA = {\r\n  t: case1Kv,\r\n  ytId: 'PmTWQCILYas',\r\n  title: {\r\n    num: \"01\",\r\n    text: \"紅隼\",\r\n  },\r\n  info: [\r\n    {\r\n      text: `\r\n      湍急的河水、崎嶇的溪床，家鄉在對岸的山林裡，一切看似近若咫尺，卻萬般驚險、難以靠近。這次，能順利抵達嗎?\r\n      `,\r\n      img: kestrel1\r\n    },\r\n    {\r\n      text: `\r\n      在臺灣，每年有上千隻野生動物，因車禍、陷阱、中毒、盜獵等種種原因遭遇不幸；而在幅員遼闊的花東，更可能因送醫車程過長、醫療資源不足等問題，讓許多受傷的野生動物在還沒來得及救治就回天乏術。\r\n      \r\n      臺東池上野灣野生動物醫院正努力為花東的野生動物爭取更多活下去的機會，雖然沒有豐厚的資金、充足的人力，但有一群人在這裡懷抱熱情，努力不懈。他們每年救治上百隻受難的動物，經過獸醫的診治加上保育員的照顧、訓練，替受傷的野生動物們爭取重返山林的機會。\r\n      `,\r\n      img: kestrel2\r\n    },\r\n    {\r\n      text: `\r\n      這次，柯有倫來到了池上，為了送這些重要的乘客重返山林，他駕駛著有陸地巡航艦美稱的TOYOTA LAND CRUISER PRADO，準備展開最困難的三項任務。\r\n\r\n      在野灣醫治完動物之後，柯有倫與PRADO將載著他們，深入山林與溪水峽谷，利用PRADO絕佳的越野性能，帶著野生動物回到更沒有人類打擾的荒野中。\r\n      `,\r\n      img: kestrel3\r\n    },\r\n    {\r\n      text: `\r\n      2020年9月7日，一隻紅隼在機場周圍被發現，因不明原因無法飛行，差點被車輾斃，飽受驚嚇，被好心民眾送到野灣動物醫院。\r\n\r\n      「當時牠抵達醫院的時候，狀況虛弱，體重只有正常的一半，經過一連串檢查，我們判斷應該是營養與肌力不足，讓牠無法正常飛行。」保育員朝盛一邊小心翼翼掀開掩蓋籠子的布條，檢查紅隼的休息狀況；一邊解釋道。\r\n      `,\r\n      img: kestrel4\r\n    },\r\n    {\r\n      text: `\r\n      經過獸醫與保育員三個多月的治療、餵食、訓練，紅隼才又能重新飛翔。（圖為紅隼在大型訓練籠中，由自動相機捕捉下的畫面）\r\n      `,\r\n      img: kestrel5\r\n    },\r\n    {\r\n      text: `\r\n      野放當天，柯有倫、保育員們一行人駕車來到北絲鬮溪的深處上游，目標是越過河床，讓紅隼回到對岸的山林裡。\r\n\r\n      面對廣闊的溪床與湍急的河水，大夥兒在車邊討論著待會過溪的狀況，由於連日降雨，水位上漲了不少，任務比想像中更艱難，這也是為什麼PRADO前來支援此次任務。      \r\n      `,\r\n      img: kestrel6\r\n    },\r\n    {\r\n      text: `\r\n      「慢點！慢點！」當PRADO駛入水中的同時，能夠明顯感受到車身被水流帶走的橫移，讓眾人捏了一把冷汗。\r\n\r\n      「這個地方需要一鼓作氣，PRADO的底盤是出名的堅韌，還有絕佳的大扭力，沒問題的！」柯有倫堅定握著方向盤，安撫著說道。有的路段水位深及腰部，水流不時湧上沖擊引擎蓋，讓人有種被淹沒的錯覺。\r\n      `,\r\n      img: kestrel7\r\n    },\r\n    {\r\n      text: `\r\n      幸虧LAND CRUISER PRADO的純正越野設計，2021年式全新搭載2.8L 渦輪增壓柴油引擎，擁有最大51.0 Kg-m的強大扭力，搭配設定在高位置的頭燈與進氣壩，讓它得以通過困難的涉水地形，雖然氣氛緊張，但在駕馭的過程中，能夠完整的感受到PRADO優異的性能所帶來的駕馭樂趣。\r\n      `,\r\n      img: kestrel8\r\n    },\r\n    {\r\n      text: `\r\n      沿著溪床朝上游行駛近一小時，突破7、8處涉水路段，強勁的水流甚至將車牌沖斷，一度擔心這次必須要先撤退，不過最後PRADO帶領著大家，順利越過湍急溪水，抵達預定的野放地點，讓所有人都表示讚嘆，也鬆了一口氣。\r\n      `,\r\n      img: kestrel9\r\n    },\r\n    {\r\n      text: `\r\n      經過了三個多月的努力，終於來到了這一刻。\r\n\r\n      緩慢打開籠子，紅隼面對自由廣闊的天空探了探頭，躊躇了幾秒後，瞬間，振翅朝遠方的藍天與山林飛去，原以為牠會直衝到消失不見，但牠在遠方空中盤旋了幾圈，似乎在與保育員不捨道謝，最後才成為黑點，隱沒在樹林間。\r\n      `,\r\n      img: kestrel10\r\n    },\r\n    {\r\n      text: `\r\n      面對這些日子以來的照顧，保育員們全程都望著天際，眼神遲遲不願離開紅隼離開的方向。\r\n\r\n      「雖然不捨，這卻是最棒的結局，因為不是每隻野生動物都撐得到回家那天。可以成功野放牠們就是最棒的事情。」保育員這麼說著。\r\n      `,\r\n      img: kestrel11\r\n    },\r\n    {\r\n      text: `\r\n      第一趟任務圓滿結束了，大夥兒在河川旁用帶來的鍋爐煮食、休息，緩解前面緊張的情緒，再收拾回程。\r\n\r\n      而柯有倫與PRADO的故事未完待續。\r\n      `,\r\n      img: kestrel12\r\n    }\r\n  ]\r\n};\r\nconst dataB = {\r\n  t: case2Kv,\r\n  ytId: '5jg6sExPRC4',\r\n  title: {\r\n    num: \"02\",\r\n    text: \"白鼻心\",\r\n  },\r\n  info: [\r\n    {\r\n      text: `第二次任務，柯有倫與TOYOTA LAND CRUISER PRADO 從溪谷返回山林，從ON-ROAD再回到OFF-ROAD。幼小的白鼻心極容易受到驚嚇，需要小心翼翼行駛著，PRADO能否提供最安穩的乘坐體驗，讓最重要的乘客順利回家？`,\r\n      img: formosan1\r\n    },\r\n    {\r\n      text: `\r\n      數個月前，年幼的白鼻心遭人類飼養的土狗追逐而與母親失散，當時牠才剛斷乳換牙，無法獨自在野外生存，只能由野灣野生動物醫院代為照顧，直到牠成熟到足以應付野外生活。\r\n\r\n      「牠剛到醫院時，令大家都滿擔心的，因為好像都不怎麼吃東西。」保育員朝盛邊準備著待會兒要用來移動白鼻心的籠子，邊憶起最初的情況。\r\n\r\n      「畢竟剛從野外到人類環境吧！一開始很不適應，還被捉起來健康檢查，所以比較沒有安全感，食慾不太好。」獸醫師昀蓉則是整理著野放前最後健康檢查的設備，邊補充說明。\r\n      `,\r\n      img: formosan2\r\n    },\r\n    {\r\n      text: `這幾個月來，雖然白鼻心剛開始對人類保持戒心，會有威嚇、小小攻擊保育員的動作，但持續照顧之後，牠慢慢進食、適應環境、增加活力，也越來越適應住院的生活。`,\r\n      img: formosan3\r\n    },\r\n    {\r\n      text: `從餵奶開始，再逐漸轉移到固體食物，如水果、小雞、老鼠等等，每天，保育員除了餵食、記錄健康狀態，還得進行讓白鼻心熟悉野生環境的訓練， 讓牠住進模擬野外環境的大型訓練籠之中，並放置一些野果，讓白鼻心習慣自己去找尋、取食。`,\r\n      img: formosan4\r\n    },\r\n    {\r\n      text: `12月3日這天，一切就緒，努力很久的白鼻心終於要回家了，待在野灣這麼多天，大家也對白鼻心萌生了情感，所有照顧過牠的保育員、獸醫師都希望能一同前往，送牠重返山林的家。`,\r\n      img: formosan5\r\n    },\r\n    {\r\n      text: `\r\n      「我們這樣六個人坐得下嗎？」朝盛看著後座空間問道。\r\n\r\n      「沒問題的，最後一排可以將座椅升上來，最多能坐七個人。來！上車吧！」柯有倫邊按著電動按扭，邊笑著調整座椅。\r\n      \r\n      LAND CRUISER PRADO有著七人座大空間，柯有倫、五名保育員與安置在籠子內的白鼻心，全部人坐滿也不會過於擁擠；平時如果只乘坐2-4人，最後排的椅背整排倒下，足夠放置充足的裝備與行李。\r\n      \r\n      `,\r\n      img: formosan6\r\n    },\r\n    {\r\n      text: `\r\n      原本最令人擔心的是行駛過程中，越野車的晃動不適會讓白鼻心再次過於緊張，但沒想到PRADO的正統越野外表下，蘊藏著柔情的內在。\r\n\r\n      雖為越野車，但PRADO行駛在一般道路與平緩山路時格外舒適，隔音與座椅可以比擬一般頂級休旅。標配TSS /PVM/ 7SRS氣囊與搭載KDSS動態懸吊控制系統以及AVS可變阻尼避震系統，不管何種道路與地形，給予駕駛最穩定安全的操控與反饋。\r\n      \r\n      「當ON-ROAD狀態，你不覺得自己開的是一台極致野性的越野車，整體感受是很平穩的，即使當作日常代步車也不覺得突兀；一旦切換到了OFF-ROAD，PRADO內斂的外表下，卻有藏不住的傲氣。」在彎過最後一道彎，車子停下，柯有倫為這幾次駕駛PRADO的感受詮釋出一個註腳。      \r\n      `,\r\n      img: formosan7\r\n    },\r\n    {\r\n      text: `從平地深入山林，小小白鼻心一路情緒穩定，打開籠門後，他先是探了探頭，最後沒有回頭，隱沒樹叢間，順利地回家了。全部的人鬆了一口氣，開心地笑了。`,\r\n      img: formosan8\r\n    },\r\n    {\r\n      text: `\r\n      「越野」的意義，除了體驗其中樂趣之外，正是帶我們跨越文明與荒野的界線，看到在都市叢林沒有想過的事情。\r\n\r\n      這兩次任務，我們橫越河床溪谷、穿梭林間、看見大群虎頭蜂啃食山羊屍體、看紅隼與白鼻心從人類文明回到自然荒野的瞬間，那樣的衝擊與感動，如果從未跨越文明界線，可能是一輩子無法體會到的。\r\n      \r\n      了解自然環境、了解野生動物，意識到文明與自然可能帶著些微衝突，我們努力找尋平衡，並努力保護野生動物。\r\n      \r\n      也許，這就是「越野」的精神。\r\n      `,\r\n      img: formosan9\r\n    }\r\n  ]\r\n};\r\nconst dataC = {\r\n  t: case3Kv,\r\n  ytId: '_xQ0o57NxAI',\r\n  title: {\r\n    num: \"03\",\r\n    text: \"赤翡翠\",\r\n  },\r\n  info: [\r\n    {\r\n      text: `編號003的任務，是送赤翡翠回到幽靜山林。更顛簸的林道、更劇烈的晃動，再次展現TOYOTA LAND CRUISER PRADO的越野能力，柯有倫與野灣野生動物醫院的邂逅，會在什麼挑戰之下劃上句點呢？`,\r\n      img: ruddy1\r\n    },\r\n    {\r\n      text: `\r\n      那天，接到民眾的通報，一位短暫來台灣的訪客遇上了意外，暫時無法離開。\r\n\r\n      請善心人士送來野灣的，是一隻體格嬌小但毛色亮麗的赤翡翠，由於醫院當時還沒有X光設備，獸醫師僅能以觸診檢查，初步判斷沒有骨折，唯獨脖子卻有一個五元硬幣大小的撕裂傷，須儘快處理。\r\n      \r\n      這樣一個大小的撕裂傷對於赤翡翠嬌小的身軀來說，是非常嚴重的，於是緊急止血、進行手術縫合，才保住了牠的性命。往後的日子，為了避免傷口處皮膚過薄而讓內臟與肌肉乾掉，每天都要謹慎地清創與包紮傷口。起初，小傢伙甚至沒辦法自行取食，得用夾子塞一些小魚、小昆蟲餵他；兩週後，才開始可以放一些小魚在水盆裡，讓他自行取食。\r\n      \r\n      `,\r\n      img: ruddy2\r\n    },\r\n    {\r\n      text: `「第四週的時候，我們也開始試著讓牠進行模擬飛行訓練，但小型鳥類不適合在像白鼻心住的那種訓練籠裡，因為牠們容易緊張，常常橫衝直撞，如果撞上鐵籠可能再次傷害。所以我們在這裡搭建了一組小型帳篷，讓他在裡頭練習飛行，即使不幸衝撞了也沒事。」朝盛與柯有倫解釋道。`,\r\n      img: ruddy3\r\n    },\r\n    {\r\n      text: `\r\n      而一個半月後的今天，是赤翡翠的大日子，小心翼翼地將赤翡翠放進移動籠，安置在PRADO的後座，柯有倫與保育員們開著PRADO深入山林，護送赤翡翠回到森林裡頭。\r\n\r\n      由於受過較嚴重的傷，希望讓赤翡翠在深山一點的地方適應，避免遭受打擾，我們深入東部的部落深山，路途上經過好幾處顛簸的地形，讓車身大角度傾斜，但幸虧有智慧型越野顯示幕，車頭、車側、車尾全方位攝影鏡頭顯示車輛周圍影像，「底盤透視」功能更可以掌握越野的輪胎位置與狀況。\r\n      `,\r\n      img: ruddy4\r\n    },\r\n    {\r\n      text: `\r\n      這幾次任務下來，行駛著PRADO涉水、越野走過不同地形，在智慧型越野地形系統(Multi-Terrain Select)中，提供五種地形模式，搭配Crawl Control智慧型越野緩進系統，讓駕駛輕鬆應付各種險惡地形。\r\n      \r\n      在眾多輔助的配備之下，即使是越野初心者，也能在入門地形即刻感受到駕馭樂趣，更別說專業玩家對於這台擁有深厚歷史底蘊、堅韌品質與高妥善率的陸地巡航艦也愛不釋手。\r\n      \r\n      可以深刻感受 LAND CRUISER PRADO不是需要征服的生硬野獸，它低調內斂，保富內涵，是個在各種險境都默默支持每趟冒險的柔情硬漢。\r\n      `,\r\n      img: ruddy5\r\n    },\r\n    {\r\n      text: `\r\n      最後，順利克服地形，我們也安全抵達野放地點。特別的是，釋放赤翡翠那一刻，牠飛出停在我們周遭的樹梢上，回望著，遲遲不願意離開，時不時發出悠揚叫聲。\r\n\r\n      「就當作你在說謝謝囉！」柯有倫笑著對赤翡翠揮手。\r\n      \r\n      一路跟著野灣忙進忙出好幾天，最後終於野放三隻動物回家，草創的人力與資源匱乏，讓保育員與獸醫師們時常吃不消。 「但是每次打開籠門的感動，就足夠我們再繼續努力下去。」朝盛這麼說著。\r\n      `,\r\n      img: ruddy6\r\n    },\r\n    {\r\n      text: `\r\n      與赤翡翠告別的同時，我們也思考著，人類與動物棲息地高度重疊之下，我們還能做些什麼？\r\n\r\n      柯有倫、PRADO與野生動物的故事，暫時劃下句點了，但人類與大自然的關係不會就此結束。\r\n      \r\n      野灣野生動物醫院努力延續動物的生命，PRADO也奉獻一己之力，無畏困境，跨越荒野，展現真正的越野精神。\r\n      \r\n      下次，換你寫下與LAND CRUISER PRADO的故事。\r\n      `,\r\n      img: ruddy7\r\n    }\r\n  ]\r\n};\r\n\r\nexport {dataA, dataB, dataC};","import React from \"react\";\r\nimport Case from \"./Case\";\r\nimport {dataA} from \"./data\";\r\n\r\n\r\nconst CaseA = () => {\r\n  return (\r\n    <Case data={dataA}>\r\n      <h2>我是CASE 01</h2>\r\n    </Case>\r\n  )\r\n};\r\n\r\nexport default CaseA;","import React from \"react\";\r\nimport Case from \"./Case\";\r\nimport {dataB} from \"./data\";\r\n\r\nconst CaseB = () => {\r\n  return (\r\n    <Case data={dataB}>\r\n      <h2>我是CASE 02</h2>\r\n    </Case>\r\n  )\r\n};\r\n\r\nexport default CaseB;","import React from \"react\";\r\nimport Case from \"./Case\";\r\nimport {dataC} from \"./data\";\r\n\r\nconst CaseC = () => {\r\n  return (\r\n    <Case data={dataC}>\r\n      <h2>我是CASE 03</h2>\r\n    </Case>\r\n  )\r\n};\r\n\r\nexport default CaseC;","export default __webpack_public_path__ + \"static/media/storyHistory.b56933f6.png\";","import React, {useState, useRef} from \"react\";\r\nimport styled from \"@emotion/styled\";\r\nimport { NavHashLink as NavLink } from \"react-router-hash-link\";\r\nimport left from \"../../images/story/left.png\";\r\nimport right from \"../../images/story/right.png\";\r\n\r\nconst BarContainer = styled.div`\r\n  width: 100%;\r\n  background-color: #30251D;\r\n`;\r\n\r\nconst Box = styled.div`\r\n  width: 80%;\r\n  max-width: 1200px;\r\n  margin: auto;\r\n  text-align: center;\r\n  padding: 0px 20px;\r\n  position: relative;\r\n  @media screen and (max-width: 1024px) {\r\n    &::before {\r\n      content: '';\r\n      width: 70px;\r\n      height: 100%;\r\n      /* background: linear-gradient(to right, rgba(48,37,29,1) 0%,rgba(48,37,29,0.8) 100%); */\r\n      background-image: url(${left});\r\n      background-size: 100% auto;\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0px;\r\n      opacity: ${props => props.opacityState.l ? 1 : 0};\r\n      transition: all .2s;\r\n    }\r\n    &::after {\r\n      content: '';\r\n      width: 70px;\r\n      height: 100%;\r\n      /* background: linear-gradient(to left, rgba(48,37,29,1) 0% ,rgba(48,37,29,0.8) 100%); */\r\n      background-image: url(${right});\r\n      background-size: 100% auto;\r\n      position: absolute;\r\n      top: 0;\r\n      right: 0px;\r\n      opacity: ${props => props.opacityState.r ? 1 : 0};\r\n      transition: all .2s;\r\n    }\r\n  }\r\n  ul {\r\n    padding: 20px;\r\n  }\r\n  li {\r\n    position: relative;\r\n    display: inline-block;\r\n    padding: 0px 20px;\r\n    /* border-left: 1px solid #FFFFFF; */\r\n    &:not(:last-child) {\r\n      &::after {\r\n        content: '';\r\n        width: 4px;\r\n        height: 4px;\r\n        border-radius: 50%;\r\n        background-color: #FFFFFF;\r\n        position: absolute;\r\n        top: 50%;\r\n        right: 0%;\r\n        transform: translateY(-50%);\r\n      }\r\n    }\r\n    /* &:last-child {\r\n      border-right: 1px solid #FFFFFF;\r\n    } */\r\n    a {\r\n      font-weight: 500;\r\n      font-size: 28px;\r\n      text-align: center;\r\n      color: #FFFFFF;\r\n    }\r\n  }\r\n  @media screen and (max-width: 1024px) {\r\n    width: 100%;\r\n    ul {\r\n      overflow: scroll;\r\n      display: flex;\r\n    }\r\n    li {\r\n      flex: 1 0 auto;\r\n      padding: 0px 10px;\r\n      a {\r\n        font-size: 16px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nconst liData = [\r\n  {\r\n    to: \"/story/#episode0\",\r\n    text: \"歷史沿革\"\r\n  },\r\n  {\r\n   to: \"/story/#episode1\",\r\n    text: \"#品牌故事01\"\r\n  },\r\n  {\r\n   to: \"/story/#episode2\",\r\n    text: \"#02\"\r\n  },\r\n  {\r\n   to: \"/story/#episode3\",\r\n    text: \"#03\"\r\n  },\r\n  {\r\n   to: \"/story/#episode4\",\r\n    text: \"#04\"\r\n  },\r\n  {\r\n   to: \"/story/#episode5\",\r\n    text: \"#05\"\r\n  },\r\n  {\r\n   to: \"/story/#episode6\",\r\n    text: \"#06\"\r\n  },\r\n  {\r\n    to: \"/story/#episode7\",\r\n     text: \"#07\"\r\n   }\r\n]\r\n\r\nconst Bar = () => {\r\n  const scrollEl = useRef();\r\n  const [scrollToggle, setScrollToggle] = useState({\r\n    l: false,\r\n    r: true\r\n  })\r\n\r\n  const scrollOffset = el => {\r\n    setTimeout(() => {\r\n      window.scrollTo({\r\n        top: el.offsetTop - 50,\r\n        behavior: \"smooth\"\r\n      });\r\n    }, 500);\r\n  };\r\n\r\n  const handleScroll = () => {\r\n    const el = scrollEl.current;\r\n    if(el.scrollLeft + el.clientWidth >= el.scrollWidth) {\r\n      return setScrollToggle({\r\n        l: true,\r\n        r: false\r\n      });\r\n    }\r\n    if(el.scrollLeft <= 0) {\r\n      return setScrollToggle({\r\n        l: false,\r\n        r: true\r\n      });\r\n    }\r\n    if(0 < el.scrollLeft + el.clientWidth && el.scrollWidth > el.scrollLeft + el.clientWidth) {\r\n      return setScrollToggle({\r\n        l: true,\r\n        r: true\r\n      });\r\n    }\r\n    // console.log(el.scrollLeft, el.scrollWidth, el.clientWidth)\r\n    // console.log(scrollEl.current.clientWidth)\r\n  }\r\n\r\n  return (\r\n    <BarContainer>\r\n      <Box opacityState={scrollToggle}>\r\n        <ul ref={scrollEl} onScroll={handleScroll}>\r\n          {liData.map((items, keys) => {\r\n            const {to, text} = items;\r\n            return (\r\n              <li key={keys}>\r\n                <NavLink\r\n                  smooth\r\n                  to={to}\r\n                  scroll={el => {\r\n                    scrollOffset(el)\r\n                  }}\r\n                >\r\n                  {text}\r\n                </NavLink>\r\n              </li>\r\n            )\r\n          })}\r\n        </ul>\r\n      </Box>\r\n    </BarContainer>\r\n  )\r\n};\r\n\r\nexport default Bar;","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAABGCAYAAACe7Im6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTVFREVCMDQzNTE1MTFFQkIzQUI4OTc4RTVGQjA0MEQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTVFREVCMDUzNTE1MTFFQkIzQUI4OTc4RTVGQjA0MEQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1NUVERUIwMjM1MTUxMUVCQjNBQjg5NzhFNUZCMDQwRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1NUVERUIwMzM1MTUxMUVCQjNBQjg5NzhFNUZCMDQwRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkEJ/hYAABkHSURBVHjadFw7khzH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\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAABGCAYAAACe7Im6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUU1NEIxMUEzNTE1MTFFQjk0NjE5NDNDMTgyREQxRkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUU1NEIxMUIzNTE1MTFFQjk0NjE5NDNDMTgyREQxRkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1RTU0QjExODM1MTUxMUVCOTQ2MTk0M0MxODJERDFGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1RTU0QjExOTM1MTUxMUVCOTQ2MTk0M0MxODJERDFGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PubZZm8AABorSURBVHjadFy7shvH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\"","import episode1 from \"../../images/story/episode-1.jpg\";\r\nimport episode2 from \"../../images/story/episode-2.jpg\";\r\nimport episode3 from \"../../images/story/episode-3.jpg\";\r\nimport episode4 from \"../../images/story/episode-4.jpg\";\r\nimport episode5 from \"../../images/story/episode-5.jpg\";\r\nimport episode6 from \"../../images/story/episode-6.jpg\";\r\nimport episode7 from \"../../images/story/episode-7.jpg\";\r\n\r\n\r\nconst episodeData = [\r\n  {\r\n    img: episode1,\r\n    title: \"#01 在全球最大的地底礦山\",\r\n    text: `\r\n      澳洲的東北部和昆士蘭州的西部有一個叫MOUNT ISA的小鎮；擁有世界上最大的地下礦坑，其深度超過1,500 m，總長度約為560 km。地底下非常潮濕，且路面條件顛簸。在這種惡劣的環境下，為了搬運人力與物力，車輛需反覆經歷上坡下坡的顛簸起伏，然而低速下坡會給汽車帶來沉重的負擔，但是LAND CRUISER卻在這個碩大的地下空間中如履平地。\r\n      \r\n      在潮濕的路面上以低速行駛並密集地煞車，車輛的部品很容易受到損傷。LAND CRUISER這種一般乘用車無法正常運作的環境中，滿足各種需求。\r\n     \r\n      在無法容許途中故障的礦坑中，因為有LAND  CRUISER，礦工能在地底下安心工作，並安全地完成工作返回地面。\r\n    `\r\n  },\r\n  {\r\n    img: episode2,\r\n    title: \"#02 在阿曼的漁村\",\r\n    text: `\r\n      LAND CRUISER不僅具備在惡劣環境中，將人和物品安全運送到目的地的能力，\r\n      同時也擔任豐富人們日常生活的重要角色。\r\n      \r\n      在中東阿曼一個漁村工作的LAND CRUISER是一個典型的例子。\r\n      為了要勝任漁村的工作，LAND CRUISER不僅必須在鬆軟的沙灘行駛，更有許多須展現實力的機會。\r\n      例如要將從捕魚中返回的小船拖到海灘上，或者將載有大量漁獲的水箱搬運上岸。\r\n      \r\n      這裡的道路凹凸起伏非常明顯。在這樣惡劣條件的道路上載重行駛，一般車輛很快就拋錨。但是對機動性超強的\r\n      LAND CRUISER來說，這種程度的凹凸地形只是小菜一盤。此外，更同時考慮到駕駛員的舒適度，大幅減少車輛的晃動。\r\n\r\n      讓漁獲能以新鮮的狀態送到人們的餐桌上，LAND  CRUISER對人們的幸福有著一定貢獻。\r\n    `\r\n  },\r\n  {\r\n    img: episode3,\r\n    title: \"#03 與南極探險隊同行\",\r\n    text: `\r\n      為了觀測冰原大陸的地質與氣象，一組探險隊從日本被派遣到南極。\r\n      雪地車擔任隊員在南極的移動與機械搬運的工作。\r\n\r\n      而LAND CRUISER 擔任更講求機動性和行駛性能的其他工作。\r\n      1965年，LAND CRUISER已經七次隨同探險隊前往南極。\r\n      當地最大風速為60m/ sec，最低溫度為-45°C，環境的嚴酷難以想像。\r\n\r\n      南極，冬天道路被深雪覆蓋，夏天地面上的岩石裸露，\r\n      LAND CRUISER 必須展現最高水準的耐久性，才能在這兩種極端條件下行駛。\r\n\r\n      LAND  CRUISER即使在寒冷的南極地區，也能表現出強勁的駕駛性能，\r\n      使探險隊員可以放心地前進。\r\n    `\r\n  },\r\n  {\r\n    img: episode4,\r\n    title: \"#04 LAND CRUISER 奶奶\",\r\n    text: `\r\n      世界上存在著環境極端惡劣，人煙稀少的地方。\r\n      其一是位於澳洲中部沙漠入口的辛普森沙漠旅館，由一位老太太獨自經營。\r\n      那裏土壤貧瘠，夏季溫度高於45°C，濕度低於5％。\r\n      最近的鄰居位在100公里外，最近的加油站在200公里外。\r\n      \r\n      為了購買食物，必須花上兩天的車程才能抵達最近的小鎮。\r\n      還好有LAND CRUISER，扮演老太太的腳，安全地載運她到任何目的地。\r\n\r\n      在俯瞰360°的曠野中，老太太乘坐的LAND CRUISER在沙塵中奔馳。\r\n      當被問及“你為什麼繼續住在這裡”時，她說：我想守護丈夫的耕地。\r\n      而丈夫早已去世，對於獨居的祖母，LAND CRUISER扮演了重要的角色。\r\n    `\r\n  },\r\n  {\r\n    img: episode5,\r\n    title: \"#05 救生團隊神隊友\",\r\n    text: `\r\n    LAND CRUISER ，專走沒有人走過的路。\r\n    即使在惡劣環境，也可以展現出色的機動性以及超高的穩定度，這是許多人熱愛LAND CRUISER 的原因。\r\n    這樣強大的工作能力，在需要展現專業能力工作場合也獲得高度的評價，\r\n    其中，在全球各地進行救援活動是LAND CRUISER的重要任務之一。\r\n    生命無價，救援團隊必須盡快到達目的地。\r\n\r\n    然而在非洲大陸，許多時候道路是毀損的，或是被泥濘阻塞難以通行。\r\n     一旦下雨，河流氾濫和道路被淹沒的情況並不少見。\r\n    儘管如此，裝載著的醫療設備LAND CRUISER，總是能快速且安全地將患者與藥品運送到目的地。\r\n    因為有些地方只有LAND CRUISER才能抵達，只有它才有機會為挽救生命做出貢獻。\r\n    `\r\n  },\r\n  {\r\n    img: episode6,\r\n    title: \"#06 達卡拉力的挑戰與進化\",\r\n    text: `\r\n    只有LAND CRUISER是LAND CRUISER的對手。\r\n\r\n    達卡拉力賽是世界上最艱難的賽車運動競賽。\r\n    LAND CRUISER為證明自己堅不可摧的安全性和可靠性，自1995年以來，持續參加比賽。\r\n    1995年是值得紀念的第一役。\r\n    當時路況非常惡劣，許多載有替換零件的支援車隊都被迫離開，\r\n    但LAND CRUISER仍以第四名的成績完成艱難的比賽。\r\n    \r\n    從那以後，它贏得了多次冠軍，並將參賽的經驗反饋給開發團隊，期望可以更上層樓。\r\n    LAND CRUISER會持續挑戰達卡拉力賽，不斷進化，展現王者氣勢。\r\n    `\r\n  },\r\n  {\r\n    img: episode7,\r\n    title: \"#07 全球最受愛戴的4WD\",\r\n    text: `\r\n    自首次亮相以來已有60多年的歷史。\r\n    LAND CRUISER不僅是TOYOTA歷史最悠久的車系，也是受到世界上許多人愛戴的4WD車型。\r\n    它在被沙漠覆蓋的中東地區，是主流車種，也是當地的警察和邊防人員在執行任務時，不可多得的強大坐騎。\r\n    在需要舒適和安全的時候（例如沙漠旅行）， LAND CRUISER也能完美勝任。\r\n    \r\n    LAND CRUISER不僅出現在阿曼南部的小漁村，它的足跡也遍及山中偏鄉的村落，行駛在四面環山、\r\n    漫長而陡峭泥土道路上。\r\n    LAND CRUISER殷實地擔任村民的交通工具，並維持他們的生活，就像家庭成員一樣，是日常生活中不可或缺的一部分。\r\n    `\r\n  }\r\n];\r\n\r\nexport default episodeData;","export default __webpack_public_path__ + \"static/media/episode-1.4f5be1f2.jpg\";","export default __webpack_public_path__ + \"static/media/episode-2.5164cdec.jpg\";","export default __webpack_public_path__ + \"static/media/episode-3.257ee1aa.jpg\";","export default __webpack_public_path__ + \"static/media/episode-4.df7486a6.jpg\";","export default __webpack_public_path__ + \"static/media/episode-5.7c64d0f7.jpg\";","export default __webpack_public_path__ + \"static/media/episode-6.8334c44b.jpg\";","export default __webpack_public_path__ + \"static/media/episode-7.e0a8d223.jpg\";","import React, {useEffect} from \"react\";\r\nimport ReactGA from \"react-ga\";\r\nimport ScrollToTop from \"../ScrollToTop\";\r\nimport styled from \"@emotion/styled\";\r\nimport mapStrToBr from \"../../utility/mapStrToBr\";\r\nimport convertArrayIntoSingleFragment from \"../../utility/convertArrayIntoSingleFragment\";\r\nimport bg from \"../../images/case/caseBg.jpg\";\r\nimport historyImg from \"../../images/story/storyHistory.png\";\r\nimport Bar from \"./Bar\";\r\nimport episodeData from \"./data\";\r\n// import kv from \"../../images/story/kv.jpg\"\r\nimport Masthead from \"../Masthead\";\r\n\r\n// const Kv = styled.div`\r\n//   width: 100%;\r\n//   height: 100vh;\r\n//   background-image: url(${kv});\r\n//   background-size: cover;\r\n//   background-position: center;\r\n//   position: relative;\r\n// `;\r\n\r\n// const KvText = styled.p`\r\n//   width: 100%;\r\n//   position: absolute;\r\n//   top: 50%;\r\n//   left: 50%;\r\n//   transform: translate(-50%,-50%);\r\n//   font-weight: 900;\r\n//   font-size: 96px;\r\n//   line-height: 142px;\r\n//   text-align: center;\r\n//   letter-spacing: 0.1em;\r\n//   color: #FFFFFF;\r\n//   @media screen and (max-width: 1024px) {\r\n//     font-size: 60px;\r\n//     line-height: 82px;\r\n//   }\r\n//   @media screen and (max-width: 767px) {\r\n//     font-size: 48px;\r\n//     line-height: 66px;\r\n//   }\r\n//   @media screen and (max-width: 414px) {\r\n//     top: 45%;\r\n//     font-size: 28px;\r\n//     line-height: 48px;\r\n//   }\r\n// `;\r\n\r\nconst Bg = styled.div`\r\n  width: 100%;\r\n  background-image: url(${bg});\r\n  background-size: 360px;\r\n`;\r\n\r\nconst Section = styled.section`\r\n  padding: 60px 0px;\r\n  width: 90%;\r\n  max-width: 1080px;\r\n  margin: auto;\r\n  border-left: 0.25px solid rgba(48, 37, 29, 0.1);\r\n  border-right: 0.25px solid rgba(48, 37, 29, 0.1);\r\n`;\r\n\r\nconst Title = styled.h1`\r\n  font-weight: bold;\r\n  font-size: 48px;\r\n  line-height: 71px;\r\n  text-align: center;\r\n  color: #30251D;\r\n  h1 {\r\n    font-weight: 900;\r\n    font-size: 96px;\r\n    line-height: 142px;\r\n    text-align: center;\r\n    letter-spacing: 0.1em;\r\n\r\n    color: #FFFFFF;\r\n  }\r\n`;\r\nconst Line = styled.div`\r\n  margin-top: 40px;\r\n  &::before {\r\n    content: '';\r\n    width: 40px;\r\n    height: 2px;\r\n    display: block;\r\n    background-color: #30251D;\r\n    margin: auto;\r\n  }\r\n`;\r\n\r\nconst HistoryBox = styled.div`\r\n  outline: 1px solid #333333;\r\n  width: 100%;\r\n  margin-top: 40px;\r\n  img {\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\nconst Episode = styled.section`\r\n  width: 100%;\r\n  margin: auto;\r\n  padding: 0;\r\n`;\r\n\r\nconst EpisodeItem = styled.div`\r\n  width: 100%;\r\n  img {\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\nconst EpisodeTextContainer = styled.div`\r\n  padding: 60px 0px 200px;\r\n  width: 90%;\r\n  max-width: 1080px;\r\n  margin: auto;\r\n  border-left: 0.25px solid rgba(48, 37, 29, 0.1);\r\n  border-right: 0.25px solid rgba(48, 37, 29, 0.1);\r\n  p {\r\n    font-size: 18px;\r\n    text-align: justify;\r\n    letter-spacing: 0.1rem;\r\n    color: #30251D;\r\n  }\r\n  @media screen and (max-width: 767px) {\r\n    padding: 60px 0px 100px;\r\n  }\r\n`;\r\n\r\nconst EpisodeTitle = styled.h3`\r\n  font-weight: 500;\r\n  font-size: 26px;\r\n  letter-spacing: 0.1rem;\r\n  color: #000000;\r\n  margin-bottom: 20px;  \r\n`;\r\n\r\nconst Story = () => {\r\n  useEffect(()=>{\r\n    ReactGA.pageview(`/202012_PRADO/story/`);\r\n    document.title = `TOYOTA Prado - LAND CRUISER品牌故事`;\r\n  }, [])\r\n  return (\r\n    <>\r\n      <ScrollToTop />\r\n      <Masthead ytId={\"Gi9hti26AC0\"}/>\r\n      {/* <Kv>\r\n        <KvText>\r\n          用近70年的時光<br/>淬鍊出獨一無二的故事 \r\n        </KvText>\r\n      </Kv> */}\r\n      <Bar />\r\n      <Bg>\r\n        <Section id=\"episode0\">\r\n          <Title>LAND CRUISER歷史沿革</Title>\r\n          <Line />\r\n          <HistoryBox>\r\n            <img src={historyImg} alt=\"\"/>\r\n          </HistoryBox>\r\n        </Section>\r\n\r\n        <Episode>\r\n\r\n          {episodeData.map((items, keys) => {\r\n            const {img, title, text} = items;\r\n            return (\r\n              <EpisodeItem key={keys} id={\"episode\"+(keys+1)}>\r\n                <img src={img} alt=\"\"/>\r\n                <EpisodeTextContainer>\r\n                  <EpisodeTitle>{title}</EpisodeTitle>\r\n                  <p>{convertArrayIntoSingleFragment(mapStrToBr(text))}</p>\r\n                </EpisodeTextContainer>\r\n              </EpisodeItem>\r\n            )\r\n          })}\r\n          \r\n        </Episode>\r\n\r\n\r\n\r\n      </Bg>\r\n    </>\r\n  )\r\n};\r\n\r\nexport default Story;","import HomePage from \"./components/homePage/HomePage\";\r\nimport CaseA from \"./components/case/CaseA\";\r\nimport CaseB from \"./components/case/CaseB\";\r\nimport CaseC from \"./components/case/CaseC\";\r\nimport Story from \"./components/story/Story\";\r\n\r\nconst Routes = [\r\n  {\r\n    path: \"/\",\r\n    component: HomePage,\r\n    text: '最重要的乘客',\r\n    exact: true\r\n  },\r\n  {\r\n    path: \"/story/\",\r\n    component: Story,\r\n    text: 'LAND CRUISER品牌故事'\r\n  },\r\n  {\r\n    path: '/kestrel/',\r\n    component: CaseA,\r\n    text: '紅隼'\r\n  },\r\n  {\r\n    path: '/formosan-masked-civet/',\r\n    component: CaseB,\r\n    text: '白鼻心'\r\n  },\r\n  {\r\n    path: '/ruddy-kingfisher/',\r\n    component: CaseC,\r\n    text: '赤翡翠'\r\n  }\r\n];\r\n\r\nexport default Routes;","import React from \"react\";\r\nimport ReactGA from \"react-ga\";\r\nimport {Link, withRouter} from \"react-router-dom\";\r\nimport styled from \"@emotion/styled\";\r\nimport Routes from \"../Routes\";\r\n\r\nconst Ul = styled.ul`\r\n  display: flex;\r\n`;\r\n\r\nconst Li = styled.li`\r\n  font-size: 1rem;\r\n  letter-spacing: 0.1rem;\r\n  margin-right: 20px;\r\n  > a {\r\n    color: rgba(255, 255, 255, 0.5);\r\n    transition: all .2s;\r\n    /* @media screen and (max-width: 1024px) {\r\n      \r\n    } */\r\n  }\r\n  &:last-child {\r\n    margin-right: 0;\r\n  }\r\n`;\r\n\r\nconst Menu = (props) => {\r\n  const { pathname} = props.location;\r\n  return (\r\n    <Ul>\r\n      {Routes.map((i, k) => {\r\n        const {path, text} = i;\r\n        return (\r\n          k < 2 ?\r\n          <Li key={k}>\r\n            <Link\r\n              onClick={props.handleClose}\r\n              to={path}\r\n              style={{color: pathname === path  ? 'rgba(255, 255, 255, 1)' : pathname.indexOf('case') !== -1 ? k === 0 && 'rgba(255, 255, 255, 1)' : ''}}\r\n              onClick={()=>{\r\n                ReactGA.event({\r\n                  category: \"202012_PRADO\",\r\n                  action: \"Click\",\r\n                  label: `Menu-${text}`,\r\n                });\r\n              }}\r\n            >\r\n              {text}\r\n            </Link>\r\n          </Li>\r\n          :\r\n          ''\r\n        )\r\n      })}\r\n      <Li>\r\n        <a href=\"https://www.toyota.com.tw/showroom/PRADO\" target=\"_blank\" rel=\"noreferrer\" onClick={()=>{\r\n          ReactGA.event({\r\n            category: \"202012_PRADO\",\r\n            action: \"Click\",\r\n            label: `Menu-深入了解PRADO`,\r\n          });\r\n        }}>深入了解PRADO</a>\r\n      </Li>\r\n      <Li>\r\n        <a href=\"http://www.wildonetaiwan.org/\" target=\"_blank\" rel=\"noreferrer\" onClick={()=>{\r\n          ReactGA.event({\r\n            category: \"202012_PRADO\",\r\n            action: \"Click\",\r\n            label: `Menu-臺灣野灣野生動物保育協會`,\r\n          });\r\n        }}>臺灣野灣野生動物保育協會</a>\r\n      </Li>\r\n    </Ul>\r\n  )\r\n};\r\n\r\nexport default withRouter(Menu);","export default \"data:image/png;base64,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\"","export default __webpack_public_path__ + \"static/media/header-bg.891f27e2.jpg\";","\r\nimport React, {useState} from \"react\";\r\nimport ReactGA from \"react-ga\";\r\nimport styled from \"@emotion/styled\";\r\nimport MediaQuery from \"react-responsive\";\r\nimport {useTransition, useSpring, animated} from \"react-spring\";\r\nimport { css } from \"@emotion/css\";\r\nimport Menu from \"./Menu\";\r\nimport logo from \"../images/logo.png\";\r\nimport headerBg from \"../images/header-bg.jpg\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nconst HeaderContainer = styled.header`\r\n  width: 100%;\r\n  height: 50px;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  padding: 20px 60px;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  z-index: 6;\r\n  &::before {\r\n    content: \"\";\r\n    width: 100%;\r\n    height: 100%;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    background-image: url(${headerBg});\r\n    background-size: auto 100%;\r\n    background-position: center;\r\n    z-index: -1;\r\n  }\r\n  @media screen and (max-width: 1024px) {\r\n    padding: 20px;\r\n  }\r\n`;\r\n\r\nconst Logo = styled.img`\r\n  width: auto;\r\n  height: 20px;\r\n`;\r\n\r\nconst DesktopMenuContainer = styled.div`\r\n  position: relative;\r\n  /* z-index: 12; */ \r\n`;\r\nconst MenuOpenContainer = css`\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100vh;\r\n  background-color: #fff;\r\n  z-index: 1;\r\n`;\r\nconst Hamburger = styled.button`\r\n  position: absolute;\r\n  top: 16px;\r\n  right: 20px;\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  transition-property: opacity, filter;\r\n  transition-duration: 0.15s;\r\n  transition-timing-function: linear;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-transform: none;\r\n  background-color: transparent;\r\n  border: 0;\r\n  margin: 0;\r\n  overflow: visible;\r\n  opacity: 1;\r\n  width: 40px;\r\n  height: 24px;\r\n  z-index: 12;\r\n\r\n  &:hover {\r\n    /* opacity: 0.7; */\r\n  }\r\n`;\r\nconst MenuOpenContainerOpacity = css`\r\n  width: 100%;\r\n  height: 100%;\r\n  > ul {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: #000;\r\n    > li {\r\n      font-size: 1.5rem;\r\n      margin: 0 0 20px 0;\r\n      @media screen and (max-width: 767px) {\r\n        font-size: 1.25em;\r\n        > a {\r\n          letter-spacing: 2px;\r\n        }\r\n      }\r\n      &:last-child {\r\n        margin: 0 0 0 0;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst HamburgerBox = styled.span`\r\n  width: 40px;\r\n  height: 24px;\r\n  display: inline-block;\r\n  position: relative;\r\n`;\r\nconst HamburgerInner = styled.span`\r\n  display: block;\r\n  top: 50%;\r\n  margin-top: -2px;\r\n\r\n  &,\r\n  &:before,\r\n  &:after {\r\n    width: 40px;\r\n    height: 4px;\r\n    background-color: #FFF;\r\n    border-radius: 4px;\r\n    position: absolute;\r\n    transition-property: transform;\r\n    transition-duration: 0.15s;\r\n    transition-timing-function: ease;\r\n  }\r\n  &:before,\r\n  &:after {\r\n    content: \"\";\r\n    display: block;\r\n  }\r\n  &:before {\r\n    top: -10px;\r\n  }\r\n  &:after {\r\n    bottom: -10px;\r\n  }\r\n\r\n  /* custom */\r\n\r\n  top: auto;\r\n  bottom: 0;\r\n  transition-duration: 0.13s;\r\n  transition-delay: 0.13s;\r\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\r\n\r\n  &:after {\r\n    top: -20px;\r\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),\r\n      opacity 0.1s linear;\r\n  }\r\n  &:before {\r\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),\r\n      transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\r\n  }\r\n\r\n  &.is-active {\r\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\r\n    transition-delay: 0.22s;\r\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\r\n\r\n    &:after {\r\n      top: 0;\r\n      opacity: 0;\r\n      transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),\r\n        opacity 0.1s 0.22s linear;\r\n    }\r\n    &:before {\r\n      top: 0;\r\n      transform: rotate(-90deg);\r\n      transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),\r\n        transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\r\n    }\r\n  }\r\n`;\r\n\r\nconst Header = () => {\r\n  const [isShow, setIsShow] = useState(false);\r\n\r\n  const handleMenuOpen = () => {\r\n    isShow ? setIsShow(false) : setIsShow(true);\r\n  };\r\n\r\n  const transitions = useTransition(isShow, null, {\r\n    from: { transform: `translateY(-100%)` },\r\n    enter: { transform: `translateY(0%)` },\r\n    leave: { transform: `translateY(-100%)` }\r\n  });\r\n\r\n  const MenuList = useSpring({\r\n    to: { opacity: 1 },\r\n    from: { opacity: 0 },\r\n    delay: 500\r\n  });\r\n  return (\r\n    <HeaderContainer>\r\n      <Link to=\"/\" onClick={()=>{\r\n        ReactGA.event({\r\n          category: \"202012_PRADO\",\r\n          action: \"Click\",\r\n          label: `Menu-logo`,\r\n        });\r\n      }}>\r\n        <Logo src={logo}/>\r\n      </Link>\r\n      {/* pc */}\r\n      <MediaQuery minWidth={1024}>\r\n        <DesktopMenuContainer>\r\n          <Menu />\r\n        </DesktopMenuContainer>\r\n      </MediaQuery>\r\n      {/* mobile */}\r\n      <MediaQuery maxWidth={1023}>\r\n        <div>\r\n          {transitions.map(({ item, props }, keys) => {\r\n            return (\r\n              item && (\r\n                <animated.div\r\n                  className={MenuOpenContainer}\r\n                  style={props}\r\n                  key={keys}\r\n                >\r\n                  <animated.div\r\n                    className={MenuOpenContainerOpacity}\r\n                    style={MenuList}\r\n                  >\r\n                    <Menu handleClose={handleMenuOpen} />\r\n                  </animated.div>\r\n                </animated.div>\r\n              )\r\n            );\r\n          })}\r\n        </div>\r\n\r\n        {/* hamburger */}\r\n        <Hamburger onClick={handleMenuOpen}>\r\n          <HamburgerBox>\r\n            <HamburgerInner className={isShow ? \"is-active\" : \"\"} />\r\n          </HamburgerBox>\r\n        </Hamburger>\r\n      </MediaQuery>\r\n    </HeaderContainer>\r\n  )\r\n};\r\n\r\nexport default Header;","import React from \"react\";\r\nimport styled from \"@emotion/styled\";\r\n// import Fg from \"./FooterGroup\";\r\nimport ft from \"../images/logo.png\";\r\n\r\nconst FooterBox = styled.footer`\r\n  width: 100%;\r\n  font-size: 12px;\r\n  color: #fff;\r\n\r\n  background-color: #131313;\r\n`;\r\n\r\nconst FooterA = styled.div`\r\n  padding: 60px 0px 20px;\r\n  img {\r\n    width: 100%;\r\n    max-width: 100px;\r\n    display: block;\r\n    margin: auto;\r\n    @media screen and (max-width: 767px) {\r\n      max-width: 60px;\r\n    }\r\n  }\r\n`;\r\n\r\nconst FooterB = styled.div`\r\n  width: 100%;\r\n  background-color: #000;\r\n`;\r\n\r\nconst FooterContainer = styled.div`\r\n  width: 90%;\r\n  max-width: 1200px;\r\n  margin: auto;\r\n  padding: 20px 0px;\r\n`;\r\n\r\nconst FooterService = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  @media screen and (max-width: 1000px) {\r\n    flex-direction: column-reverse;\r\n    text-align: center;\r\n  }\r\n`;\r\n\r\nconst FooterCompany = styled.p`\r\n  margin-right: 25px;\r\n  @media screen and (max-width: 1000px) {\r\n    margin-right: 0px;\r\n  }\r\n`;\r\n\r\n// const FooterUl = styled.ul``;\r\n\r\nconst FooterLi = styled.li`\r\n  padding: 0px 10px;\r\n  display: inline-block;\r\n  @media screen and (max-width: 1000px) {\r\n    border-right: 1px solid #fff;\r\n    &:nth-of-type(4) {\r\n      border-right: unset;\r\n    }\r\n  }\r\n  &:first-of-type {\r\n    padding: 0px 10px 0px 0px;\r\n  }\r\n  &:last-child {\r\n    padding: 0px;\r\n    @media screen and (max-width: 1000px) {\r\n      display: none;\r\n    }\r\n  }\r\n  a {\r\n    color: #fff;\r\n    &:hover {\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n`;\r\n\r\nconst FooterRecommend = styled.p`\r\n  color: #999;\r\n  margin-top: 10px;\r\n  text-align: center;\r\n`;\r\n\r\n// const FooterGroup = styled.div`\r\n//   font-size: 12px;\r\n//   width: 80%;\r\n//   max-width: 1024px;\r\n//   margin: auto;\r\n//   padding-top: 40px;\r\n//   display: flex;\r\n//   justify-content: space-between;\r\n// `;\r\n\r\n// const Column = styled.div`\r\n//   p {\r\n//     color: red;\r\n//     letter-spacing: 1px;\r\n//     padding-bottom: 8px;\r\n//   }\r\n//   ul {\r\n//     vertical-align: top;\r\n//     display: inline-block;\r\n//     &:not(:first-of-type) {\r\n//       margin-left: 36px;\r\n//     }\r\n//     a {\r\n//       color: white;\r\n//     }\r\n//   }\r\n// `;\r\n\r\nconst Alone = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  > a {\r\n    img {\r\n      width: 100%;\r\n      max-width: 75px;\r\n      margin-right: 5px;\r\n      transform: translateY(-2px);\r\n      @media screen and (max-width: 767px) {\r\n        margin-right: 0;\r\n      }\r\n    }\r\n  }\r\n  @media screen and (max-width: 767px) {\r\n    flex-direction: column;\r\n    margin-top: 15px;\r\n  }\r\n`;\r\n\r\nconst Footer = () => {\r\n  return (\r\n    <FooterBox>\r\n      <FooterB>\r\n        <FooterContainer>\r\n          <FooterService>\r\n            <Alone>\r\n              <a\r\n                href=\"https://www.toyota.com.tw/\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n              >\r\n                <img src={ft} alt=\"\" />\r\n              </a>\r\n              <FooterCompany>\r\n                © HOTAI MOTOR CO., LTD. 和泰汽車股份有限公司\r\n              </FooterCompany>\r\n            </Alone>\r\n            <ul>\r\n              <FooterLi>\r\n                <a href=\"https://www.toyota.com.tw/TFAQ/\">常見問題</a>\r\n              </FooterLi>\r\n              <FooterLi>\r\n                <a href=\"https://www.toyota.com.tw/contact.aspx\">聯絡我們</a>\r\n              </FooterLi>\r\n              <FooterLi>\r\n                <a href=\"https://www.toyota.com.tw/privacy.aspx\">隱私權說明</a>\r\n              </FooterLi>\r\n              <FooterLi>\r\n                <a href=\"https://www.toyota.com.tw/rights.aspx\">版權聲明</a>\r\n              </FooterLi>\r\n              <FooterLi>客服專線0800221345</FooterLi>\r\n            </ul>\r\n          </FooterService>\r\n          <FooterRecommend>建議使用 Chrome 瀏覽器。</FooterRecommend>\r\n        </FooterContainer>\r\n      </FooterB>\r\n    </FooterBox>\r\n  );\r\n};\r\n\r\nexport default Footer;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport ReactGA from \"react-ga\";\r\nimport styled from \"@emotion/styled\";\r\nimport { useTransition, animated } from \"react-spring\";\r\n// import { TweenMax } from \"gsap\";\r\n\r\nconst TopBox = styled.div`\r\n  cursor: pointer;\r\n  position: fixed;\r\n  right: 0px;\r\n  bottom: 50px;\r\n  width: 50px;\r\n  height: 120px;\r\n  background-color: rgba(255, 0, 0, 0.4);\r\n  border-top: 1px solid #ff0000;\r\n  border-left: 1px solid #ff0000;\r\n  border-bottom: 1px solid #ff0000;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  @media screen and (max-width: 767px) {\r\n    width: 40px;\r\n    height: 100px;\r\n  }\r\n`;\r\n\r\nconst Square = styled.div`\r\n  width: 16px;\r\n  height: 16px;\r\n  border-top: 2px solid #fff;\r\n  border-left: 2px solid #fff;\r\n  transform: rotate(45deg);\r\n`;\r\n\r\nconst Text = styled.p`\r\n  font-size: 1.125em;\r\n  color: #fff;\r\n  @media screen and (max-width: 767px) {\r\n    font-size: 12px;\r\n  }\r\n`;\r\n\r\nconst Top = () => {\r\n  const [isShow, setIsShow] = useState(false);\r\n  const show = useTransition(isShow, null, {\r\n    from: { opacity: 0 },\r\n    enter: { opacity: 1 },\r\n    leave: { opacity: 0 }\r\n  });\r\n\r\n  useEffect(() => {\r\n    const scrollEvent = () => {\r\n      if (window.pageYOffset > 200) {\r\n        if (!isShow) {\r\n          setIsShow(true);\r\n        }\r\n      } else {\r\n        if (isShow) {\r\n          setIsShow(false);\r\n        }\r\n      }\r\n    };\r\n\r\n    window.addEventListener(\"scroll\", scrollEvent);\r\n    return () => {\r\n      window.removeEventListener(\"scroll\", scrollEvent);\r\n    };\r\n  }, [isShow]);\r\n\r\n  const onClick = () => {\r\n    window.scroll({\r\n      top: 0,\r\n      left: 0,\r\n      behavior: \"smooth\"\r\n    });\r\n    ReactGA.event({\r\n      category: \"202012_PRADO\",\r\n      action: \"Click\",\r\n      label: \"Btn-Top\",\r\n    });\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {show.map(({ item, key, props }) => {\r\n        return (\r\n          item && (\r\n            <animated.div style={props} key={key}>\r\n              <TopBox onClick={onClick}>\r\n                <Square />\r\n                <Text>T</Text>\r\n                <Text>O</Text>\r\n                <Text>P</Text>\r\n              </TopBox>\r\n            </animated.div>\r\n          )\r\n        );\r\n      })}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default Top;\r\n","import React from \"react\";\nimport GlobalStyle from \"./components/GlobalStyle\";\nimport { Route, Switch } from \"react-router-dom\";\nimport Routes from \"./Routes\";\nimport Header from \"./components/Header\";\nimport Footer from \"./components/Footer\";\nimport styled from \"@emotion/styled\";\nimport Top from \"./components/Top\";\n\nconst Box = styled.div`\n  @media screen and (max-width: 1024px) {\n    margin-top: 50px;\n  }\n`;\n\n\nconst App = () => {\n  return (\n    <Box className=\"app\">\n      <GlobalStyle />\n      <Header />\n      <div>\n        <Switch>\n          {Routes.map((route, i) => {\n            const {path, exact, routes} = route;\n            return (\n              <Route \n                key={i}\n                exact={exact}\n                path={path}\n                render={(routeProps) => <route.component routes={routes} {...routeProps} />}\n              />\n            )\n          })}\n        </Switch>\n      </div>\n      <Top />\n      <Footer />\n    </Box>\n  )\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport { BrowserRouter as Router } from \"react-router-dom\";\nimport reportWebVitals from './reportWebVitals';\nimport ReactGA from \"react-ga\";\n\n//ga\nReactGA.initialize(\"UA-185901142-1\");\n\nReactDOM.render(\n  <Router basename={process.env.PUBLIC_URL}>\n    <App />\n  </Router>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}