@charset "UTF-8";
@import url("//fonts.googleapis.com/earlyaccess/notosanstc.css");
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video, a {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  min-height: 100%;
}

body {
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a {
  text-decoration: none;
  outline: 0;
  cursor: pointer;
}

a:focus, a:hover, a:visited {
  text-decoration: none;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit;
}

nav ul, ol, ul {
  list-style: none;
}

p a {
  line-height: inherit;
}

p a:visited {
  line-height: inherit;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-user-select: none;
}

.button, button {
  cursor: pointer;
  text-transform: none;
  -webkit-appearance: none;
  background-color: transparent;
}

button[disabled], input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button, input, select, textarea {
  font-size: 100%;
  font-family: inherit;
  border: none;
  border-radius: 0;
  margin: 0;
  outline: 0;
  padding: 0;
}

button:focus, input:focus, select:focus, textarea:focus {
  border: none;
  outline: 0;
}

input:-webkit-autofill, textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px #fff inset;
}

input {
  vertical-align: middle;
}

input[type=submit], input[type=reset], input[type=button] {
  cursor: pointer;
  text-transform: none;
  -webkit-appearance: none;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  min-height: 5em;
  overflow: auto;
  vertical-align: top;
}

select {
  vertical-align: middle;
  text-transform: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ins {
  text-decoration: none;
  background-color: #ff9;
  color: #000;
}

mark {
  background-color: #ff9;
  color: #000;
}

article, aside, details, figcaption, figure, footer, header, hgroup, hr, menu, nav, section {
  display: block;
}

em, mark {
  font-style: italic;
}

b, mark, strong {
  font-weight: 700;
}

small {
  font-size: 80%;
}

blockquote, q {
  quotes: none;
}

blockquote::after, blockquote::before, q::after, q::before {
  content: '';
  content: none;
}

blockquote cite::before {
  content: "— ";
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

hr {
  height: 0;
  border-width: 1px 0 0;
  border-style: solid;
  border-color: #ccc;
  margin: 1em 0;
  padding: 0;
  clear: both;
}

input[type="checkbox"] ~ header label span i {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

section .content, h1, h2, h3, h4, h5, h6, sub, #consulting #consultCheck form, #health section .content > button, #health section:nth-of-type(1) .con > * {
  margin-right: auto;
  margin-left: auto;
}

.btn:before, #index h1 #starblink div, #index h1 #starblink div:nth-of-type(1) i, #testing #testList input[type="radio"] + figure:after, #testing #testStart .content > div div i, #consulting #consultResult ul li {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#consulting #consultCheck .btn:after, #consulting #warning .btn:after, #health section:nth-of-type(1) .con figure > div, #health section:nth-of-type(1) .con figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}

#health h5:before, #health h5:after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}

#testing #testList input[type="radio"] + figure figcaption, #testing #testReady #reciprocal span, input[type="checkbox"] ~ header label span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#index .con, input[type="checkbox"] ~ header label span i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

#testing #testList input[type="radio"] + figure, #testing #testStart .content > div div button, #testing #testStart .content > div div i, #consulting #consultResult ul li {
  background-repeat: no-repeat;
  background-position: center center;
}

#index h1 #starblink:before, #testing #testList input[type="radio"] + figure:before, #testing #testStart .content > div div button:before {
  content: '';
  display: block;
  padding-top: 100%;
}

#testing .popup:before, #testing .popup .content, input[type="checkbox"] ~ header #logo, input[type="checkbox"] ~ header #menu, input[type="checkbox"] ~ header #menu > *, input[type="checkbox"] ~ header #menu:before, input[type="checkbox"] ~ header #menu nav a:before, input[type="checkbox"] ~ header #menu nav a span, input[type="checkbox"] ~ header #menu nav a span > *, input[type="checkbox"] ~ header #menu ul li, #testing #testList label, #testing #testStart .content > div div, #consulting #warning .con dl, #consulting #warning .con dl figure, #consulting #consultResult ul li figure > *, #health section .con > *, #share section ul li, #share section ul li button, #health section:nth-of-type(2) .con fieldset figure {
  display: inline-block;
  vertical-align: middle;
}

#testing .popup {
  font-size: 0;
}

#testing .popup:before {
  width: 0;
  content: '';
  height: 100%;
}

body {
  -webkit-backface-visibility: hidden;
}

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

.animated.bounceIn, .animated.bounceOut {
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
}

.animated.flipOutX, .animated.flipOutY {
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  20%, 60% {
    -webkit-transform: translate3d(-3px, 0, 0);
            transform: translate3d(-3px, 0, 0);
  }
  40%, 80% {
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  20%, 60% {
    -webkit-transform: translate3d(-3px, 0, 0);
            transform: translate3d(-3px, 0, 0);
  }
  40%, 80% {
    -webkit-transform: translate3d(3px, 0, 0);
            transform: translate3d(3px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
          animation-name: shake;
}

/* Basic ===========================================*/
html {
  font-size: 16px;
}

body {
  color: #5e5c5d;
  font-family: 'Trebuchet MS', 'Noto Sans TC', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
  font-weight: 400;
  background-color: #fefefe;
  height: 100%;
  overflow-x: hidden;
}

::-moz-selection {
  color: #fefefe;
  background: #5e5c5d;
}

::selection {
  color: #fefefe;
  background: #5e5c5d;
}

/* 共用 ===========================================*/
a, button {
  transition: all .3s ease-out;
}

a.on {
  pointer-events: none;
}

button {
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
}

/* Header ===========================================*/
input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] ~ header {
  font-size: 0;
  text-align: right;
  width: 100%;
  height: 76px;
  padding-right: 2rem;
  background-color: rgba(28, 34, 40, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: fixed;
  z-index: 99;
  transition: background .3s ease-out;
}

input[type="checkbox"] ~ header.on {
  background-color: rgba(28, 34, 40, 0.92);
}

input[type="checkbox"] ~ header #logo, input[type="checkbox"] ~ header #menu {
  height: 100%;
}

input[type="checkbox"] ~ header #logo {
  width: 33%;
  max-width: 180px;
  transition: none;
  background: url(../images/logo.png) 0% 50% no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

input[type="checkbox"] ~ header #menu {
  font-size: 0;
}

input[type="checkbox"] ~ header #menu:before {
  width: 0;
  content: '';
  height: 100%;
}

input[type="checkbox"] ~ header #menu nav {
  height: 100%;
  position: relative;
  z-index: 1;
}

input[type="checkbox"] ~ header #menu nav a {
  color: #fefefe;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .15em;
  margin-right: 1.5em;
  height: 100%;
  display: inline-block;
  position: relative;
}

input[type="checkbox"] ~ header #menu nav a:after {
  content: '';
  width: 98%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0);
  position: absolute;
  right: 0;
  top: 100%;
  transition: all .3s ease-out;
}

input[type="checkbox"] ~ header #menu nav a.on, input[type="checkbox"] ~ header #menu nav a:hover {
  color: #a2cb5c;
}

input[type="checkbox"] ~ header #menu nav a.on:after, input[type="checkbox"] ~ header #menu nav a:hover:after {
  background-color: #fefefe;
}

input[type="checkbox"] ~ header #menu nav a:before {
  width: 0;
  content: '';
  height: 100%;
}

input[type="checkbox"] ~ header #menu nav a span i {
  -webkit-transform: scaleX(0.95);
      -ms-transform: scaleX(0.95);
          transform: scaleX(0.95);
  padding: 0 .25em;
}

