@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
article#about {
  background-image: url(../images/bg.png);
  background-position: center top;
  background-color: #000;
  background-size: cover;
  position: relative;
  overflow: hidden; }
  @media only screen and (max-width: 1920px) {
    article#about {
      background-size: 1920px; } }
  @media only screen and (max-width: 800px) {
    article#about {
      background-size: 1000px; } }

.d01, .d02, .d03, .d04, .d05 {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3; }

.d01 {
  background-image: url(../images/about_d01.png);
  width: 79px;
  height: 85px;
  left: 50%;
  top: 350px;
  margin-left: -600px; }
  @media only screen and (max-width: 1200px) {
    .d01 {
      width: 70px;
      margin-left: -280px; } }
  @media only screen and (max-width: 800px) {
    .d01 {
      width: 35px;
      top: 320px;
      margin-left: -170px; } }

.d02 {
  background-image: url(../images/about_d02.png);
  width: 292px;
  height: 259px;
  left: 50%;
  top: 130px;
  margin-left: -10px; }
  @media only screen and (max-width: 1200px) {
    .d02 {
      width: 250px;
      top: 50px;
      margin-left: 50px; } }
  @media only screen and (max-width: 800px) {
    .d02 {
      width: 180px;
      top: 20px;
      margin-left: -40px; } }

.d03 {
  background-image: url(../images/about_d03.png);
  width: 245px;
  height: 295px;
  left: 50%;
  top: 610px;
  margin-left: 380px; }
  @media only screen and (max-width: 1200px) {
    .d03 {
      width: 200px;
      top: 580px;
      margin-left: 150px; } }
  @media only screen and (max-width: 800px) {
    .d03 {
      width: 150px;
      top: 470px;
      margin-left: 50px; } }

.d04 {
  background-image: url(../images/about_d04.png);
  width: 288px;
  height: 455px;
  left: 50%;
  top: 910px;
  margin-left: -600px; }
  @media only screen and (max-width: 1200px) {
    .d04 {
      width: 240px;
      top: 1000px;
      margin-left: -420px; } }
  @media only screen and (max-width: 800px) {
    .d04 {
      display: none; } }

.d05 {
  background-image: url(../images/about_d05.png);
  width: 176px;
  height: 84px;
  left: 50%;
  top: 1290px;
  margin-left: 250px; }
  @media only screen and (max-width: 1200px) {
    .d05 {
      width: 140px;
      top: 1320px;
      margin-left: 100px; } }
  @media only screen and (max-width: 800px) {
    .d05 {
      display: none; } }

