@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,900');
/*font-family: 'Roboto', sans-serif;*/
html {
  height: 100%;
  font-size: 100%;
}
body {
  background-color: #000;
  font-family: 'Noto Sans TC', "Microsoft JhengHei", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.4;
  color: #222;
  overflow: hidden;
}
a, a:hover, a:focus, a:active, a.active { outline: none; cursor: pointer; }
a, a img {
  color: #222;
  transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;-o-transition: .3s;
}
a:hover, a:focus, a:active, a.active, a:hover img {
  color: #FFA580;
  text-decoration: none;
}
::selection { background: #FFA580; color: #fff; }
::-moz-selection { background: #FFA580; color: #fff; }
.mobileOnly { display: none !important;}
.pcOnly { display: inline-block !important;}
/*====================
  Typography
======================*/
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1;
}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
p { margin: 0; }
section {
  position: relative;
}



/*======================
  Button
=======================*/
.box-btns {
  width: 100%;
  clear: both;
}
.btn-SKIP {
  border: 2px solid #FFA580;
  border-radius: 100%;
  text-align: center;
  font-size: 1.25rem;
  color: #fff;
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
  display: inline-block;
}
.btn-SKIP:hover, .btn-SKIP:active {
  background-color: #FFA580;
  color: #222;
}
.btn-PINK, .btn-WHITE {
  color: #222;
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  padding: 15px 50px 15px 60px;
  border-radius: 100px;
  display: inline-block;
  transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;-o-transition: .3s;
}
.btn-PINK {
  background-color: #FFA580;
}
.btn-WHITE {
  background-color: #fff;
}
.btn-PINK i, .btn-WHITE i {
  transform: scale(.7);
  position: relative;
  top: 4px;
}
.btn-PINK:hover, .btn-WHITE:hover,
.btn-PINK:active, .btn-WHITE:active {
  background-color: #03b09d;
  color: #fff;
}
.btn-PINK:hover .icon-arrow.black:before,
.btn-PINK:hover .icon-arrow.black:after,
.btn-WHITE:hover .icon-arrow.black:before,
.btn-WHITE:hover .icon-arrow.black:after,
.btn-PINK:active .icon-arrow.black:before,
.btn-PINK:active .icon-arrow.black:after,
.btn-WHITE:active .icon-arrow.black:before,
.btn-WHITE:active .icon-arrow.black:after {
  background-color: #fff;
}
.btn-PINKine {
  border: 2px solid #FFA580;
  border-radius: 100px;
  text-align: center;
  font-size: 1.5rem;
  color: #FFA580;
  padding: 10px 0;
  display: inline-block;
}
.btn-PINKine:hover, .btn-PINKine:active {
  background-color: #03b09d;
  border: 2px solid #03b09d;
  color: #fff;
}
.btn-PINKsmall {
  background-color: #FFA580;
  border-radius: 100px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
  color: #222;
  padding: 15px 0;
  display: inline-block;
}
.btn-PINKsmall:hover, .btn-PINKsmall:active {
  background-color: #03b09d;
  color: #fff;
}
.btn-BLACKline {
  border: 1px solid #222;
  color: #222;
  font-size: 1.5rem;
  border-radius: 100px;
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.btn-BLACKline:hover, .btn-BLACKline:active {
  background-color: #03b09d;
  border: 1px solid #03b09d;
  color: #fff;
}
.btn-BLACKline:hover .icon-arrow.black:before,
.btn-BLACKline:active .icon-arrow.black:before,
.btn-BLACKline:hover .icon-arrow.black:after,
.btn-BLACKline:active .icon-arrow.black:after {
  background-color: #fff;
}



/*======================
  Animation
=======================*/
.ani-Scale {
  animation: ani-Scale .7s alternate infinite;
}
  @keyframes ani-Scale {
    from {
      transform:scale(1);
    }
    to {
      transform:scale(1.05);
    }
  }
.ani-Scale-B {
  animation: ani-Scale-B .7s alternate infinite;
}
  @keyframes ani-Scale-B {
    from {
      transform:scale(1.05);
    }
    to {
      transform:scale(1);
    }
  }



/*======================
  ICON
=======================*/
.icon-arrow {
  display: inline-block;
  position: relative;
  min-height: 200%;
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
.icon-arrow:before,
.icon-arrow:after  {
  content: "";
  width: 23px;
  height: 7px;
  border-radius: 20px;
  display: inline-block;
  position: absolute;
  left: 0;
  transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;-o-transition: .3s;
}
.icon-arrow:before  {
  transform: rotate(45deg);
  top: -6px;
}
.icon-arrow:after  {
  transform: rotate(-45deg);
  top: 6px;
}
  .icon-arrow.black:before,
  .icon-arrow.black:after {
    background-color: #222;
  }
  .icon-arrow.pink:before,
  .icon-arrow.pink:after {
    background-color: #FFA580;
  }
.s-googleplus, .s-facebook, .s-line {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.s-googleplus {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_share-gplus.svg);
}
.s-facebook {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_share-fb.svg);
}
.s-line {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_share-line.svg);
}
i.icon-smile {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon-smile.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-block;
  margin-bottom: -5px;
  margin-left: 10px;
  transform: scale(1);
  top: inherit;
}



/*======================
  Popup
=======================*/
.popup {
}
.popup:after {
  content: "";
  background-color: rgba(2,21,21,.9);
  width: 100%;
  height: 100vh;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5000;
}
.popup .popup-main {
  background-color: #fff;
  border-radius: 30px;
  overflow: hidden;
  width: 850px;
  height: 480px;
  position: absolute;
  top: calc(50% - 240px);
  left: calc(50% - 425px);
  display: flex;
  box-shadow: 0 0 5px rgba(0,0,0,.8);
  z-index: 5001;
}
  .popup.pink .popup-main {
    background-color: #FFA580;
  }
.popup .btn-popup-close {
  background-image: url(//gcpst.chdev.tw/99mary/images/btn-popup-close.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 3rem;
  height: 3rem;
  display: inline-block;
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}
.popup .popup-main .box-img {
  width: 480px;
  overflow: hidden;
  position: relative;
  border-top-right-radius: 400px;
  border-bottom-right-radius: 400px;
}
  .popup.pink .popup-main .box-img {
    border-radius: 0;
  }
.popup .popup-main .box-img img {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.popup .popup-main .box-data {
  width: calc(100% - 480px);
  padding-left: 20px;
  padding-right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup.done .popup-main .box-data {
  width: 100%;
}
.popup .popup-main .box-data .title {
  font-size: 2.8125rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.popup .popup-main .box-data p {
  font-size: 1.75rem;
}
.popup .popup-main .box-btns {
  margin-top: 50px;
}
.popup .popup-main .box-btns .btn-PINK,
.popup .popup-main .box-btns .btn-WHITE {
  width: 100%;
}
.popup.pink .popup-main .box-btns a:last-child {
  margin-top: 15px;
}
#p-device {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_device.png?v=2);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
#p-device .icon-device {
  width: 10%;
  display: inline-block;
  margin-top: calc(50% - 75px);
}
.full-video {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.full-video video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  /*transform: translateX(-50%) translateY(-50%);*/
}



/*======================
  header
=======================*/
header#main-header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}
#main-header .header-logo {
  float: left;
  background-image: url(//gcpst.chdev.tw/99mary/images/IMG_CH20logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 90px;
  height: 26px;
  text-indent: -5000px;
  margin: 20px 0 0 20px;
}
#main-header #headerNav-burger {
  float: right;
  width: 27px;
  display: block;
  padding-top: 14px;
  margin: 20px 20px 0 0;
  position: relative;
  cursor: pointer;
}
#main-header #headerNav-burger:before,
#main-header #headerNav-burger:after {
  content: "";
  background-color: #094;
  width: 27px;
  height: 2px;
  display: inline-block;
  border-radius: 10px;
  position: absolute;
  left: 0;
  transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;-o-transition: .3s;
}
#main-header #headerNav-burger:before {
  top: 0;
}
#main-header #headerNav-burger:after {
  top: 8px;
}
#main-header #headerNav-burger:hover:after {
  left: -3px;
}
#main-header #headerNav-burger span:before {
  content: "";
  background-color: #094;
  width: 27px;
  height: 2px;
  display: inline-block;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 16px;
}
#main-header #headerNav-burger span:after {
  content: "menu";
  color: #094;
  transform: scale(.65);
  display: block;
  text-align: center;
  margin-left: -6px;
}
#main-header #headerNav-sound {
  float: right;
  background-repeat: no-repeat;
  background-size: contain;
  width: 35px;
  height: 28px;
  display: block;
  padding-top: 14px;
  margin: 20px 15px 0 0;
  position: relative;
  cursor: pointer;
}
#main-header #headerNav-sound.off {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_sound-off.svg);
}
#main-header #headerNav-sound.on {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_sound-on.svg);
}
#headerNav-open {
  background-color: #fff;
  min-width: 520px;
  height: 100vh;
  text-align: center;
  position: fixed;
  top: 0;
  right: -100vw;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;-moz-transition: 1s;-webkit-transition: 1s;-o-transition: 1s;
}
#headerNav-open.active {
  right: 0;
}
#headerNav-open nav.box-nav {
  font-size: 2.625rem;
  font-weight: 600;
}
#headerNav-open nav.box-nav li {
  margin-bottom: 10px;
}
#headerNav-open nav.box-nav li a:hover .icon-arrow.black:before,
#headerNav-open nav.box-nav li a:hover .icon-arrow.black:after {
  background-color: #FFA580;
}
#headerNav-open nav.box-nav li p.title {
  margin: 0 0 25px;
}
#headerNav-open nav.box-nav li .headerNav-icon {
  background-color: #222;
  border-radius: 70px;
  width: 4.5rem;
  height: 4.5rem;
  display: inline-block;
  text-indent: -50000px;
  margin: 0 5px;
}
#headerNav-open nav.box-nav li .headerNav-icon:hover {
  background-color: #FFA580;
}
#headerNav-open .box-footer {
  width: 90%;
  margin: auto;
}
#headerNav-open .hmary-logo {
  margin-top: 80px;
}
#headerNav-open .hmary-logo img {
  width: 200px;
  margin-bottom: 30px;
}
#headerNav-open .box-footer .footer-box {
  border-top: 1px solid #D8D8D8;
}
#headerNav-open .box-footer .footer-box img {
  width: 150px;
  margin: 30px 0 20px 0;
}
#headerNav-open .box-footer .footer-box p {
  color: #4a4a4a;
  font-size: 0.75rem;
}
#headerNav-close {
  width: 27px;
  position: absolute;
  top: 25px;
  right: 15px;
  cursor: pointer;
}
#main-header #headerNav-close:before,
#main-header #headerNav-close:after {
  content: "";
  background-color: #094;
  width: 27px;
  height: 2px;
  display: inline-block;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 0;
}
#main-header #headerNav-close:before {
  transform: rotate(45deg);
}
#main-header #headerNav-close:after {
  transform: rotate(-45deg);
}
#headerNav-close span:before {
  content: "close";
  color: #094;
  transform: scale(.65);
  display: block;
  text-align: center;
  margin-left: -6px;
  margin-top: 5px;
}



