@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  *:focus {
    outline-style: none; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden; }

body {
  width: 100%;
  margin: 0 auto; }
  body::before {
    content: '';
    width: 100%;
    height: 50px;
    position: relative;
    top: 0;
    left: 0;
    display: block; }
    @media screen and (min-width: 744px) {
      body::before {
        height: 62px; } }

img {
  width: 100%;
  height: auto;
  display: block; }

header {
  width: 100%;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 900;
  position: fixed;
  top: 0;
  transition: all 0.2s ease; }
  header.float {
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  @media screen and (min-width: 744px) {
    header {
      height: 62px; } }
  header .container {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    header .container .link li a {
      width: 24px;
      height: 24px; }
      @media screen and (min-width: 744px) {
        header .container .link li a {
          width: 32px;
          height: 32px; } }
    header .container .link li:nth-child(2) {
      margin-left: 16px;
      margin-right: 16px; }
      @media screen and (min-width: 744px) {
        header .container .link li:nth-child(2) {
          margin-left: 20px;
          margin-right: 20px; } }

header .container,
footer .container {
  width: 100%;
  max-width: 1440px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 20px;
  margin: 0 auto; }
  @media screen and (min-width: 744px) {
    header .container,
    footer .container {
      padding: 0 30px; } }
  header .container .myv-logo,
  footer .container .myv-logo {
    width: 100px; }
    header .container .myv-logo img,
    header .container .myv-logo svg,
    footer .container .myv-logo img,
    footer .container .myv-logo svg {
      width: 100%; }
    @media screen and (min-width: 744px) {
      header .container .myv-logo,
      footer .container .myv-logo {
        width: 140px; } }
  header .container .link,
  footer .container .link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    header .container .link li a,
    footer .container .link li a {
      display: block; }
      header .container .link li a svg,
      footer .container .link li a svg {
        width: 100%; }
        header .container .link li a svg path,
        header .container .link li a svg polygon,
        header .container .link li a svg g,
        footer .container .link li a svg path,
        footer .container .link li a svg polygon,
        footer .container .link li a svg g {
          -webkit-transition: all .3s ease;
          -o-transition: all .3s ease;
          transition: all .3s ease; }
      header .container .link li a:hover svg path,
      header .container .link li a:hover svg polygon,
      header .container .link li a:hover svg g,
      footer .container .link li a:hover svg path,
      footer .container .link li a:hover svg polygon,
      footer .container .link li a:hover svg g {
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease; }
    header .container .link .myvideo a svg .icon-mask,
    footer .container .link .myvideo a svg .icon-mask {
      display: none; }
    header .container .link .myvideo a svg .icon-icon,
    footer .container .link .myvideo a svg .icon-icon {
      display: none; }
    header .container .link .myvideo:hover a svg .icon-bg,
    footer .container .link .myvideo:hover a svg .icon-bg {
      fill: #F57600; }
    header .container .link .myvideo:hover a svg .icon-mask,
    footer .container .link .myvideo:hover a svg .icon-mask {
      display: block; }
    header .container .link .myvideo:hover a svg .icon-icon,
    footer .container .link .myvideo:hover a svg .icon-icon {
      fill: #FFFFFF;
      display: block; }
    header .container .link .facebook a svg .icon-icon,
    footer .container .link .facebook a svg .icon-icon {
      fill: transparent; }
    header .container .link .facebook:hover a svg .icon-bg,
    footer .container .link .facebook:hover a svg .icon-bg {
      fill: #1877f2; }
    header .container .link .facebook:hover a svg .icon-icon,
    footer .container .link .facebook:hover a svg .icon-icon {
      fill: #FFFFFF; }
    header .container .link .youtube a svg .icon-icon,
    footer .container .link .youtube a svg .icon-icon {
      fill: transparent; }
    header .container .link .youtube:hover a svg .icon-bg,
    footer .container .link .youtube:hover a svg .icon-bg {
      fill: red; }
    header .container .link .youtube:hover a svg .icon-icon,
    footer .container .link .youtube:hover a svg .icon-icon {
      fill: #FFFFFF; }

.main-content {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  margin: 0 auto; }

footer {
  text-align: center;
  margin: 0 auto;
  padding: 40px 0; }
  footer .container {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    @media screen and (min-width: 744px) {
      footer .container {
        -ms-flex-pack: distribute;
        justify-content: space-around; } }
    footer .container .link li {
      margin-right: 10px; }
      @media screen and (min-width: 375px) {
        footer .container .link li {
          margin-right: 12px; } }
      @media screen and (min-width: 744px) {
        footer .container .link li {
          margin-right: 16px; } }
      footer .container .link li img {
        height: 100%; }
      footer .container .link li a svg {
        width: 24px;
        height: 24px;
        vertical-align: middle; }
        @media screen and (min-width: 744px) {
          footer .container .link li a svg {
            width: 32px;
            height: 32px; } }
    footer .container .link li:last-child {
      margin-right: 0; }
    footer .container .link .ott div {
      width: 28px;
      height: 35px;
      -o-object-fit: cover;
      object-fit: cover;
      overflow: hidden;
      position: relative; }
      @media screen and (min-width: 375px) {
        footer .container .link .ott div {
          width: 32px;
          height: 40px; } }
      @media screen and (min-width: 744px) {
        footer .container .link .ott div {
          width: 42px;
          height: 51px; } }
      footer .container .link .ott div img {
        width: auto;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0; }
    footer .container .link .appstore a,
    footer .container .link .googleplay a {
      width: auto;
      height: 24px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      border-radius: 90px;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease; }
      @media screen and (min-width: 744px) {
        footer .container .link .appstore a,
        footer .container .link .googleplay a {
          height: 32px; } }
      footer .container .link .appstore a img,
      footer .container .link .googleplay a img {
        width: auto;
        height: 100%;
        border-radius: 90px;
        -o-object-fit: contain;
        object-fit: contain; }
      footer .container .link .appstore a:hover,
      footer .container .link .googleplay a:hover {
        opacity: .85;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease; }
  footer .copyright {
    width: 100%;
    max-width: 1440px;
    padding: 0 20px;
    margin: 24px auto 0;
    display: inline-block;
    color: #9E9E9E;
    font-size: 13px;
    text-align: left;
    line-height: 1.2rem; }
    footer .copyright a {
      color: #9E9E9E; }
      footer .copyright a:hover {
        color: #757575; }
    @media screen and (min-width: 744px) {
      footer .copyright {
        text-align: center; } }
    footer .copyright .ft-br {
      display: block; }
      @media screen and (min-width: 744px) {
        footer .copyright .ft-br {
          display: inline-block; } }

body {
  color: #FFFFFF;
  background-color: #000000; }
  body header {
    background-color: #272727; }
    body header.float {
      background-color: rgba(39, 39, 39, 0.95); }
  body header .container .link .myvideo a svg .icon-bg,
  body footer .container .link .myvideo a svg .icon-bg {
    fill: #FFFFFF; }
  body header .container .link .facebook a svg .icon-bg,
  body footer .container .link .facebook a svg .icon-bg {
    fill: #FFFFFF; }
  body header .container .link .youtube a svg .icon-bg,
  body footer .container .link .youtube a svg .icon-bg {
    fill: #FFFFFF; }
  body header .container .link .ott div img,
  body footer .container .link .ott div img {
    left: 0; }
  body footer {
    background-color: #272727;
    border-top: 1px solid #424242; }

.main-content {
  min-height: calc(100vh - 50px - 0px - 178px); }
  @media screen and (min-width: 375px) {
    .main-content {
      min-height: calc(100vh - 50px - 0px - 183px); } }
  @media screen and (min-width: 744px) {
    .main-content {
      min-height: calc(100vh - 62px - 0px - 175px); } }