@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

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

body {
  line-height: 1; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

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

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

body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow-x: hidden;
  background: #000; }

.gh__header {
  display: block; }

#hero {
  line-height: 0;
  height: 70vw;
  max-height: 1150px;
  overflow: hidden;
  position: relative; }
  #hero .slogan {
    display: block;
    opacity: 0;
    width: 100%;
    max-width: 70px;
    position: absolute;
    z-index: 99;
    top: 33%;
    left: 47%;
    -webkit-animation: flash .7s 2 both;
    animation: flash .7s 2 both; }
  #hero .kv {
    opacity: 0;
    margin-top: 0;
    width: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    min-height: 1380px;
    background-image: url(../images/kv-bg.jpg);
    display: block !important; }
  #hero .wording {
    opacity: 0;
    display: block;
    position: absolute;
    bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    min-height: 250px; }
    #hero .wording img {
      width: 100%; }

section h2 {
  color: #fff !important;
  text-transform: uppercase; }

#product {
  background-image: url(../images/product-bg.jpg);
  background-repeat: repeat;
  background-position: bottom;
  background-size: cover;
  position: relative;
  height: 100vh; }
  #product .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; }
  #product .wording {
    width: 45%;
    padding: 0 5vw;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    right: 0; }
  #product .picture {
    width: 50%; }
    #product .picture img {
      position: absolute;
      top: 50%;
      left: 5%;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
      max-width: 900px; }
  #product h2 {
    font-size: 3vw;
    line-height: 1.2 !important; }
  #product p {
    color: #fff !important; }
  #product .little-title {
    font-family: "knockout 30", "knockout 28", roboto, noto sans tc, microsoft jhenghei, sans-serif;
    color: #710510 !important;
    font-size: 18px;
    padding-bottom: 30px;
    text-transform: uppercase; }

@-webkit-keyframes key {
  0 {
    opacity: 1; }
  50% {
    opacity: .5; }
  100% {
    opacity: 1; } }

@keyframes key {
  0 {
    opacity: 1; }
  50% {
    opacity: .5; }
  100% {
    opacity: 1; } }

#eva-01 {
  background-image: url(../images/eva-01-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  height: 100vh;
  overflow: hidden; }
  #eva-01 .keyfeature {
    width: 100%;
    position: absolute;
    top: 42%;
    left: 4vw;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 15; }
    #eva-01 .keyfeature img {
      opacity: .5;
      border: 0;
      max-height: 100%;
      max-width: 250px;
      height: auto;
      width: 100%;
      position: relative;
      vertical-align: middle; }
    #eva-01 .keyfeature img:hover {
      opacity: 1;
      -webkit-animation: key 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) forwards normal;
      animation: key 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) forwards normal;
      animation-iteration-count: 2;
      -webkit-animation-iteration-count: 2; }
  #eva-01 .wording {
    width: 100%;
    max-width: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    margin: 0 auto; }
    #eva-01 .wording .slogan {
      height: 28vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    #eva-01 .wording .slogan img {
      margin: 10px 0;
      max-width: 550px;
      width: 100%; }
    #eva-01 .wording .slogan p {
      margin-bottom: 4vw;
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%; }
    #eva-01 .wording .product-name {
      height: 28vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin-top: 3vw; }
    #eva-01 .wording h2 {
      font-size: 3vw;
      line-height: 1.2 !important; }
    #eva-01 .wording h3 {
      color: #fff !important; }
    #eva-01 .wording p {
      color: #fff !important;
      width: 80%; }
  #eva-01 .product {
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 600px;
    position: absolute;
    top: 63%;
    right: 6vw;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 15; }
    #eva-01 .product img {
      width: 30vw;
      max-width: 700px; }

#eva-02 {
  background-image: url(../images/eva-02-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  height: 100vh;
  overflow: hidden; }
  #eva-02 .keyfeature {
    width: 100%;
    position: absolute;
    top: 42%;
    left: 6vw;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 15; }
  #eva-02 .wording {
    width: 100%;
    max-width: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    margin: 0 auto; }
    #eva-02 .wording .slogan {
      height: 28vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    #eva-02 .wording .slogan img {
      margin: 10px 0;
      max-width: 550px;
      width: 100%; }
    #eva-02 .wording .slogan p {
      margin-bottom: 4vw;
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%; }
    #eva-02 .wording .product-name {
      height: 28vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin-top: 3vw; }
    #eva-02 .wording h2 {
      font-size: 3vw;
      line-height: 1.2 !important; }
    #eva-02 .wording h3 {
      color: #fff !important; }
    #eva-02 .wording p {
      color: #fff !important;
      width: 80%; }
  #eva-02 .product {
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 600px;
    position: absolute;
    top: 63%;
    left: 4vw;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 15; }
    #eva-02 .product img {
      width: 30vw;
      max-width: 700px; }

#eva-nerv {
  background-image: url(../images/eva-03-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  height: 100vh;
  overflow: hidden; }
  #eva-nerv .keyfeature {
    width: 100%;
    position: absolute;
    top: 42%;
    left: 6vw;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 15; }
    #eva-nerv .keyfeature img {
      opacity: .5;
      border: 0;
      max-height: 100%;
      max-width: 250px;
      height: auto;
      width: 100%;
      position: relative;
      vertical-align: middle; }
    #eva-nerv .keyfeature img:hover {
      opacity: 1;
      -webkit-animation: key 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) forwards normal;
      animation: key 0.1s cubic-bezier(0.47, 0, 0.745, 0.715) forwards normal;
      animation-iteration-count: 2;
      -webkit-animation-iteration-count: 2; }
  #eva-nerv .wording {
    width: 100%;
    max-width: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    margin: 0 auto; }
    #eva-nerv .wording .slogan {
      height: 32vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
    #eva-nerv .wording .slogan img {
      margin: 10px 0;
      max-width: 400px;
      width: 100%; }
    #eva-nerv .wording .slogan p {
      margin-bottom: 4vw;
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%; }
    #eva-nerv .wording .product-name {
      height: 28vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin-top: 3vw; }
    #eva-nerv .wording h2 {
      font-size: 3vw;
      line-height: 1.2 !important; }
    #eva-nerv .wording h3 {
      color: #fff !important; }
    #eva-nerv .wording p {
      color: #fff !important;
      width: 80%; }
  #eva-nerv .product {
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 600px;
    position: absolute;
    top: 63%;
    right: 4vw;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 15; }
    #eva-nerv .product img {
      width: 30vw;
      max-width: 700px; }

#watch-features {
  position: relative;
  width: 100%;
  z-index: 10; }
  #watch-features .bg {
    width: 100%;
    height: 25vw;
    max-height: 100%;
    background-image: url(../images/watch-features.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover; }

#box {
  position: relative;
  width: 100%;
  z-index: 10;
  background-color: #000;
  padding: 10vh 0 50vh 0;
  text-align: center;
  max-height: 1000px;
  background-image: url(../images/box-bg.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover; }
  #box h2 {
    text-align: center;
    font-size: 3vw; }
  #box p {
    width: 50%;
    text-align: center;
    margin: 0 auto;
    color: #fff !important; }
  #box img {
    width: 100%;
    max-width: 500px;
    padding-bottom: 10vh; }

#red-line {
  background-image: url(../images/line.jpg);
  background-size: cover;
  height: 20px; }