input[type="checkbox"] ~ header #menu nav a span img:nth-of-type(2) {
  display: none;
}

input[type="checkbox"] ~ header #menu ul li {
  font-size: 1rem;
  width: 2.4375rem;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  border: 1px solid #fefefe;
  transition: background .3s ease-out;
}

input[type="checkbox"] ~ header #menu ul li:before {
  content: '';
  display: block;
  padding-top: 99%;
}

input[type="checkbox"] ~ header #menu ul li + li {
  margin-left: .8em;
}

input[type="checkbox"] ~ header #menu ul li:nth-of-type(1) {
  background-image: url(../images/share_fb.png);
}

input[type="checkbox"] ~ header #menu ul li:nth-of-type(2) {
  background-image: url(../images/share_line.png);
}

input[type="checkbox"] ~ header #menu ul li:hover {
  background-color: #fefefe;
}

input[type="checkbox"] ~ header #menu ul li:hover:nth-of-type(1) {
  background-image: url(../images/share_fb_h.png);
}

input[type="checkbox"] ~ header #menu ul li:hover:nth-of-type(2) {
  background-image: url(../images/share_line_h.png);
}

input[type="checkbox"] ~ header #menu ul li > * {
  width: 100%;
  height: 100%;
  position: absolute !important;
  left: 0;
  top: 0;
  opacity: 0;
}

input[type="checkbox"] ~ header label {
  display: none;
}

/* Footer ===========================================*/
footer {
  font-size: 0.875rem;
  width: 100%;
  color: #c0c0c0;
  font-weight: 300;
  letter-spacing: 1px;
  text-align: center;
  background-color: #000c1a;
  padding: .6em 0;
  position: relative;
  z-index: 98;
}

footer copyright {
  display: block;
}

/* Section ===========================================*/
section {
  padding-top: 76px;
  width: 100%;
  position: relative;
  background: url(../images/consult_bg.jpg) 50% 50% no-repeat;
  background-size: cover;
}

section.full {
  height: 100%;
}

section .content {
  width: 100%;
  max-width: 1600px;
  text-align: center;
  padding: 0 50px 75px;
}

section .content.lw {
  max-width: 1400px;
}

section .content.mw {
  max-width: 1200px;
}

sub {
  display: block;
}

h2 {
  font-size: 3.25rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .08em;
  color: #fb7407;
  padding-top: .9em;
  padding-bottom: .1em;
}

h2 small {
  font-size: 84%;
  display: block;
}

h2 span {
  font-size: 62%;
  font-weight: 400;
  letter-spacing: .06em;
  display: block;
}

h3, h4 {
  color: #5e5c5d;
  letter-spacing: .1em;
}

h3, .h3 {
  font-size: 1.625rem;
  font-weight: 500;
}

h4 {
  font-size: 1.375rem;
  margin-bottom: 1.6em;
}

h4 em {
  color: #000;
  font-size: 1.9em;
  font-weight: 600;
  font-style: normal;
}

h5 {
  font-size: 2.25rem;
  color: #5e5c5d;
  font-weight: 500;
  letter-spacing: .03em;
}

h5 em {
  color: #000;
  font-style: normal;
}

h5 strong {
  font-size: 1.6em;
  font-weight: 600;
  padding: 0 .1em;
}

p {
  font-size: 1.125rem;
  color: #5e5c5d;
}

.btn {
  font-size: 2.125rem;
  letter-spacing: .1em;
  font-weight: 600;
  line-height: 1;
  min-width: 400px;
  -webkit-transform: scaleX(0.95);
      -ms-transform: scaleX(0.95);
          transform: scaleX(0.95);
  padding: .95em 1.3em;
  margin-top: 1.5em;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.35);
  position: relative;
  display: inline-block;
  transition: color .3s ease-out, background .3s ease-out;
}

.btn:before {
  content: '';
  border-width: .65rem;
  border-style: solid;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.35);
  transition: all .3s ease-out;
}

.btn.wt {
  white-space: nowrap;
  color: #fefefe;
  background-color: rgba(255, 255, 255, 0.1);
}

.btn.wt:before {
  border-color: #fefefe;
}

.btn.wt:hover {
  color: #064a86;
  background-color: rgba(255, 255, 255, 0.5);
}

.btn.bl {
  color: #34a3cf;
  background-color: rgba(255, 255, 255, 0.1);
}

.btn.bl:before {
  border-color: #34a3cf;
}

.btn.bl:hover {
  color: #fefefe;
  background-color: rgba(52, 163, 207, 0.5);
}

.btn.og {
  color: #fb7407;
  background-color: rgba(255, 255, 255, 0.1);
}

.btn.og:before {
  border-color: #fb7407;
}

.btn.og:hover {
  color: #fefefe;
  background-color: rgba(251, 116, 7, 0.7);
  text-shadow: 1px 3px 4px rgba(0, 0, 0, 0.35), 0 0 10px rgba(17, 24, 31, 0.35);
}

.btn.og:hover:before {
  border-color: #fefefe;
}

.btn.fb, .btn.line {
  font-size: 1.5rem;
  min-width: initial;
  margin-top: 0;
  padding: .8em 0;
}

.btn.fb:before, .btn.line:before {
  border-width: .5rem;
}

.btn.fb {
  color: #4367b3;
}

.btn.fb:before {
  border-color: #4367b3;
}

.btn.fb:hover {
  color: #fefefe;
  background-color: rgba(66, 107, 179, 0.5);
}

.btn.line {
  color: #01b901;
}

.btn.line:before {
  border-color: #01b901;
}

.btn.line:hover {
  color: #fefefe;
  background-color: rgba(1, 185, 1, 0.5);
}

.btn.s {
  padding-left: .5em;
  padding-right: .5em;
  letter-spacing: .03em;
}

.btn.s small {
  font-size: .85em;
}

sub {
  font-size: 1.1875rem;
  font-weight: 300;
  text-align: center;
  letter-spacing: .1em;
  display: block;
  margin-bottom: 2em;
}

/* index only */
@-webkit-keyframes blinkAfter {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  1.5% {
    -webkit-transform: rotate(2.7deg) scale(0.8);
            transform: rotate(2.7deg) scale(0.8);
  }
  3% {
    -webkit-transform: rotate(5.4deg) scale(1);
            transform: rotate(5.4deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(90deg) scale(1);
            transform: rotate(90deg) scale(1);
  }
  51.5% {
    -webkit-transform: rotate(92.7deg) scale(0.8);
            transform: rotate(92.7deg) scale(0.8);
  }
  53% {
    -webkit-transform: rotate(95.4deg) scale(1);
            transform: rotate(95.4deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(180deg) scale(1);
            transform: rotate(180deg) scale(1);
  }
}

@keyframes blinkAfter {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  1.5% {
    -webkit-transform: rotate(2.7deg) scale(0.8);
            transform: rotate(2.7deg) scale(0.8);
  }
  3% {
    -webkit-transform: rotate(5.4deg) scale(1);
            transform: rotate(5.4deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(90deg) scale(1);
            transform: rotate(90deg) scale(1);
  }
  51.5% {
    -webkit-transform: rotate(92.7deg) scale(0.8);
            transform: rotate(92.7deg) scale(0.8);
  }
  53% {
    -webkit-transform: rotate(95.4deg) scale(1);
            transform: rotate(95.4deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(180deg) scale(1);
            transform: rotate(180deg) scale(1);
  }
}

@-webkit-keyframes blinkStar {
  0% {
    -webkit-transform: rotate(90deg) scale(1);
            transform: rotate(90deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(90deg) scale(0.5);
            transform: rotate(90deg) scale(0.5);
  }
}

@keyframes blinkStar {
  0% {
    -webkit-transform: rotate(90deg) scale(1);
            transform: rotate(90deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(90deg) scale(0.5);
            transform: rotate(90deg) scale(0.5);
  }
}

#index footer {
  position: absolute;
  bottom: 0;
}

#index section {
  background: url(../images/idx_kv.jpg) 50% 50% no-repeat;
  background-size: cover;
}

#index .step {
  opacity: 0;
}

#index h1 {
  width: 50.08333%;
  min-width: 400px;
  max-width: 601px;
  position: relative;
}

#index h1 #starblink {
  width: 20%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -22% 0 0 -35.25%;
}

#index h1 #starblink div {
  border-radius: 50%;
  -webkit-transform: rotate(0deg) scale(1);
      -ms-transform: rotate(0deg) scale(1);
          transform: rotate(0deg) scale(1);
}