/*======================
  Landing page
=======================*/
section#landing {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_landing.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
}
#landing {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_landing.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  position: relative;
}
#landing .box-data {
  text-align: center;
  position: absolute;
  left: calc(50% - 210px);
  top: calc(50% - 149px);
  animation: landing-logo .7s alternate infinite;
}
#landing .IMG-hmaryLogo {
  width: 420px;
}
  @keyframes landing-logo {
    from {
      transform:scale(1);
    }
    to {
      transform:scale(1.1);
    }
  }
#landing h1 {
  background-image: url(//gcpst.chdev.tw/99mary/images/IMG_CH20logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 150px;
  height: 45px;
  display: inline-block;
  margin-top: 20px;
  text-indent: -5000px;
}



/*======================
  All
=======================*/
.main {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}



/*======================
  main
=======================*/
.main {
}
.main-content {
  float: right;
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_mainContent.jpg);
  background-color: #000;
  background-size: cover;
  background-position: center top;
  color: #fff;
  width: 35%;
  height: 100vh;
  padding: 0 4%;
  z-index: 9
}
.main-content .box-data {
}
.main-content .box-data h2.title {
  font-size: 3.75rem;
  line-height: 1.3;
  text-align: justify;
  text-justify: inter-ideograph;
}
.main-img {
  float: left;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 65%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}



