@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Poppins");
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

img {
  border: 0;
  display: block;
}

legend, hr {
  display: none;
}

th {
  font-style: inherit;
  font-weight: inherit;
}

li {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

a {
  outline: none;
  hlbr: expression(this.onFocus=this.blur());
  text-decoration: none;
  cursor: pointer;
}

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

* {
  box-sizing: border-box;
}

/* main.css ==============================================*/
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
  display: block;
}

.hide {
  display: none;
}

*:focus {
  outline: none;
}

.MAIN {
  width: 100%;
}

#fiexd_ad {
  display: none !important;
}

.font-en {
  font-family: "Poppins", sans-serif;
  font-size: 115%;
  font-weight: normal !important;
}

.quote-a,
.quote-b {
  font-family: "Domine", serif;
  font-size: 90px;
  position: relative;
}

#otherSetMenu {
  z-index: 2;
}

a.g-bt-1 {
  overflow: hidden;
  position: relative;
  background: linear-gradient(to bottom, #e0e0e0 0%, #000 50%, #fff 50.01%, #707070 100%);
  color: #fff;
  padding: 1.5px;
  font-size: 1.6vw;
  line-height: 2.3;
  display: inline-block;
  width: 220px;
  text-align: center;
  box-shadow: 0 0 0.5vw #000;
  border-radius: 2px;
}
a.g-bt-1 p {
  background: linear-gradient(to bottom, #013774, #01040b);
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0.5vw #3ab9ef;
  display: block;
}
a.g-bt-1 span {
  background: linear-gradient(to bottom, #fff 20%, #999);
  background-size: 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  color: #fff;
  display: block;
}
a.g-bt-1:before {
  content: "";
  background: linear-gradient(125deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, white 60%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transition: 1s;
  animation: bt_shine 2s ease infinite;
}
@keyframes bt_shine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
a.g-bt-1:hover {
  background: #fff;
  color: #fff;
}
a.g-bt-1:hover p {
  box-shadow: inset 0 0 1.5vw #fff;
}

.splitEffect {
  overflow: hidden;
  white-space: nowrap;
}
.splitEffect span {
  display: inline-block;
  transform: translateY(100%);
}
.splitEffect span:nth-of-type(1) {
  animation-delay: 0.03s !important;
}
.splitEffect span:nth-of-type(2) {
  animation-delay: 0.06s !important;
}
.splitEffect span:nth-of-type(3) {
  animation-delay: 0.09s !important;
}
.splitEffect span:nth-of-type(4) {
  animation-delay: 0.12s !important;
}
.splitEffect span:nth-of-type(5) {
  animation-delay: 0.15s !important;
}
.splitEffect span:nth-of-type(6) {
  animation-delay: 0.18s !important;
}
.splitEffect span:nth-of-type(7) {
  animation-delay: 0.21s !important;
}
.splitEffect span:nth-of-type(8) {
  animation-delay: 0.24s !important;
}
.splitEffect span:nth-of-type(9) {
  animation-delay: 0.27s !important;
}
.splitEffect span:nth-of-type(10) {
  animation-delay: 0.3s !important;
}
.splitEffect span:nth-of-type(11) {
  animation-delay: 0.33s !important;
}
.splitEffect span:nth-of-type(12) {
  animation-delay: 0.36s !important;
}
.splitEffect span:nth-of-type(13) {
  animation-delay: 0.39s !important;
}
.splitEffect span:nth-of-type(14) {
  animation-delay: 0.42s !important;
}
.splitEffect span:nth-of-type(15) {
  animation-delay: 0.45s !important;
}
.splitEffect span:nth-of-type(16) {
  animation-delay: 0.48s !important;
}
.splitEffect span:nth-of-type(17) {
  animation-delay: 0.51s !important;
}
.splitEffect span:nth-of-type(18) {
  animation-delay: 0.54s !important;
}
.splitEffect span:nth-of-type(19) {
  animation-delay: 0.57s !important;
}
.splitEffect span:nth-of-type(20) {
  animation-delay: 0.6s !important;
}
.splitEffect span:nth-of-type(21) {
  animation-delay: 0.63s !important;
}
.splitEffect span:nth-of-type(22) {
  animation-delay: 0.66s !important;
}
.splitEffect span:nth-of-type(23) {
  animation-delay: 0.69s !important;
}
.splitEffect span:nth-of-type(24) {
  animation-delay: 0.72s !important;
}
.splitEffect span:nth-of-type(25) {
  animation-delay: 0.75s !important;
}
.splitEffect span:nth-of-type(26) {
  animation-delay: 0.78s !important;
}
.splitEffect span:nth-of-type(27) {
  animation-delay: 0.81s !important;
}
.splitEffect span:nth-of-type(28) {
  animation-delay: 0.84s !important;
}
.splitEffect span:nth-of-type(29) {
  animation-delay: 0.87s !important;
}
.splitEffect span:nth-of-type(30) {
  animation-delay: 0.9s !important;
}
.splitEffect.is-animate span {
  animation: se1 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes se1 {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
.splitEffect.is-animate.delay200 span:nth-of-type(1) {
  animation-delay: 0.23s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(2) {
  animation-delay: 0.26s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(3) {
  animation-delay: 0.29s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(4) {
  animation-delay: 0.32s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(5) {
  animation-delay: 0.35s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(6) {
  animation-delay: 0.38s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(7) {
  animation-delay: 0.41s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(8) {
  animation-delay: 0.44s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(9) {
  animation-delay: 0.47s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(10) {
  animation-delay: 0.5s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(11) {
  animation-delay: 0.53s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(12) {
  animation-delay: 0.56s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(13) {
  animation-delay: 0.59s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(14) {
  animation-delay: 0.62s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(15) {
  animation-delay: 0.65s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(16) {
  animation-delay: 0.68s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(17) {
  animation-delay: 0.71s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(18) {
  animation-delay: 0.74s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(19) {
  animation-delay: 0.77s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(20) {
  animation-delay: 0.8s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(21) {
  animation-delay: 0.83s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(22) {
  animation-delay: 0.86s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(23) {
  animation-delay: 0.89s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(24) {
  animation-delay: 0.92s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(25) {
  animation-delay: 0.95s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(26) {
  animation-delay: 0.98s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(27) {
  animation-delay: 1.01s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(28) {
  animation-delay: 1.04s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(29) {
  animation-delay: 1.07s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(30) {
  animation-delay: 1.1s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(1) {
  animation-delay: 0.43s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(2) {
  animation-delay: 0.46s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(3) {
  animation-delay: 0.49s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(4) {
  animation-delay: 0.52s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(5) {
  animation-delay: 0.55s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(6) {
  animation-delay: 0.58s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(7) {
  animation-delay: 0.61s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(8) {
  animation-delay: 0.64s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(9) {
  animation-delay: 0.67s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(10) {
  animation-delay: 0.7s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(11) {
  animation-delay: 0.73s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(12) {
  animation-delay: 0.76s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(13) {
  animation-delay: 0.79s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(14) {
  animation-delay: 0.82s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(15) {
  animation-delay: 0.85s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(16) {
  animation-delay: 0.88s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(17) {
  animation-delay: 0.91s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(18) {
  animation-delay: 0.94s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(19) {
  animation-delay: 0.97s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(20) {
  animation-delay: 1s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(21) {
  animation-delay: 1.03s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(22) {
  animation-delay: 1.06s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(23) {
  animation-delay: 1.09s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(24) {
  animation-delay: 1.12s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(25) {
  animation-delay: 1.15s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(26) {
  animation-delay: 1.18s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(27) {
  animation-delay: 1.21s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(28) {
  animation-delay: 1.24s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(29) {
  animation-delay: 1.27s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(30) {
  animation-delay: 1.3s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(1) {
  animation-delay: 0.63s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(2) {
  animation-delay: 0.66s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(3) {
  animation-delay: 0.69s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(4) {
  animation-delay: 0.72s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(5) {
  animation-delay: 0.75s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(6) {
  animation-delay: 0.78s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(7) {
  animation-delay: 0.81s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(8) {
  animation-delay: 0.84s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(9) {
  animation-delay: 0.87s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(10) {
  animation-delay: 0.9s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(11) {
  animation-delay: 0.93s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(12) {
  animation-delay: 0.96s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(13) {
  animation-delay: 0.99s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(14) {
  animation-delay: 1.02s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(15) {
  animation-delay: 1.05s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(16) {
  animation-delay: 1.08s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(17) {
  animation-delay: 1.11s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(18) {
  animation-delay: 1.14s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(19) {
  animation-delay: 1.17s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(20) {
  animation-delay: 1.2s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(21) {
  animation-delay: 1.23s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(22) {
  animation-delay: 1.26s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(23) {
  animation-delay: 1.29s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(24) {
  animation-delay: 1.32s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(25) {
  animation-delay: 1.35s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(26) {
  animation-delay: 1.38s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(27) {
  animation-delay: 1.41s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(28) {
  animation-delay: 1.44s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(29) {
  animation-delay: 1.47s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(30) {
  animation-delay: 1.5s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(1) {
  animation-delay: 0.83s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(2) {
  animation-delay: 0.86s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(3) {
  animation-delay: 0.89s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(4) {
  animation-delay: 0.92s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(5) {
  animation-delay: 0.95s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(6) {
  animation-delay: 0.98s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(7) {
  animation-delay: 1.01s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(8) {
  animation-delay: 1.04s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(9) {
  animation-delay: 1.07s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(10) {
  animation-delay: 1.1s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(11) {
  animation-delay: 1.13s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(12) {
  animation-delay: 1.16s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(13) {
  animation-delay: 1.19s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(14) {
  animation-delay: 1.22s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(15) {
  animation-delay: 1.25s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(16) {
  animation-delay: 1.28s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(17) {
  animation-delay: 1.31s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(18) {
  animation-delay: 1.34s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(19) {
  animation-delay: 1.37s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(20) {
  animation-delay: 1.4s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(21) {
  animation-delay: 1.43s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(22) {
  animation-delay: 1.46s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(23) {
  animation-delay: 1.49s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(24) {
  animation-delay: 1.52s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(25) {
  animation-delay: 1.55s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(26) {
  animation-delay: 1.58s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(27) {
  animation-delay: 1.61s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(28) {
  animation-delay: 1.64s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(29) {
  animation-delay: 1.67s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(30) {
  animation-delay: 1.7s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(1) {
  animation-delay: 1.03s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(2) {
  animation-delay: 1.06s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(3) {
  animation-delay: 1.09s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(4) {
  animation-delay: 1.12s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(5) {
  animation-delay: 1.15s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(6) {
  animation-delay: 1.18s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(7) {
  animation-delay: 1.21s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(8) {
  animation-delay: 1.24s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(9) {
  animation-delay: 1.27s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(10) {
  animation-delay: 1.3s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(11) {
  animation-delay: 1.33s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(12) {
  animation-delay: 1.36s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(13) {
  animation-delay: 1.39s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(14) {
  animation-delay: 1.42s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(15) {
  animation-delay: 1.45s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(16) {
  animation-delay: 1.48s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(17) {
  animation-delay: 1.51s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(18) {
  animation-delay: 1.54s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(19) {
  animation-delay: 1.57s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(20) {
  animation-delay: 1.6s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(21) {
  animation-delay: 1.63s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(22) {
  animation-delay: 1.66s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(23) {
  animation-delay: 1.69s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(24) {
  animation-delay: 1.72s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(25) {
  animation-delay: 1.75s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(26) {
  animation-delay: 1.78s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(27) {
  animation-delay: 1.81s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(28) {
  animation-delay: 1.84s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(29) {
  animation-delay: 1.87s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(30) {
  animation-delay: 1.9s !important;
}

.msg-box {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
  z-index: 101;
  transform: scale(1);
  perspective: 700px;
  font-family: "Noto Sans TC", "蘋果儷中黑", "微軟正黑體", Arial, sans-serif;
  pointer-events: none;
}
.msg-box.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.msg-box ::-webkit-scrollbar-track {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.3);
}
.msg-box ::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;
}
.msg-box ::-webkit-scrollbar-thumb {
  overflow: hidden;
  -webkit-box-shadow: 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.msg-box .msg-wrap {
  background: #fff;
  width: 90%;
  height: 90%;
  max-width: 550px;
  max-height: 730px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: rotateY(50deg) scale(0.5) translate3d(0, -50%, 0);
  transform-style: preserve-3d;
  transition-delay: 0.5s;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
}
.msg-box .msg-wrap > .close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  transition: 0.2s;
  background: #2e4f9c;
  opacity: 0;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.msg-box .msg-wrap > .close:before, .msg-box .msg-wrap > .close:after {
  content: "";
  width: 2px;
  height: 40px;
  background: #fff;
  transform: rotate(45deg) translate3d(0, 0, 0);
  position: absolute;
  top: 7px;
  left: 21px;
}
.msg-box .msg-wrap > .close:before {
  transform: rotate(45deg) translate3d(0, 0, 0);
}
.msg-box .msg-wrap > .close:after {
  transform: rotate(-45deg) translate3d(0, 0, 0);
}
.msg-box.is-active .msg-wrap {
  transform: rotateY(0deg) scale(1) translate3d(0, -50%, 0);
  opacity: 1;
  visibility: visible;
}
.msg-box.is-active .msg-wrap > .close {
  transform: scale(1);
  opacity: 1;
}
.msg-box.is-active .msg-wrap > .close:hover {
  transform: rotate(90deg);
}
.msg-box .msg-content {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  padding-right: 5%;
}
.msg-box .msg-content header {
  font-size: 35px;
  font-weight: bold;
}
.msg-box .msg-content p {
  line-height: 2;
  margin: 10px 0;
}
.msg-box .msg-content img {
  max-width: 100%;
}
.msg-box .msg-content .bt {
  background: #2e4f9c;
  width: 70%;
  display: block;
  border-radius: 30px;
  margin: 10px auto;
  cursor: pointer;
  color: #fff;
  line-height: 2.5;
  font-weight: bold;
  transition: 0.5s;
  position: relative;
}
.msg-box .msg-content .bt:hover {
  background: #3ab9ef;
  color: #fff;
  transition: 0.2s;
}
.msg-box#msg-skin .msg-content {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 5%;
}
.msg-box#msg-skin .msg-content header h2 {
  font-size: 45px;
  margin: 50px 0 20px;
}
.msg-box#msg-skin .msg-content p {
  line-height: 1.5;
  font-size: 22px;
}
.msg-box#msg-skin .msg-content img {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

#msg-alert .msg-wrap {
  height: auto;
  min-height: 100px;
  width: 400px;
}
#msg-alert .msg-content {
  text-align: center;
  padding: 5%;
  height: auto;
}
#msg-alert .msg-content header {
  font-size: 25px;
}

.g-form li {
  position: relative;
  padding: 10px 0 10px 15%;
}
.g-form li label {
  width: 25%;
  position: absolute;
  top: 13px;
  left: 0;
  font-size: 25px;
  text-align: left;
  line-height: 1.8;
  padding-right: 20px;
}
.g-form li input {
  border: 0;
  padding: 20px;
  margin: 4px 0;
  width: 100%;
  font-size: 20px;
  color: #333;
  background: #ebebeb;
  transition: 1s;
}
.g-form li input:hover {
  background-color: rgba(46, 79, 156, 0.2);
  transition: 0.2s;
}
.g-form li select {
  width: 100%;
  padding: 20px;
  margin: 4px 0;
  border: 0;
  font-size: 20px;
  background: #ebebeb;
  color: #333;
  font-family: "Poppins", "Noto Sans TC", "蘋果儷中黑", "微軟正黑體", Arial, sans-serif;
}
.g-form li select option {
  background-color: #fff;
}
.g-form li select:hover {
  background-color: rgba(46, 79, 156, 0.2);
  transition: 0.2s;
}
.g-form li a {
  text-decoration: underline;
}
.g-form li .flex {
  display: flex;
  justify-content: space-between;
}
.g-form li .flex select {
  width: calc(50% - 10px);
}
.g-form li.is-rule {
  margin: 10px 0;
}
.g-form li.is-rule a {
  color: #000;
}
.g-form li.is-rule label {
  top: 0;
}
.g-form input[type=checkbox], .g-form input[type=radio] {
  display: none;
}
.g-form input[type=checkbox] + label, .g-form input[type=radio] + label {
  padding-left: 40px;
  width: 100%;
  position: relative;
  display: inline-block;
  line-height: 1.5;
  font-size: 20px;
  text-align: left;
  cursor: pointer;
}
.g-form input[type=checkbox] + label:before, .g-form input[type=radio] + label:before,
.g-form input[type=checkbox] + label:after, .g-form input[type=radio] + label:after {
  content: "✔";
  color: #000;
  width: 30px;
  height: 30px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ebebeb;
  background-position: -633px -466px;
  transition: 0.2s;
  text-align: center;
  font-size: 30px;
  line-height: 0.8;
}
.g-form input[type=checkbox] + label:before, .g-form input[type=radio] + label:before {
  content: "";
  border: 0;
}
.g-form input[type=checkbox] + label:after, .g-form input[type=radio] + label:after {
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 80%;
  transform: scale(1.5);
  background-color: transparent;
}
.g-form input[type=checkbox] + label:active:after, .g-form input[type=checkbox]:checked + label:after,
.g-form input[type=radio] + label:active:after, .g-form input[type=radio]:checked + label:after {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.g-form .radios {
  margin: 10px 0 15px;
}
.g-form .radios input[type=checkbox] + label, .g-form .radios input[type=radio] + label {
  width: auto;
  top: 0;
}

.counter {
  position: relative;
  height: 60px;
  margin: 5%;
  overflow: hidden;
  width: 200px;
}
.counter * {
  margin: 0;
  padding: 0;
}
.counter > div {
  position: relative;
  float: left;
  top: 100%;
  transform: translateY(-100%);
  transition-timing-function: cubic-bezier(0, 0.575, 0.565, 1.05);
}
.counter > div:nth-child(1) {
  transition-duration: 1s;
}
.counter > div:nth-child(2) {
  transition-duration: 1.2s;
}
.counter > div:nth-child(3) {
  transition-duration: 1.4s;
}
.counter > div:nth-child(4) {
  transition-duration: 1.6s;
}
.counter > div:nth-child(5) {
  transition-duration: 1.8s;
}
.counter > div:nth-child(6) {
  transition-duration: 2s;
}
.counter > div:nth-child(7) {
  transition-duration: 2.2s;
}
.counter > div:nth-child(8) {
  transition-duration: 2.4s;
}
.counter > div:nth-child(9) {
  transition-duration: 2.6s;
}
.counter > div:nth-child(10) {
  transition-duration: 2.8s;
}
.counter > div > span {
  display: block;
  font-size: 60px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  line-height: 1;
}
.counter > span {
  display: block;
  float: left;
  font-size: 40px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  line-height: 1;
  position: relative;
  top: 13px;
}
.counter.is-animate > div {
  top: 0;
  transform: translateY(0);
}
.counter.delay200 > div:nth-child(1) {
  transition-duration: 1.4s;
}
.counter.delay200 > div:nth-child(2) {
  transition-duration: 1.6s;
}
.counter.delay200 > div:nth-child(3) {
  transition-duration: 1.8s;
}
.counter.delay400 > div:nth-child(1) {
  transition-duration: 1.8s;
}
.counter.delay400 > div:nth-child(2) {
  transition-duration: 2s;
}
.counter.delay400 > div:nth-child(3) {
  transition-duration: 2.2s;
}
.counter.delay600 > div:nth-child(1) {
  transition-duration: 2.2s;
}
.counter.delay600 > div:nth-child(2) {
  transition-duration: 2.4s;
}
.counter.delay600 > div:nth-child(3) {
  transition-duration: 2.6s;
}
.counter.delay800 > div:nth-child(1) {
  transition-duration: 2.6s;
}
.counter.delay800 > div:nth-child(2) {
  transition-duration: 2.8s;
}
.counter.delay800 > div:nth-child(3) {
  transition-duration: 3s;
}

.video-wrap {
  margin: 0 0;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.5% !important;
}
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-wrap .img {
  position: absolute;
  overflow: hidden;
  float: left;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.video-wrap .img:after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/tv-cover.jpg) no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: 0.5s;
}
.video-wrap .img:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transition: 0.5s;
}
.video-wrap .img .video-btn-play {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  z-index: 2;
}
.video-wrap p {
  font-size: 15px;
}
.video-wrap.is-active .img {
  opacity: 0;
  visibility: hidden;
}
.video-wrap:hover .img:after {
  transform: scale(1.1);
}
.video-wrap:hover .img:before {
  opacity: 0;
}
.video-wrap:hover .video-btn-play:before {
  border: 60px solid #fff;
  transform: translate(-50%, -50%) scale(1.5);
}
.video-wrap:hover .video-btn-play:after {
  transform: translate(-50%, -50%) scale(1.2);
  border-color: transparent transparent transparent #2e4f9c;
}

.video-btn-play {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  text-indent: -9999px;
}
.video-btn-play:before {
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 2px solid #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  transition: 0.2s;
  animation: circle-jump 0.5s linear infinite alternate;
}
@keyframes circle-jump {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}
.video-btn-play:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 0 30px 45px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  transition: 0.1s;
}

.color-lblue {
  color: #3ab9ef;
}

.color-red {
  color: #c42829;
}

.color-dred {
  color: #c51521;
}

.owl-carousel.owl-drag .owl-item {
  touch-action: auto;
}

.owl-btn-prev,
.owl-btn-next {
  width: 5vw;
  height: 5vw;
  position: absolute;
  top: 50%;
  z-index: 1;
  cursor: pointer;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.4s;
  background-color: #2e4f9c;
}

.owl-btn-prev {
  left: 0;
  background-image: url(../img/icon-prev.svg);
}
.owl-btn-prev:hover {
  background-color: #3ab9ef;
}

.owl-btn-next {
  right: 0;
  background-image: url(../img/icon-next.svg);
}
.owl-btn-next:hover {
  background-color: #3ab9ef;
}

#idx-pd-btn-prev {
  top: 480px;
  left: 4%;
}

#idx-pd-btn-next {
  top: 480px;
  right: 4%;
}

.owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.owl-nav {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  margin-top: 10px;
}
.owl-nav [class*=owl-] {
  color: #FFF;
  font-size: 14px;
  margin: 5px;
  padding: 4px 7px;
  border: 0;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
}
.owl-nav [class*=owl-]:hover {
  background: #fff;
  color: #FFF;
  text-decoration: none;
}
.owl-nav .disabled {
  opacity: 0.5;
  cursor: default;
}
.owl-nav.disabled + .owl-dots {
  margin-top: 5%;
}

.owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
}
.owl-dots .owl-dot span {
  width: 1vw;
  height: 1vw;
  margin: 0.2vw 1vw;
  border: 0;
  background: #ddd;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity 0.2s ease;
  border-radius: 30px;
}
.owl-dots .owl-dot.active span {
  background: #2e4f9c;
}
.owl-dots .owl-dot:hover span {
  background: #3ab9ef;
}

.g-wrap {
  font-family: "Poppins", "Noto Sans TC", "蘋果儷中黑", "微軟正黑體", Arial, sans-serif;
  width: 100%;
  margin: 0 auto 0;
  background: #fff;
  background-size: 100%;
  color: #000;
  position: relative;
}
.g-wrap * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.g-wrap li {
  list-style: none;
}
.g-wrap img {
  max-width: 100%;
}
.g-wrap a:hover {
  color: #333;
}
.g-wrap a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.4s;
}

[class^=text-gradient-] {
  position: relative;
  display: inline-block;
  color: transparent;
}
[class^=text-gradient-]:before, [class^=text-gradient-]:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  text-indent: 0;
  width: 100%;
}
[class^=text-gradient-]:after {
  background: linear-gradient(to top, #272727, #010002);
  background-size: 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 1s;
  text-align: center;
  color: #013876;
}
[class^=text-gradient-]:before {
  text-shadow: 0 0 1vw white;
}

.text-gradient-2:after {
  background: linear-gradient(to top, #01346f, #011227);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-3:after {
  background: linear-gradient(to bottom, #fff 50%, #c0c0c0 50.1%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-3:before {
  text-shadow: 0 0 1vw black;
}

.text-gradient-4:after {
  background: linear-gradient(to bottom, #fff, #c0c0c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-4:before {
  text-shadow: 0 0 1vw black;
}

.btns a {
  width: 12%;
  margin: 0 1.5%;
}

.list-no li {
  position: relative;
  list-style-type: decimal;
  margin-left: 20px;
}

.list-label li {
  position: relative;
  padding-left: 10px;
}
.list-label li .label {
  position: absolute;
  top: 0;
  left: 0;
}

.g-section {
  position: relative;
  text-align: center;
}

#kv {
  height: 44.5vw;
  overflow: hidden;
  position: relative;
}
#kv .bg {
  width: 100%;
  height: 200vw;
  background: url(../img/kv-bg.jpg);
  background-size: 100% 100%;
  animation: waterfall 10s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
@keyframes waterfall {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: 200vw;
  }
}
#kv .pd {
  width: 52%;
  height: 150%;
  background: url(../img/kv-pd.png) no-repeat center top;
  background-size: 100%;
  position: absolute;
  top: -19.3%;
  left: -2.7%;
  pointer-events: none;
}
#kv .char {
  width: 39%;
  height: 100%;
  background: url(../img/kv-char.png) no-repeat center top;
  background-size: 100%;
  position: absolute;
  top: 3.4%;
  right: 8.3%;
  pointer-events: none;
  display: none;
}
#kv .char-2 {
  width: 77%;
  height: 100%;
  background: url(../img/kv-char-2.png) no-repeat center top;
  background-size: 100%;
  position: absolute;
  top: 3.4%;
  right: -3.7%;
  pointer-events: none;
}
#kv header {
  width: 40%;
  margin: 15.4% 0 0 27.2%;
  background: radial-gradient(farthest-corner at 50% 50%, #fff 0%, rgba(255, 255, 255, 0) 72%);
  background-size: 100%;
  position: relative;
}
#kv header h1 span {
  font-size: 4.5vw;
  margin-left: -0.15vw;
  font-weight: bold;
  transform-origin: 50% 100%;
  transform: scale(1, 0);
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  line-height: 1;
}
#kv header h1 span:nth-of-type(1) {
  transition-delay: 0.05s;
}
#kv header h1 span:nth-of-type(2) {
  transition-delay: 0.1s;
}
#kv header h1 span:nth-of-type(3) {
  transition-delay: 0.15s;
}
#kv header h1 span:nth-of-type(4) {
  transition-delay: 0.2s;
}
#kv header h1 span:nth-of-type(5) {
  transition-delay: 0.25s;
}
#kv header h1 span:nth-of-type(6) {
  transition-delay: 0.3s;
}
#kv header .sub-title {
  transform: scale(0);
  transition: 1s;
  transition-delay: 0.5s;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
#kv header b {
  font-size: 2.8vw;
  display: block;
  font-weight: 500;
  margin-top: 2%;
  letter-spacing: 0.1vw;
}
#kv header u {
  font-size: 2.7vw;
  display: block;
  text-decoration: none;
  margin-top: -1%;
  color: #013876;
  letter-spacing: 0.1vw;
  position: relative;
}
#kv header u:before, #kv header u:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4vw 7.5vw 0 1vw;
  border-color: #c42829 transparent transparent transparent;
  position: absolute;
  bottom: 0;
}
#kv header u:before {
  left: 27%;
}
#kv header u:after {
  left: 50%;
}
#kv .btns {
  margin-top: 6%;
}
#kv .btns a {
  width: 30%;
  margin: 0 1.5% 2%;
  opacity: 0;
  transition: transform 1s, opacity 1s;
  transition-delay: 1s;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
#kv .btns a:nth-of-type(1) {
  transform: translateX(-20%);
}
#kv .btns a:nth-of-type(2) {
  transform: translateX(20%);
}
#kv.is-animate header h1 span {
  transform: scale(1);
}
#kv.is-animate header .sub-title {
  transform: scale(1);
}
#kv.is-animate .btns a {
  opacity: 1;
  transform: translateX(0);
}

#ingredient {
  background: url(../img/bg-gradient.jpg) no-repeat center top;
  background-size: 100%;
  height: 69vw;
  color: #fff;
}
#ingredient header {
  padding-top: 5.2%;
}
#ingredient header h2 {
  width: 62%;
  margin: 0 auto;
  position: relative;
}
#ingredient header h2:before, #ingredient header h2:after {
  content: "";
  width: 1px;
  height: 127%;
  background: #c42829;
  position: absolute;
  top: -12%;
}
#ingredient header h2:before {
  left: 0;
}
#ingredient header h2:after {
  right: 0;
}
#ingredient header h2 p {
  font-size: 2.1vw;
  letter-spacing: 0.2vw;
  line-height: 1.4;
}
#ingredient ol {
  width: 60%;
  margin: 4.5% auto;
  display: flex;
  justify-content: space-between;
}
#ingredient li {
  width: 40%;
  opacity: 0;
  transition: 1s;
  transition-delay: 0.4s;
}
#ingredient li:nth-of-type(1) {
  transform: translateY(50%);
}
#ingredient li:nth-of-type(1) i {
  margin-bottom: -17%;
  margin-left: 28%;
}
#ingredient li:nth-of-type(2) {
  padding-top: 16.2%;
  transform: translateY(-50%);
}
#ingredient li:nth-of-type(2) i {
  margin-top: -18%;
  margin-left: -12%;
}
#ingredient li i {
  width: 75%;
  height: 17.9vw;
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  display: block;
  margin: 0 auto;
  position: relative;
}
#ingredient li i video {
  width: 46.7%;
  border-radius: 50%;
  position: absolute;
}
#ingredient li .ingredient-1 {
  background-image: url(../img/element-1.png);
}
#ingredient li .ingredient-1 video {
  top: 2.4%;
  left: 2.4%;
}
#ingredient li .ingredient-2 {
  background-image: url(../img/element-2.png);
}
#ingredient li .ingredient-2 video {
  bottom: 2.5%;
  left: 51%;
}
#ingredient li h3 {
  font-size: 2.5vw;
  margin-bottom: 2.3%;
  font-weight: bold;
}
#ingredient li p {
  font-size: 1.7vw;
  letter-spacing: 0.2vw;
  line-height: 1.4;
  text-shadow: 0 0 1vw #000;
}
#ingredient li h4 {
  font-size: 3.5vw;
  margin-top: 6%;
  position: relative;
  display: inline-block;
  font-weight: normal;
}
#ingredient li h4:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1vw 11.5vw 0 1vw;
  border-color: #c42829 transparent transparent transparent;
  position: absolute;
  bottom: -4%;
  left: -5%;
}
#ingredient.is-animate li {
  opacity: 1;
  transform: translateY(0);
}

#compare {
  background: url(../img/bg-compare.jpg) no-repeat center top;
  background-size: 100%;
  height: 55vw;
}
#compare header {
  padding-top: 2.8%;
}
#compare header h2 {
  font-size: 3.5vw;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.1vw;
  color: #fff;
  text-shadow: 0 0.2vw 0.1vw rgba(0, 0, 0, 0.5);
}
#compare .table {
  width: 100%;
  height: 37vw;
  margin: -2.9% auto 0;
  background: url(../img/bg-compare-table.png) no-repeat center top;
  background-size: 100%;
  padding: 0 18.8%;
}
#compare .table .thead {
  padding: 10% 0 0%;
}
#compare .table .thead h3 {
  display: flex;
  align-items: center;
  justify-content: center;
}
#compare .table .thead h3 div {
  text-align: center;
  color: #fff;
  text-shadow: 0 0 2px #000;
  width: 33%;
}
#compare .table .thead h3 div:nth-of-type(2) {
  position: relative;
  left: -0.5%;
}
#compare .table .thead h3 div p {
  font-size: 2.2vw;
}
#compare .table .thead h3 u {
  width: 10%;
  height: 0;
  padding-bottom: 9%;
  background: url(../img/compare-pk.png) no-repeat center;
  background-size: 100%;
  text-indent: -9999px;
  margin: 0 6%;
}
#compare .table .tbody {
  display: flex;
}
#compare .table .pros li {
  transform: translateX(50%);
}
#compare .table .cons li {
  transform: translateX(-50%);
}
#compare .table .pros, #compare .table .cons {
  width: 39%;
  text-align: center;
}
#compare .table .pros li, #compare .table .cons li {
  position: relative;
  font-size: 1.5vw;
  line-height: 1.3;
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}
#compare .table .pros li:nth-of-type(1), #compare .table .cons li:nth-of-type(1) {
  transition-delay: 0.2s;
}
#compare .table .pros li:nth-of-type(1) .icon-win, #compare .table .cons li:nth-of-type(1) .icon-win {
  animation-delay: 0.2s;
}
#compare .table .pros li:nth-of-type(1) .icon-win:before, #compare .table .cons li:nth-of-type(1) .icon-win:before {
  transform: rotate(40deg);
}
#compare .table .pros li:nth-of-type(2), #compare .table .cons li:nth-of-type(2) {
  transition-delay: 0.4s;
}
#compare .table .pros li:nth-of-type(2) .icon-win, #compare .table .cons li:nth-of-type(2) .icon-win {
  animation-delay: 0.4s;
}
#compare .table .pros li:nth-of-type(2) .icon-win:before, #compare .table .cons li:nth-of-type(2) .icon-win:before {
  transform: rotate(80deg);
}
#compare .table .pros li:nth-of-type(3), #compare .table .cons li:nth-of-type(3) {
  transition-delay: 0.6s;
}
#compare .table .pros li:nth-of-type(3) .icon-win, #compare .table .cons li:nth-of-type(3) .icon-win {
  animation-delay: 0.6s;
}
#compare .table .pros li:nth-of-type(3) .icon-win:before, #compare .table .cons li:nth-of-type(3) .icon-win:before {
  transform: rotate(120deg);
}
#compare .table .pros li:nth-of-type(4), #compare .table .cons li:nth-of-type(4) {
  transition-delay: 0.8s;
}
#compare .table .pros li:nth-of-type(4) .icon-win, #compare .table .cons li:nth-of-type(4) .icon-win {
  animation-delay: 0.8s;
}
#compare .table .pros li:nth-of-type(4) .icon-win:before, #compare .table .cons li:nth-of-type(4) .icon-win:before {
  transform: rotate(160deg);
}
#compare .table .pros .icon-win, #compare .table .cons .icon-win {
  width: 15%;
  height: 0;
  padding-bottom: 15%;
  position: absolute;
  top: 0%;
  left: 90%;
  animation: icon_win 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
}
#compare .table .pros .icon-win:before, #compare .table .cons .icon-win:before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/compare-win.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes icon_win {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
#compare .table .pros .icon-win span, #compare .table .cons .icon-win span {
  font-style: normal;
  color: #fff;
  font-size: 1.8vw;
  text-shadow: 0 0.1vw 0.1vw #000;
  position: relative;
  top: 0.7vw;
}
#compare .table .th {
  width: 22%;
}
#compare .table .th li {
  font-size: 1.8vw;
  color: #fff;
  text-shadow: 0 0 2px #000;
}
#compare .table .pros li, #compare .table .cons li, #compare .table .th li {
  height: 7.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10%;
}
#compare .table .pros li:nth-of-type(2), #compare .table .cons li:nth-of-type(2), #compare .table .th li:nth-of-type(2) {
  height: 8.8vw;
}
#compare .btns {
  margin-top: 2.5%;
}
#compare.is-animate .table .pros li, #compare.is-animate .table .cons li {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

#how-to-use {
  height: 63vw;
  background: url(../img/bg-tv.jpg) no-repeat center top #fff;
  background-size: 100%;
}
#how-to-use header {
  padding-top: 3.5%;
  color: #fff;
}
#how-to-use header h2 p {
  font-size: 3.5vw;
  font-weight: bold;
  line-height: 1.2;
}
#how-to-use .video {
  width: 68%;
  margin: 2.5% auto 1.5%;
  padding: 0.2vw;
  background: linear-gradient(to bottom, #e0e0e0 0%, #000 50%, #fff 50.01%, #707070 100%);
  border-radius: 0.4vw;
  box-shadow: 0 0 1vw #2e4f9c;
}
#how-to-use .deco-pd {
  width: 9.7%;
  height: 48vw;
  background: url(../img/tv-pd.png) no-repeat center top;
  background-size: 100%;
  position: absolute;
  top: 23.9%;
  left: 79%;
  z-index: 1;
}

#limit {
  height: 56.5vw;
  background: url(../img/bg-limit.jpg) no-repeat center bottom #fff;
  background-size: 100%;
}
#limit .group {
  width: 74.5%;
  margin: 7.4% auto 0;
  border-top: 0.5vw solid #c42829;
  border-radius: 0.2vw;
  box-shadow: 0 1vw 1.5vw rgba(0, 0, 0, 0.5);
  position: relative;
  padding-bottom: 3.7%;
  background: linear-gradient(to bottom, #fff 63%, #eee 63.1%);
}
#limit header {
  background: #c42829;
  color: #fff;
  width: 42%;
  margin: -3.5% auto 2.5%;
  border-radius: 0.2vw;
}
#limit header h2 {
  font-size: 2.5vw;
  letter-spacing: 0.1vw;
  padding: 2% 0;
}
#limit .gift li {
  position: absolute;
  width: 25%;
  top: 19%;
}
#limit .gift li:nth-of-type(1) {
  left: 2.5%;
}
#limit .gift li:nth-of-type(2) {
  left: 70%;
}
#limit .gift img {
  width: 100%;
}
#limit .txt p {
  font-size: 2vw;
  line-height: 1.7;
  opacity: 0;
  transition: 1s;
}
#limit .txt p:nth-of-type(1) {
  transition-delay: 0.2s;
}
#limit .txt p:nth-of-type(2) {
  transition-delay: 0.4s;
}
#limit .txt p:nth-of-type(3) {
  transition-delay: 0.6s;
}
#limit .txt p:nth-of-type(4) {
  transition-delay: 0.8s;
}
#limit .txt p:nth-of-type(5) {
  transition-delay: 1s;
}
#limit .txt b {
  font-weight: normal;
}
#limit .txt h3 {
  font-size: 4vw;
  margin-top: 5%;
  transform: scale(0.8, 1);
  opacity: 0;
  transition: 1s;
  transition-delay: 1s;
}
#limit .btns {
  margin-top: 4%;
}
#limit.is-animate .txt p {
  opacity: 1;
}
#limit.is-animate .txt h3 {
  transform: scale(1, 1);
  opacity: 1;
}

#ec {
  background: url(../img/bg-ec.jpg) no-repeat center top #fff;
  background-size: 100%;
  padding-bottom: 5%;
}
#ec header {
  padding-top: 4.2%;
}
#ec header h2 p {
  font-size: 4vw;
  font-weight: bold;
  line-height: 1.3;
}

#ec-owl {
  width: 72%;
  margin: 3.5% auto 0;
}
#ec-owl li {
  display: flex;
  align-items: center;
  justify-content: center;
}
#ec-owl .owl-item.active .img img {
  transform: scale(1);
}
#ec-owl .owl-item.active .txt {
  transform: scale(1);
}
#ec-owl .img {
  width: 49%;
  position: relative;
  padding: 5% 0;
}
#ec-owl .img img {
  transform-origin: 50% 0%;
  transition: 1s;
  transform: scale(0.5);
}
#ec-owl .img .discount {
  background: url(../img/icon-discount.png?v2) no-repeat center top;
  background-size: 100%;
  position: absolute;
  z-index: 1;
  top: 0%;
  right: 3%;
  width: 9vw;
  height: 9vw;
  line-height: 1.2;
  font-size: 1.6vw;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: discount 0.5s infinite alternate;
  transform-origin: 0 100%;
}
@keyframes discount {
  0% {
    transform: scale(0.9) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(5deg);
  }
}
#ec-owl .img .discount b {
  font-size: 3vw;
  font-weight: normal;
}
#ec-owl .txt {
  width: 51%;
  text-align: left;
  padding-left: 5%;
  transform-origin: 50% 100%;
  transition: 1s;
  transform: scale(0.5);
}
#ec-owl .txt h3 p {
  font-size: 3.6vw;
  color: #2e4f9c;
}
#ec-owl .txt dl {
  font-size: 2vw;
  display: flex;
  flex-wrap: wrap;
  line-height: 1.5;
}
#ec-owl .txt dl dt, #ec-owl .txt dl dd {
  margin-bottom: 1.5%;
}
#ec-owl .txt dl dt {
  width: 10%;
  color: #2e4f9c;
}
#ec-owl .txt dl dd {
  width: 90%;
}
#ec-owl .price {
  margin-top: 2%;
  color: #c42829;
}
#ec-owl .price p {
  font-size: 1.8vw;
}
#ec-owl .price b {
  font-size: 2.5vw;
  font-weight: normal;
  margin-left: 1%;
}
#ec-owl .price u {
  font-size: 1.5vw;
  border: 1px solid #c42829;
  display: inline-block;
  text-decoration: none;
  padding: 0 2%;
}
#ec-owl .btns {
  margin-top: 5%;
}
#ec-owl .btns a {
  background: #000;
  width: 55%;
  font-size: 2.5vw;
  line-height: 1.6;
  box-shadow: none;
}
#ec-owl .btns a:hover {
  background: #2e4f9c;
}

#try-it .wrap {
  display: flex;
}
#try-it .left {
  width: 52.5%;
  text-align: center;
  position: relative;
  color: #fff;
  background-color: #000;
  overflow: hidden;
}
#try-it .left .txt {
  position: absolute;
  z-index: 1;
  width: 100%;
  padding-top: 7%;
  line-height: 1.2;
}
#try-it .left .txt p {
  font-size: 3.3vw;
}
#try-it .left .txt b {
  font-size: 3.9vw;
  font-weight: normal;
  display: block;
  margin-bottom: 2%;
}
#try-it .left .img {
  width: 100%;
  height: 100%;
  background: url(../img/try-kv.jpg) no-repeat center;
  background-size: cover;
  transform: scale(1.2);
  transition: 1s;
  opacity: 0;
  visibility: hidden;
}
#try-it .right {
  width: 46.5%;
  padding: 7% 3.2%;
  text-align: left;
}
#try-it .right header h2 {
  font-size: 4.4vw;
  line-height: 1.4;
}
#try-it .right header h2 p {
  font-size: 3.3vw;
}
#try-it .right header h2 b {
  font-weight: normal;
}
#try-it .right header > p {
  font-size: 1.7vw;
  padding-top: 7%;
  line-height: 1.3;
  color: #999;
}
#try-it .right header small {
  font-size: 1.2vw;
  display: block;
}
#try-it .right .note {
  margin-top: 5%;
}
#try-it .right .note h6 {
  font-size: 25px;
}
#try-it .right .note li {
  font-size: 20px;
  list-style: decimal;
  margin-left: 20px;
}
#try-it .g-form {
  margin-top: 5%;
}
#try-it .g-form li button.g-bt-1 {
  background: #000;
  border: 0;
  border-radius: 0;
  font-weight: bold;
  width: 100%;
  color: #fff;
  font-size: 27px;
  font-weight: normal;
  font-family: "Poppins", "Noto Sans TC", "蘋果儷中黑", "微軟正黑體", Arial, sans-serif;
  cursor: pointer;
  transition: 0.2s;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 2.7;
  letter-spacing: 2px;
  vertical-align: top;
}
#try-it .g-form li button.g-bt-1:hover {
  background-color: #2e4f9c;
}
#try-it .g-form li.is-option p {
  text-align: center;
  font-size: 1.5vw;
  margin: 5% 0 3%;
}
#try-it .g-form li.is-option .btns {
  display: flex;
  justify-content: space-between;
}
#try-it .g-form li.is-option .g-bt-1 {
  width: 48%;
  background: #000;
  text-decoration: none;
  color: #fff;
  line-height: 2;
}
#try-it.is-animate .left .img {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