#index h1 #starblink div:nth-of-type(1) {
  width: 6%;
  height: 6%;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  z-index: 1;
}

#index h1 #starblink div:nth-of-type(1) i {
  width: 100%;
  height: 100%;
  background-color: #fefefe;
  border-radius: 50%;
}

#index h1 #starblink div:nth-of-type(1) i:after, #index h1 #starblink div:nth-of-type(1) i:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1600%;
  width: 3px;
  margin: -800% 0 0 -1.5px;
  border-radius: 50%;
  background-color: #fefefe;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1), 0 0 4px 3px rgba(255, 255, 255, 0.1);
}

#index h1 #starblink div:nth-of-type(1) i:before {
  -webkit-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
          transform: rotate(-5deg);
}

#index h1 #starblink div:nth-of-type(1) i:after {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

#index h1 #starblink div:nth-of-type(1) i:nth-of-type(1):after, #index h1 #starblink div:nth-of-type(1) i:nth-of-type(3):after {
  -webkit-transform: rotate(90deg) scale(1);
      -ms-transform: rotate(90deg) scale(1);
          transform: rotate(90deg) scale(1);
  -webkit-animation: blinkStar 3.5s linear infinite alternate;
          animation: blinkStar 3.5s linear infinite alternate;
}

#index h1 #starblink div:nth-of-type(1) i:nth-of-type(1) {
  box-shadow: 0 0 4px white, 0 0 8px rgba(255, 255, 255, 0.98);
}

#index h1 #starblink div:nth-of-type(1) i:nth-of-type(1):before {
  -webkit-transform: rotate(-8deg) scale(0.7);
      -ms-transform: rotate(-8deg) scale(0.7);
          transform: rotate(-8deg) scale(0.7);
}

#index h1 #starblink div:nth-of-type(1) i:nth-of-type(2) {
  -webkit-transform: rotate(19deg) scale(0.7);
      -ms-transform: rotate(19deg) scale(0.7);
          transform: rotate(19deg) scale(0.7);
  box-shadow: 0 0 8px 10px rgba(255, 255, 255, 0.8), 0 0 10px 16px rgba(255, 255, 255, 0.6), 0 0 16px 22px rgba(255, 255, 255, 0.5), 0 0 28px 32px rgba(255, 255, 255, 0.4);
}

#index h1 #starblink div:nth-of-type(1) i:nth-of-type(3) {
  -webkit-transform: rotate(45deg) scale(0.8);
      -ms-transform: rotate(45deg) scale(0.8);
          transform: rotate(45deg) scale(0.8);
}

#index h1 #starblink div:nth-of-type(1) i:nth-of-type(4) {
  -webkit-transform: rotate(62.5deg) scale(0.5);
      -ms-transform: rotate(62.5deg) scale(0.5);
          transform: rotate(62.5deg) scale(0.5);
}

#index h1 #starblink div:nth-of-type(1) i:nth-of-type(5) {
  -webkit-transform: rotate(80deg) scale(0.6);
      -ms-transform: rotate(80deg) scale(0.6);
          transform: rotate(80deg) scale(0.6);
}

#index h1 #starblink div:nth-of-type(2) {
  width: 25%;
  height: 25%;
  box-shadow: -11px 16px 1px rgba(255, 255, 255, 0.4);
}

#index sub {
  font-size: 1.25rem;
  line-height: 1.7;
  color: #fefefe;
  letter-spacing: .2em;
  -webkit-transform: scaleX(0.95);
      -ms-transform: scaleX(0.95);
          transform: scaleX(0.95);
  margin-top: .5em;
  margin-bottom: 0;
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(17, 24, 31, 0.35);
}

#index .con {
  text-align: center;
  width: 70%;
  min-width: 500px;
}

#index .btn.wt {
  min-width: initial;
}

#index .btn.wt span {
  letter-spacing: .175em;
}

#index .btn.wt:after {
  content: '>';
  font-size: 1.1em;
  letter-spacing: 0;
  display: inline-block;
  margin-left: .2em;
}

#index .btn.wt:hover {
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.35), 0 0 43px rgba(255, 255, 255, 0.6);
}

#index.animated h1 #starblink div:nth-of-type(1) {
  -webkit-animation-name: blinkAfter;
          animation-name: blinkAfter;
}

/* testing only */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

#testing section {
  background: #1f2c49;
}

#testing h2 {
  width: 68%;
  max-width: 395px;
}

#testing sub {
  color: #b0ed48;
}

#testing em {
  color: #fb7407;
  font-size: 5rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  display: block;
}

#testing #testList fieldset {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}

#testing #testList fieldset legend {
  color: #fefefe;
  font-size: 1.1875rem;
  font-weight: 200;
  letter-spacing: .1em;
  padding: 0 .4em;
  background-color: #1f2c49;
}

#testing #testList form {
  font-size: 0;
}

#testing #testList label {
  width: 31%;
  margin-left: 3.5%;
}

#testing #testList label:nth-of-type(1) {
  margin-left: 0%;
}

#testing #testList label:nth-of-type(1) input[type="radio"] + figure {
  background-image: url(../images/test_f1.jpg);
}

#testing #testList label:nth-of-type(2) input[type="radio"] + figure {
  background-image: url(../images/test_f2.jpg);
}

#testing #testList label:nth-of-type(3) input[type="radio"] + figure {
  background-image: url(../images/test_f3.jpg);
}

#testing #testList input[type="radio"] {
  display: none;
}

#testing #testList input[type="radio"] + figure {
  width: 100%;
  position: relative;
  display: block;
  transition: all .3s ease-out;
  background-size: 100%;
  cursor: pointer;
}

#testing #testList input[type="radio"] + figure figcaption {
  color: #fefefe;
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: .1em;
  width: 100%;
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  z-index: 1;
  transition: all .2s ease-in;
}

#testing #testList input[type="radio"] + figure:after {
  content: '';
  border: 15px solid transparent;
  background-color: rgba(88, 104, 123, 0.85);
  transition: all .3s ease-out;
}

#testing #testList input[type="radio"]:checked + figure, #testing #testList input[type="radio"]:hover + figure {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.35);
  background-size: 110%;
}

#testing #testList input[type="radio"]:checked + figure figcaption, #testing #testList input[type="radio"]:hover + figure figcaption {
  opacity: 0;
}