/*======================
  index 熊警長來電
=======================*/
#index {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_index.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
#index .phone {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_phone.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  color: #fff;
  text-align: center;
  width: 440px;
  height: 883px;
  padding: 50px;
  position: absolute;
  top: calc(50% - 441px);
  left: calc(50% - 220px);
  animation: index-phone 1s alternate infinite;
}
  @keyframes index-phone {
    0% {transform: rotate(1deg);}
    5% {transform: rotate(-1deg);}
    10% {transform: rotate(1deg);}
    15% {transform: rotate(-1deg);}
    20% {transform: rotate(1deg);}
    25% {transform: rotate(-1deg);}
    30% {transform: rotate(1deg);}
    35% {transform: rotate(-1deg);}
    40% {transform: rotate(1deg);}
    45% {transform: rotate(-1deg);}
    70% {transform: rotate(1deg);}
    100% {transform: rotate(0deg);}
  }
#index .phone.message {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_phone.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  color: #fff;
  text-align: center;
  width: 440px;
  height: 883px;
  padding: 50px;
  position: absolute;
  top: calc(50% - 441px);
  left: calc(50% - 220px);
  animation: inherit;
}
#index .phone .box-header {
  line-height: 12px;
}
#index .phone .box-header .IMG_phone-L {
  float: left;
}
#index .phone .box-header .IMG_phone-R {
  float: right;
}
#index .phone .box-data h1 {
  font-size: 3rem;
  margin: 120px 0 20px;
}
#index .phone .box-data h2 {
  font-size: 1.5rem;
  font-weight: 400;
}
#index .phone.message .box-data {
  margin-top: 30%;
  overflow: hidden;
}
#index .phone.message .box-data .message-ani {
  position: relative;
  animation: index-phoneMessage 8s ease;

  animation-fill-mode: forwards;
}
#index .phone.message .box-data .message-item {
  background-color: rgba(255,255,255,.8);
  width: 95%;
  margin: auto;
  text-align: left;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}
  @keyframes index-phoneMessage {
    0% {
      top: -470px;
    }
    3% {
      top: -340px;
    }
    30% {
      top: -340px;
    }
    40% {
      top: -200px;
    }
    70% {
      top: -200px;
    }
    80% {
      top: 0;
    }
    100% {
      top: 0;
    }
  }
#index .phone.message .box-data .message-item .title {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_siteInfo.png);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: 20px 10px;
  width: 100%;
  background-color: #fff;
  padding: 10px 20px;
  padding-left: 50px;
  font-size: 1rem;
  color: #5a4b41;
}
#index .phone.message .box-data .message-item .title span {
  float: right;
  display: inline-block;
}
#index .phone.message .box-data .message-item p {
  padding: 10px 20px;
  line-height: 1.5;
  color: #222;
  font-size: 1.25rem;
}
#index .phone .box-btn {
  font-size: 2.25rem;
  color: #fff;
  position: absolute;
  left: calc(50% - 3rem);
  bottom: 13%;
}
#index .phone .box-btn a {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_phone.svg);
  background-repeat: no-repeat;
  background-size: 55px;
  background-position: center;
  background-color: #75D571;
  display: inline-block;
  width: 6rem;
  height: 6rem;
  border-radius: 90px;
  animation: index-phoneBTN .8s alternate infinite;
}
  @keyframes index-phoneBTN {
    from {
      background-color: #75D571;
    }
    to {
      background-color: #FFA580;
    }
  }
#index .phone .box-btn a:hover {
  background-color: #FFA580;
}
#index .phone .box-btn span {
  display: block;
}



/*======================
  opening 開場敘述
=======================*/
#opening {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_opening.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
#opening:before, #opening:after {
  content: "";
  border-radius: 100%;
  display: inline-block;
  position: absolute;
}
#opening:before {
  background-color: rgba(255,252,221,.2);
  width: 100px;
  height: 100px;
  top: 20%;
  left: calc(50% - 300px);
  filter: blur(30px);
  animation: opening-light 1.2s alternate infinite;
}
#opening:after {
  background-color: rgba(255,252,221,.5);
  width: 23rem;
  height: 23rem;
  top: -10%;
  left: 60%;
  filter: blur(60px);
  animation: opening-light 2s alternate infinite;
}
#opening .phone {
  background-image: none;
  width: 500px;
  height: inherit;
  padding: 0;
  position: absolute;
  bottom: 0%;
  left: calc(50% - 0px);
}
#opening .phone img {
  width: 100%;
  /*opacity: .5;*/
}
#opening .phone .box-header {
  line-height: 12px;
}
#opening .phone .box-header .IMG_phone-L {
  float: left;
}
#opening .phone .box-header .IMG_phone-R {
  float: right;
}
#opening .phone .box-data {
  position: relative;
}
#opening .phone .box-data:before {
  content: "";
  background-color: rgba(255,252,221,.4);
  width: 200px;
  height: 200px;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  top: -50px;
  left: -50px;
  filter: blur(30px);
  animation: opening-light .8s alternate infinite;
}
  @keyframes opening-light {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(.8);
      opacity: .8;
    }
  }
#opening .phone .box-data img.IMG_openingBear {
  width: 400px;
  margin: 40px 0 0 -30px;
}
#opening .opening-data {
  text-align: center;
  color: #fff;
  width: 100%;
  margin-top: 8%;
  position: relative;
}
#opening .opening-data .box-data {
  position: relative;
}
#opening .opening-data p {
  font-size: 2.8rem;
  text-align: center;
  width: 100%;
  line-height: 1.75;
  margin: 0;
  position: absolute;
  top: 0;
  opacity: 0;
  animation: OdAni-A 5s ease;
  animation-fill-mode: forwards;
}
#opening .opening-data p.OdAni-1 {
  animation-delay: 1s;
}
#opening .opening-data p.OdAni-2 {
  animation-delay: 5s;
}
#opening .opening-data p.OdAni-3 {
  animation-delay: 9s;
}
#opening .opening-data p.OdAni-4 {
  animation-delay: 13s;
}
#opening .opening-data p.OdAni-5 {
  animation: OdAni-B 5s ease;
  animation-fill-mode: forwards;
  animation-delay: 18s;
}
  @keyframes OdAni-A {
    0% {
      top: 50vh; opacity: 0; filter: blur(30px);
    }
    30% {
      top: 0; opacity: 1; filter: blur(0);
    }
    70% {
      top: 0; opacity: 1; filter: blur(0);
    }
    100% {
      top: -50vh; opacity: 0; filter: blur(30px);
    }
  }
  @keyframes OdAni-B {
    0% {
      top: 50vh; opacity: 0; filter: blur(30px);
    }
    30% {
      top: 0; opacity: 1; filter: blur(0);
    }
    70% {
      top: 0; opacity: 1; filter: blur(0);
    }
    100% {
      top: 0; opacity: 1; filter: blur(0);
    }
  }