section.kv {
  position: relative;
  padding-top: 140px;
  overflow: hidden;
  margin-bottom: 110px; }
  @media only screen and (max-width: 1200px) {
    section.kv {
      padding-top: 90px;
      margin-bottom: 80px; } }
  @media only screen and (max-width: 800px) {
    section.kv {
      margin-bottom: 50px; } }
  section.kv::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
    background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0)));
    background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); }
  section.kv .i01, section.kv .light, section.kv .i02, section.kv .i03 {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat; }
  section.kv .i01 {
    background-image: url(../images/about_i01.png);
    width: 298px;
    height: 399px;
    left: 0;
    top: 0px;
    z-index: 1; }
    @media only screen and (max-width: 1200px) {
      section.kv .i01 {
        width: 200px;
        top: -30px; } }
    @media only screen and (max-width: 800px) {
      section.kv .i01 {
        z-index: 2;
        width: 159px;
        top: -20px; } }
  section.kv .light {
    background-image: url(../images/light.png);
    width: 681px;
    height: 457px;
    left: 50%;
    top: 140px;
    margin-left: -680px;
    opacity: 0.2; }
    @media only screen and (max-width: 1200px) {
      section.kv .light {
        width: 600px;
        top: 100px;
        margin-left: -450px; } }
    @media only screen and (max-width: 800px) {
      section.kv .light {
        width: 681px;
        top: -80px;
        margin-left: -500px; } }
  section.kv .i02 {
    background-image: url(../images/about_i02.png);
    width: 688px;
    height: 714px;
    right: -100px;
    top: -220px;
    z-index: 1; }
    @media only screen and (max-width: 1200px) {
      section.kv .i02 {
        width: 600px;
        right: -100px;
        top: -20px; } }
    @media only screen and (max-width: 800px) {
      section.kv .i02 {
        width: 385px;
        top: 80px;
        right: -60px; } }
  section.kv .i03 {
    background-image: url(../images/about_i03.png);
    width: 689px;
    height: 530px;
    right: 0;
    top: -30px; }
    @media only screen and (max-width: 1200px) {
      section.kv .i03 {
        width: 600px;
        top: 140px; } }
    @media only screen and (max-width: 800px) {
      section.kv .i03 {
        width: 360px;
        top: 200px; } }
  section.kv .main {
    width: 1100px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 40px;
    position: relative;
    z-index: 5; }
    @media only screen and (max-width: 1200px) {
      section.kv .main {
        width: 675px; } }
    @media only screen and (max-width: 800px) {
      section.kv .main {
        width: 100%;
        padding: 0 20px; } }
    section.kv .main .bread {
      position: relative;
      z-index: 3;
      margin-bottom: 60px; }
      @media only screen and (max-width: 800px) {
        section.kv .main .bread {
          margin-bottom: 40px; } }
      section.kv .main .bread a {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #FFF;
        cursor: pointer; }
      section.kv .main .bread label {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #FFF;
        margin-left: 5px; }
      section.kv .main .bread span {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #EBE696;
        margin-left: 5px; }
    section.kv .main .title {
      width: 577px;
      height: 190px;
      margin-bottom: 70px; }
      @media only screen and (max-width: 1200px) {
        section.kv .main .title {
          width: 500px;
          height: 172px;
          margin-bottom: 250px; } }
      @media only screen and (max-width: 800px) {
        section.kv .main .title {
          width: 345px;
          height: 116px;
          margin: 0 auto;
          margin-bottom: 250px; } }
    section.kv .main .info {
      position: relative;
      width: 675px;
      margin: 0 auto; }
      @media only screen and (max-width: 1200px) {
        section.kv .main .info {
          width: 100%; } }
      section.kv .main .info h1 {
        font-family: 'Noto Serif TC', serif;
        font-size: 36px;
        font-weight: 900;
        line-height: 52px;
        color: #FFF;
        margin-bottom: 20px; }
      section.kv .main .info h2 {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #FFF; }

section.video {
  position: relative;
  padding-bottom: 100px;
  overflow: hidden; }
  section.video .i01, section.video .i02 {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat; }
  section.video .i01 {
    background-image: url(../images/about_i04.png);
    width: 305px;
    height: 446px;
    left: -30px;
    bottom: -70px;
    z-index: 1; }
    @media only screen and (max-width: 1200px) {
      section.video .i01 {
        width: 200px;
        left: -70px;
        bottom: -180px; } }
    @media only screen and (max-width: 800px) {
      section.video .i01 {
        width: 170px;
        bottom: -240px; } }
  section.video .i02 {
    background-image: url(../images/kv_i05.png);
    width: 187px;
    height: 408px;
    right: 0px;
    bottom: 30px;
    z-index: 1; }
    @media only screen and (max-width: 1200px) {
      section.video .i02 {
        width: 150px;
        bottom: -170px; } }
    @media only screen and (max-width: 800px) {
      section.video .i02 {
        width: 140px;
        bottom: -180px; } }
  section.video .main {
    width: 1100px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 40px; }
    @media only screen and (max-width: 1200px) {
      section.video .main {
        width: 100%; } }
    @media only screen and (max-width: 800px) {
      section.video .main {
        padding: 0 20px; } }
    section.video .main iframe {
      max-width: 100%;
      width: 100%;
      height: 514px;
      position: relative;
      z-index: 3; }
      @media only screen and (max-width: 1200px) {
        section.video .main iframe {
          height: 500px; } }
      @media only screen and (max-width: 1000px) {
        section.video .main iframe {
          height: 450px; } }
      @media only screen and (max-width: 800px) {
        section.video .main iframe {
          height: 350px; } }
      @media only screen and (max-width: 420px) {
        section.video .main iframe {
          height: 180px; } }