@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%;
  vertical-align: baseline;
  font: inherit
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}
body {
  overflow: hidden;
  line-height: 1;
  font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
}
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
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box
}
img {
  object-fit: fill;
  object-fit: contain;
  object-fit: scale-down;
  image-rendering: -moz-crisp-edges; /* Firefox        */
  image-rendering: -o-crisp-edges; /* Opera          */
  image-rendering: -webkit-optimize-contrast; /* Safari         */
  image-rendering: optimize-contrast; /* CSS3 Proposed  */
  -ms-interpolation-mode: nearest-neighbor; /* IE8+           */
}
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
::selection {
  background-color: #0089e4;
  color: #fff;
  text-shadow: none
}
::-moz-selection {
  background-color: #0089e4;
  color: #fff;
  text-shadow: none
}
html {
  -webkit-text-size-adjust: none;
  font-family: Arial, Helvetica, "微軟正黑體", sans-serif, Microsoft JhengHei;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, "source-han-sans-traditional", "微軟正黑體", "Microsoft JhengHsans", sans-serif;
}
body {
  font-size: 17px;
  background: url("../images/top_bg_mb.jpg") no-repeat center -240px;
  background-size: contain;
}
/*a{text-decoration:none !important;}*/
.ANT {
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -ms-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s
}
/* ----------電腦版型--------------------------- */
#animation_container, #_preload_div_ {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 26rem;
  bottom: 0;
}
/*閃光*/
/*
.flash1 {
  width: 749px;
  height: 209px;
  display: inline-block;
  background: url("../images/flash2.png") no-repeat;
  top: 0px;
  left: -1200px;
  position: absolute;
  animation-name: flash1-keyframes;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 3s;
  animation-iteration-count: 1;
}
@keyframes flash1-keyframes {
  0% {
    transform: translate(54px, 316px) scale(0) rotateX(48deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  3.7% {
    transform: translate(113.963px, 322.0741px) scale(0.0727) rotateX(46.2222deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  7.41% {
    transform: translate(173.9259px, 328.1481px) scale(0.1427) rotateX(44.4444deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  11.11% {
    transform: translate(233.8889px, 334.2222px) scale(0.2099) rotateX(42.6667deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  14.81% {
    transform: translate(493.8519px, 340.2963px) scale(0.2743) rotateX(40.8889deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  18.52% {
    transform: translate(553.8148px, 346.3704px) scale(0.3361) rotateX(39.1111deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  22.22% {
    transform: translate(513.7778px, 352.4444px) scale(0.3951) rotateX(37.3333deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  25.93% {
    transform: translate(673.7407px, 358.5185px) scale(0.4513) rotateX(35.5556deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  29.63% {
    transform: translate(733.7037px, 364.5926px) scale(0.5048) rotateX(33.7778deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  33.33% {
    transform: translate(893.6667px, 370.6667px) scale(0.5556) rotateX(32deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  37.04% {
    transform: translate(953.6296px, 376.7407px) scale(0.6036) rotateX(30.2222deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  40.74% {
    transform: translate(1013.5926px, 382.8148px) scale(0.6488) rotateX(28.4444deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  44.44% {
    transform: translate(1173.5556px, 388.8889px) scale(0.6914) rotateX(26.6667deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  48.15% {
    transform: translate(1233.5185px, 394.963px) scale(0.7311) rotateX(24.8889deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  51.85% {
    transform: translate(1293.4815px, 401.037px) scale(0.7682) rotateX(23.1111deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  55.56% {
    transform: translate(1353.4444px, 407.1111px) scale(0.8025) rotateX(21.3333deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  59.26% {
    transform: translate(1400.4074px, 413.1852px) scale(0.834) rotateX(19.5556deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  62.96% {
    transform: translate(1573.3704px, 419.2593px) scale(0.8628) rotateX(17.7778deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  66.67% {
    transform: translate(1533.3333px, 425.3333px) scale(0.8889) rotateX(16deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  70.37% {
    transform: translate(1693.2963px, 431.4074px) scale(0.9122) rotateX(14.2222deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  74.07% {
    transform: translate(1653.2593px, 437.4815px) scale(0.9328) rotateX(12.4444deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  77.78% {
    transform: translate(1813.2222px, 443.5556px) scale(0.9506) rotateX(10.6667deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  81.48% {
    transform: translate(2073.1852px, 449.6296px) scale(0.9657) rotateX(8.8889deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  85.19% {
    transform: translate(2133.1481px, 455.7037px) scale(0.9781) rotateX(7.1111deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  88.89% {
    transform: translate(2193.1111px, 461.7778px) scale(0.9877) rotateX(5.3333deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  92.59% {
    transform: translate(2353.0741px, 467.8519px) scale(0.9945) rotateX(3.5556deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  96.3% {
    transform: translate(2500.037px, 473.9259px) scale(0.9986) rotateX(1.7778deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  100% {
    transform: translate(3000px, 480px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
}
.flash2 {
  width: 749px;
  height: 209px;
  display: inline-block;
  background: url("../images/flash2.png") no-repeat;
  top: 250px;
  left: -1200px;
  position: absolute;
  animation-name: flash2-keyframes;
  animation-duration: 1100ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: 0 0;
  animation-delay: 4s;
  animation-iteration-count: 1;
}
@keyframes flash2-keyframes {
  0% {
    transform: translate(30px, 692px) scale(0) rotateX(50deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  3.7% {
    transform: translate(42.504px, 676.8889px) scale(0.107) rotateX(48.1481deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  7.41% {
    transform: translate(57.4156px, 661.7778px) scale(0.2062) rotateX(46.2963deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  11.11% {
    transform: translate(74.6959px, 646.6667px) scale(0.2977) rotateX(44.4444deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  14.81% {
    transform: translate(94.3135px, 631.5556px) scale(0.3819) rotateX(42.5926deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  18.52% {
    transform: translate(116.2438px, 616.4444px) scale(0.459) rotateX(40.7407deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  22.22% {
    transform: translate(140.4698px, 601.3333px) scale(0.5295) rotateX(38.8889deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  25.93% {
    transform: translate(166.9824px, 586.2222px) scale(0.5936) rotateX(37.037deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  29.63% {
    transform: translate(195.7819px, 571.1111px) scale(0.6515) rotateX(35.1852deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  33.33% {
    transform: translate(226.879px, 556px) scale(0.7037) rotateX(33.3333deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  37.04% {
    transform: translate(260.2973px, 540.8889px) scale(0.7504) rotateX(31.4815deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  40.74% {
    transform: translate(296.0759px, 525.7778px) scale(0.7919) rotateX(29.6296deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  44.44% {
    transform: translate(340.5476px, 510.6667px) scale(0.8285) rotateX(27.7778deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  48.15% {
    transform: translate(383.4857px, 495.5556px) scale(0.8606) rotateX(25.9259deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  51.85% {
    transform: translate(429.5749px, 480.4444px) scale(0.8884) rotateX(24.0741deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  55.56% {
    transform: translate(579.041px, 465.3333px) scale(0.9122) rotateX(22.2222deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  59.26% {
    transform: translate(632.1631px, 450.2222px) scale(0.9324) rotateX(20.3704deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  62.96% {
    transform: translate(789.29px, 435.1111px) scale(0.9492) rotateX(18.5185deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  66.67% {
    transform: translate(800.8636px, 420px) scale(0.963) rotateX(16.6667deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  70.37% {
    transform: translate(1000.4546px, 404.8889px) scale(0.974) rotateX(14.8148deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  74.07% {
    transform: translate(1100.8198px, 389.7778px) scale(0.9826) rotateX(12.963deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  77.78% {
    transform: translate(1200.9981px, 374.6667px) scale(0.989) rotateX(11.1111deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  81.48% {
    transform: translate(1500.4821px, 359.5556px) scale(0.9936) rotateX(9.2593deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  85.19% {
    transform: translate(2054.5517px, 344.4444px) scale(0.9967) rotateX(7.4074deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  88.89% {
    transform: translate(2166.9935px, 329.3333px) scale(0.9986) rotateX(5.5556deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  92.59% {
    transform: translate(2300.8986px, 314.2222px) scale(0.9996) rotateX(3.7037deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  96.3% {
    transform: translate(2500.4312px, 299.1111px) scale(0.9999) rotateX(1.8519deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  100% {
    transform: translate(3000px, 284px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
}
.flash3 {
  width: 749px;
  height: 209px;
  display: inline-block;
  background: url("../images/flash3.png") no-repeat;
  top: -300px;
  left: -1200px;
  position: absolute;
  animation-name: flash3-keyframes;
  animation-duration: 1200ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: 0 0;
  animation-delay: 6s;
  animation-iteration-count: 1;
}
@keyframes flash3-keyframes {
  0% {
    transform: translate(30px, 692px) scale(0) rotateX(50deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  3.7% {
    transform: translate(42.504px, 676.8889px) scale(0.107) rotateX(48.1481deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  7.41% {
    transform: translate(57.4156px, 661.7778px) scale(0.2062) rotateX(46.2963deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  11.11% {
    transform: translate(74.6959px, 646.6667px) scale(0.2977) rotateX(44.4444deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  14.81% {
    transform: translate(94.3135px, 631.5556px) scale(0.3819) rotateX(42.5926deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  18.52% {
    transform: translate(116.2438px, 616.4444px) scale(0.459) rotateX(40.7407deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  22.22% {
    transform: translate(140.4698px, 601.3333px) scale(0.5295) rotateX(38.8889deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  25.93% {
    transform: translate(166.9824px, 586.2222px) scale(0.5936) rotateX(37.037deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  29.63% {
    transform: translate(195.7819px, 571.1111px) scale(0.6515) rotateX(35.1852deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  33.33% {
    transform: translate(226.879px, 556px) scale(0.7037) rotateX(33.3333deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  37.04% {
    transform: translate(260.2973px, 540.8889px) scale(0.7504) rotateX(31.4815deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  40.74% {
    transform: translate(296.0759px, 525.7778px) scale(0.7919) rotateX(29.6296deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  44.44% {
    transform: translate(340.5476px, 510.6667px) scale(0.8285) rotateX(27.7778deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  48.15% {
    transform: translate(383.4857px, 495.5556px) scale(0.8606) rotateX(25.9259deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  51.85% {
    transform: translate(429.5749px, 480.4444px) scale(0.8884) rotateX(24.0741deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  55.56% {
    transform: translate(579.041px, 465.3333px) scale(0.9122) rotateX(22.2222deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  59.26% {
    transform: translate(632.1631px, 450.2222px) scale(0.9324) rotateX(20.3704deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  62.96% {
    transform: translate(789.29px, 435.1111px) scale(0.9492) rotateX(18.5185deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  66.67% {
    transform: translate(800.8636px, 420px) scale(0.963) rotateX(16.6667deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  70.37% {
    transform: translate(1000.4546px, 404.8889px) scale(0.974) rotateX(14.8148deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  74.07% {
    transform: translate(1100.8198px, 389.7778px) scale(0.9826) rotateX(12.963deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  77.78% {
    transform: translate(1200.9981px, 374.6667px) scale(0.989) rotateX(11.1111deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  81.48% {
    transform: translate(1500.4821px, 359.5556px) scale(0.9936) rotateX(9.2593deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  85.19% {
    transform: translate(2054.5517px, 344.4444px) scale(0.9967) rotateX(7.4074deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  88.89% {
    transform: translate(2166.9935px, 329.3333px) scale(0.9986) rotateX(5.5556deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  92.59% {
    transform: translate(2300.8986px, 314.2222px) scale(0.9996) rotateX(3.7037deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  96.3% {
    transform: translate(2500.4312px, 299.1111px) scale(0.9999) rotateX(1.8519deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  100% {
    transform: translate(3000px, 284px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
}
.flash4 {
  width: 749px;
  height: 209px;
  display: inline-block;
  background: url("../images/flash3.png") no-repeat;
  top: -300px;
  left: -1200px;
  position: absolute;
  animation-name: flash3-keyframes;
  animation-duration: 1200ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: 0 0;
  animation-delay: 10s;
  animation-iteration-count: 1;
}
@keyframes flash4-keyframes {
  0% {
    transform: translate(30px, 692px) scale(0) rotateX(50deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  3.7% {
    transform: translate(42.504px, 676.8889px) scale(0.107) rotateX(48.1481deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  7.41% {
    transform: translate(57.4156px, 661.7778px) scale(0.2062) rotateX(46.2963deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  11.11% {
    transform: translate(74.6959px, 646.6667px) scale(0.2977) rotateX(44.4444deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  14.81% {
    transform: translate(94.3135px, 631.5556px) scale(0.3819) rotateX(42.5926deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  18.52% {
    transform: translate(116.2438px, 616.4444px) scale(0.459) rotateX(40.7407deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  22.22% {
    transform: translate(140.4698px, 601.3333px) scale(0.5295) rotateX(38.8889deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  25.93% {
    transform: translate(166.9824px, 586.2222px) scale(0.5936) rotateX(37.037deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  29.63% {
    transform: translate(195.7819px, 571.1111px) scale(0.6515) rotateX(35.1852deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  33.33% {
    transform: translate(226.879px, 556px) scale(0.7037) rotateX(33.3333deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  37.04% {
    transform: translate(260.2973px, 540.8889px) scale(0.7504) rotateX(31.4815deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  40.74% {
    transform: translate(296.0759px, 525.7778px) scale(0.7919) rotateX(29.6296deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  44.44% {
    transform: translate(340.5476px, 510.6667px) scale(0.8285) rotateX(27.7778deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  48.15% {
    transform: translate(383.4857px, 495.5556px) scale(0.8606) rotateX(25.9259deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  51.85% {
    transform: translate(429.5749px, 480.4444px) scale(0.8884) rotateX(24.0741deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  55.56% {
    transform: translate(579.041px, 465.3333px) scale(0.9122) rotateX(22.2222deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  59.26% {
    transform: translate(632.1631px, 450.2222px) scale(0.9324) rotateX(20.3704deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  62.96% {
    transform: translate(789.29px, 435.1111px) scale(0.9492) rotateX(18.5185deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  66.67% {
    transform: translate(800.8636px, 420px) scale(0.963) rotateX(16.6667deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  70.37% {
    transform: translate(1000.4546px, 404.8889px) scale(0.974) rotateX(14.8148deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  74.07% {
    transform: translate(1100.8198px, 389.7778px) scale(0.9826) rotateX(12.963deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  77.78% {
    transform: translate(1200.9981px, 374.6667px) scale(0.989) rotateX(11.1111deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  81.48% {
    transform: translate(1500.4821px, 359.5556px) scale(0.9936) rotateX(9.2593deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  85.19% {
    transform: translate(2054.5517px, 344.4444px) scale(0.9967) rotateX(7.4074deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  88.89% {
    transform: translate(2166.9935px, 329.3333px) scale(0.9986) rotateX(5.5556deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  92.59% {
    transform: translate(2300.8986px, 314.2222px) scale(0.9996) rotateX(3.7037deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  96.3% {
    transform: translate(2500.4312px, 299.1111px) scale(0.9999) rotateX(1.8519deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  100% {
    transform: translate(3000px, 284px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
}
.flash5 {
  width: 749px;
  height: 209px;
  display: inline-block;
  background: url("../images/flash2.png") no-repeat;
  top: 250px;
  left: -1200px;
  position: absolute;
  animation-name: flash5-keyframes;
  animation-duration: 1100ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: 0 0;
  animation-delay: 14s;
  animation-iteration-count: 1;
}
@keyframes flash5-keyframes {
  0% {
    transform: translate(30px, 692px) scale(0) rotateX(50deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  3.7% {
    transform: translate(42.504px, 676.8889px) scale(0.107) rotateX(48.1481deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  7.41% {
    transform: translate(57.4156px, 661.7778px) scale(0.2062) rotateX(46.2963deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  11.11% {
    transform: translate(74.6959px, 646.6667px) scale(0.2977) rotateX(44.4444deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  14.81% {
    transform: translate(94.3135px, 631.5556px) scale(0.3819) rotateX(42.5926deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  18.52% {
    transform: translate(116.2438px, 616.4444px) scale(0.459) rotateX(40.7407deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  22.22% {
    transform: translate(140.4698px, 601.3333px) scale(0.5295) rotateX(38.8889deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  25.93% {
    transform: translate(166.9824px, 586.2222px) scale(0.5936) rotateX(37.037deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  29.63% {
    transform: translate(195.7819px, 571.1111px) scale(0.6515) rotateX(35.1852deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  33.33% {
    transform: translate(226.879px, 556px) scale(0.7037) rotateX(33.3333deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  37.04% {
    transform: translate(260.2973px, 540.8889px) scale(0.7504) rotateX(31.4815deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  40.74% {
    transform: translate(296.0759px, 525.7778px) scale(0.7919) rotateX(29.6296deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  44.44% {
    transform: translate(340.5476px, 510.6667px) scale(0.8285) rotateX(27.7778deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  48.15% {
    transform: translate(383.4857px, 495.5556px) scale(0.8606) rotateX(25.9259deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  51.85% {
    transform: translate(429.5749px, 480.4444px) scale(0.8884) rotateX(24.0741deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  55.56% {
    transform: translate(579.041px, 465.3333px) scale(0.9122) rotateX(22.2222deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  59.26% {
    transform: translate(632.1631px, 450.2222px) scale(0.9324) rotateX(20.3704deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  62.96% {
    transform: translate(789.29px, 435.1111px) scale(0.9492) rotateX(18.5185deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  66.67% {
    transform: translate(800.8636px, 420px) scale(0.963) rotateX(16.6667deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  70.37% {
    transform: translate(1000.4546px, 404.8889px) scale(0.974) rotateX(14.8148deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  74.07% {
    transform: translate(1100.8198px, 389.7778px) scale(0.9826) rotateX(12.963deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  77.78% {
    transform: translate(1200.9981px, 374.6667px) scale(0.989) rotateX(11.1111deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  81.48% {
    transform: translate(1500.4821px, 359.5556px) scale(0.9936) rotateX(9.2593deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  85.19% {
    transform: translate(2054.5517px, 344.4444px) scale(0.9967) rotateX(7.4074deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  88.89% {
    transform: translate(2166.9935px, 329.3333px) scale(0.9986) rotateX(5.5556deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  92.59% {
    transform: translate(2300.8986px, 314.2222px) scale(0.9996) rotateX(3.7037deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  96.3% {
    transform: translate(2500.4312px, 299.1111px) scale(0.9999) rotateX(1.8519deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  100% {
    transform: translate(3000px, 284px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
}
.flash6 {
  width: 749px;
  height: 209px;
  display: inline-block;
  background: url("../images/flash2.png") no-repeat;
  top: 250px;
  left: -1200px;
  position: absolute;
  animation-name: flash6-keyframes;
  animation-duration: 1100ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: 0 0;
  animation-delay: 15s;
  animation-iteration-count: 1;
}
@keyframes flash6-keyframes {
  0% {
    transform: translate(30px, 692px) scale(0) rotateX(50deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  3.7% {
    transform: translate(42.504px, 676.8889px) scale(0.107) rotateX(48.1481deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  7.41% {
    transform: translate(57.4156px, 661.7778px) scale(0.2062) rotateX(46.2963deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  11.11% {
    transform: translate(74.6959px, 646.6667px) scale(0.2977) rotateX(44.4444deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  14.81% {
    transform: translate(94.3135px, 631.5556px) scale(0.3819) rotateX(42.5926deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  18.52% {
    transform: translate(116.2438px, 616.4444px) scale(0.459) rotateX(40.7407deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  22.22% {
    transform: translate(140.4698px, 601.3333px) scale(0.5295) rotateX(38.8889deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  25.93% {
    transform: translate(166.9824px, 586.2222px) scale(0.5936) rotateX(37.037deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  29.63% {
    transform: translate(195.7819px, 571.1111px) scale(0.6515) rotateX(35.1852deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  33.33% {
    transform: translate(226.879px, 556px) scale(0.7037) rotateX(33.3333deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  37.04% {
    transform: translate(260.2973px, 540.8889px) scale(0.7504) rotateX(31.4815deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  40.74% {
    transform: translate(296.0759px, 525.7778px) scale(0.7919) rotateX(29.6296deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  44.44% {
    transform: translate(340.5476px, 510.6667px) scale(0.8285) rotateX(27.7778deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  48.15% {
    transform: translate(383.4857px, 495.5556px) scale(0.8606) rotateX(25.9259deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  51.85% {
    transform: translate(429.5749px, 480.4444px) scale(0.8884) rotateX(24.0741deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  55.56% {
    transform: translate(579.041px, 465.3333px) scale(0.9122) rotateX(22.2222deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  59.26% {
    transform: translate(632.1631px, 450.2222px) scale(0.9324) rotateX(20.3704deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  62.96% {
    transform: translate(789.29px, 435.1111px) scale(0.9492) rotateX(18.5185deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  66.67% {
    transform: translate(800.8636px, 420px) scale(0.963) rotateX(16.6667deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  70.37% {
    transform: translate(1000.4546px, 404.8889px) scale(0.974) rotateX(14.8148deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  74.07% {
    transform: translate(1100.8198px, 389.7778px) scale(0.9826) rotateX(12.963deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  77.78% {
    transform: translate(1200.9981px, 374.6667px) scale(0.989) rotateX(11.1111deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  81.48% {
    transform: translate(1500.4821px, 359.5556px) scale(0.9936) rotateX(9.2593deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  85.19% {
    transform: translate(2054.5517px, 344.4444px) scale(0.9967) rotateX(7.4074deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  88.89% {
    transform: translate(2166.9935px, 329.3333px) scale(0.9986) rotateX(5.5556deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  92.59% {
    transform: translate(2300.8986px, 314.2222px) scale(0.9996) rotateX(3.7037deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  96.3% {
    transform: translate(2500.4312px, 299.1111px) scale(0.9999) rotateX(1.8519deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
  }
  100% {
    transform: translate(3000px, 284px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);
	
  }
}
*/
/*閃光 end*/
.TOP {
  position: relative;
  width: 100%;
  z-index: 1;
/*  height: 596px;*/
	height:670px;
}
.TOP .WRAPPER {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  text-align: center;
}
.H1 {
  position: absolute;
  top: 11.2%;
  left: 18.8%;
  width: 64.1vw;
  max-width: 821px;
  z-index: 2;
}
.H1 img {
  width: 100%;
  height: 100%;
}
.H2 {
  position: absolute;
  top: 28.2%;
  left: 38.8%;
  width: 27.7vw;
  max-width: 355px;
  z-index: 3;
}
.H2 img {
  width: 100%;
  height: 100%;
}
.PP {
  position: absolute;
  left: 0%;
  /*  top: 8%;*/
  top: 0%;
  width: 100%;
  max-width: 1292px;
  height: auto;
  z-index: 1;
}
.CTA1 {
  position: absolute;
  display: table;
  width: 30%;
  height: 45px;
  border-radius: 50px;
  background-color: #e40212;
  border: 3px solid #fff;
  margin: 0 auto;
  z-index: 9999;
  cursor: pointer;
  margin-top: 5px;
  z-index: 9999999;
  top: 52%;
  left: 39.5%;
}
.CTA1 p {
  display: table-cell;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  color: #ffeb33;
  text-align: center;
  vertical-align: middle;
}
.CTA1:hover {
  width: 31%;
  background-color: #007cd5;
}
.exp {
  position: absolute;
  display: table;
  width: 18%;
  height: auto;
  font-size: 12px;
  line-height: 1.2;
  color: #000;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  vertical-align: middle;
  bottom: 0;
  right: 0;
  padding: 5px;
}
.CTA2 {
  clear: both;
  margin: 0 auto;
  max-width: 410px;
  width: 70%;
  margin-top: 70px;
}
.CTA2 > a {
  color: #ffffff;
}
/*------------- content1-------------*/
#CONTENT-CAROUSEL {
  width: 100%;
}
.title-box {
  margin: auto;
  text-align: center;
}
.title-box h3 {
  display: block;
  color: rgba(215, 30, 28, 1);
  font-size: 30px;
  font-weight: bold;
}
.title-box span {
  display: block;
  color: #D71E1C;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 2rem;
}
.W_CENTER {
  clear: both;
  padding: 50px 5px 70px 5px;
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
.BOX_A, .BOX_B, .BOX_D {
  display: block;
  padding: 15px 15px 15px 15px;
}
.BOX_IN {
  text-align: center;
  font: normal 20px/30px Roboto;
  letter-spacing: 0px;
  color: rgba(9, 9, 9, 1);
  padding: 20px 30px 20px;
}
.BOX_D a {
  text-decoration: none;
}
.BOX {
  transition: all .2s ease-in;
}
.BOX:hover, .BOX:focus {
  transform: translateY(-10px);
}
.BOX img {
  transform: scale(1);
  transition: all 0.3s ease-out;
}
.BOX img:hover {
  transform: scale(1.1);
}
.BOX_D .BOX {
  display: block;
  height: 347px;
  line-height: 1.4;
  letter-spacing: 0;
  background-color: #fff;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.36);
  border-radius: 30px;
  overflow: hidden;
}
.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 10px;
}
/*------------- CONTENT1 -------------*/
.card {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  background: #fff;
  border-radius: 8px;
  border: #d8dee3 1px solid;
  text-align: center;
  margin-bottom: 15px;
}
.card .card-body {
  display: block;
  /* overflow: hidden; */
  font-size: 21px;
  line-height: 1.3;
  font-weight: bold;
  padding: 15px;
}
.card-text1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-title1 {
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 15px;
  letter-spacing: 0.15rem;
  color: rgba(158, 26, 19, 1);
  font-weight: 500;
}
.card-title2 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 15px;
  letter-spacing: 0.15rem;
  color: rgba(215, 30, 28, 1);
  font-weight: 500;
}
.card-bodyColor1 .card-title1, .card-bodyColor2 .card-title1 {
  line-height: 1.3;
  color: rgba(158, 26, 19, 1);
  margin-bottom: 15px;
  text-align: center;
  font-weight: 400;
  font-size: 20px;
}
.card-title-b {
  color: #213E5B;
  text-align: center;
  margin-bottom: 10PX;
  font-size: 20px;
}
.card-body .card-text {
  height: auto;
  min-height: 80px;
  font-size: 16px;
  line-height: 1.5;
  color: #515151;
  text-align: justify;
  padding: 0 2.0rem;
  font-weight: normal;
  overflow: auto;
}
.card-bodyColor1 .card-text1 ul, .card-bodyColor2 .card-text1 ul, .card-bodyColor3 .card-text1 ul {
  font-size: 15px;
  line-height: 1.75;
  color: #515151;
  text-align: left;
  list-style-position: inside;
  list-style-type: disc;
}
.card-bodyColor1 {
  width: 100%;
  background: #FFDEDC;
  text-align: left;
  padding: 30px 20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom: 5px solid rgba(158, 26, 19, 1);
}
.card-bodyColor2 {
  width: 100%;
  background: #FFDEDC;
  text-align: left;
  padding: 30px 20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom: 5px solid #D71E1C;
}
/*------------- CONTENT2 -------------*/
.CONTENT2 {
  background-color: rgba(255, 221, 86, 1);
  background-image: url("../images/bg05.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
}
/* style for waterfall grid */
.wf-container {
  margin: 0 auto;
  padding-bottom: 50px;
}
.wf-container:before, .wf-container:after {
  content: '';
  display: table;
}
.wf-container:after {
  clear: both;
}
.wf-container h3 {
  margin: auto;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  color: #1b1b1b;
  background: linear-gradient(#ffffff00 0%, #ffffff00 50%, #ffb800 50%, #ffb800 100%);
  text-align: center;
  padding: 0 5px;
  margin-bottom: 30px;
  display: block;
  width: fit-content;
}
.wf-box {
  margin: 10px;
  /*border:1px solid #06336f;*/
  background-color: #FFF;
  margin-bottom: 5%;
}
.wf-box img {
  display: block;
  width: 100%;
}
.wf-box .content {
  border: 1px solid #ccc;
  border-top-width: 0;
  padding: 5px 8px;
}
.wf-column {
  float: left;
}
.t1 {
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 3px;
  display: block;
  position: relative;
}
.t1 p {
  width: 100%;
  height: auto;
  color: #4d4c4c;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}
.t2 {
  margin: 0 auto;
  padding-top: 15px;
  padding-bottom: 15px;
  display: block;
  position: relative;
  background-color: rgba(62, 41, 248, 1);
}
.t2 p {
  width: 100%;
  height: auto;
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
}
.course_frame {
  width: 100%;
  padding: 15px;
  padding-bottom: 10%;
  margin: 0 auto;
  height: 180px;
}
.course_frame ul {
  list-style-image: url(../images/list.png);
  margin-left: 20px;
}
.course_frame ul li {
  color: rgba(81, 81, 81, 1);
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 10px;
}
.t3 {
  color: #06336f;
  font-size: 15px;
  margin: 0 auto;
  display: block;
  margin-bottom: 10px;
}
/*------------- FORM_BLOCK -------------*/
.FORM_BLOCK {
  background-color: #D71E1C;
}
.FORM_BLOCK .container .row {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
h2 {
  font-size: 42px;
  color: #fff;
  line-height: 1.6;
  text-align: center;
  font-weight: 200;
  margin-bottom: 30px;
}
h2 span {
  font-weight: 700;
}
.h3 {
  font-size: 28px;
  text-align: center;
  color: #e50921;
  margin-top: 5px;
  font-weight: 700;
  -webkit-animation: discolor 1s infinite;
  -moz-animation: discolor 1s infinite;
  -ms-animation: discolor 1s infinite;
  -o-animation: discolor 1s infinite;
  animation: discolor 1s infinite;
}
@-webkit-keyframes discolor {
  0%, 50% {
    color: #e50921;
  }
  51%, 100% {
    color: #1971db;
  }
}
@-moz-keyframes discolor {
  0%, 50% {
    color: #e50921;
  }
  51%, 100% {
    color: #1971db;
  }
}
@-o-keyframes discolor {
  0%, 50% {
    color: #e50921;
  }
  51%, 100% {
    color: #1971db;
  }
}
@keyframes discolor {
  0%, 50% {
    color: #e50921;
  }
  51%, 100% {
    color: #1971db;
  }
}
.CARD {
  display: block;
  width: 100%;
  max-width: 415px;
  margin: 0 auto;
}
.CARD img {
  width: 100%;
  height: auto;
}
/*------------表單------------*/
#FORM {
  width: 100%;
  height: auto;
  margin: 0 auto;
  margin-top: 20px;
}
#FORM #NAME {
  width: 48%;
  height: auto;
  float: left;
  margin: 0 1%;
}
#FORM #PHONE {
  width: 48%;
  height: auto;
  float: left;
  margin: 0 1%;
}
#FORM #EMAIL, #FORM #CLASS, #FORM #GIFT {
  width: 98%;
  height: auto;
  margin: 0 1%;
  margin-bottom: 15px;
}
#FORM #Dept {
  margin: 0px 0px 20px 0px;
  width: 100%;
  height: 35px;
}
#FORM #CITY {
  width: 48%;
  height: auto;
  float: left;
  margin: 0 1%;
}
#ddl_city_no {
  width: 100%;
  text-align: center;
  height: 35px;
}
#FORM #SCHOOL {
  width: 48%;
  height: auto;
  float: left;
  margin: 0 1%;
}
#ddl_area_no {
  width: 100%;
  height: 40px;
  text-align: center;
  height: 35px;
}
#READ {
  width: 100%;
  font-size: 16px;
  display: block;
  float: left;
  margin-top: 2%;
  margin-right: 10px;
  color: #fff;
  line-height: 20px;
  margin-bottom: 10px;
}
#READ .searchtext2 {
  min-width: 20px;
  min-height: 20px;
  background-color: #FFF;
  vertical-align: text-bottom;
}
#FORM #BUT {
  float: left;
  width: 100%;
  height: auto;
  margin-top: 2%;
  margin-bottom: 20px;
}
.A {
  color: #666666;
  background-color: #D71E1C;
  border: none;
  border-bottom: 1px solid #ffffff;
  color: #FFFFFF;
  width: 100%;
  height: 35px;
  line-height: 35px;
  margin-top: 5px;
  font-size: 100%;
  text-align: left;
  padding-left: 10px;
  overflow: hidden;
  font-family: Arial, Helvetica, "微軟正黑體", sans-serif, Microsoft JhengHei;
  margin-bottom: 10px;
}
.B {
  width: 100%;
  height: 50px;
  display: block;
  margin: 0 auto;
  font-weight: bold;
  *zoom: 1;
  font-size: 28px;
  line-height: 50px;
  text-align: center;
  letter-spacing: 2;
  color: #fff;
  text-decoration: none;
  border: 2px solid #FFFFFF;
  background-color: #D71E1C;
  cursor: pointer;
  border-radius: 50px;
  margin-bottom: 10px;
  /*
  border-bottom: 5px solid #013c38;
  -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.10);
*/
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.10);
}
.B:hover, .B:focus {
  color: #fff;
  border: 2px solid #FFFFFF;
  background-color: #D71E1C;
}
#BUT i {
  color: #FFFFFF;
  padding-top: 30px;
  position: absolute;
  text-shadow: 0 1px 5px rgb(0 0 0 / 35%);
  z-index: 2;
  font-size: 30px;
}
.C {
  width: 100%;
  height: 68px;
  display: block;
  margin: 0 auto;
  *zoom: 1;
  font-size: 28px;
  text-align: center;
  letter-spacing: 2;
  color: #fff;
  text-decoration: none;
  background-color: #E62427;
  cursor: pointer;
  border-bottom: 5px solid #9E1A13;
  -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.10);
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.10);
  margin-bottom: 10px;
  border-radius: 50px;
}
/* --電腦版型2-------------------------------------*/
@media screen and (max-width: 1660px) {
  .exp {
    width: 20%;
  }
}
@media screen and (max-width: 1485px) {
	 body {
    background: url(../images/top_bg_mb.jpg) no-repeat center -50px;
  }
  .exp {
    width: 25%;
  }
}
@media screen and (max-width: 1280px) {
  body {
    background: url(../images/top_bg_mb.jpg) no-repeat center -200px;
  }
  .TOP {
    height: 0;
	  padding-bottom: 53%;
  }
  .TOP .WRAPPER {
    position: absolute;
    max-width: inherit;
    top: 0;
    left: 0;
  }
}
@media screen and (max-width: 1188px) {
  .exp {
    width: 30%;
  }
	 .TOP {
   
    padding-bottom: 56%;
}
}
@media screen and (max-width: 1023px) {
	
	body {
    background: url(../images/top_bg_mb.jpg) no-repeat center -223px;
}
		 .TOP {
    padding-bottom: 60%;
}
	
  .TOP img {
    width: 95%;
  }
  .BOX_D .BOX {
    height: 325px;
  }
  .wf-container {
/*    width: 1000px;*/
  }
  #animation_container {
    top: 43rem;
  }
}
/* --平板版型1-------------------------------------*/
@media screen and (max-width: 991px) {
  body {
    background-size: 120%;
    background: url(../images/top_bg_mb.jpg) no-repeat center -224px;
  }
	#animation_container {
    top: 22rem;
}
 
  .H1 {
    max-width: inherit;
    width: 82.84vw;
    top: 8.9%;
    left: 8%;
  }
  .H2 {
    max-width: inherit;
    width: 35.8vw;
    top: 26.2%;
    left: 31.2%;
  }
  .wf-container {
/*    width: 970px;*/
  }
  .BOX_D .BOX {
    height: 325px;
  }
  .CTA1 {
    max-width: inherit;
    width: 40%;
    top: 48%;
    left: 35.5%;
  }
  .CTA1:hover {
    width: 41%;
  }
  .exp {
    width: 35%;
  }
 
}
@media screen and (max-width: 848px) {
  body {
    background-size: 120%;
    background: url(../images/top_bg_mb.jpg) no-repeat center -260px;
  }
	.TOP {
    padding-bottom: 70%;
}
  .exp {
    width: 40%;
  }
}
/* --平板版型2-------------------------------------*/
@media screen and (max-width:767px) {
	.TOP {
    padding-bottom: 75%;
}
  .course_frame {
    height: auto;
  }
  .CTA1 {
    max-width: inherit;
    width: 45%;
    top: 42%;
    left: 37.3%;
  }
  .CTA1 p {
    font-size: 20px;
  }
  .CTA1:hover {
    width: 46%;
  }
  .exp {
    width: 50%;
    right: 25%;
  }
  .wf-container {
/*    width: 750px;*/
  }
}
/* --手機版型1-------------------------------------*/
@media screen and (max-width:639px) {

  body {
    background-size: 100%;
    background: url(../images/top_bg_mb.jpg) no-repeat center -315px;
  }
	#animation_container {
    top: 19rem;
}
  .TEXT p, .TEXT ul {
    padding-right: 15px;
  }
  #FORM #NAME {
    width: 98%;
    height: auto;
    margin: 0 1%;
  }
  #FORM #PHONE {
    width: 98%;
    height: auto;
    margin: 0 1%;
  }
  .title-box img {
    width: 100%;
  }
  .BOX_D .BOX {
    height: auto;
  }
  .exp {
    width: 100%;
    right: 0;
  }
}
/* --手機版型2-------------------------------------*/
@media screen and (max-width:479px) {
  body {
    background-size: 100%;
    background: url(../images/top_bg_mb.jpg) no-repeat center -430px;
  }
  .TOP, .FORM_BLOCK, .CONTENT1, .CONTENT2 {
    min-width: 320px;
  }
  .W_CENTER {
    padding: 30px 5px 30px 5px;
  }
  #CONTENT-CAROUSEL .W_CENTER {
    padding: 0px 0px 40px;
  }
  .FORM_BLOCK .W_CENTER {
    padding: 30px 30px;
  }
  #READ {
    font-size: 15px;
  }
  .BOX_IN {
    font: normal 16px/25px Roboto;
    padding: 15px;
  }
  .card-title1, .card-title2 {
    font-size: 25px;
  }
  .card-body .card-text {
    font-size: 18px;
  }
  .card {
    margin-bottom: 25px;
  }
  .course_frame ul li {
    font-size: 18px;
  }
  .card-bodyColor1 .card-text1 ul, .card-bodyColor2 .card-text1 ul, .card-bodyColor3 .card-text1 ul {
    font-size: 18px;
  }
  .card-title-b {
    font-size: 24px;
  }
  .CTA1 {
    width: 50%;
    height: 35px;
    top: 45%;
    left: 34%;
  }
  .CTA1 p {
    font-size: 16px;
  }
  .CTA1:hover {
    width: 51%;
  }
  #animation_container {
    top: 13rem;
  }
  #canvas {
    width: 90%;
    height: 90%;
  }
}




@media screen and (max-width:428px) {

body {
    background-size: 100%;
    background: url(../images/top_bg_mb.jpg) no-repeat center -471px;
	}
}
/* --手機版型3-------------------------------------*/
@media screen and (max-width:425px) {
  body {
    background-size: 100%;
    background: url(../images/top_bg_mb.jpg) no-repeat center -445px;
  }
  .t1 p {
    width: 80%;
  }
  .t2 p {
    width: 80%;
  }
	#animation_container {
    top: 12rem;
}
}
@media screen and (max-width:414px) {
  body {
    background-size: 100%;
    background: url(../images/top_bg_mb.jpg) no-repeat center -466px;
  }
}
@media screen and (max-width:375px) {
	  body {
    background-size: 100%;
    background: url(../images/top_bg_mb.jpg) no-repeat center -476px;
  }
	#animation_container {
    top: 21rem;
}
  .CTA1 {
    width: 55%;
    top: 45%;
    left: 32%;
  }
  .CTA1 p {
    font-size: 14px;
  }
  .CTA1:hover {
    width: 56%;
  }
  #canvas {
    width: 80%;
    height: 80%;
  }
}