#opening .opening-data p span {
  color: #FFA580;
}
#opening .opening-data p span.p {
  position: relative;
}
#opening .opening-data p span.p:after {
  content: "";
  background-image: url(//gcpst.chdev.tw/99mary/images/IMG_Mary.png);
  background-size: contain;
  width: 5rem;
  height: 5rem;
  position: absolute;
  right: -6rem;
  top: 0;
}
#opening .btn-SKIP {
  background-color: rgba(0,0,0,.5);
  position: absolute;
  bottom: 15px;
  right: 15px;
}



/*======================
  Start 場景選擇
=======================*/
#start {
}
#start h3 {
  color: #fff;
  font-size: 3rem;
  font-weight: 400;
  text-align: center;
  position: absolute;
  top: 20%;
  width: 100%;
}
#start .start-data {
  float: left;
  width: 50%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
#start .box-data {
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 8rem);
  z-index: 9;
  transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;-o-transition: .3s;
}
#start .start-data:hover .box-data {
  top: calc(50% - 70px);
}
#start .start-data:hover .box-data:after {
  content: "";
  background-color: #000;
  width: 100%;
  height: 100%;
  filter: blur(40px);
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
#start .box-data a {
  color: #FFA580;
  z-index: 9;
  position: relative;
  display: inline-block;
  cursor: pointer;
}
#start .start-data:hover .box-data a {
  color: #fff;
}
#start .box-data span {
  font-size: 2.25rem;
}
#start .box-data h2 {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_dot.svg);
  background-repeat: repeat-x;
  background-position-y: bottom;
  background-size: 15px;
  font-size: 5rem;
  padding-bottom: 20px;
  position: relative;
}
#start .start-data:hover .box-data h2 {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_dot2.svg);
}
#start .box-data h2:before {
  content: "";
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_startGO.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 6rem;
  height: 6rem;
  display: inline-block;
  position: absolute;
  top: -6rem;
  right: 0;
  opacity: 1;
  animation: startData .3s alternate infinite;
}
    @keyframes startData {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(1.1);
      }
    }
#start .start-data:hover .box-data h2:before {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_startGO2.svg);
}
#start .start-data:hover .box-data p {
  opacity: 1;
}
#start .start-data:hover .box-data h2:before {
  opacity: 1;
}
#start .box-data p {
  font-size: 1.25rem;
  font-weight: 200;
  margin-top: 10px;
  opacity: 0;
  transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;-o-transition: .3s;
}
#start .start-data .box-video {
  position: relative;
}
#start .start-data .box-video video {
  height: 100vh;
  filter: blur(5px);
  opacity: .2;
  position: absolute;
  left: calc(50% - 50vw);
}
#start .start-data:hover .box-video video {
  filter: blur(0px);
  opacity: .9;
}



/*======================
  Site 搜索現場
=======================*/
#site {
}
/*開場教學*/
#site .p-site-guide {
  background-color: rgba(2,21,21,.9);
  width: 100%;
  height: 100vh;
  text-align: center;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
#site .p-site-guide .box-data {
  display: inline-block;
  text-align: left;
  position: relative;
  top: calc(50% - 8rem);
}
#site .p-site-guide .box-data p {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_siteGuide.svg);
  background-repeat: no-repeat;
  background-position: left 25px;
  background-size: 50px;
  font-size: 3rem;
  color: #fff;
  line-height: 2;
  margin: 0;
  padding-left: 65px;
}
#site .p-site-guide .box-data p span {
  color: #FFA580;
}
#site .btn-SKIP {
  position: absolute;
  bottom: 30px;
  right: 30px;
}
#site .main-content {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#site .main-content:before {
  content: "";
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_mainContent-S.png);
  background-repeat:repeat-y;
  background-position: right top;
  background-size: contain;
  width: 40px;
  height: 100vh;
  display: inline-block;
  position: absolute;
  left: -40px;
  top: 0;
  opacity: 0.7;
}
  #site .main-content.timesup {
    background-image: none;
    background-color: #AF0600;
    animation: site-timesup .3s alternate infinite;
  }
    @keyframes site-timesup {
      from {
        background-color: #AF0600;
      }
      to {
        background-color: #CD1E17;
      }
    }
#site .main-content .content-box {
  position: relative;
  z-index: 9;
  margin-top: 10px;
}
#site .main-content:after {
  content: "";
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_siteTime.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 156px;
  height: 203px;
  display: inline-block;
  position: absolute;
  right: -10px;
  bottom: 0;
}
  #site .main-content.timesup:after  {
    display: none;
  }