#step {
  background-color: #ebebeb;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}
#step header {
  text-align: center;
  padding-top: 4.7%;
}
#step header h2 {
  font-size: 4.4vw;
  font-weight: normal;
}
#step header h2 b {
  font-weight: normal;
}
#step header p {
  font-size: 2vw;
  letter-spacing: 1vw;
}
#step .item1 {
  margin-top: 4.5%;
  padding-bottom: 6%;
  width: 90%;
  margin: 5% auto 0;
}
#step .item1 .owl-item:nth-of-type(1) .img img {
  transition-delay: 1.2s;
}
#step .item1 .owl-item:nth-of-type(1) .img [class^=step] {
  transition-delay: 0.2s;
}
#step .item1 .owl-item:nth-of-type(2) .img img {
  transition-delay: 1.4s;
}
#step .item1 .owl-item:nth-of-type(2) .img [class^=step] {
  transition-delay: 0.4s;
}
#step .item1 .owl-item:nth-of-type(3) .img img {
  transition-delay: 1.6s;
}
#step .item1 .owl-item:nth-of-type(3) .img [class^=step] {
  transition-delay: 0.6s;
}
#step .item1 .owl-item:nth-of-type(4) .img img {
  transition-delay: 1.8s;
}
#step .item1 .owl-item:nth-of-type(4) .img [class^=step] {
  transition-delay: 0.8s;
}
#step .item1 .owl-item:nth-of-type(5) .img img {
  transition-delay: 2s;
}
#step .item1 .owl-item:nth-of-type(5) .img [class^=step] {
  transition-delay: 1s;
}
#step .item1 li {
  width: 100%;
  position: relative;
}
#step .item1 li .img {
  height: 0;
  padding-bottom: 165%;
  position: relative;
  pointer-events: none;
}
#step .item1 li .img img {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(20%);
  transition: 2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  z-index: 2;
}
#step .item1 li .img [class^=step] {
  font-size: 20vw;
  color: #999;
  font-family: "Poppins";
  background: -webkit-linear-gradient(left, #e1e1e1 30%, #bbb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  top: 16%;
  left: -10%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(50%) scale(2) skew(-10deg);
  transition: 1s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
#step .item1 li .txt {
  padding-top: 2%;
}
#step .item1 li .txt a h3 {
  font-size: 1.7vw;
  font-weight: normal;
  color: #000;
}
#step .item1 li .txt a:after {
  content: "";
  width: 50px;
  height: 2px;
  background-color: #2e4f9c;
  margin: 10px auto;
  display: block;
}
#step .item1 li .txt a:hover h3 {
  color: #2e4f9c;
}
#step .item1 li .txt b {
  font-size: 1.4vw;
  font-weight: normal;
  display: block;
  padding-bottom: 1.5vw;
}
#step .item1 li .txt p {
  font-size: 1.3vw;
  color: #777;
}
#step .owl-btn-prev, #step .owl-btn-next {
  display: none;
}
#step.is-animate .item1 li .img img {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
#step.is-animate .item1 li .img [class^=step] {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1) skew(-10deg);
}