#MIL-STD-810G {
  background-image: url(../images/octagon-bg.jpg);
  background-repeat: repeat;
  background-position: bottom;
  background-size: cover;
  position: relative;
  height: 50vw;
  max-height: 1000px;
  overflow: hidden; }
  #MIL-STD-810G .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; }
  #MIL-STD-810G .wording {
    width: 40%;
    padding: 0 5vw;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%); }
  #MIL-STD-810G .picture {
    width: 60%; }
  #MIL-STD-810G h2 {
    font-size: 3vw;
    line-height: 1.2 !important; }
  #MIL-STD-810G p {
    color: #fff !important; }
  #MIL-STD-810G .little-title {
    font-family: "knockout 30", "knockout 28", roboto, noto sans tc, microsoft jhenghei, sans-serif;
    color: #710510 !important;
    font-size: 18px;
    padding-bottom: 30px;
    text-transform: uppercase; }
  #MIL-STD-810G .ag-glitch_item {
    background-size: contain;
    background-position: right; }

#spotlight-multiple-sport {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  overflow: hidden; }
  #spotlight-multiple-sport h2 {
    font-size: 3vw;
    line-height: 1.2 !important; }
  #spotlight-multiple-sport p {
    color: #fff !important; }
  #spotlight-multiple-sport .bg {
    background-size: cover;
    min-height: 700px;
    width: 50%;
    position: relative; }
  #spotlight-multiple-sport .bg video {
    max-width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  #spotlight-multiple-sport img {
    max-width: 28vw;
    position: absolute;
    top: 50%;
    left: 70%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 99; }
  #spotlight-multiple-sport .text {
    position: relative;
    display: block;
    padding: 2em;
    width: 50%; }
    #spotlight-multiple-sport .text div {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%;
      padding: 0 5vw 0 15vw; }

#connect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  background-image: url(../images/octagon-bg.jpg);
  background-repeat: repeat;
  overflow: hidden; }
  #connect h2 {
    font-size: 3vw;
    line-height: 1.2 !important; }
  #connect .bg {
    background-image: url(../images/garmin-connect-tw.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    min-height: 700px;
    width: 60%;
    position: relative; }
  #connect p {
    color: #fff !important; }
  #connect .text {
    position: relative;
    display: block;
    padding: 2em;
    width: 40%; }
    #connect .text div {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%;
      padding: 0 5vw 0 5vw; }

@media (min-width: 2000px) and (max-width: 2560px) {
  #eva-01 .wording .slogan img,
  #eva-02 .wording .slogan img,
  #eva-nerv .wording .slogan img {
    margin: 10px 0;
    max-width: 800px;
    width: 100%; }
  #eva-01 .slogan p,
  #eva-02 .slogan p,
  #eva-nerv .slogan p {
    margin-bottom: 4vw;
    font-size: 1.2vw;
    line-height: 1.4 !important;
    width: 100%; }
  #eva-01 .product,
  #eva-02 .product,
  #eva-nerv .product {
    top: 57%; }
  #eva-01 .wording .product-name,
  #eva-02 .wording .product-name,
  #eva-nerv .wording .product-name {
    margin-top: 0; }
  #eva-01 .wording .slogan img {
    margin: 10px 0;
    max-width: 800px;
    width: 100%; }
  #eva-02 .wording .slogan img {
    margin: 10px 0;
    max-width: 700px;
    width: 100%; }
  #eva-nerv .wording .slogan img {
    margin: 10px 0;
    max-width: 500px;
    width: 100%; }
  #hero .wording {
    opacity: 0;
    display: block;
    position: absolute;
    bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    min-height: 100px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0); }
  #MIL-STD-810G {
    height: 90vh;
    max-height: 1200px; }
  #product .picture img {
    position: absolute;
    top: 50%;
    left: 5%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    max-width: 1000px; } }

@media (max-width: 1800px) {
  #MIL-STD-810G {
    background-image: url(../images/octagon-bg.jpg);
    background-repeat: repeat;
    background-position: bottom;
    background-size: cover;
    position: relative;
    height: 50vw;
    max-height: 1000px; } }

@media (max-width: 1680px) {
  #hero .slogan {
    top: 30%;
    left: 46vw; }
  #product .picture img {
    width: 50%;
    top: 53%;
    max-width: 900px; }
  #product .wording {
    top: 53%; }
  #eva-01 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    #eva-01 .product {
      right: 0; }
      #eva-01 .product img {
        width: 85%;
        margin-left: 50px; }
    #eva-01 .wording h2 {
      font-size: 3vw;
      line-height: 1.2 !important; 
      margin-top: 6vw; }
    #eva-01 .wording .slogan p {
      font-size: 1.4vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 10vh; }
  #eva-02 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    #eva-02 .product {
      left: 3%; }
      #eva-02 .product img {
        width: 85%;
        margin-right: 50px; }
    #eva-02 .wording h2 {
      font-size: 3vw;
      line-height: 1.2 !important;
      margin-top: 6vw; }
    #eva-02 .wording .slogan p {
      font-size: 1.4vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 10vh; }
    #eva-02 .wording .product-name {
      margin-top: 0; }
  #eva-nerv {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    #eva-nerv .product {
      right: 0; }
      #eva-nerv .product img {
        width: 85%;
        margin-left: 50px; }
    #eva-nerv .wording h2 {
      font-size: 3vw;
      line-height: 1.2 !important;
      margin-top: 100px;
      margin-top: 6vw; }
    #eva-nerv .wording .slogan p {
      font-size: 1.4vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 10vh; }
    #eva-nerv .wording .product-name {
      margin-top: 0; }
    #eva-nerv .wording .product-name p {
      color: #fff !important;
      width: 80%; }
  #MIL-STD-810G {
    height: 50vw;
    max-height: 1000px; }
  .ag-glitch_item {
    background-size: contain; } }

@media (max-width: 1440px) {
  #hero .slogan {
    left: 46vw; }
  #hero .wording {
    min-height: 200px; }
  #product .little-title {
    padding-bottom: 20px; }
  #product .wording {
    top: 57%; }
  #eva-01 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    #eva-01 .product {
      top: 72%; }
      #eva-01 .product img {
        width: 33vw;
        margin-left: 15%; }
    #eva-01 .wording .slogan img {
      width: 60%; }
    #eva-01 .wording .slogan p {
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 4vh; }
    #eva-01 .wording .product-name {
      margin-top: 5vw; }
    #eva-01 .wording .product-name p {
      line-height: 1.4 !important; }
    #eva-01 .wording p {
      width: 70%; }
  #eva-02 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    #eva-02 .product {
      top: 72%; }
      #eva-02 .product img {
        width: 33vw;
        margin-right: 15%; }
    #eva-02 .wording .slogan img {
      width: 60%; }
    #eva-02 .wording .slogan p {
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 4vh; }
    #eva-02 .wording .product-name {
      margin-top: 5vw; }
    #eva-02 .wording .product-name p {
      line-height: 1.4 !important; }
    #eva-02 .wording p {
      width: 70%; }
  #eva-nerv {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    #eva-nerv .product {
      top: 72%; }
      #eva-nerv .product img {
        width: 33vw;
        margin-left: 18%; }
    #eva-nerv .wording .slogan img {
      width: 60%; }
    #eva-nerv .wording .slogan p {
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 4vh; }
    #eva-nerv .wording .product-name p {
      color: #fff !important;
      width: 82%;
      line-height: 1.4 !important; }
    #eva-nerv .wording .product-name {
      margin-top: 1vw; }
    #eva-nerv .wording p {
      width: 68%; }
  #MIL-STD-810GP {
    height: 50vw; }
  .ag-glitch_item {
    background-size: contain; } }