#testing #testList input[type="radio"]:checked + figure:after, #testing #testList input[type="radio"]:hover + figure:after {
  border-color: #fefefe;
  background-color: transparent;
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.25);
}

#testing #testList .btn {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}

#testing #testStart {
  display: none;
}

#testing #testStart #count {
  padding: .25em 0;
}

#testing #testStart #count:before, #testing #testStart #count:after {
  content: '';
  width: .4em;
  height: 1em;
  display: inline-block;
  background: url(../images/test_icon_count.png) 50% 100% no-repeat;
  background-size: 100% auto;
}

#testing #testStart #count:before {
  margin-right: .075em;
}

#testing #testStart #count:after {
  margin-left: .15em;
}

#testing #testStart .content > div {
  font-size: 0;
  display: none;
}

#testing #testStart .content > div div {
  width: 49.4%;
  position: relative;
  overflow: hidden;
}

#testing #testStart .content > div div + div {
  margin-left: 1.2%;
}

#testing #testStart .content > div div button, #testing #testStart .content > div div i {
  opacity: 0;
}

#testing #testStart .content > div div i {
  width: 50%;
  height: 50%;
  z-index: 3;
  background-image: url(../images/test_icon_wrong.png);
  background-size: 34% auto;
  pointer-events: none;
  -webkit-animation-duration: .35s;
          animation-duration: .35s;
}

#testing #testStart .content > div div i.animated {
  opacity: 1;
}

#testing #testStart .content > div div button {
  width: 14%;
  position: absolute;
  z-index: 2;
  background-color: transparent;
  background-image: url(../images/test_icon_correct.png);
  background-size: 80% auto;
  transition: opacity .1s linear, background .1s .05s ease-out;
}

#testing #testStart .content > div div button.on {
  background-size: 90% auto;
  opacity: 1;
  -webkit-animation: pulse .3s ease;
          animation: pulse .3s ease;
}

#testing #testStart .content > div div img {
  width: 100%;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

#testing #testStart .content #test_1 div button:nth-of-type(1) {
  top: 37%;
  left: 0%;
}

#testing #testStart .content #test_1 div button:nth-of-type(2) {
  top: 69%;
  left: 7%;
}

#testing #testStart .content #test_1 div button:nth-of-type(3) {
  top: 33%;
  left: 38%;
}

#testing #testStart .content #test_1 div button:nth-of-type(4) {
  top: 29%;
  left: 52%;
}

#testing #testStart .content #test_1 div button:nth-of-type(5) {
  top: 60%;
  left: 53%;
}

#testing #testStart .content #test_2 div button:nth-of-type(1) {
  top: 63%;
  left: 0%;
}

#testing #testStart .content #test_2 div button:nth-of-type(2) {
  top: 81%;
  left: 19%;
}

#testing #testStart .content #test_2 div button:nth-of-type(3) {
  top: 48.5%;
  left: 27%;
}

#testing #testStart .content #test_2 div button:nth-of-type(4) {
  top: 45%;
  left: 59.5%;
}

#testing #testStart .content #test_2 div button:nth-of-type(5) {
  top: 34%;
  left: 73%;
}

#testing #testStart .content #test_3 div button:nth-of-type(1) {
  top: 41%;
  left: 0%;
}

#testing #testStart .content #test_3 div button:nth-of-type(2) {
  top: 27%;
  left: 16.5%;
}

#testing #testStart .content #test_3 div button:nth-of-type(3) {
  top: 3%;
  left: 80%;
}

#testing #testStart .content #test_3 div button:nth-of-type(3):before {
  padding-top: 250%;
}

#testing #testStart .content #test_3 div button:nth-of-type(4) {
  top: 66%;
  left: 72%;
}

#testing #testStart .content #test_3 div button:nth-of-type(5) {
  top: 56%;
  left: 87%;
  background-position: 50% 30%;
}

#testing #testStart .content #test_3 div button:nth-of-type(5):before {
  padding-top: 210%;
}

#testing .popup {
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: none;
}

#testing .popup .content {
  margin-bottom: 3rem;
}

#testing #testReady {
  background-color: rgba(31, 44, 73, 0.9);
}

#testing #testReady em small {
  font-size: .25em;
  font-weight: 300;
}

#testing #testReady #reciprocal {
  position: relative;
}

#testing #testReady #reciprocal:after, #testing #testReady #reciprocal span {
  font-family: arial, sans-serif;
  font-size: 27.375rem;
  font-weight: 900;
  line-height: .85;
}

#testing #testReady #reciprocal span {
  color: #fb7407;
}

#testing #testReady #reciprocal:after {
  content: '0';
  display: block;
  opacity: 0;
}

#testing #testResult {
  background-color: rgba(255, 255, 255, 0.95);
}

#testing #testResult h2 {
  width: 100%;
  max-width: 684px;
}

#testing #testResult sub, #testing #testResult strong {
  color: #604733;
}

#testing #testResult sub {
  font-weight: 500;
}

#testing #testResult strong {
  font-size: 1.875rem;
  font-weight: 600;
  display: block;
}

#testing #testResult .step {
  opacity: 0;
}

/* consulting only */
#consulting #consultCheck .btn, #consulting #warning .btn {
  margin-top: 2em;
}

#consulting #consultCheck .btn:after, #consulting #warning .btn:after {
  color: #fb7407;
  font-weight: 500;
  text-shadow: none;
  bottom: 110%;
}

#consulting #consultCheck form {
  width: 60.90909%;
  background: url(../images/consult_base.png) 50% 50% no-repeat;
  background-size: 100% auto;
  margin-top: -1.3rem;
  position: relative;
}

#consulting #consultCheck form:before {
  content: '';
  display: block;
  padding-top: 78.20896%;
}

#consulting #consultCheck form label {
  width: 26.5%;
  position: absolute;
}

#consulting #consultCheck form label input[type="checkbox"] {
  display: none;
}

#consulting #consultCheck form label input[type="checkbox"] + figure {
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100%;
  transition: all .3s ease-out;
  cursor: pointer;
}

#consulting #consultCheck form label input[type="checkbox"] + figure:before {
  content: '';
  display: block;
  padding-top: 107.89474%;
}

#consulting #consultCheck form label input[type="checkbox"] + figure figcaption {
  color: #34a3cf;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: .1em;
}

#consulting #consultCheck form label input[type="checkbox"]:checked + figure figcaption {
  color: #fb7407;
}

#consulting #consultCheck form label:nth-of-type(1) {
  top: 0;
  left: 0;
}

#consulting #consultCheck form label:nth-of-type(1) figure {
  background-image: url(../images/consult_chk1.png);
}

#consulting #consultCheck form label:nth-of-type(1) input[type="checkbox"]:checked + figure {
  background-image: url(../images/consult_chk1_h.png);
}

#consulting #consultCheck form label:nth-of-type(2) {
  top: 0;
  left: 73%;
}

#consulting #consultCheck form label:nth-of-type(2) figure {
  background-image: url(../images/consult_chk2.png);
}

#consulting #consultCheck form label:nth-of-type(2) input[type="checkbox"]:checked + figure {
  background-image: url(../images/consult_chk2_h.png);
}

#consulting #consultCheck form label:nth-of-type(3) {
  top: 30%;
  right: 101%;
}

#consulting #consultCheck form label:nth-of-type(3) figure {
  background-image: url(../images/consult_chk3.png);
}