#site .main-content .site-info {
  background-color: #fff;
  border-radius: 25px;
  color: #222;
  padding: 1.1rem 1.3rem;
  position: relative;
}
#site .main-content .site-info:before {
  content: "";
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_siteInfoBefore.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 27px;
  height: 12px;
  display: inline-block;
  position: absolute;
  top: -11px;
  right: 40px;
}
#site .main-content .site-info .title {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_siteInfo.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 40px;
  font-size: 1.25rem;
  padding-left: 50px;
  line-height: 40px;
}
#site .main-content .site-info h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-top: 5px;
  text-align: justify;
  text-justify: inter-ideograph;
}
#site .main-content .site-info h3 span {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_siteInfo-arrowR.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 2rem;
  height: 2rem;
  display: inline-block;
  margin: 0 5px;
  text-indent: -5000px;
}
#site .main-content .site-clue {
  margin-top: 20px;
  overflow: hidden;
}
#site .main-content .site-clue li {
  float: left;
  background-color: rgba(255,255,255,.4);
  width: 48%;
  height: 90px;
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 2.5rem;
  text-align: center;
  color: rgba(19,49,62,.6);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 10px;
}
#site .main-content .site-clue li:nth-child(even) {
  float: right;
}
#site .main-content .site-clue li img {
  width: 100%;
  position: absolute;
}
#site .main-content .site-time {
  text-align: center;
  font-family: 'Roboto';
  font-weight: 900;
  font-size: 6.125rem;
  margin-top: 10px;
  line-height: 1;
}
#site .main-img {
  width: calc(100% - 25%);
  /*overflow-x: scroll;*/
}
#site .main-img .clue-mainImg {
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  height: 100vh;
  position: absolute;
  transition: .5s;-moz-transition: .5s;-webkit-transition: .5s;-o-transition: .5s;
}
  #site .main-img .clue-mainImg.office {
    left: 0;
  }
  #site .main-img .clue-mainImg.office img {
    width: 100%;
    position: absolute;
    z-index: -1
  }
  #site .main-img .clue-mainImg.office.active {
    right: 0;
    left: inherit;
  }
  #site .main-img .clue-mainImg.home {
    right: 0;
  }
  #site .main-img .clue-mainImg.home img {
    width: 100%;
    position: absolute;
    z-index: -1
  }
  #site .main-img .clue-mainImg.home.active {
    left: 0;
    right: inherit;
  }
  #site .main-img .clue-mainImg.office.OC-1 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-1.jpg); }
  #site .main-img .clue-mainImg.office.OC-2 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-2.jpg); }
  #site .main-img .clue-mainImg.office.OC-3 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-3.jpg); }
  #site .main-img .clue-mainImg.office.OC-4 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-4.jpg); }
  #site .main-img .clue-mainImg.office.OC-5 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-5.jpg); }
  #site .main-img .clue-mainImg.office.OC-6 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-6.jpg); }
  #site .main-img .clue-mainImg.office.OC-7 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-7.jpg); }
  #site .main-img .clue-mainImg.office.OC-8 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-8.jpg); }
  #site .main-img .clue-mainImg.office.OC-9 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-9.jpg); }
  #site .main-img .clue-mainImg.office.OC-10 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-10.jpg); }
  #site .main-img .clue-mainImg.office.OC-11 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-11.jpg); }
  #site .main-img .clue-mainImg.office.OC-12 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-12.jpg); }
  #site .main-img .clue-mainImg.office.OC-13 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-13.jpg); }
  #site .main-img .clue-mainImg.office.OC-14 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-officeO-14.jpg); }

  #site .main-img .clue-mainImg.home.OC-1 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-1.jpg); }
  #site .main-img .clue-mainImg.home.OC-2 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-2.jpg); }
  #site .main-img .clue-mainImg.home.OC-3 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-3.jpg); }
  #site .main-img .clue-mainImg.home.OC-4 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-4.jpg); }
  #site .main-img .clue-mainImg.home.OC-5 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-5.jpg); }
  #site .main-img .clue-mainImg.home.OC-6 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-6.jpg); }
  #site .main-img .clue-mainImg.home.OC-7 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-7.jpg); }
  #site .main-img .clue-mainImg.home.OC-8 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-8.jpg); }
  #site .main-img .clue-mainImg.home.OC-9 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-9.jpg); }
  #site .main-img .clue-mainImg.home.OC-10 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-10.jpg); }
  #site .main-img .clue-mainImg.home.OC-11 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-11.jpg); }
  #site .main-img .clue-mainImg.home.OC-12 { background-image: url(//gcpst.chdev.tw/99mary/images/BG_clueMainImg-homeO-12.jpg); }
#site .main-img .clue-mainImg g {
  cursor: pointer;
}
#site .main-img .clue-mainImg svg:not(:root) {
  height: 100vh;
}
#site .main-img #btn-switch {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_btnSwitch.svg);
  background-repeat: no-repeat;
  background-position: center 15px;
  background-size: 18px;
  background-color: #FF0000;
  border: 1px solid #FF0000;
  width: 80px;
  height: 80px;
  line-height: 110px;
  border-radius: 100px;
  font-size: 0.75rem;
  color: #FFF5F0;
  text-align: center;
  cursor: pointer;
  position: fixed;
  right: calc(25% + 15px);
  top: calc(50% - 40px);
  z-index: 9;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  animation: btn-switch 5s alternate infinite;
}
  @keyframes btn-switch {
    0% {
      transform: scale(1);
    }
    5% {
      transform: scale(1.1);
    }
    10% {
      transform: scale(1);
    }
    15% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
#site .main-img #btn-switch:hover {
  transform: scale(1.1);
}
#site .main-img #btn-switch.active {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_btnSwitch2.svg);
}
#site .main-img #btn-switch.L {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_btnSwitch2.svg);
  left: 30px;
  right: inherit;
}
#site .main-img #btn-switch.L.active {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_btnSwitch.svg);
}



/*======================
  Analysis 分析
=======================*/
#analysis {
}
#analysis .main-content {
  background-image: url(//gcpst.chdev.tw/99mary/images/IMG_analysisBear.gif), url(//gcpst.chdev.tw/99mary/images/BG_mainContent.jpg);
  background-size: 80%, cover;
  background-position: center bottom, center top;
  background-position-y: calc(100% + 10%);
  background-repeat: no-repeat;
  width: 30.5%;
}
#analysis .main-content .box-btns a.btn-PINK {
  width: 100%;
  font-size: 3rem;
  line-height: 1.3;
  margin-bottom: 20px;
  padding: 15px 0 18px 0;
}
#analysis .main-content .box-btns a.btn-PINK span {
  font-size: 1.8rem;
  display: block;
}
#analysis .main-content .box-btns {
  margin-top: 60%;
}
#analysis .main-content .box-btns a {
  float: left;
}
#analysis .main-content .box-btns > a:nth-child(2) {
  width: 60%;
  margin-right: 2%;
}
#analysis .main-content .box-btns .btn-PINKsmall {
  width: 38%;
}
#analysis .main-content .box-btns a.btn-PINK:hover i.icon-smile {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon-smileO.svg);
}
#analysis .main-img {
  background-position-x: right;
  width: 69.5%;
  text-align: center;
}
#analysis.office .main-img {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_analysis-office.jpg);
}
#analysis.home .main-img {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_analysis-home.jpg);
}
#analysis .main-img .analysis-box {
  margin: auto;
  display: inline-block;
  margin-top: 10%;
}
#analysis .main-img .box-item {
  background-repeat: no-repeat;
  background-size: contain;
  width: 30%;
  height: 0;
  padding-bottom: 39%;
  margin-right: 20px;
  text-align: center;
  display: inline-block;
}
#analysis .main-img .box-item .box-data {
  margin-top: 30%;
}
#analysis .main-img .box-item.one {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_analysis-item-1.png);
}
#analysis .main-img .box-item.two {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_analysis-item-2.png);
}
#analysis .main-img .box-item.three {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_analysis-item-3.png);
  position: relative;
  top: 30px;
  margin-right: 0;
}
#analysis .main-img .box-item h2 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}
#analysis .main-img .box-item h2 span {
  font-weight: 300;
}
#analysis .main-img .box-item p {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_analysis-P.svg);
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 1.3rem;
  font-weight: 600;
  margin: auto;
  margin-top: 10px;
  width: 80%;
}