@media (max-width: 1368px) {
  #hero .slogan {
    top: 23%;
    max-width: 60px; }
  #hero .kv {
    background-position: center 85vw;
    background-size: 108%; }
  #hero .wording {
    min-height: 170px; }
  .btn-size-default {
    font-size: 14px !important; }
  #product .little-title {
    padding-bottom: 5px; }
  #eva-01 {
    height: 110vh;
    max-height: 1000px; }
    #eva-01 .wording .slogan img {
      padding-top: 10vh;
      width: 50%; }
    #eva-01 .wording .slogan p {
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 5vh; }
    #eva-01 .product img {
      width: 30vw;
      margin-left: 24%; }
    #eva-01 .wording h2 {
      font-size: 3vw;
      line-height: 1.2 !important; }
    #eva-01 .wording p {
      width: 70%; }
  #eva-02 {
    height: 110vh;
    max-height: 1000px; }
    #eva-02 .wording .slogan img {
      padding-top: 10vh;
      width: 50%; }
    #eva-02 .wording .slogan p {
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 5vh; }
    #eva-02 .product img {
      width: 30vw;
      margin-right: 24%; }
    #eva-02 .wording h2 {
      font-size: 3vw;
      line-height: 1.2 !important; }
    #eva-02 .wording p {
      width: 70%; }
  #eva-nerv {
    height: 120vh;
    max-height: 1000px; }
    #eva-nerv .wording .slogan img {
      padding-top: 10vh;
      width: 40%; }
    #eva-nerv .wording .slogan p {
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 5vh; }
    #eva-nerv .product img {
      width: 30vw;
      margin-left: 28%; }
    #eva-nerv .wording h2 {
      font-size: 3vw;
      line-height: 1.2 !important; }
    #eva-nerv .wording p {
      width: 70%; }
  #box {
    padding: 10vh 0 10vh 0; }
    #box img {
      max-width: 450px; } }

@media (max-width: 1280px) {
  #hero .slogan {
    max-width: 63px;
    left: 45vw; }
  #hero .kv {
    background-position: center 92vw;
    background-size: 120%; }
  #hero .wording {
    min-height: 150px; }
  #eva-01 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    #eva-01 .wording .slogan img {
      width: 50%; }
    #eva-01 .wording .slogan p {
      font-size: 1.5vw !important;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 5vh; }
    #eva-01 .wording p {
      font-size: 14px !important;
      width: 65%; }
    #eva-01 .product img {
      width: 33vw;
      margin-left: 30%; }
  #eva-02 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    #eva-02 .wording .slogan img {
      width: 50%; }
    #eva-02 .wording .slogan p {
      font-size: 1.5vw !important;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 5vh; }
    #eva-02 .wording p {
      font-size: 14px !important;
      width: 65%; }
    #eva-02 .product img {
      width: 33vw;
      margin-right: 30%; }
  #eva-nerv {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; }
    #eva-nerv .wording .slogan img {
      width: 50%; }
    #eva-nerv .wording .slogan p {
      font-size: 1.5vw !important;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 5vh; }
    #eva-nerv .wording p {
      font-size: 14px !important;
      width: 60%; }
    #eva-nerv .wording .product-name p {
      width: 60%; }
    #eva-nerv .product img {
      width: 33vw;
      margin-left: 30%; }
  #MIL-STD-810G .ag-glitch_item {
    background-size: contain; } }

@media (min-width: 1200px) and (max-width: 1279px) {
  #hero .slogan {
    max-width: 63px;
    left: 45vw; }
  #hero .kv {
    background-position: center 94vw; }
  #hero .wording {
    min-height: 150px; }
  #MIL-STD-810G {
    height: 50vw; }
  #MIL-STD-810G .little-title {
    padding-bottom: 10px;
    text-transform: uppercase; }
  #MIL-STD-810G .wording {
    width: 40%;
    padding: 0 3vw;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%); } }

@media (min-width: 1025px) and (max-width: 1199px) {
  #hero .slogan {
    max-width: 55px;
    top: 18%;
    left: 45vw; }
  #hero .kv {
    background-position: center 90vw; }
  #hero .wording {
    min-height: 150px; }
  #eva-01 {
    height: 100vh;
    max-height: 800px; }
    #eva-01 .product img {
      width: 33vw;
      margin-left: 39%; }
    #eva-01 .wording .slogan p {
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 10vh; }
    #eva-01 .wording .product-name {
      margin-top: 9vw; }
    #eva-01 .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 0vh;
      font-size: 2vw !important; }
  #eva-02 {
    height: 100vh;
    max-height: 800px; }
    #eva-02 .product img {
      width: 33vw;
      margin-right: 39%; }
    #eva-02 .wording .slogan p {
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 10vh; }
    #eva-02 .wording .product-name {
      margin-top: 9vw; }
    #eva-02 .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 0vh;
      font-size: 2vw !important; }
  #eva-nerv {
    height: 100vh;
    max-height: 800px; }
    #eva-nerv .product img {
      width: 33vw;
      margin-left: 39%; }
    #eva-nerv .wording .slogan p {
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 10vh; }
    #eva-nerv .wording .product-name {
      margin-top: 9vw; }
    #eva-nerv .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 0vh;
      font-size: 2vw !important; }
  #MIL-STD-810G {
    height: 50vw;
    max-height: 1000px; }
  #MIL-STD-810Gp {
    font-size: 14px; }
  #MIL-STD-810G .little-title {
    padding-bottom: 10px;
    text-transform: uppercase; }
  #MIL-STD-810G .ag-glitch_item {
    background-size: contain;
    background-position: right; }
  #MIL-STD-810G .wording {
    width: 40%;
    padding: 0 1vw; } }