#consulting #consultCheck form label:nth-of-type(3) input[type="checkbox"]:checked + figure {
  background-image: url(../images/consult_chk3_h.png);
}

#consulting #consultCheck form label:nth-of-type(4) {
  top: 30%;
  left: 101%;
}

#consulting #consultCheck form label:nth-of-type(4) figure {
  background-image: url(../images/consult_chk4.png);
}

#consulting #consultCheck form label:nth-of-type(4) input[type="checkbox"]:checked + figure {
  background-image: url(../images/consult_chk4_h.png);
}

#consulting #consultCheck form label:nth-of-type(5) {
  top: 60%;
  left: 0;
}

#consulting #consultCheck form label:nth-of-type(5) figure {
  background-image: url(../images/consult_chk5.png);
}

#consulting #consultCheck form label:nth-of-type(5) input[type="checkbox"]:checked + figure {
  background-image: url(../images/consult_chk5_h.png);
}

#consulting #consultCheck form label:nth-of-type(6) {
  top: 60%;
  left: 73%;
}

#consulting #consultCheck form label:nth-of-type(6) figure {
  background-image: url(../images/consult_chk6.png);
}

#consulting #consultCheck form label:nth-of-type(6) input[type="checkbox"]:checked + figure {
  background-image: url(../images/consult_chk6_h.png);
}

#consulting #consultCheck .btn {
  letter-spacing: .06em;
}

#consulting #consultCheck .btn:after {
  color: #5e5c5d;
  content: '疏於保健‧靈魂之窗亮紅燈';
  font-size: .74em;
}

#consulting #warning {
  display: none;
}

#consulting #warning .con {
  font-size: 0;
}

#consulting #warning .con > p {
  text-align: left;
}

#consulting #warning .con dl {
  width: 49%;
  background-color: #fefefe;
  border-radius: 2rem;
  border: 1px solid #34a3cf;
  margin-bottom: 2rem;
  overflow: hidden;
}

#consulting #warning .con dl:first-child {
  margin-right: 2%;
}

#consulting #warning .con dl dt {
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 2.6;
  color: #fefefe;
  background-color: #34a3cf;
}

#consulting #warning .con dl dd {
  padding: 1rem;
}

#consulting #warning .con dl dd > * {
  font-size: 1.5rem;
  line-height: 1.35;
}

#consulting #warning .con dl p, #consulting #warning .con dl legend {
  text-align: left;
  margin-bottom: 1em;
}

#consulting #warning .con dl fieldset {
  color: #34a3cf;
  border-top: 1px dashed #34a3cf;
}

#consulting #warning .con dl figure {
  width: 40%;
}

#consulting #warning .con dl figure + figure {
  margin-left: 6%;
}

#consulting #warning .con dl figure figcaption {
  color: #5e5c5d;
  line-height: 2;
}

#consulting #warning .con dl.other {
  width: 100%;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-color: #fb7407;
  margin-bottom: .5rem;
}

#consulting #warning .con dl.other dt {
  font-weight: 500;
  background-color: #fb7407;
}

#consulting #warning .con dl.other dd {
  padding: 0;
}

#consulting #warning .con dl.other table {
  width: 100%;
  border-collapse: initial;
  border-spacing: 4px;
}

#consulting #warning .con dl.other table td, #consulting #warning .con dl.other table th {
  padding: .6em 1em;
  margin: 4px 2px;
}

#consulting #warning .con dl.other table td {
  width: 50%;
  text-align: left;
  line-height: 1.3;
  border: 1px solid #fcc402;
  vertical-align: middle;
}

#consulting #warning .con dl.other table th {
  background-color: #fcc402;
}

#consulting #warning .btn:after {
  color: #fb7407;
  content: '我的眼球問診書';
  font-size: .8em;
}

#consulting #consultResult {
  background: #fefefe;
  display: none;
}

#consulting #consultResult ul {
  width: 100%;
  background: url(../images/consult_eye.png) 50% 50% no-repeat;
  background-size: 100% auto;
  position: relative;
  overflow: hidden;
}

#consulting #consultResult ul:before {
  content: '';
  display: block;
  padding-top: 40.81818%;
}

#consulting #consultResult ul li {
  background-size: 100% auto;
  opacity: .35;
}

#consulting #consultResult ul li figure {
  font-size: 0;
  width: 50%;
  height: 50%;
  position: absolute;
}

#consulting #consultResult ul li figure > * {
  text-align: left;
}

#consulting #consultResult ul li figure img {
  width: 30%;
  position: relative;
  z-index: 1;
}

#consulting #consultResult ul li figure figcaption {
  width: 50%;
  font-size: 24px;
  margin-left: -10%;
}

#consulting #consultResult ul li figure figcaption > * {
  padding-left: 23%;
  padding-right: .8em;
}

#consulting #consultResult ul li figure figcaption h6 {
  color: #fefefe;
  font-size: 1em;
  line-height: 2.5;
  white-space: nowrap;
  background-color: #fb7407;
  border-radius: 0 5rem 5rem 0;
  margin-bottom: .4em;
  display: inline-block;
}

#consulting #consultResult ul li figure figcaption p {
  font-size: .75em;
}

#consulting #consultResult ul li:nth-of-type(1) {
  background-image: url(../images/consult_r1_line.png);
}

#consulting #consultResult ul li:nth-of-type(1) figure {
  left: -4%;
  top: 7%;
}

#consulting #consultResult ul li:nth-of-type(2) {
  background-image: url(../images/consult_r2_line.png);
}

#consulting #consultResult ul li:nth-of-type(2) figure {
  left: 57%;
  top: 7%;
}

#consulting #consultResult ul li:nth-of-type(3) {
  background-image: url(../images/consult_r3_line.png);
}

#consulting #consultResult ul li:nth-of-type(3) figure {
  left: -7%;
  top: 63%;
}

#consulting #consultResult ul li:nth-of-type(4) {
  background-image: url(../images/consult_r4_line.png);
}

#consulting #consultResult ul li:nth-of-type(4) figure {
  left: 25%;
  top: 63%;
}

#consulting #consultResult ul li:nth-of-type(5) {
  background-image: url(../images/consult_r5_line.png);
}

#consulting #consultResult ul li:nth-of-type(5) figure {
  left: 59%;
  top: 63%;
}

#consulting #consultResult ul li.on {
  opacity: 1;
}

/* warning only */
@-webkit-keyframes bounce {
  from {
    -webkit-transform: scaleY(1) translateY(0);
            transform: scaleY(1) translateY(0);
  }
  30% {
    -webkit-transform: scaleY(0.9) translateY(8%);
            transform: scaleY(0.9) translateY(8%);
  }
  40% {
    -webkit-transform: scaleY(1) translateY(-4%);
            transform: scaleY(1) translateY(-4%);
  }
  50% {
    -webkit-transform: scaleY(0.95) translateY(5%);
            transform: scaleY(0.95) translateY(5%);
  }
  65% {
    -webkit-transform: scaleY(1) translateY(-2%);
            transform: scaleY(1) translateY(-2%);
  }
  75% {
    -webkit-transform: scaleY(1) translateY(0);
            transform: scaleY(1) translateY(0);
  }
  to {
    -webkit-transform: scaleY(1) translateY(0);
            transform: scaleY(1) translateY(0);
  }
}