/*======================
  Helpme 不救
=======================*/
#helpme {
}
#helpme .main-img {
  background-image: url(//gcpst.chdev.tw/99mary/images/IMG_helpme.jpg);
}
#helpme .main-content {
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.disease-box {
  text-indent: -5000px;
}
.disease-box li {
  color: #fff;
  position: absolute;
  opacity: .8;
}
.disease-box li h3 {
  font-size: 4rem;
}
.disease-box li p {
  font-size: 1.5rem;
  line-height: 1.3;
  text-align: justify;
  text-justify: inter-ideograph;
  margin-top: 10px;
}
.disease-box li.db-1 {
  width: 16%;
  top: 5%;
  left: 20%;
}
.disease-box li.db-2 {
  width: 22%;
  top: 27%;
  left: 5%;
}
.disease-box li.db-3 {
  width: 26%;
  bottom: 27%;
  left: 10%;
}
.disease-box li.db-4 {
  width: 32%;
  bottom: 0%;
  left: 0%;
}
.disease-box li.db-5 {
  width: 24%;
  top: 3%;
  right: 8%;
}
.disease-box li.db-6 {
  width: 23%;
  top: 30%;
  right: 4%;
}
.disease-box li.db-7 {
  width: 27%;
  bottom: 27%;
  right: 4%;
}
.disease-box li.db-8 {
  width: 37%;
  bottom: 1%;
  right: 0%;
}
#helpme .main-content .box-btns {
  margin-top: 50px;
}
#helpme .main-content .box-btns a {
  float: left;
}
#helpme .main-content .box-btns a.btn-PINK {
  width: 100%;
  font-size: 2.2rem;
  margin-bottom: 20px;
  padding: 15px 0 18px 0;
}
#helpme .main-content .box-btns a.btn-PINK span {
  font-size: 1.8rem;
  display: block;
}
#helpme .main-content .box-btns a.btn-PINK:hover i.icon-smile {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon-smileO.svg);
}
#helpme .main-content .box-btns .btn-PINKsmall {
  width: 55%;
}
#helpme .main-content .box-btns > a:nth-child(2) {
  width: 43%;
  margin-right: 2%;
}





/*======================
  Solution-index 解方入口
=======================*/
#solution-index {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
#solution-index .solutionIndex-title {
  width: 100%;
  min-height: 10rem;
  text-align: center;
  margin-top: 4%;
  position: absolute;
  z-index: 9;
  text-shadow: 0 0 15px rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
#solution-index .solutionIndex-title h1 {
  font-size: 4.375rem;
  font-weight: 800;
}
#solution-index .solutionIndex-title h1 span {
  font-family: 'Roboto', sans-serif;
  font-size: 7.375rem;
  font-weight: 800;
  position: relative;
  top: 10px;
}
#solution-index .solutionIndex-title p {
  font-size: 2.25rem;
}
#solution-index .solutionIndex-data {
}
#solution-index .solutionIndex-data .box-data {
  float: left;
  background-size: cover;
  background-position: center;
  width: 33.333%;
  height: 100vh;
  text-align: center;
  position: relative;
}
#solution-index .solutionIndex-data .box-data.done:before {
  content: "";
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_solutionIndexData-done.png);
  background-position-x: center;
  background-position-y: 40%;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,.9);
  background-size: 40%;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
  #solution-index .solutionIndex-data .box-data.sport {
    background-image: url(//gcpst.chdev.tw/99mary/images/BG_solution_01.jpg);
  }
  #solution-index .solutionIndex-data .box-data.sugar {
    background-image: url(//gcpst.chdev.tw/99mary/images/BG_solution_02.jpg);
  }
  #solution-index .solutionIndex-data .box-data.pressure {
    background-image: url(//gcpst.chdev.tw/99mary/images/BG_solution_03.jpg);
  }
#solution-index .solutionIndex-data .box-data a.s3-index {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#solution-index .solutionIndex-data .box-data a.s3-index:hover {
  background-color: rgba(255,165,128,.3);
}
#solution-index .solutionIndex-data .box-data {
  float: left;
  width: 33.333%;
  height: 100vh;
  text-align: center;
  position: relative;
}
#solution-index .solutionIndex-data .box-data .btn-PINK {
  font-size: 3rem;
  width: 70%;
  position: absolute;
  bottom: 7%;
  left: calc(50% - 35%);
  padding: 21px 0 25px 0;
  animation: solutionIndex-BTN 1s alternate infinite;
}
  @keyframes solutionIndex-BTN {
    from {
      bottom: 7%;
    }
    to {
      bottom: 9%;
    }
  }
#solution-index .solutionIndex-data .box-data a.s3-index:hover .btn-PINK {
  background-color: #03b09d;
  color: #fff;
  bottom: 10%;
  transform: rotate(-5deg);
}
#solution-index .solutionIndex-data .box-data .btn-PINK i.icon-solutionSport,
#solution-index .solutionIndex-data .box-data .btn-PINK i.icon-solutionSugar,
#solution-index .solutionIndex-data .box-data .btn-PINK i.icon-solutionPressure {
  background-repeat: no-repeat;
  display: inline-block;
  transform: scale(1);
  top: 10px;
  margin-left: 10px;
  width: 3.5rem;
  height: 3.5rem;
}
  #solution-index .solutionIndex-data .box-data .btn-PINK i.icon-solutionSport {
    background-image: url(//gcpst.chdev.tw/99mary/images/icon-solutionSport.svg);
  }
  #solution-index .solutionIndex-data .box-data a.s3-index:hover .btn-PINK i.icon-solutionSport {
    background-image: url(//gcpst.chdev.tw/99mary/images/icon-solutionSport-O.svg);
  }
  #solution-index .solutionIndex-data .box-data .btn-PINK i.icon-solutionSugar {
    background-image: url(//gcpst.chdev.tw/99mary/images/icon-solutionSugar.svg);
  }
  #solution-index .solutionIndex-data .box-data a.s3-index:hover .btn-PINK i.icon-solutionSugar {
    background-image: url(//gcpst.chdev.tw/99mary/images/icon-solutionSugar-O.svg);
  }
  #solution-index .solutionIndex-data .box-data .btn-PINK i.icon-solutionPressure {
    background-image: url(//gcpst.chdev.tw/99mary/images/icon-solutionPressure.svg);
  }
  #solution-index .solutionIndex-data .box-data a.s3-index:hover .btn-PINK i.icon-solutionPressure {
    background-image: url(//gcpst.chdev.tw/99mary/images/icon-solutionPressure-O.svg);
  }