@media (max-width: 1024px) {
  #hero {
    height: 80vw;
    max-height: 1200px; }
    #hero .slogan {
      top: 24%;
      max-width: 55px; }
    #hero .kv {
      background-position: center 10%;
      background-size: 120%; }
    #hero .wording {
      min-height: 120px; }
  #product {
    background-image: url(../images/product-bg-m.jpg);
    height: 150vw; }
    #product h2 {
      font-size: 5vw;
      line-height: 1.2 !important; }
    #product .wrapper {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
    #product .picture img {
      width: 80%;
      position: absolute;
      top: 40%;
      left: 50%;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(-50%, -50%); }
    #product .wording {
      width: 100%;
      text-align: center;
      top: 75%; }
  #eva-01 {
    background-image: url(../images/eva-m-01-bg.jpg);
    background-size: 100%;
    height: 220vw;
    max-height: 1400px; }
    #eva-01 .product {
      display: none; }
    #eva-01 .wording h2 {
      font-size: 5vw; }
    #eva-01 .wording p {
      width: 100%;
      font-size: 1rem !important; }
    #eva-01 .wording .product-name {
      height: 80vw; }
    #eva-01 .wording .slogan {
      height: 80vw; }
    #eva-01 .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 30vw;
      font-size: 2.2vw !important; }
    #eva-01 .wording .slogan img {
      width: 70%; }
  #eva-02 {
    background-image: url(../images/eva-m-02-bg.jpg);
    background-size: 100%;
    height: 220vw;
    max-height: 1400px; }
    #eva-02 .product {
      display: none; }
    #eva-02 .wording h2 {
      font-size: 5vw; }
    #eva-02 .wording p {
      width: 100%;
      font-size: 1rem !important; }
    #eva-02 .wording .product-name {
      height: 80vw; }
    #eva-02 .wording .slogan {
      height: 80vw; }
    #eva-02 .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 30vw;
      font-size: 2.2vw !important; }
    #eva-02 .wording .slogan img {
      width: 70%; }
  #eva-nerv {
    background-image: url(../images/eva-m-03-bg.jpg);
    background-size: 100%;
    height: 220vw;
    max-height: 1400px; }
    #eva-nerv .product {
      display: none; }
    #eva-nerv .wording h2 {
      font-size: 5vw; }
    #eva-nerv .wording p {
      width: 100%;
      font-size: 1rem !important; }
    #eva-nerv .wording .product-name {
      height: 80vw; }
    #eva-nerv .wording .slogan {
      height: 80vw; }
    #eva-nerv .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 30vw;
      font-size: 2.2vw !important; }
    #eva-nerv .wording .slogan img {
      width: 70%; }
    #eva-nerv .wording .product-name p {
      width: 100%; }
  #box p {
    width: 90%; }
  #box h2 {
    text-align: center;
    font-size: 5vw; }
  #box img {
    padding-bottom: 0vh; }
  #watch-features .bg {
    width: 100%;
    height: 40vw;
    /* min-height: 700px; */
    max-height: 100%;
    background-image: url(../images/watch-features-m.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover; }
  #MIL-STD-810G {
    height: 200vw;
    max-height: 1390px; }
    #MIL-STD-810G h2 {
      font-size: 5vw;
      line-height: 1.2 !important; }
    #MIL-STD-810G .wrapper {
      display: block;
      -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column; }
    #MIL-STD-810G .wording {
      width: 100%;
      padding: 5vw;
      position: relative;
      text-align: center;
      top: 0;
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0); }
    #MIL-STD-810G .picture {
      position: relative;
      width: 100%;
      height: 64vh; }
    #MIL-STD-810G .ag-glitch_item {
      background-size: contain; }
  #spotlight-multiple-sport {
    display: block; }
    #spotlight-multiple-sport .bg {
      background-size: cover;
      min-height: 500px;
      width: 80%;
      position: relative; }
    #spotlight-multiple-sport .text {
      position: relative;
      display: block;
      padding: 12vh;
      width: 100%;
      text-align: center; }
      #spotlight-multiple-sport .text div {
        padding: 5vw 50px 15vw 50px; }
    #spotlight-multiple-sport h2 {
      font-size: 5vw; }
    #spotlight-multiple-sport img {
      max-width: 35vw;
      position: absolute;
      top: 50%;
      left: 80%; }
  #connect {
    display: block;
    height: auto; }
    #connect .text {
      position: relative;
      display: block;
      padding: 12vh 5vh;
      text-align: center;
      width: 100%; }
    #connect h2 {
      font-size: 5vw; }
    #connect .bg {
      background-image: url(../images/garmin-connect-tw.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      min-height: 600px;
      width: 100%; }
  #MIL-STD-810G .picture {
    position: relative;
    width: 100%;
    height: 100vw; } }

@media (min-width: 769px) and (max-width: 1023px) {
  #hero .kv {
    background-position: center 3%;
    background-size: 129%; }
  #MIL-STD-810G {
    height: 235vw;
    max-height: 1210px; }
  #MIL-STD-810G .ag-glitch_item {
    background-size: cover; }
  #MIL-STD-810G {
    height: auto;
    max-height: 1300px; }
  #MIL-STD-810G .picture {
    position: relative;
    width: 100%;
    height: 87vw; } }

@media (max-width: 768px) {
  #hero .slogan {
    top: 18%;
    max-width: 40px;
    left: 46vw; }
  #hero .kv {
    background-size: 115%;
    background-position: center 7vw; }
  #hero .wording {
    min-height: 100px; }
  #eva-01,
  #eva-02,
  #eva-nerv {
    max-height: 1150px; }
    #eva-01 .wording .slogan p,
    #eva-02 .wording .slogan p,
    #eva-nerv .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 30vw;
      font-size: 3vw !important; }
  #eva-nerv .wording .product-name {
    margin-top: 14vw; }
  #connect .bg {
    min-height: 400px;
    width: 100%; }
  #spotlight-multiple-sport .text {
    padding: 0; }
  #spotlight-multiple-sport .text div {
    position: relative;
    margin: 0 auto;
    top: auto;
    left: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 100%; }
  #connect .text div {
    position: relative;
    margin: 0 auto;
    top: auto;
    left: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 100%; }
  #MIL-STD-810G {
    height: auto;
    max-height: 1200px; } }

@media (min-width: 602px) and (max-width: 767px) {
  #hero .slogan {
    top: 13vw;
    max-width: 32px; }
  #hero .kv {
    background-size: 130%;
    background-position: center 7vw; }
  #hero .wording {
    min-height: 63px; }
  #product {
    height: 175vw; }
  #eva-01,
  #eva-02,
  #eva-nerv {
    height: 220vw;
    max-height: 1000px; }
    #eva-01 .wording .product-name,
    #eva-02 .wording .product-name,
    #eva-nerv .wording .product-name {
      height: 100vw;
      margin-top: 10vw; }
    #eva-01 .wording p,
    #eva-02 .wording p,
    #eva-nerv .wording p {
      width: 90%; }
    #eva-01 .wording .slogan p,
    #eva-02 .wording .slogan p,
    #eva-nerv .wording .slogan p {
      font-size: 1.2vw;
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 8vw; }
    #eva-01 .wording .slogan img,
    #eva-02 .wording .slogan img,
    #eva-nerv .wording .slogan img {
      padding-top: 14vw; }
  #eva-nerv .wording .product-name p {
    width: 80%; }
  #MIL-STD-810G .picture {
    position: relative;
    width: 100%;
    height: 83vw; }
  #MIL-STD-810G .ag-glitch_item {
    background-size: contain;
    background-position: center; } }

@media (min-width: 500px) and (max-width: 600px) {
  #hero .slogan {
    top: 2vh;
    max-width: 32px; }
  #hero .kv {
    background-size: 130%;
    background-position: center 7vw; }
  #hero .wording {
    min-height: 63px; }
  #product {
    height: 175vw; }
  #eva-01,
  #eva-02,
  #eva-nerv {
    height: 220vw;
    max-height: 1000px; }
    #eva-01 .wording .product-name,
    #eva-02 .wording .product-name,
    #eva-nerv .wording .product-name {
      height: 100vw; }
    #eva-01 .wording .product-name,
    #eva-02 .wording .product-name,
    #eva-nerv .wording .product-name {
      height: 100vw;
      margin-top: 20vw; }
    #eva-01 .wording p,
    #eva-02 .wording p,
    #eva-nerv .wording p {
      width: 90%; }
    #eva-01 .wording .slogan p,
    #eva-02 .wording .slogan p,
    #eva-nerv .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      margin-bottom: 10vw;
      font-size: 4.5vw !important; }
  #eva-nerv .wording .product-name p {
    width: 80%; }
  #MIL-STD-810G .ag-glitch_item {
    background-size: contain;
    background-position: center; }
  #MIL-STD-810G {
    height: auto;
    max-height: 950px; }
  #MIL-STD-810G .picture {
    position: relative;
    width: 100%;
    height: 100vw; } }