@keyframes bounce {
  from {
    -webkit-transform: scaleY(1) translateY(0);
            transform: scaleY(1) translateY(0);
  }
  30% {
    -webkit-transform: scaleY(0.9) translateY(8%);
            transform: scaleY(0.9) translateY(8%);
  }
  40% {
    -webkit-transform: scaleY(1) translateY(-4%);
            transform: scaleY(1) translateY(-4%);
  }
  50% {
    -webkit-transform: scaleY(0.95) translateY(5%);
            transform: scaleY(0.95) translateY(5%);
  }
  65% {
    -webkit-transform: scaleY(1) translateY(-2%);
            transform: scaleY(1) translateY(-2%);
  }
  75% {
    -webkit-transform: scaleY(1) translateY(0);
            transform: scaleY(1) translateY(0);
  }
  to {
    -webkit-transform: scaleY(1) translateY(0);
            transform: scaleY(1) translateY(0);
  }
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translateY(-150%);
            transform: translateY(-150%);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(8%);
            transform: translateY(8%);
  }
  65% {
    -webkit-transform: translateY(-2%);
            transform: translateY(-2%);
  }
  80% {
    -webkit-transform: translateY(4%);
            transform: translateY(4%);
  }
  to {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translateY(-150%);
            transform: translateY(-150%);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(8%);
            transform: translateY(8%);
  }
  65% {
    -webkit-transform: translateY(-2%);
            transform: translateY(-2%);
  }
  80% {
    -webkit-transform: translateY(4%);
            transform: translateY(4%);
  }
  to {
    -webkit-transform: none;
            transform: none;
  }
}

@-webkit-keyframes light {
  0 {
    background-image: url(../images/health_light.png);
  }
  60% {
    background-image: url(../images/health_light_h.png);
  }
}

@keyframes light {
  0 {
    background-image: url(../images/health_light.png);
  }
  60% {
    background-image: url(../images/health_light_h.png);
  }
}

#health h4 {
  letter-spacing: .06em;
}

#health h5 {
  line-height: 1.3;
  display: inline-block;
  position: relative;
  background: url(../images/health_line.png) 50% 100% no-repeat;
  background-size: 100% auto;
  margin: .75em 0 .5em;
  padding: 0 1.8em;
}

#health h5:before, #health h5:after {
  content: '';
  width: 1.8em;
  height: 70%;
  background: url(../images/health_light.png) 50% 45% no-repeat;
  background-size: auto 100%;
  -webkit-animation: light 1s ease infinite;
          animation: light 1s ease infinite;
}

#health h5:before {
  right: 0%;
}

#health h5:after {
  left: 0%;
}

#health h5 br {
  display: none;
}

#health section fieldset {
  font-weight: 500;
  letter-spacing: .06em;
}

#health section fieldset legend {
  padding: 0 .3em;
}

#health section .content > button {
  font-size: 0;
  width: 15%;
  max-width: 30px;
  background: url(../images/health_scroll.png) 50% 0% no-repeat;
  display: block;
}

#health section .content > button:before {
  content: '';
  display: block;
  padding-top: 173.33333%;
}

#health section .con {
  font-size: 0;
}

#health section .con span {
  font-size: 5rem;
}

#health section:nth-of-type(1) h4 {
  margin-bottom: 0;
}

#health section:nth-of-type(1) .con figure {
  width: 36%;
  position: relative;
}

#health section:nth-of-type(1) .con figure > div, #health section:nth-of-type(1) .con figure figcaption {
  width: 100%;
  position: absolute;
}

#health section:nth-of-type(1) .con figure > img {
  position: relative;
  z-index: 2;
}

#health section:nth-of-type(1) .con figure figcaption {
  font-size: 1.75rem;
  color: #787676;
  font-weight: 900;
  line-height: 1;
  width: 35%;
  top: 71%;
  z-index: 3;
}

#health section:nth-of-type(1) .con figure figcaption b {
  font-size: 1.05em;
  font-family: 'arial', sans-serif;
  font-weight: 900;
  letter-spacing: .05em;
  display: inline-block;
}

#health section:nth-of-type(1) .con figure figcaption fieldset {
  border-top: 1px solid #c4c3c3;
  margin-top: .2em;
}

#health section:nth-of-type(1) .con figure figcaption legend {
  font-size: .84em;
}

#health section:nth-of-type(1) .con figure .scale {
  width: 100%;
  height: 16.13475%;
  top: 49%;
  z-index: 1;
}

#health section:nth-of-type(1) .con figure .vegetable {
  opacity: 0;
  transition: opacity .2s linear;
}

#health section:nth-of-type(1) .con figure:nth-of-type(1) .vegetable {
  top: 5%;
}

#health section:nth-of-type(1) .con span {
  color: #787676;
  font-weight: 900;
  width: 8%;
}

#health section:nth-of-type(2) {
  background-image: url(../images/health_bg.jpg);
  background-repeat: repeat-x;
}

#health section:nth-of-type(2) .content > fieldset {
  font-size: 1.875rem;
  border-top: 1px dashed #fff;
  margin: 1em auto;
}

#health section:nth-of-type(2) .con {
  padding: 2rem 0 1rem;
}

#health section:nth-of-type(2) .con fieldset {
  font-size: 2rem;
  text-align: center;
  width: 20%;
  border-radius: 1rem;
  border: 1px solid #fb7407;
  padding: .7em 0 .8em;
}

#health section:nth-of-type(2) .con fieldset legend {
  font-weight: 900;
  letter-spacing: .15em;
}

#health section:nth-of-type(2) .con fieldset figure {
  width: 80%;
  margin: 0 auto;
}

#health section:nth-of-type(2) .con fieldset figure + figure {
  margin-top: .5em;
}

#health section:nth-of-type(2) .con fieldset figure.single:before, #health section:nth-of-type(2) .con fieldset figure.single:after {
  content: '';
  display: block;
  padding-top: 62.5%;
}

#health section:nth-of-type(2) .con fieldset figure figcaption {
  color: #fb7407;
  font-size: .75em;
  letter-spacing: .15em;
}

#health section:nth-of-type(2) .con span {
  color: #fb7407;
  width: 6.66667%;
  font-weight: 600;
}

#health.animated section:nth-of-type(1) .con figure .scale {
  -webkit-animation: bounce .8s .23s;
          animation: bounce .8s .23s;
}

#health.animated section:nth-of-type(1) .con figure .vegetable {
  opacity: 1;
  -webkit-animation: bounceInDown .8s;
          animation: bounceInDown .8s;
}

/* share only */
#share section #video {
  width: 100%;
  max-width: 600px;
  position: relative;
  margin: .5rem auto 2rem;
}

#share section #video:before {
  content: '';
  display: block;
  padding-top: 56.60714%;
}

#share section #video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#share section ul {
  font-size: 0;
}

#share section ul li {
  width: 31%;
}

#share section ul li + li {
  margin-left: 3.5%;
}

#share section ul li img {
  width: 98%;
  padding: .5rem 0 1rem;
  display: block;
}

#share section ul li button {
  width: 50%;
}

#share section fieldset {
  border-top: 1px solid #fb7407;
}

#share section fieldset legend {
  font-size: 1.375rem;
  color: #fb7407;
  letter-spacing: .1em;
  padding: 0 .25em;
}