#solution-index .solutionIndex-data .box-data .btn-PINKine {
  font-size: 1.7rem;
  color: #222;
  border: 1px solid #222;
  width: 50%;
  position: absolute;
  bottom: 9%;
  left: calc(50% - 25%);
  padding: 18px 0 18px 0;
}
#solution-index .solutionIndex-data .box-data .btn-PINKine .icon-arrow {
  margin-left: 5px;
  top: 4px;
  transform: scale(.7);
}
#solution-index .solutionIndex-data .box-data .btn-PINKine:hover {
  background-color: #FFA580;
  color: #fff;
  border: 1px solid #FFA580;
}
#solution-index .solutionIndex-data .box-data .btn-PINKine:hover .icon-arrow:before,
#solution-index .solutionIndex-data .box-data .btn-PINKine:hover .icon-arrow:after {
  background-color: #fff;
}
#solution-index .solutionIndex-data .box-data .btn-PINK .icon-hurryUp {
  background-color: #03B09D;
  width: 6rem;
  height: 6rem;
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 400;
  color: #fff;
  border-radius: 200px;
  display: inline-block;
  position: absolute;
  top: -3.5rem;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}




/*======================
  solution 解方
=======================*/
#solution {
}
#solution .main-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  height: 100vh;
  position: relative;
}
#solution .main-img img {
  height: 100vh;
  position: absolute;
  top: 0;
}
#solution .main-img h2 {
  text-indent: -5000px;
}
#solution .main-content .content-box {
}
#solution .main-content {
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
  #solution.sport .main-content,
  #solution.sugar .main-content,
  #solution.pressure .main-content {
    background-repeat: no-repeat;
    background-size: contain, cover;
    background-position: center bottom, center top;
  }
  #solution.sport .main-content {
    background-image: url(//gcpst.chdev.tw/99mary/images/BG_actionBox-A.png), url(//gcpst.chdev.tw/99mary/images/BG_mainContent.jpg);
  }
  #solution.sugar .main-content {
    background-image: url(//gcpst.chdev.tw/99mary/images/BG_actionBox-B.png), url(//gcpst.chdev.tw/99mary/images/BG_mainContent.jpg);
  }
  #solution.pressure .main-content {
    background-image: url(//gcpst.chdev.tw/99mary/images/BG_actionBox-C.png), url(//gcpst.chdev.tw/99mary/images/BG_mainContent.jpg);
  }
#solution .main-content .box-title h1 {
  font-size: 2.57rem;
  font-weight: 700;
  line-height: 1.3;
}
#solution .main-content .box-title h3 {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
  margin-top: 10px;
}
#solution .main-content .box-title .solution-info {
  background-color: #fff;
  border-radius: 30px;
  padding: 15px 30px;
  margin-top: 30px;
  position: relative;
}
#solution .main-content .box-title .solution-info:before {
  content: "";
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_siteInfoBefore.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 27px;
  height: 12px;
  display: inline-block;
  position: absolute;
  top: -11px;
  right: 40px;
}
#solution .main-content .box-title .solution-info h3 {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_siteInfo.png);
  background-repeat: no-repeat;
  background-size: 40px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  padding-left: 50px;
}
#solution .main-content .action-box {
  text-align: center;
  margin-top: 70px;
}
#solution .main-content .action-box .box-data {
  background-color: rgba(255,255,255,.2);
  padding: 20px;
  border-radius: 200px;
  display: inline-block;
}
  #solution.sugar .main-content .action-box .box-data {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
  }
#slider-vertical {
  height: 45vh;
}
.vue-slider {
  border: 0;
  width: 60px;
  border-radius: 100px !important;
  box-shadow: 6px 3px 10px rgba(0,0,0,0.3) inset;
  background-color: #fff !important;
}
.ui-slider-vertical .ui-slider-range {
  background-color: #FFA580;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  box-shadow: 6px 3px 10px rgba(0,0,0,0.3) inset;
}
.vue-slider-true.vue-slider-dot {
  left: -35px !important;
  margin-left: 0;
  margin-bottom: -20px;
  width: 130px !important;
  height: 130px !important;
  border-radius: 100px;
  background-image: linear-gradient(-147deg, #FFA580 0%, #F77D5D 100%);
  box-shadow: 0 0 9px 0 rgba(255,255,255,.3) !important;
  border: 0;
  cursor: pointer;
}
.vue-slider-true.vue-slider-dot:before {
  content: "";
  background-image: linear-gradient(147deg, #FFA580 0%, #F77D5D 100%);
  width: 64px;
  height: 64px;
  border-radius: 100px;
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
}
#solution .vue-slider-true.vue-slider-dot:after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 94px;
  display: inline-block;
  position: absolute;
  top: 0;
  right: -110px;
  animation: sliderHandle .7s alternate infinite;
}
  @keyframes sliderHandle {
    from {
      opacity: 1;
    }
    to {
      opacity: .6;
    }
  }
#solution.sport .vue-slider-true.vue-slider-dot:after,
#solution.pressure .vue-slider-true.vue-slider-dot:after {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_uiSlider-handle-A.png);
}
.vue-slider-true.vue-slider-dot:hover {
  box-shadow: 0 0 9px 0 rgba(255,255,255,1) !important;
}
.ui-slider-vertical .ui-slider-handle:hover,
.ui-slider-vertical .ui-slider-handle:focus {
  outline: none;
}
.ui-state-active, .ui-widget-content .ui-state-active {
  border: 0;
}
#solution.sugar .main-content .action-box {
  margin-top: 150px;
}
.btn-Abutton {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  width: 20rem;
  height: 15rem;
  display: inline-block;
  position: relative;
  transition: inherit;-moz-transition: inherit;-webkit-transition: inherit;-o-transition: inherit;
  cursor: pointer;
  background-color: transparent;
  border: 0;
}
.btn-Abutton:focus {
  outline: none;
}
.btn-Abutton:after {
  content: "";
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_uiSlider-handle-B.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 94px;
  display: inline-block;
  position: absolute;
  top: -90px;
  right: -50px;
  animation: sliderHandle .7s alternate infinite;
}
.btn-Abutton.one {
  background-image: url(//gcpst.chdev.tw/99mary/images/btn-Abutton.svg);
}
.btn-Abutton.one:hover {
  background-image: url(//gcpst.chdev.tw/99mary/images/btn-AbuttonO.svg);
}
.btn-Abutton.two {
  background-image: url(//gcpst.chdev.tw/99mary/images/btn-Abutton-2.svg);
}
.btn-Abutton.two:hover {
  background-image: url(//gcpst.chdev.tw/99mary/images/btn-AbuttonO-2.svg);
}
.btn-Abutton.three {
  background-image: url(//gcpst.chdev.tw/99mary/images/btn-Abutton-3.svg);
}
.btn-Abutton.three:hover {
  background-image: url(//gcpst.chdev.tw/99mary/images/btn-AbuttonO-3.svg);
}





/*======================
  result 結果
=======================*/
#result {
}
#result .main-img {
  width: 60%;
}
#result .main-img h2 {
  text-indent: -5000px;
}
  #result.A .main-img {
    background-image: url(//gcpst.chdev.tw/99mary/images/BG_result-A.jpg);
  }
  #result.B .main-img {
    background-image: url(//gcpst.chdev.tw/99mary/images/BG_result-B.jpg);
  }
  #result.C .main-img {
    background-image: url(//gcpst.chdev.tw/99mary/images/BG_result-C.jpg);
  }
#result .main-img .crew-video {
  width: 31.5%;
  position: absolute;
  top: 58%;
  left: 33%;
}
#result .main-img .crew-video video {
  width: 100%;
}
#result .main-img svg {
 height: 100vh;
}
#result .main-content .content-box {
  margin-top: 20%;
}
#result .main-content {
  background-image: url(//gcpst.chdev.tw/99mary/images/BG_result-content.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-color: #fff;
  background-size: 35%;
  color: #222;
  width: 40%;
  padding: 0 3%;
  overflow-y: scroll;
  display: flex;
  align-items: center;
  justify-content: center;
}
#result .main-content .box-title {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon_dot.svg);
  background-repeat: repeat-x;
  background-position-y: bottom;
  background-size: 15px;
  padding-bottom: 30px;
}
#result .main-content .box-title h2 {
  font-size: 1.75rem;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(255,255,255,.9);
}
#result .main-content .box-title h1 {
  font-size: 3.75rem;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255,255,255,.9);
}
#result .main-content .box-title h1 span {
  font-size: 3rem;
}
  #result.C .main-content .box-title h1 {
    font-size: 3.2rem;
  }
  #result .main-content .box-title h1 span {
    font-size: 2.5rem;
  }