@media (min-width: 480px) {
	.only_sp{
		display: none;;		
	}	
}
@media (max-width: 479px) {
	.only_pc{
		display: none;;		
	}	
  #hero {
    height: 100vw;
    max-height: 1200px; }
    #hero .kv {
      background-size: 152%;
      background-position: center 10vw; }
    #hero .slogan {
      top: 5%;
      left: 45vw;
      max-width: 30px; }
    #hero .wording {
      min-height: 60px; }
  #product {
    height: 315vw; }
  #product h2 {
    font-size: 7vw;
    line-height: 1.2 !important; }
  #product .picture img {
    width: 80%;
    position: absolute;
    top: 32%; }
  #product .little-title {
    padding-bottom: 10px; }
  #product .wording {
    width: 100%;
    text-align: center;
    top: 65%; }
  #eva-01 {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 200vw; }
    #eva-01 .wording h2 {
      font-size: 8vw;
      margin-top: 0; }
    #eva-01 .wording p {
      width: 80%;
      font-size: 14px !important;
      line-height: 1.6 !important; }
    #eva-01 .wording .product-name {
      height: 100vw;
      margin-top: 25vw; }
    #eva-01 .wording .slogan {
      height: 100vw; }
    #eva-01 .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      font-size: 5vw !important;
      margin-bottom: 25vw;
      width: 80%; }
    #eva-01 .wording .slogan img {
      padding-top: 0;
      width: 80%; }
    #eva-01 .wording p {
      width: 80%;
      font-size: .9rem !important; }
  #eva-02 {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 200vw; }
    #eva-02 .wording h2 {
      font-size: 8vw;
      margin-top: 0; }
    #eva-02 .wording p {
      width: 80%;
      font-size: 14px !important;
      line-height: 1.6 !important; }
    #eva-02 .wording .product-name {
      height: 100vw;
      margin-top: 25vw; }
    #eva-02 .wording .slogan {
      height: 100vw; }
    #eva-02 .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      font-size: 5vw !important;
      margin-bottom: 25vw;
      width: 80%; }
    #eva-02 .wording .slogan img {
      padding-top: 0;
      width: 80%; }
    #eva-02 .wording p {
      width: 80%;
      font-size: .9rem !important; }
  #eva-nerv {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 220vw; }
    #eva-nerv .wording h2 {
      font-size: 8vw;
      margin-top: 0; }
    #eva-nerv .wording p {
      width: 80%;
      font-size: 14px !important;
      line-height: 1.6 !important; }
    #eva-nerv .wording .product-name {
      height: 100vw;
      margin-top: 40vw; }
    #eva-nerv .wording .product-name p {
      width: 92%; }
    #eva-nerv .wording .slogan {
      height: 100vw; }
    #eva-nerv .wording .slogan p {
      line-height: 1.4 !important;
      width: 100%;
      font-size: 5vw !important;
      margin-bottom: 6vw;
      width: 80%; }
    #eva-nerv .wording .slogan img {
      padding-top: 0;
      width: 60%; }
    #eva-nerv .wording p {
      width: 80%;
      font-size: .9rem !important; }
  #box h2 {
    text-align: center;
    font-size: 8vw; }
  #box img {
    max-width: 250px; }
  #MIL-STD-810G {
    height: auto;
    max-height: 1390px; }
    #MIL-STD-810G h2 {
      font-size: 8vw;
      line-height: 1.2 !important;
      margin-top: 30px; }
    #MIL-STD-810G .picture {
      position: relative;
      width: 100%;
      height: 85vw; }
  #spotlight-multiple-sport h2 {
    font-size: 8vw; }
  #spotlight-multiple-sport .bg {
    background-size: cover;
    min-height: 300px;
    width: 100%;
    position: relative; }
  #spotlight-multiple-sport img {
    max-width: 35vw;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  #spotlight-multiple-sport .bg video {
    max-width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  #spotlight-multiple-sport .text {
    position: relative;
    display: block;
    padding: 0;
    min-height: 300px;
    width: 100%;
    text-align: center; }
  #connect h2 {
    font-size: 8vw; }
  #connect .text {
    position: relative;
    display: block;
    padding: 12vh 5vh 0 5vh;
    min-height: 350px;
    text-align: center;
    width: 100%; }
  #connect .bg {
    min-height: 300px;
    width: 100%; } }

@media (max-width: 411px) {
  #eva-01 .btn-white-empty,
  #eva-02 .btn-white-empty,
  #eva-nerv .btn-white-empty {
    max-width: 250px; } }

@media (max-width: 375px) {
  #hero .slogan {
    top: 4%;
    max-width: 30px; }
  #eva-01,
  #eva-02,
  #eva-nerv {
    height: 220vw; }
    #eva-01 .wording .product-name,
    #eva-02 .wording .product-name,
    #eva-nerv .wording .product-name {
      margin-top: 25vw; }
    #eva-01 .wording .slogan,
    #eva-02 .wording .slogan,
    #eva-nerv .wording .slogan {
      height: 110vw; }
    #eva-01 .btn-white-empty,
    #eva-02 .btn-white-empty,
    #eva-nerv .btn-white-empty {
      max-width: 250px; }
  #eva-nerv .wording .slogan img {
    width: 60%; }
  #product .wording {
    width: 100%;
    text-align: center;
    top: 71%; } }

@media (max-width: 360px) {
  #hero .slogan {
    top: 1%;
    max-width: 30px; }
  #product {
    height: 330vw; }
  #product .wording {
    width: 100%;
    text-align: center;
    top: 71%; }
  #eva-01 .wording .slogan img,
  #eva-02 .wording .slogan img,
  #eva-nerv .wording .slogan img {
    padding-top: 20vw;
    width: 80%; }
  #eva-01 .wording .slogan p,
  #eva-02 .wording .slogan p,
  #eva-nerv .wording .slogan p {
    font-size: 1.2vw;
    line-height: 1.4 !important;
    width: 80%;
    margin-bottom: 10vw; }
  #eva-nerv .wording .product-name p {
    width: 96%; }
  #eva-nerv .wording .slogan img {
    width: 60%; }
  #spotlight-multiple-sport .text {
    min-height: 400px; } }

/* GLITCH文字動畫部分 */
#app {
  background: #0a0a0a;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 10, 10, 0.6)), to(rgba(0, 0, 0, 0.9))), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url("https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7118759521e3184778a3b5e010e202c6");
  background: -webkit-linear-gradient(rgba(10, 10, 10, 0.6), rgba(0, 0, 0, 0.9)), -webkit-repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url("https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7118759521e3184778a3b5e010e202c6");
  background: -o-linear-gradient(rgba(10, 10, 10, 0.6), rgba(0, 0, 0, 0.9)), -o-repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url("https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7118759521e3184778a3b5e010e202c6");
  background: linear-gradient(rgba(10, 10, 10, 0.6), rgba(0, 0, 0, 0.9)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url("https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7118759521e3184778a3b5e010e202c6");
  background-size: cover;
  background-position: center;
  z-index: 1; }

.sub {
  color: #64dcdc;
  letter-spacing: 1em; }

.glitch {
  position: relative;
  color: white;
  font-size: 4em;
  letter-spacing: .5em;
  animation: glitch-skew 1s infinite linear alternate-reverse; }
  .glitch::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    /* Creates an initial clip for our glitch. This works in
        a typical top,right,bottom,left fashion and creates a mask
        to only show a certain part of the glitch at a time. */
    clip: rect(44px, 450px, 56px, 0);
    /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
        with an alternating animation to keep things fresh. */
    animation: glitch-anim 5s infinite linear alternate-reverse; }
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse; }