/* rwd ===========================================*/
@media only screen and (min-width: 1201px) {
  #consulting #consultCheck form label input[type="checkbox"]:hover + figure figcaption {
    color: #34a3cf;
  }
  #consulting #consultCheck form label:nth-of-type(1) input[type="checkbox"]:hover + figure {
    background-image: url(../images/consult_chk1_h.png);
  }
  #consulting #consultCheck form label:nth-of-type(2) input[type="checkbox"]:hover + figure {
    background-image: url(../images/consult_chk2_h.png);
  }
  #consulting #consultCheck form label:nth-of-type(3) input[type="checkbox"]:hover + figure {
    background-image: url(../images/consult_chk3_h.png);
  }
  #consulting #consultCheck form label:nth-of-type(4) input[type="checkbox"]:hover + figure {
    background-image: url(../images/consult_chk4_h.png);
  }
  #consulting #consultCheck form label:nth-of-type(5) input[type="checkbox"]:hover + figure {
    background-image: url(../images/consult_chk5_h.png);
  }
  #consulting #consultCheck form label:nth-of-type(6) input[type="checkbox"]:hover + figure {
    background-image: url(../images/consult_chk6_h.png);
  }
}

@media only screen and (max-width: 1400px) {
  html {
    font-size: 13px;
  }
  section .content.mw {
    max-width: 1100px;
  }
}

@media only screen and (max-width: 700px) {
  html {
    font-size: 12px;
  }
}

.m {
  display: none;
}

.tablet a, .tablet button, .mobile a, .mobile button {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

@media only screen and (max-width: 1200px) {
  .wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    height: auto;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .btn {
    min-width: 350px;
  }
  footer {
    position: initial;
  }
  section {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  h2 {
    font-size: calc(2.5rem + 0.9vw);
  }
  h2 #consultResult ul li figure figcaption {
    font-size: calc(1.08333rem + 0.6vw);
  }
  #health section .con span {
    font-size: calc(3.33333rem + 0.9vw);
  }
  #health section:nth-of-type(1) .con figure {
    width: 46%;
  }
  #health section:nth-of-type(1) .con figure figcaption {
    font-size: calc(0.83333rem + 0.9vw);
  }
  #health section:nth-of-type(2) .content > fieldset {
    font-size: calc(0.95833rem + 0.9vw);
  }
  #health section:nth-of-type(2) .con fieldset {
    font-size: calc(0.91667rem + 0.9vw);
  }
  #health section:nth-of-type(2) .con fieldset legend {
    font-weight: 600;
    letter-spacing: .1em;
  }
}

@media only screen and (max-width: 900px), only screen and (max-width: 1200px) and (orientation: portrait) {
  .w {
    display: none;
  }
  .m {
    display: block;
  }
  input[type="checkbox"] ~ header {
    height: calc(50px + 1vw);
    padding-right: 0;
  }
  input[type="checkbox"] ~ header #logo {
    max-width: initial;
    height: calc(50px + 1vw);
  }
  input[type="checkbox"] ~ header #menu nav {
    width: 100%;
    z-index: 1;
    display: none;
  }
  input[type="checkbox"] ~ header #menu nav a {
    font-size: calc(1.08333rem + 1vw);
    height: calc(60px + 6vw);
    margin-right: 0;
    border-bottom: 1px solid #113752;
    display: block;
  }
  input[type="checkbox"] ~ header #menu nav a:first-child {
    border-top: 1px solid #113752;
  }
  input[type="checkbox"] ~ header #menu nav a:after {
    display: none;
  }
  input[type="checkbox"] ~ header #menu nav a span img:nth-of-type(2) {
    display: inline-block;
  }
  input[type="checkbox"] ~ header label {
    width: calc(65px + .5vw);
    height: calc(50px + 1vw);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
  }
  input[type="checkbox"] ~ header label span {
    width: 58%;
    height: calc(4px + .3vw);
  }
  input[type="checkbox"] ~ header label span i, input[type="checkbox"] ~ header label span:before, input[type="checkbox"] ~ header label span:after {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #fefefe;
    left: 0;
  }
  input[type="checkbox"] ~ header label span:before, input[type="checkbox"] ~ header label span:after {
    content: '';
    width: 100%;
    position: absolute;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
  }
  input[type="checkbox"] ~ header label span:before {
    bottom: 180%;
  }
  input[type="checkbox"] ~ header label span:after {
    top: 180%;
  }
  input[type="checkbox"]:checked ~ header {
    height: 100%;
    background-color: rgba(2, 23, 36, 0.99);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  input[type="checkbox"]:checked ~ header #logo {
    width: 100%;
    height: calc(50px + 6vw);
    background-position: 50% 50%;
    background-size: auto 82%;
  }
  input[type="checkbox"]:checked ~ header #menu {
    width: 100%;
    height: auto;
    margin-top: calc(50px + 6vw);
    text-align: center;
  }
  input[type="checkbox"]:checked ~ header #menu nav {
    display: block;
  }
  input[type="checkbox"]:checked ~ header #menu ul {
    padding: 3rem 0;
  }
  input[type="checkbox"]:checked ~ header #menu ul li {
    width: calc(40px + 3vw);
  }
  input[type="checkbox"]:checked ~ header #menu ul li + li {
    margin-left: 1.6em;
  }
  input[type="checkbox"]:checked ~ header label {
    position: absolute;
    top: 0;
    right: 0;
  }
  input[type="checkbox"]:checked ~ header label span i {
    background-color: transparent;
  }
  input[type="checkbox"]:checked ~ header label span:before, input[type="checkbox"]:checked ~ header label span:after {
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
  }
  input[type="checkbox"]:checked ~ header label span:before {
    -webkit-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
            transform: rotate(40deg);
  }
  input[type="checkbox"]:checked ~ header label span:after {
    -webkit-transform: rotate(-40deg);
        -ms-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
  footer {
    font-size: calc(0.75rem + 0.5vw);
  }
  section .content {
    position: relative;
    padding: 0 4% calc(50px + 1vw);
  }
  sub {
    font-size: calc(0.83333rem + 0.9vw);
    letter-spacing: .06em;
  }
  h2 {
    font-size: calc(1.58333rem + 2vw);
    letter-spacing: .01em;
  }
  h3, h4 {
    letter-spacing: .06em;
  }
  h3 {
    font-size: calc(0.91667rem + 0.9vw);
  }
  h4 {
    font-size: calc(0.83333rem + 0.9vw);
  }
  h4 em {
    font-size: 1.2em;
  }
  h5 {
    font-size: calc(0.83333rem + 0.9vw);
  }
  p {
    font-size: calc(0.75rem + 0.9vw);
  }
  .btn {
    font-size: calc(1.08333rem + 1.8vw);
    font-weight: 500;
    white-space: nowrap;
    padding: .75em 1.1em;
  }
  .btn:before {
    border-width: calc(2px + .6vw);
  }
  .btn.wt {
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 0.35), 0 0 10px rgba(17, 24, 31, 0.35);
  }
  .btn.fb, .btn.line {
    padding: .7em 0;
  }
  .btn.fb:before, .btn.line:before {
    border-width: 6px;
  }
  #index section {
    background-image: url(../images/idx_kv_m.jpg);
  }
  #index h1 {
    width: 96%;
    max-width: 460px;
    min-width: initial;
  }
  #index h1 #starblink {
    display: none;
  }
  #index sub {
    font-size: calc(0.75rem + 1vw);
    letter-spacing: .1em;
    line-height: 1.6;
    margin-top: 1em;
    text-shadow: 1px 3px 4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(17, 24, 31, 0.35);
  }
  #index .con {
    width: 70%;
    min-width: initial;
  }
  #index .btn.wt span {
    letter-spacing: .6px;
  }
  #testing em {
    font-size: calc(2.83333rem + 1.8vw);
  }
  #testing #testList fieldset legend {
    font-size: calc(0.79167rem + 0.9vw);
  }
  #testing #testList input[type="radio"] + figure figcaption {
    font-size: calc(0.83333rem + 1.25vw);
    font-weight: 400;
  }
  #testing #testList input[type="radio"] + figure:after {
    border-width: calc(3px + 1vw);
  }
  #testing #testReady #reciprocal:after, #testing #testReady #reciprocal span {
    font-size: calc(13.33333rem + 16vw);
  }
  #testing #testStart .content > div div {
    width: 100%;
    display: block;
  }
  #testing #testStart .content > div div + div {
    margin-left: 0;
    margin-top: 3vw;
  }
  #testing .popup {
    position: fixed;
  }
  #testing #testResult h2 {
    max-width: 500px;
  }
  #testing #testResult sub {
    font-size: calc(0.83333rem + 1vw);
  }
  #testing #testResult strong {
    font-size: calc(1.16667rem + 0.9vw);
  }
  #consulting h4 br {
    display: none;
  }
  #consulting #consultCheck form {
    margin-top: calc(1rem + 2.5vw);
  }
  #consulting #consultResult ul li figure figcaption {
    font-size: calc(1.08333rem + 0.2vw);
  }
  #health h5 {
    margin: 2em 0 1.5em;
  }
  #health section:nth-of-type(1) h4 {
    margin-bottom: 1.6em;
  }
  #health section:nth-of-type(1) .con span {
    font-size: calc(2.5rem + 0.9vw);
  }
  #health section:nth-of-type(2) .content > fieldset {
    margin: 2em auto;
  }
  #share section #video {
    max-width: initial;
  }
  #share section ul li {
    width: 32.6%;
  }
  #share section ul li + li {
    margin-left: 1.1%;
  }
}