#result .main-content .box-title .share-box {
  margin-top: 30px;
}
#result .main-content .box-title .share-box:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  clear: both;
}
#result .main-content .box-title .share-box a {
  background-position-x: calc(50% - 40%);
  width: 48%;
  font-size: 1.75rem;
  color: #fff;
  border-radius: 100px;
  padding: 20px 0;
  padding-left: 17%;
  position: relative;
}
#result .main-content .box-title .share-box a.s-facebook {
  float: left;
  background-color: #4165AE;
}
#result .main-content .box-title .share-box a.s-line {
  float: right;
  background-color: #03C100;
}
#result .main-content .box-title .share-box a.s-facebook:hover {
  background-color: #18387B;
}
#result .main-content .box-title .share-box a.s-line:hover {
  background-color: #048902;
}
#result .main-content .box-footer {
  margin: 30px auto 0 auto;
  width: 95%;
}
#result .main-content .box-footer .icon-arrow {
  transform: scale(.7);
  top: 5px;
  margin-left: 5px;
}
#result .main-content .box-footer .box-btns a {
  background-color: #fff;
  width: 100%;
  color: #222;
  font-weight: 500;
  font-size: 1.75rem;
  border: 3px solid #FFA580;
  padding: 12px 0;
}
#result .main-content .box-footer .box-btns a:hover,
#result .main-content .box-footer .box-btns a:active {
  background-color: #03b09d;
  border: 3px solid #03b09d;
  color: #fff;
}
#result .main-content .box-footer .box-btns a:hover .icon-arrow.black:before,
#result .main-content .box-footer .box-btns a:hover .icon-arrow.black:after {
  background-color: #fff;
}
#result .main-content .box-footer .box-btns .BF {
  margin-top: 10px;
  overflow: hidden;
}
#result .main-content .box-footer .box-btns .BF a {
  float: left;
  width: 49%;
  font-size: 1.5rem;
}
#result .main-content .box-footer .box-btns .BF a .icon-arrow {
  transform: scale(.5);
  margin-left: 0;
}
#result .main-content .box-footer .box-btns .BF a:last-child {
  float: right;
}
#result.C .main-content .box-footer .box-btns .BF a:last-child {
  width: 100%;
}
#result .main-content .box-footer .box-btns2 {
  overflow: hidden;
  border-top: 1px solid #ccc;
  padding-top: 15px;
  margin-top: 15px;
}
#result .main-content .box-footer .box-btns2 a .icon-arrow {
  transform: scale(.5);
  margin-left: 0;
}
#result .main-content .box-footer .sponsor {
  margin-top: 10px;
  text-align: center;
  color: #555;
}
#result .main-content .box-footer .sponsor img {
  width: 120px;
}
#p-result-share {
}
#p-result-share.popup .popup-main .box-data {
  width: 100%;
  text-align: center;
}
#p-result-share.popup .popup-main .box-data .data-box {
  width: 80%;
}
#p-result-share.popup .popup-main .box-data p a {
  text-decoration: underline;
}
#p-result-share.popup .popup-main .box-btns {
  width: 100%;
}
#p-result-share.popup .popup-main .box-btns a {
  float: left;
  width: 48%;
  display: inline-block;
  padding: 15px 0 15px 0;
  position: relative;
}
#p-result-share.popup .popup-main .box-btns a:last-child {
  float: right;
}
#p-result-share.popup .popup-main .box-btns {
  margin-top: 80px;
}
.icon-resultShare {
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  position: absolute;
  top: -70px;
  left: 0;
}
.icon-resultShare.A {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon-resultShare1.png);
  width: 140px;
  height: 77px;
}
.icon-resultShare.B {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon-resultShare2.png);
  width: 178px;
  height: 79px;
  top: -75px;
}
.icon-resultShare.C {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon-resultShare3.png);
  width: 140px;
  height: 77px;
}
i.icon-hand {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon-hand.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 27px;
  height: 30px;
  display: inline-block;
  position: relative;
  top: 5px;
  margin-left: 5px;
}
.btn-BLACKline:hover i.icon-hand, .btn-BLACKline:active i.icon-hand {
  background-image: url(//gcpst.chdev.tw/99mary/images/icon-handO.svg);
}
.cls-1 {
  fill: transparent;
}