@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template, [hidden] {
  display: none;
}

*, *:before, *:after {
  font-family: Noto Sans TC, cwTeXKai, cwTeXYen, cwTeXFangSong, cwTeXMing;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  position: relative;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
html .alldots, body .alldots {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
html .alldots [class^=dot], body .alldots [class^=dot] {
  background-color: #fff;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  animation: shin 2s infinite;
}
html .alldots .dot1, body .alldots .dot1 {
  position: absolute;
  left: 95.6365282227%;
  top: 83.620506172%;
  animation-delay: -0.1s;
}
html .alldots .dot2, body .alldots .dot2 {
  position: absolute;
  left: 20.9722160878%;
  top: 71.4661404633%;
  animation-delay: -0.2s;
}
html .alldots .dot3, body .alldots .dot3 {
  position: absolute;
  left: 39.6841304666%;
  top: 94.344560085%;
  animation-delay: -0.3s;
}
html .alldots .dot4, body .alldots .dot4 {
  position: absolute;
  left: 31.1296407955%;
  top: 38.7676010933%;
  animation-delay: -0.4s;
}
html .alldots .dot5, body .alldots .dot5 {
  position: absolute;
  left: 28.2288711791%;
  top: 83.2625501084%;
  animation-delay: -0.5s;
}
html .alldots .dot6, body .alldots .dot6 {
  position: absolute;
  left: 36.3336580475%;
  top: 33.6351010576%;
  animation-delay: -0.6s;
}
html .alldots .dot7, body .alldots .dot7 {
  position: absolute;
  left: 25.0359646978%;
  top: 8.4566133737%;
  animation-delay: -0.7s;
}
html .alldots .dot8, body .alldots .dot8 {
  position: absolute;
  left: 38.3299611692%;
  top: 48.4209979424%;
  animation-delay: -0.8s;
}
html .alldots .dot9, body .alldots .dot9 {
  position: absolute;
  left: 28.9618866438%;
  top: 9.9265647479%;
  animation-delay: -0.9s;
}
html .alldots .dot10, body .alldots .dot10 {
  position: absolute;
  left: 74.8737109458%;
  top: 57.1339097057%;
  animation-delay: -1s;
}
html .alldots .dot11, body .alldots .dot11 {
  position: absolute;
  left: 13.7853177881%;
  top: 89.7722730729%;
  animation-delay: -1.1s;
}
html .alldots .dot12, body .alldots .dot12 {
  position: absolute;
  left: 33.6708094251%;
  top: 90.6162345841%;
  animation-delay: -1.2s;
}
html .alldots .dot13, body .alldots .dot13 {
  position: absolute;
  left: 49.0032651489%;
  top: 2.1233113807%;
  animation-delay: -1.3s;
}
html .alldots .dot14, body .alldots .dot14 {
  position: absolute;
  left: 67.5709994069%;
  top: 68.7681965806%;
  animation-delay: -1.4s;
}
html .alldots .dot15, body .alldots .dot15 {
  position: absolute;
  left: 74.9605660519%;
  top: 15.4229717527%;
  animation-delay: -1.5s;
}
html .alldots .dot16, body .alldots .dot16 {
  position: absolute;
  left: 0.8301549735%;
  top: 82.9171451222%;
  animation-delay: -1.6s;
}
html .alldots .dot17, body .alldots .dot17 {
  position: absolute;
  left: 65.5123468029%;
  top: 85.4111677047%;
  animation-delay: -1.7s;
}
html .alldots .dot18, body .alldots .dot18 {
  position: absolute;
  left: 39.3717625661%;
  top: 22.5292848234%;
  animation-delay: -1.8s;
}
html .alldots .dot19, body .alldots .dot19 {
  position: absolute;
  left: 68.7637467589%;
  top: 50.6527448535%;
  animation-delay: -1.9s;
}
html .alldots .dot20, body .alldots .dot20 {
  position: absolute;
  left: 78.4133099821%;
  top: 82.3422307582%;
  animation-delay: -2s;
}
html .alldots .dot21, body .alldots .dot21 {
  position: absolute;
  left: 8.2209223746%;
  top: 27.8041171766%;
  animation-delay: -2.1s;
}
html .alldots .dot22, body .alldots .dot22 {
  position: absolute;
  left: 64.0387071547%;
  top: 76.893820485%;
  animation-delay: -2.2s;
}
html .alldots .dot23, body .alldots .dot23 {
  position: absolute;
  left: 42.950848274%;
  top: 78.8223299452%;
  animation-delay: -2.3s;
}
html .alldots .dot24, body .alldots .dot24 {
  position: absolute;
  left: 30.7785535626%;
  top: 95.5083251354%;
  animation-delay: -2.4s;
}
html .alldots .dot25, body .alldots .dot25 {
  position: absolute;
  left: 86.5571288122%;
  top: 54.349070769%;
  animation-delay: -2.5s;
}
html .alldots .dot26, body .alldots .dot26 {
  position: absolute;
  left: 55.4931119443%;
  top: 39.5762455547%;
  animation-delay: -2.6s;
}
html .alldots .dot27, body .alldots .dot27 {
  position: absolute;
  left: 15.6712566649%;
  top: 33.7456167572%;
  animation-delay: -2.7s;
}
html .alldots .dot28, body .alldots .dot28 {
  position: absolute;
  left: 54.3420395512%;
  top: 3.3435403429%;
  animation-delay: -2.8s;
}
html .alldots .dot29, body .alldots .dot29 {
  position: absolute;
  left: 55.0861477728%;
  top: 40.3293708766%;
  animation-delay: -2.9s;
}
html .alldots .dot30, body .alldots .dot30 {
  position: absolute;
  left: 27.3423263405%;
  top: 50.8436573103%;
  animation-delay: -3s;
}
@keyframes shin {
  0%, 100% {
    opacity: 0;
  }
  70% {
    opacity: 0.5;
  }
}
html header, body header {
  z-index: 3;
  width: 100%;
  max-width: 90vw;
  padding: 20px;
}
html .menu, body .menu {
  width: 100%;
  color: white;
}
html .menu .focusLogo, body .menu .focusLogo {
  display: inline-block;
  float: left;
  width: 200px;
}
html .menu .focusLogo img, body .menu .focusLogo img {
  width: 100%;
}
html .menu a.home, body .menu a.home {
  display: inline-block;
  float: right;
  text-decoration: none;
  color: white;
  padding-top: 10px;
  cursor: pointer;
}
html .courseContent, body .courseContent {
  max-width: 90vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
html .courseContent .Box, body .courseContent .Box {
  width: 700px;
  padding: 20px;
  padding-bottom: 100px;
  color: #eee;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  position: relative;
  border: 2px solid #094ec2;
  border-radius: 5px;
}
html .courseContent .Box .item1, body .courseContent .Box .item1 {
  display: inline-block;
}
html .courseContent .Box .item1 .block, body .courseContent .Box .item1 .block {
  font-weight: bold;
  position: absolute;
  top: -5px;
  transform: translateY(-5px);
  right: 30px;
  animation: tag 0.8s infinite alternate;
  transition: 0.5s;
  padding-right: 10px;
  padding-left: 40px;
  padding-top: 2px;
  padding-bottom: 5px;
  background: linear-gradient(90deg, rgba(247, 150, 101, 0) 0%, #f97a13 34%);
}
@keyframes tag {
  100% {
    right: 20px;
  }
}
html .courseContent .Box .item2, body .courseContent .Box .item2 {
  color: white;
  position: absolute;
  bottom: -20px;
  left: -50px;
  font-size: 40px;
}
html .courseContent .Box .top, body .courseContent .Box .top {
  display: flex;
  align-items: flex-end;
  margin-bottom: 15px;
}
html .courseContent .Box .top .photo, body .courseContent .Box .top .photo {
  width: 100px;
}
html .courseContent .Box .top .photo img, body .courseContent .Box .top .photo img {
  width: 100%;
}
html .courseContent .Box .top .title, body .courseContent .Box .top .title {
  margin-left: 15px;
}
html .courseContent .Box .top .title .En, body .courseContent .Box .top .title .En {
  opacity: 0.8;
  margin-bottom: 15px;
  padding-top: 5px;
}
html .courseContent .Box .top .title .name, body .courseContent .Box .top .title .name {
  line-height: 23px;
}
html .courseContent .Box .content, body .courseContent .Box .content {
  margin-top: 10px;
  line-height: 30px;
}

@media (max-width: 768px) {
  html header, body header {
    padding-right: 0;
    padding-left: 0;
  }
  html .courseContent .Box .item2, body .courseContent .Box .item2 {
    left: 0;
  }
}
@media (max-width: 575px) {
  html, body {
    height: 140%;
  }
  html .courseContent .Box .item2, body .courseContent .Box .item2 {
    left: 0;
  }
  html .courseContent .Box .top, body .courseContent .Box .top {
    align-items: flex-start;
  }
  html .courseContent .Box .top .photo, body .courseContent .Box .top .photo {
    width: 150px;
  }
}
@media (max-width: 360px) {
  html, body {
    height: 150%;
  }
}/*# sourceMappingURL=style.css.map */