@-webkit-keyframes glitch-anim {
  0% {
    clip: rect(78px, 9999px, 14px, 0);
    -webkit-transform: skew(0.63deg);
    transform: skew(0.63deg); }
  5% {
    clip: rect(77px, 9999px, 93px, 0);
    -webkit-transform: skew(0.62deg);
    transform: skew(0.62deg); }
  10% {
    clip: rect(58px, 9999px, 75px, 0);
    -webkit-transform: skew(0.97deg);
    transform: skew(0.97deg); }
  15% {
    clip: rect(66px, 9999px, 51px, 0);
    -webkit-transform: skew(0.8deg);
    transform: skew(0.8deg); }
  20% {
    clip: rect(21px, 9999px, 69px, 0);
    -webkit-transform: skew(0.39deg);
    transform: skew(0.39deg); }
  25% {
    clip: rect(79px, 9999px, 29px, 0);
    -webkit-transform: skew(0.82deg);
    transform: skew(0.82deg); }
  30% {
    clip: rect(64px, 9999px, 44px, 0);
    -webkit-transform: skew(0.02deg);
    transform: skew(0.02deg); }
  35% {
    clip: rect(18px, 9999px, 95px, 0);
    -webkit-transform: skew(0.66deg);
    transform: skew(0.66deg); }
  40% {
    clip: rect(52px, 9999px, 92px, 0);
    -webkit-transform: skew(0.07deg);
    transform: skew(0.07deg); }
  45% {
    clip: rect(28px, 9999px, 78px, 0);
    -webkit-transform: skew(0.53deg);
    transform: skew(0.53deg); }
  50% {
    clip: rect(9px, 9999px, 74px, 0);
    -webkit-transform: skew(0.92deg);
    transform: skew(0.92deg); }
  55% {
    clip: rect(79px, 9999px, 30px, 0);
    -webkit-transform: skew(0.96deg);
    transform: skew(0.96deg); }
  60% {
    clip: rect(73px, 9999px, 62px, 0);
    -webkit-transform: skew(0.77deg);
    transform: skew(0.77deg); }
  65% {
    clip: rect(25px, 9999px, 79px, 0);
    -webkit-transform: skew(0.94deg);
    transform: skew(0.94deg); }
  70% {
    clip: rect(76px, 9999px, 46px, 0);
    -webkit-transform: skew(0.47deg);
    transform: skew(0.47deg); }
  75% {
    clip: rect(21px, 9999px, 66px, 0);
    -webkit-transform: skew(0.26deg);
    transform: skew(0.26deg); }
  80% {
    clip: rect(99px, 9999px, 88px, 0);
    -webkit-transform: skew(0.85deg);
    transform: skew(0.85deg); }
  85% {
    clip: rect(88px, 9999px, 49px, 0);
    -webkit-transform: skew(0.34deg);
    transform: skew(0.34deg); }
  90% {
    clip: rect(45px, 9999px, 95px, 0);
    -webkit-transform: skew(0.85deg);
    transform: skew(0.85deg); }
  95% {
    clip: rect(72px, 9999px, 70px, 0);
    -webkit-transform: skew(0.71deg);
    transform: skew(0.71deg); }
  100% {
    clip: rect(72px, 9999px, 48px, 0);
    -webkit-transform: skew(0.89deg);
    transform: skew(0.89deg); } }

@keyframes glitch-anim {
  0% {
    clip: rect(78px, 9999px, 14px, 0);
    -webkit-transform: skew(0.63deg);
    transform: skew(0.63deg); }
  5% {
    clip: rect(77px, 9999px, 93px, 0);
    -webkit-transform: skew(0.62deg);
    transform: skew(0.62deg); }
  10% {
    clip: rect(58px, 9999px, 75px, 0);
    -webkit-transform: skew(0.97deg);
    transform: skew(0.97deg); }
  15% {
    clip: rect(66px, 9999px, 51px, 0);
    -webkit-transform: skew(0.8deg);
    transform: skew(0.8deg); }
  20% {
    clip: rect(21px, 9999px, 69px, 0);
    -webkit-transform: skew(0.39deg);
    transform: skew(0.39deg); }
  25% {
    clip: rect(79px, 9999px, 29px, 0);
    -webkit-transform: skew(0.82deg);
    transform: skew(0.82deg); }
  30% {
    clip: rect(64px, 9999px, 44px, 0);
    -webkit-transform: skew(0.02deg);
    transform: skew(0.02deg); }
  35% {
    clip: rect(18px, 9999px, 95px, 0);
    -webkit-transform: skew(0.66deg);
    transform: skew(0.66deg); }
  40% {
    clip: rect(52px, 9999px, 92px, 0);
    -webkit-transform: skew(0.07deg);
    transform: skew(0.07deg); }
  45% {
    clip: rect(28px, 9999px, 78px, 0);
    -webkit-transform: skew(0.53deg);
    transform: skew(0.53deg); }
  50% {
    clip: rect(9px, 9999px, 74px, 0);
    -webkit-transform: skew(0.92deg);
    transform: skew(0.92deg); }
  55% {
    clip: rect(79px, 9999px, 30px, 0);
    -webkit-transform: skew(0.96deg);
    transform: skew(0.96deg); }
  60% {
    clip: rect(73px, 9999px, 62px, 0);
    -webkit-transform: skew(0.77deg);
    transform: skew(0.77deg); }
  65% {
    clip: rect(25px, 9999px, 79px, 0);
    -webkit-transform: skew(0.94deg);
    transform: skew(0.94deg); }
  70% {
    clip: rect(76px, 9999px, 46px, 0);
    -webkit-transform: skew(0.47deg);
    transform: skew(0.47deg); }
  75% {
    clip: rect(21px, 9999px, 66px, 0);
    -webkit-transform: skew(0.26deg);
    transform: skew(0.26deg); }
  80% {
    clip: rect(99px, 9999px, 88px, 0);
    -webkit-transform: skew(0.85deg);
    transform: skew(0.85deg); }
  85% {
    clip: rect(88px, 9999px, 49px, 0);
    -webkit-transform: skew(0.34deg);
    transform: skew(0.34deg); }
  90% {
    clip: rect(45px, 9999px, 95px, 0);
    -webkit-transform: skew(0.85deg);
    transform: skew(0.85deg); }
  95% {
    clip: rect(72px, 9999px, 70px, 0);
    -webkit-transform: skew(0.71deg);
    transform: skew(0.71deg); }
  100% {
    clip: rect(72px, 9999px, 48px, 0);
    -webkit-transform: skew(0.89deg);
    transform: skew(0.89deg); } }