#at-home {
  background: url(../img/bg-athome.png) no-repeat center top;
  background-size: 100%;
  padding: 6.5% 5% 5% 45%;
}
#at-home header h2 {
  font-size: 4vw;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.1vw;
  margin-bottom: 2%;
}
#at-home p {
  font-size: 2.3vw;
}
#at-home img {
  position: absolute;
  top: 12%;
  left: 11.2%;
  width: 41.6%;
}
#at-home .btns {
  margin-top: 4%;
}
#at-home .btns a {
  width: 38%;
}
#at-home .note {
  margin-top: 5%;
  opacity: 0.5;
}
#at-home .note small {
  font-size: 1.5vw;
  display: block;
}

@media screen and (max-width: 1400px) {
  .g-form li label {
    font-size: 2vw;
  }
  .g-form li input, .g-form li select {
    font-size: 2vw;
    padding: 3%;
  }
  .g-form input[type=checkbox] + label,
.g-form input[type=radio] + label {
    font-size: 1.5vw;
  }

  #try-it .g-form li:last-child a, #try-it .g-form li:last-child button {
    font-size: 2vw;
  }
  #try-it .right .note h6 {
    font-size: 2vw;
  }
  #try-it .right .note li {
    font-size: 1vw;
  }
}
@media screen and (min-width: 901px) {
  .is-m {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .is-pc {
    display: none;
  }

  #msg-alert .msg-wrap {
    width: 90%;
  }
  #msg-alert .msg-content header {
    font-size: 4.5vw;
  }
  #msg-alert .msg-content .detail {
    font-size: 4vw;
  }

  .msg-box .msg-content .bt {
    font-size: 3vw;
  }

  a.g-bt-1 {
    font-size: 4vw;
    width: 40%;
    line-height: 2.3;
  }

  .owl-btn-prev, .owl-btn-next {
    width: 10vw;
    height: 10vw;
    top: 26%;
  }

  .g-form li label {
    font-size: 3.5vw;
  }
  .g-form li input, .g-form li select {
    font-size: 3.5vw;
  }
  .g-form input[type=checkbox] + label, .g-form input[type=radio] + label {
    font-size: 3.5vw;
    padding-left: 10vw;
  }
  .g-form input[type=checkbox] + label:before, .g-form input[type=checkbox] + label:after, .g-form input[type=radio] + label:before, .g-form input[type=radio] + label:after {
    width: 8vw;
    height: 8vw;
    margin-top: -1vw;
  }
  .g-form .is-rule input[type=checkbox] + label, .g-form .is-rule input[type=radio] + label {
    font-size: 3vw;
  }
  .g-form .is-rule input[type=checkbox] + label:before, .g-form .is-rule input[type=checkbox] + label:after, .g-form .is-rule input[type=radio] + label:before, .g-form .is-rule input[type=radio] + label:after {
    margin-top: 0;
  }

  #kv {
    height: 156vw;
  }
  #kv .bg {
    background-size: 130% 101%;
  }
  #kv .pd {
    width: 134%;
    height: 150%;
    top: 19%;
    left: -38.7%;
    z-index: 11;
  }
  #kv .char {
    width: 79%;
    height: 100%;
    top: 36.4%;
    right: -16.7%;
  }
  #kv .char-2 {
    width: 149%;
    height: 97%;
    top: 45.4%;
    right: -25.7%;
  }
  #kv header {
    width: 100%;
    margin: 15.4% auto 27.2%;
  }
  #kv header h1 span {
    font-size: 10.5vw;
  }
  #kv header b {
    font-size: 6.5vw;
  }
  #kv header u {
    font-size: 6.2vw;
  }
  #kv header u:before, #kv header u:after {
    border-width: 1.4vw 17vw 0 3vw;
  }
  #kv header u:before {
    left: 29%;
  }

  #ingredient {
    height: 155vw;
    height: 164vw;
    background-size: 220%;
    background-position: center bottom;
    background-color: #000;
  }
  #ingredient header {
    margin-top: 7%;
  }
  #ingredient header h2 {
    width: 85%;
  }
  #ingredient header h2 p {
    font-size: 4.5vw;
  }
  #ingredient ol {
    width: 100%;
    margin-top: 10%;
  }
  #ingredient li i {
    width: 99%;
    height: 39.6vw;
  }
  #ingredient li h3 {
    font-size: 4.5vw;
  }
  #ingredient li p {
    font-size: 3.2vw;
  }
  #ingredient li h4 {
    font-size: 7vw;
  }
  #ingredient li h4:after {
    border-width: 1.5vw 19vw 0 2vw;
  }

  #compare {
    height: 125vw;
    height: 132vw;
    background-size: cover;
  }
  #compare header {
    padding-top: 10%;
  }
  #compare header h2 {
    font-size: 7vw;
  }
  #compare .table {
    background-image: url(../img/bg-compare-table-m.png);
    background-size: 150%;
    height: 67vw;
    padding: 0 3.8%;
    margin-top: 2%;
  }
  #compare .table .thead {
    padding-top: 6%;
    padding-bottom: 2.5%;
  }
  #compare .table .thead h3 div p {
    font-size: 4vw;
    line-height: 1.2;
  }
  #compare .table .thead h3 div:nth-of-type(1) {
    text-align: left;
  }
  #compare .table .thead h3 div:nth-of-type(2) {
    text-align: right;
  }
  #compare .table .thead h3 u {
    margin: 0 4%;
  }
  #compare .table .pros li, #compare .table .cons li, #compare .table .th li {
    height: 16vw;
    font-size: 3.1vw;
    padding: 0;
  }
  #compare .table .pros li:nth-of-type(2), #compare .table .cons li:nth-of-type(2), #compare .table .th li:nth-of-type(2) {
    height: 16vw;
  }
  #compare .table .pros .icon-win, #compare .table .cons .icon-win, #compare .table .th .icon-win {
    width: 18%;
    padding-bottom: 18%;
  }
  #compare .table .pros .icon-win span, #compare .table .cons .icon-win span, #compare .table .th .icon-win span {
    font-size: 3.8vw;
  }
  #compare .btns {
    margin-top: 5%;
  }

  #how-to-use {
    height: 110vw;
    height: 119vw;
    background-size: 150%;
  }
  #how-to-use header {
    padding-top: 10%;
  }
  #how-to-use header h2 p {
    font-size: 7vw;
  }
  #how-to-use .video {
    width: 85%;
    margin-top: 7%;
  }
  #how-to-use .btns {
    margin-top: 7%;
  }
  #how-to-use .deco-pd {
    width: 11.7%;
    height: 55vw;
    top: 32%;
    top: 30%;
    left: 84%;
  }

  .video-wrap .img .video-btn-play {
    transform: scale(0.5);
  }

  #limit {
    height: 130vw;
    height: 140vw;
    background-size: 200%;
  }
  #limit .group {
    width: 93%;
    padding-bottom: 5%;
  }
  #limit header {
    width: 80%;
  }
  #limit header h2 {
    font-size: 4.5vw;
  }
  #limit .txt p {
    font-size: 3.5vw;
  }
  #limit .txt h3 {
    font-size: 7vw;
    padding-top: 39%;
  }
  #limit .gift li {
    top: 45%;
    width: 40%;
  }
  #limit .gift li:nth-of-type(1) {
    left: 5.5%;
  }
  #limit .gift li:nth-of-type(2) {
    left: 52%;
  }

  #ec {
    padding-bottom: 10%;
  }
  #ec header {
    padding-top: 10%;
  }
  #ec header h2 p {
    font-size: 7vw;
  }

  .owl-dots .owl-dot span {
    width: 3vw;
    height: 3vw;
  }

  .owl-btn-prev, .owl-btn-next {
    top: 45%;
  }

  #ec-owl li {
    display: block;
  }
  #ec-owl .img {
    width: 100%;
  }
  #ec-owl .img .discount {
    width: 20vw;
    height: 20vw;
    font-size: 4vw;
  }
  #ec-owl .txt {
    width: 100%;
    padding-left: 0;
    margin-top: 5%;
    text-align: center;
  }
  #ec-owl .txt h3 p {
    font-size: 5.6vw;
  }
  #ec-owl .txt dl {
    font-size: 3.5vw;
    text-align: left;
    padding-left: 15%;
  }
  #ec-owl .price p {
    font-size: 3.5vw;
  }
  #ec-owl .price b {
    font-size: 7vw;
  }
  #ec-owl .price u {
    font-size: 3vw;
  }
  #ec-owl .btns a {
    font-size: 4vw;
    width: 100%;
    margin: 0;
    line-height: 2;
  }

  #step {
    padding: 10% 0;
  }
  #step header h2 {
    font-size: 7vw;
    font-weight: bold;
  }
  #step header p {
    font-size: 5.5vw;
  }
  #step .owl-btn-prev, #step .owl-btn-next {
    display: block;
    top: 47%;
  }
  #step .item1 li .img {
    padding-bottom: 160%;
  }
  #step .item1 li .img [class^=step] {
    font-size: 40vw;
    left: -5%;
  }
  #step .item1 li .img img {
    width: 60%;
    height: auto;
  }
  #step .item1 li .txt a h3 {
    font-size: 4vw;
  }
  #step .item1 li .txt b, #step .item1 li .txt p {
    font-size: 3.5vw;
  }

  #try-it .wrap {
    flex-wrap: wrap;
  }
  #try-it .left, #try-it .right {
    width: 100%;
  }
  #try-it .left {
    height: 150vw;
  }
  #try-it .left .txt b {
    font-size: 7vw;
  }
  #try-it .left .txt p {
    font-size: 5.5vw;
  }
  #try-it .right {
    padding: 10% 7%;
  }
  #try-it .right header h2 {
    font-size: 8vw;
  }
  #try-it .right header h2 p {
    font-size: 5vw;
  }
  #try-it .right header > p {
    font-size: 4vw;
  }
  #try-it .right header small {
    font-size: 3.5vw;
  }
  #try-it .right .note h6 {
    font-size: 2.5vw;
  }
  #try-it .right .note li {
    font-size: 2.5vw;
  }
  #try-it .g-form li {
    padding: 1vw 0 1vw 15%;
  }
  #try-it .g-form li.is-option p {
    font-size: 3.5vw;
  }
  #try-it .g-form li.is-option .g-bt-1 {
    line-height: 3;
  }
  #try-it .g-form li:last-child a, #try-it .g-form li:last-child button {
    font-size: 3.5vw;
  }
  #try-it .g-form li button.g-bt-1 {
    font-size: 5vw;
  }
  #try-it .g-form .radios {
    margin: 1vw 0 1.5vw;
  }

  #at-home {
    background-size: cover;
    padding: 10% 5%;
  }
  #at-home header h2 {
    font-size: 7vw;
    text-shadow: 0 0 2vw #fff;
  }
  #at-home img {
    position: relative;
    width: 80%;
    margin: 5% auto -15%;
  }
  #at-home p {
    font-size: 4vw;
  }
  #at-home .btns a {
    width: 80%;
  }
  #at-home .note small {
    font-size: 3vw;
  }
}