@media only screen and (max-width: 700px) {
  section {
    padding-top: calc(50px + 1vw);
  }
  .btn {
    min-width: 75%;
  }
  .btn.fb, .btn.line {
    font-size: calc(1.08333rem + 0.9vw);
  }
  .btn.s {
    padding-left: 1.3em;
    padding-right: 1.3em;
  }
  #testing #testList sub br {
    display: none;
  }
  #consulting #consultCheck form {
    width: 80%;
    background: none;
  }
  #consulting #consultCheck form:before {
    display: none;
  }
  #consulting #consultCheck form label {
    width: 40%;
    margin: 0 2%;
    display: inline-block;
    position: initial;
  }
  #consulting #consultCheck form label input[type="checkbox"] + figure figcaption {
    font-size: calc(1rem + 0.9vw);
    font-weight: 500;
    line-height: 2;
  }
  #consulting #warning h4 br {
    display: none;
  }
  #consulting #warning .con dl {
    width: 100%;
    border-radius: calc(10px + 2vw);
  }
  #consulting #warning .con dl dt {
    font-size: calc(1.16667rem + 0.9vw);
    font-weight: 500;
  }
  #consulting #warning .con dl dd > * {
    font-size: calc(0.91667rem + 0.9vw);
  }
  #consulting #consultResult ul {
    background-image: url(../images/consult_eye_m.png);
  }
  #consulting #consultResult ul:before {
    content: '';
    display: block;
    padding-top: 146.42857%;
  }
  #consulting #consultResult ul li figure {
    text-align: left;
    width: 62%;
    height: 20%;
    left: 38% !important;
  }
  #consulting #consultResult ul li figure img {
    width: 44%;
  }
  #consulting #consultResult ul li figure figcaption {
    font-size: calc(1rem + 0.7vw);
    width: 100%;
    margin-left: 0;
    padding-left: 22%;
    position: absolute;
    top: 10%;
    left: 0;
  }
  #consulting #consultResult ul li figure figcaption > * {
    width: 100%;
    padding-left: 32%;
    padding-right: 0;
  }
  #consulting #consultResult ul li figure figcaption h6 {
    line-height: 2.2;
  }
  #consulting #consultResult ul li figure figcaption p {
    font-size: .8em;
    line-height: 1.4;
  }
  #consulting #consultResult ul li:nth-of-type(1) {
    background-image: url(../images/consult_r1_line_m.png);
  }
  #consulting #consultResult ul li:nth-of-type(1) figure {
    top: 0%;
  }
  #consulting #consultResult ul li:nth-of-type(2) {
    background-image: url(../images/consult_r2_line_m.png);
  }
  #consulting #consultResult ul li:nth-of-type(2) figure {
    top: 20%;
  }
  #consulting #consultResult ul li:nth-of-type(3) {
    background-image: url(../images/consult_r3_line_m.png);
  }
  #consulting #consultResult ul li:nth-of-type(3) figure {
    top: 40%;
  }
  #consulting #consultResult ul li:nth-of-type(4) {
    background-image: url(../images/consult_r4_line_m.png);
  }
  #consulting #consultResult ul li:nth-of-type(4) figure {
    top: 60%;
  }
  #consulting #consultResult ul li:nth-of-type(5) {
    background-image: url(../images/consult_r5_line_m.png);
  }
  #consulting #consultResult ul li:nth-of-type(5) figure {
    top: 80%;
  }
  #consulting #consultResult ul li:nth-of-type(4) figure figcaption p br, #consulting #consultResult ul li:nth-of-type(5) figure figcaption p br {
    display: none;
  }
  #share section ul li {
    width: 100%;
    margin-bottom: 2rem;
  }
  #share section ul li + li {
    margin-left: 0;
  }
  #health section:nth-of-type(1) .con > * {
    display: block;
  }
  #health section:nth-of-type(1) .con span {
    font-size: calc(1.5rem + 0.9vw);
  }
  #health section:nth-of-type(1) .con figure {
    width: 80%;
    max-width: 260px;
  }
  #health section:nth-of-type(1) .con figure figcaption {
    font-size: calc(0.66667rem + 0.9vw);
  }
  #health section:nth-of-type(2) .con fieldset {
    font-size: calc(1.16667rem + 0.9vw);
    width: 100%;
  }
  #health section:nth-of-type(2) .con fieldset legend {
    letter-spacing: .2em;
  }
  #health section:nth-of-type(2) .con fieldset figure {
    width: 42%;
  }
  #health section:nth-of-type(2) .con fieldset figure + figure {
    margin-left: 2%;
    margin-top: 0;
  }
  #health section:nth-of-type(2) .con fieldset figure.single:before, #health section:nth-of-type(2) .con fieldset figure.single:after {
    display: none;
  }
}

@media only screen and (max-width: 400px) {
  #consulting #consultResult ul li figure figcaption {
    font-size: calc(0.83333rem + 0.5vw);
  }
}

@media only screen and (max-width: 320px) {
  #health section h5 {
    padding: 0 13%;
  }
  #health section h5:before, #health section h5:after {
    width: 13%;
    height: 100%;
    background-size: 90% auto;
  }
  #health section h5 br {
    display: block;
  }
}

@media only screen and (min-aspect-ratio: 16 / 11) and (min-width: 1201px) {
  #testing {
    min-height: 890px;
  }
}

@media only screen and (min-aspect-ratio: 16 / 11) and (max-width: 900px), only screen and (min-aspect-ratio: 16 / 11) and (max-width: 1200px) and (orientation: portrait) {
  .wrapper {
    min-height: 177vw !important;
  }
}