@-webkit-keyframes glitch-anim2 {
  0% {
    clip: rect(50px, 9999px, 60px, 0);
    -webkit-transform: skew(0.97deg);
    transform: skew(0.97deg); }
  5% {
    clip: rect(66px, 9999px, 63px, 0);
    -webkit-transform: skew(0.43deg);
    transform: skew(0.43deg); }
  10% {
    clip: rect(87px, 9999px, 31px, 0);
    -webkit-transform: skew(0.08deg);
    transform: skew(0.08deg); }
  15% {
    clip: rect(25px, 9999px, 48px, 0);
    -webkit-transform: skew(0.27deg);
    transform: skew(0.27deg); }
  20% {
    clip: rect(72px, 9999px, 73px, 0);
    -webkit-transform: skew(0.9deg);
    transform: skew(0.9deg); }
  25% {
    clip: rect(27px, 9999px, 31px, 0);
    -webkit-transform: skew(0.66deg);
    transform: skew(0.66deg); }
  30% {
    clip: rect(82px, 9999px, 92px, 0);
    -webkit-transform: skew(0.62deg);
    transform: skew(0.62deg); }
  35% {
    clip: rect(40px, 9999px, 74px, 0);
    -webkit-transform: skew(0.61deg);
    transform: skew(0.61deg); }
  40% {
    clip: rect(13px, 9999px, 15px, 0);
    -webkit-transform: skew(0.08deg);
    transform: skew(0.08deg); }
  45% {
    clip: rect(47px, 9999px, 6px, 0);
    -webkit-transform: skew(0.84deg);
    transform: skew(0.84deg); }
  50% {
    clip: rect(95px, 9999px, 15px, 0);
    -webkit-transform: skew(0.36deg);
    transform: skew(0.36deg); }
  55% {
    clip: rect(84px, 9999px, 49px, 0);
    -webkit-transform: skew(0.77deg);
    transform: skew(0.77deg); }
  60% {
    clip: rect(87px, 9999px, 46px, 0);
    -webkit-transform: skew(0.3deg);
    transform: skew(0.3deg); }
  65% {
    clip: rect(70px, 9999px, 60px, 0);
    -webkit-transform: skew(0.21deg);
    transform: skew(0.21deg); }
  70% {
    clip: rect(67px, 9999px, 16px, 0);
    -webkit-transform: skew(0.03deg);
    transform: skew(0.03deg); }
  75% {
    clip: rect(36px, 9999px, 15px, 0);
    -webkit-transform: skew(0.3deg);
    transform: skew(0.3deg); }
  80% {
    clip: rect(46px, 9999px, 28px, 0);
    -webkit-transform: skew(0.51deg);
    transform: skew(0.51deg); }
  85% {
    clip: rect(29px, 9999px, 57px, 0);
    -webkit-transform: skew(0.13deg);
    transform: skew(0.13deg); }
  90% {
    clip: rect(52px, 9999px, 2px, 0);
    -webkit-transform: skew(0.3deg);
    transform: skew(0.3deg); }
  95% {
    clip: rect(60px, 9999px, 93px, 0);
    -webkit-transform: skew(0.4deg);
    transform: skew(0.4deg); }
  100% {
    clip: rect(87px, 9999px, 100px, 0);
    -webkit-transform: skew(0.14deg);
    transform: skew(0.14deg); } }

@keyframes glitch-anim2 {
  0% {
    clip: rect(50px, 9999px, 60px, 0);
    -webkit-transform: skew(0.97deg);
    transform: skew(0.97deg); }
  5% {
    clip: rect(66px, 9999px, 63px, 0);
    -webkit-transform: skew(0.43deg);
    transform: skew(0.43deg); }
  10% {
    clip: rect(87px, 9999px, 31px, 0);
    -webkit-transform: skew(0.08deg);
    transform: skew(0.08deg); }
  15% {
    clip: rect(25px, 9999px, 48px, 0);
    -webkit-transform: skew(0.27deg);
    transform: skew(0.27deg); }
  20% {
    clip: rect(72px, 9999px, 73px, 0);
    -webkit-transform: skew(0.9deg);
    transform: skew(0.9deg); }
  25% {
    clip: rect(27px, 9999px, 31px, 0);
    -webkit-transform: skew(0.66deg);
    transform: skew(0.66deg); }
  30% {
    clip: rect(82px, 9999px, 92px, 0);
    -webkit-transform: skew(0.62deg);
    transform: skew(0.62deg); }
  35% {
    clip: rect(40px, 9999px, 74px, 0);
    -webkit-transform: skew(0.61deg);
    transform: skew(0.61deg); }
  40% {
    clip: rect(13px, 9999px, 15px, 0);
    -webkit-transform: skew(0.08deg);
    transform: skew(0.08deg); }
  45% {
    clip: rect(47px, 9999px, 6px, 0);
    -webkit-transform: skew(0.84deg);
    transform: skew(0.84deg); }
  50% {
    clip: rect(95px, 9999px, 15px, 0);
    -webkit-transform: skew(0.36deg);
    transform: skew(0.36deg); }
  55% {
    clip: rect(84px, 9999px, 49px, 0);
    -webkit-transform: skew(0.77deg);
    transform: skew(0.77deg); }
  60% {
    clip: rect(87px, 9999px, 46px, 0);
    -webkit-transform: skew(0.3deg);
    transform: skew(0.3deg); }
  65% {
    clip: rect(70px, 9999px, 60px, 0);
    -webkit-transform: skew(0.21deg);
    transform: skew(0.21deg); }
  70% {
    clip: rect(67px, 9999px, 16px, 0);
    -webkit-transform: skew(0.03deg);
    transform: skew(0.03deg); }
  75% {
    clip: rect(36px, 9999px, 15px, 0);
    -webkit-transform: skew(0.3deg);
    transform: skew(0.3deg); }
  80% {
    clip: rect(46px, 9999px, 28px, 0);
    -webkit-transform: skew(0.51deg);
    transform: skew(0.51deg); }
  85% {
    clip: rect(29px, 9999px, 57px, 0);
    -webkit-transform: skew(0.13deg);
    transform: skew(0.13deg); }
  90% {
    clip: rect(52px, 9999px, 2px, 0);
    -webkit-transform: skew(0.3deg);
    transform: skew(0.3deg); }
  95% {
    clip: rect(60px, 9999px, 93px, 0);
    -webkit-transform: skew(0.4deg);
    transform: skew(0.4deg); }
  100% {
    clip: rect(87px, 9999px, 100px, 0);
    -webkit-transform: skew(0.14deg);
    transform: skew(0.14deg); } }

@-webkit-keyframes glitch-skew {
  0% {
    -webkit-transform: skew(-1deg);
    transform: skew(-1deg); }
  10% {
    -webkit-transform: skew(5deg);
    transform: skew(5deg); }
  20% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg); }
  30% {
    -webkit-transform: skew(3deg);
    transform: skew(3deg); }
  40% {
    -webkit-transform: skew(-3deg);
    transform: skew(-3deg); }
  50% {
    -webkit-transform: skew(5deg);
    transform: skew(5deg); }
  60% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg); }
  70% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg); }
  80% {
    -webkit-transform: skew(-1deg);
    transform: skew(-1deg); }
  90% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg); }
  100% {
    -webkit-transform: skew(3deg);
    transform: skew(3deg); } }

@keyframes glitch-skew {
  0% {
    -webkit-transform: skew(-1deg);
    transform: skew(-1deg); }
  10% {
    -webkit-transform: skew(5deg);
    transform: skew(5deg); }
  20% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg); }
  30% {
    -webkit-transform: skew(3deg);
    transform: skew(3deg); }
  40% {
    -webkit-transform: skew(-3deg);
    transform: skew(-3deg); }
  50% {
    -webkit-transform: skew(5deg);
    transform: skew(5deg); }
  60% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg); }
  70% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg); }
  80% {
    -webkit-transform: skew(-1deg);
    transform: skew(-1deg); }
  90% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg); }
  100% {
    -webkit-transform: skew(3deg);
    transform: skew(3deg); } }

/* GLITCH圖片動畫部分 */
.ag-format-container {
  margin: 0 auto;
  position: absolute;
  right: 0;
  height: 100%; }

