@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap");
article {
  position: relative; }

@-webkit-keyframes bird02_ani {
  0%, 100% {
    background-image: url(../images/birdmotion_03a.png); }
  25%, 75% {
    background-image: url(../images/birdmotion_03b.png); }
  50% {
    background-image: url(../images/birdmotion_03c.png); } }

@keyframes bird02_ani {
  0%, 100% {
    background-image: url(../images/birdmotion_03a.png); }
  25%, 75% {
    background-image: url(../images/birdmotion_03b.png); }
  50% {
    background-image: url(../images/birdmotion_03c.png); } }

@-webkit-keyframes bird03_ani {
  0%, 50%, 100% {
    background-image: url(../images/birdmotion_01a.png); }
  25%, 75% {
    background-image: url(../images/birdmotion_01b.png); } }

@keyframes bird03_ani {
  0%, 50%, 100% {
    background-image: url(../images/birdmotion_01a.png); }
  25%, 75% {
    background-image: url(../images/birdmotion_01b.png); } }

section.about_kv {
  position: relative;
  background-image: url(../images/about_img01.png);
  background-repeat: no-repeat;
  background-position: 51% bottom;
  background-size: cover;
  padding-top: 170px;
  height: 843px; }
  @media only screen and (max-width: 950px) {
    section.about_kv {
      height: 780px;
      padding-top: 120px; } }
  section.about_kv .bird {
    background-image: url(../images/birdmotion_03b.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 277px;
    height: 137px;
    position: absolute;
    bottom: 8vw;
    left: 50%;
    margin-left: -530px;
    z-index: 1;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    -webkit-animation: bird02_ani 2s infinite step-start;
    animation: bird02_ani 2s infinite step-start; }
    @media only screen and (max-width: 1600px) {
      section.about_kv .bird {
        bottom: 135px;
        margin-left: -500px; } }
    @media only screen and (max-width: 950px) {
      section.about_kv .bird {
        width: 159px;
        height: 78px;
        bottom: 280px;
        margin-left: -10px; } }
  section.about_kv .inner {
    position: relative;
    max-width: 960px;
    width: calc(100% - 40px);
    margin: 0 auto;
    text-align: center; }
    section.about_kv .inner h1 {
      position: relative;
      text-align: center;
      margin-bottom: 20px; }
      @media only screen and (max-width: 950px) {
        section.about_kv .inner h1 {
          font-size: 38px; } }
    section.about_kv .inner p {
      font-size: 20px;
      line-height: 34px;
      letter-spacing: 5%; }
      @media only screen and (max-width: 950px) {
        section.about_kv .inner p {
          font-size: 18px; } }

section.about_main {
  position: relative;
  background-image: url(../images/about_img04.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  padding-bottom: 52vw;
  padding-top: 100px;
  overflow: hidden; }
  @media only screen and (max-width: 950px) {
    section.about_main {
      padding-top: 80px;
      padding-bottom: 65vw; } }
  section.about_main .bird {
    background-image: url(../images/birdmotion_01a.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 470px;
    height: 181px;
    position: absolute;
    bottom: 40vw;
    right: 0;
    z-index: 1;
    -webkit-animation: bird03_ani 2s infinite step-start;
    animation: bird03_ani 2s infinite step-start; }
    @media only screen and (max-width: 950px) {
      section.about_main .bird {
        width: 268px;
        height: 103px;
        right: -90px; } }
  section.about_main .inner {
    position: relative;
    max-width: 1300px;
    width: calc(100% - 40px);
    margin: 0 auto;
    text-align: center; }
    section.about_main .inner .info_box {
      max-width: 960px;
      margin: 0 auto 20px; }
      section.about_main .inner .info_box h2 {
        width: calc(100% - 466px);
        margin-right: -5px;
        display: inline-block;
        vertical-align: top;
        text-align: left; }
        @media only screen and (max-width: 950px) {
          section.about_main .inner .info_box h2 {
            width: 100%;
            margin-bottom: 20px; } }
      section.about_main .inner .info_box p {
        width: 466px;
        display: inline-block;
        vertical-align: top;
        text-align: left;
        font-size: 20px;
        line-height: 34px;
        letter-spacing: 5%; }
        @media only screen and (max-width: 950px) {
          section.about_main .inner .info_box p {
            width: 100%; } }
    section.about_main .inner .img_box {
      margin-bottom: 80px; }
      section.about_main .inner .img_box figure {
        display: inline-block;
        vertical-align: top;
        max-width: 630px;
        width: calc(50% - 20px);
        margin-right: 20px; }
        section.about_main .inner .img_box figure:last-child {
          margin-right: 0; }
        @media only screen and (max-width: 950px) {
          section.about_main .inner .img_box figure {
            width: 100%;
            margin-right: 0;
            margin-bottom: 20px; }
            section.about_main .inner .img_box figure:last-child {
              margin-bottom: 0; } }
        section.about_main .inner .img_box figure img {
          border-radius: 20px;
          overflow: hidden; }

section.map {
  position: relative;
  background-image: url(../images/footer_bg.png);
  background-size: cover;
  background-repeat: repeat-x;
  background-position: center top;
  padding: 90px 0 50px 0;
  margin-top: -110px;
  margin-bottom: -190px;
  overflow: hidden; }
  @media only screen and (max-width: 950px) {
    section.map {
      background-position: 60% top;
      background-size: cover;
      margin-top: -80px;
      padding: 100px 0 50px 0;
      margin-bottom: -150px; } }
  section.map .inner {
    max-width: 1300px;
    width: calc(100% - 40px);
    margin: 0 auto 20px;
    position: relative;
    left: 12vw; }
    @media only screen and (max-width: 1200px) {
      section.map .inner {
        left: initial; } }
    section.map .inner .info_box {
      display: inline-block;
      vertical-align: top;
      width: 360px;
      margin-top: 80px; }
      @media only screen and (max-width: 950px) {
        section.map .inner .info_box {
          width: 100%;
          display: block;
          margin-top: 0;
          margin-bottom: 30px; } }
      section.map .inner .info_box h2 {
        margin-bottom: 40px; }
      section.map .inner .info_box .row {
        margin-bottom: 20px; }
        section.map .inner .info_box .row span {
          font-size: 18px;
          line-height: 20px;
          display: inline-block;
          vertical-align: top;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          background-color: #fff;
          padding: 5px 10px;
          text-align: center;
          border-radius: 20px;
          margin-right: 10px;
          margin-top: 3px; }
        section.map .inner .info_box .row p, section.map .inner .info_box .row a {
          font-size: 18px;
          line-height: 34px;
          letter-spacing: 5%;
          display: inline-block;
          vertical-align: top;
          width: calc(100% - 70px); }
          section.map .inner .info_box .row p.phone, section.map .inner .info_box .row a.phone {
            font-weight: bold;
            font-size: 24px; }
    section.map .inner figure {
      max-width: 814px;
      width: calc(100% - 365px);
      display: inline-block;
      vertical-align: top;
      position: relative; }
      @media only screen and (max-width: 950px) {
        section.map .inner figure {
          width: 100%; } }
      @media only screen and (max-width: 600px) {
        section.map .inner figure {
          width: 140%;
          left: 50%;
          margin-left: -70%;
          display: block; } }