.ag-glitch_item {
  background-color: transparent;
  background-blend-mode: normal;
  background: url(../images/mil-pic.jpg) no-repeat center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.ag-glitch_item:nth-child(n+2) {
  opacity: 0;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.ag-glitch_item:nth-child(2) {
  background-color: transparent;
  background-blend-mode: normal;
  -webkit-animation-name: glitch-anim-1;
  animation-name: glitch-anim-1; }

.ag-glitch_item:nth-child(3) {
  background-color: transparent;
  background-blend-mode: normal;
  -webkit-animation-name: glitch-anim-2;
  animation-name: glitch-anim-2; }

.ag-glitch_item:nth-child(4) {
  background-color: transparent;
  background-blend-mode: overlay;
  -webkit-animation-name: glitch-anim-3;
  animation-name: glitch-anim-3; }

.ag-glitch_item:nth-child(5) {
  background-color: transparent;
  background-blend-mode: overlay;
  -webkit-animation-name: glitch-anim-flash;
  animation-name: glitch-anim-flash; }

@-webkit-keyframes glitch-anim-1 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(3px, 0, 0);
    transform: translate3d(3px, 0, 0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
  2% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
  4% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
  6% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
  8% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  10% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  12% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  14% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  16% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  18% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  21.9% {
    opacity: 1;
    -webkit-transform: translate3d(3px, 0, 0);
    transform: translate3d(3px, 0, 0); }
  22%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

@keyframes glitch-anim-1 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(3px, 0, 0);
    transform: translate3d(3px, 0, 0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
  2% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
  4% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
  6% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
  8% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  10% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  12% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  14% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  16% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  18% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  21.9% {
    opacity: 1;
    -webkit-transform: translate3d(3px, 0, 0);
    transform: translate3d(3px, 0, 0); }
  22%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

@-webkit-keyframes glitch-anim-2 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(calc(-1 * 3px), 0, 0);
    transform: translate3d(calc(-1 * 3px), 0, 0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); }
  3% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); }
  5% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); }
  7% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
  9% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%); }
  11% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%); }
  13% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); }
  15% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); }
  17% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%); }
  19% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); }
  20% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%); }
  21.9% {
    opacity: 1;
    -webkit-transform: translate3d(calc(-1 * 3px), 0, 0);
    transform: translate3d(calc(-1 * 3px), 0, 0); }
  22%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

@keyframes glitch-anim-2 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(calc(-1 * 3px), 0, 0);
    transform: translate3d(calc(-1 * 3px), 0, 0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); }
  3% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); }
  5% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); }
  7% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
  9% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%); }
  11% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%); }
  13% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); }
  15% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); }
  17% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%); }
  19% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); }
  20% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%); }
  21.9% {
    opacity: 1;
    -webkit-transform: translate3d(calc(-1 * 3px), 0, 0);
    transform: translate3d(calc(-1 * 3px), 0, 0); }
  22%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

@-webkit-keyframes glitch-anim-3 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, calc(-1 * 3px), 0) scale3d(-1, -1, 1);
    transform: translate3d(0, calc(-1 * 3px), 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%); }
  1.5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%); }
  2% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
  2.5% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
  3% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%); }
  5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%); }
  5.5% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%); }
  7% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%); }
  8% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
  9% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%); }
  10.5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%); }
  11% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%); }
  13% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%); }
  14% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%); }
  14.5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%); }
  15% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%); }
  16% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); }
  18% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%); }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%); }
  21.9% {
    opacity: 1;
    -webkit-transform: translate3d(0, calc(-1 * 3px), 0) scale3d(-1, -1, 1);
    transform: translate3d(0, calc(-1 * 3px), 0) scale3d(-1, -1, 1); }
  22%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

@keyframes glitch-anim-3 {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, calc(-1 * 3px), 0) scale3d(-1, -1, 1);
    transform: translate3d(0, calc(-1 * 3px), 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%); }
  1.5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%); }
  2% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
  2.5% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
  3% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%); }
  5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%); }
  5.5% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%); }
  7% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%); }
  8% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
  9% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%); }
  10.5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%); }
  11% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%); }
  13% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%); }
  14% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%); }
  14.5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%); }
  15% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%); }
  16% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); }
  18% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%); }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%); }
  21.9% {
    opacity: 1;
    -webkit-transform: translate3d(0, calc(-1 * 3px), 0) scale3d(-1, -1, 1);
    transform: translate3d(0, calc(-1 * 3px), 0) scale3d(-1, -1, 1); }
  22%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

@-webkit-keyframes glitch-anim-text {
  0% {
    -webkit-transform: translate3d(calc(-1 * 3px), 0, 0) scale3d(-1, -1, 1);
    transform: translate3d(calc(-1 * 3px), 0, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
  2% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  4% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  6% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  7% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  8% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  9% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  9.9% {
    -webkit-transform: translate3d(calc(-1 * 3px), 0, 0) scale3d(-1, -1, 1);
    transform: translate3d(calc(-1 * 3px), 0, 0) scale3d(-1, -1, 1); }
  10%,
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }

@keyframes glitch-anim-text {
  0% {
    -webkit-transform: translate3d(calc(-1 * 3px), 0, 0) scale3d(-1, -1, 1);
    transform: translate3d(calc(-1 * 3px), 0, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
  2% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  4% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  6% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  7% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  8% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  9% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  9.9% {
    -webkit-transform: translate3d(calc(-1 * 3px), 0, 0) scale3d(-1, -1, 1);
    transform: translate3d(calc(-1 * 3px), 0, 0) scale3d(-1, -1, 1); }
  10%,
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }

@-webkit-keyframes glitch-anim-flash {
  0%,
  5% {
    opacity: 0.2;
    -webkit-transform: translate3d(3px, 3px, 0);
    transform: translate3d(3px, 3px, 0); }
  5.5%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes glitch-anim-flash {
  0%,
  5% {
    opacity: 0.2;
    -webkit-transform: translate3d(3px, 3px, 0);
    transform: translate3d(3px, 3px, 0); }
  5.5%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 96%; } }

@media (min-width: 768px) and (max-width: 979px) {
  .ag-format-container {
    width: 750px; } }

@media (min-width: 980px) and (max-width: 1161px) {
  .ag-format-container {
    width: 960px; } }

/* 動畫部分 */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

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

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  to {
    opacity: 1; } }

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

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

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

@-webkit-keyframes fadeInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    opacity: 0;
    transform: translate3d(0, 100%, 0); }
  to {
    -webkit-transform: translateZ(0);
    opacity: 1;
    transform: translateZ(0); } }

@keyframes fadeInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    opacity: 0;
    transform: translate3d(0, 100%, 0); }
  to {
    -webkit-transform: translateZ(0);
    opacity: 1;
    transform: translateZ(0); } }

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

/* Buzz */
@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); } }

@keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); } }

.hvr-buzz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); }

.hvr-buzz:hover,
.hvr-buzz:focus,
.hvr-buzz:active {
  -webkit-animation-name: hvr-buzz;
  animation-name: hvr-buzz;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes shake {
  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }
  50% {
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes shake {
  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }
  50% {
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

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

@-webkit-keyframes flash {
  0%,
  50%,
  to {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }

@keyframes flash {
  0%,
  50%,
  to {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }

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

/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg); }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg); }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg); }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg); }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0); }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0); } }

@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg); }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg); }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg); }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg); }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0); }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0); } }

.hvr-buzz-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); }

.hvr-buzz-out:hover,
.hvr-buzz-out:focus,
.hvr-buzz-out:active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1; }