@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Cormorant+Upright:wght@300;400;500;600;700&family=Noto+Sans+TC:wght@500;600;700&family=Noto+Serif+TC:wght@300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none; }

::-webkit-scrollbar-thumb {
  background: #989898; }

::-webkit-scrollbar-track {
  background: #f1f1f1; }

::-webkit-scrollbar {
  width: 7px;
  height: 7px; }

::selection {
  color: #fff;
  background-color: #333; }

:root {
  --loadingvh: 1vh; }

.loading-screen {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999999;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden; }
  @media all and (max-width: 500px) {
    .loading-screen {
      height: calc(var(--loadingvh, 1vh) * 99); } }
  .loading-screen .logo-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin-bottom: 5vw; }
    @media all and (max-width: 500px) {
      .loading-screen .logo-box {
        margin-bottom: 33vw; } }
    .loading-screen .logo-box .loader__wrap {
      width: 100%;
      height: 100%;
      display: flex;
      z-index: 1;
      margin-bottom: 1vw; }
      @media all and (max-width: 500px) {
        .loading-screen .logo-box .loader__wrap {
          margin-bottom: 5vw; } }
    .loading-screen .logo-box .loader {
      --sz: 7rem;
      width: calc(var(--sz) * 2);
      height: var(--sz);
      margin: auto;
      display: flex;
      justify-content: space-evenly; }
    .loading-screen .logo-box .loader__sq {
      --p-sz: calc(var(--sz) / 4);
      --m-offset: calc((var(--p-sz) * -1) * 0.75);
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: space-evenly;
      height: 100%;
      width: 50%; }
      @media all and (max-width: 500px) {
        .loading-screen .logo-box .loader__sq {
          --p-sz: calc(var(--sz) /5); } }
      .loading-screen .logo-box .loader__sq::before, .loading-screen .logo-box .loader__sq::after {
        width: var(--p-sz);
        height: var(--p-sz);
        content: "";
        position: relative;
        transform: translateY(calc((var(--sz) - var(--p-sz)) * -1));
        animation: loader-box-bounce 0.5s cubic-bezier(0.3, 0.5, 0.4, 0.95) calc(var(--i) * 0.06s) infinite alternate-reverse; }
      .loading-screen .logo-box .loader__sq:first-of-type {
        margin-right: var(--m-offset); }
        .loading-screen .logo-box .loader__sq:first-of-type::before {
          --i: 1;
          border: 3px solid #86d5fb;
          border-radius: 50%; }
        .loading-screen .logo-box .loader__sq:first-of-type::after {
          --i: 3;
          background-color: #5186C4; }
          @supports (clip-path: circle()) {
            .loading-screen .logo-box .loader__sq:first-of-type::after {
              clip-path: polygon(50% 0%, 100% 100%, 0% 100%); } }
      .loading-screen .logo-box .loader__sq:nth-of-type(2)::before {
        --i: 2;
        border: 3px solid #5186c4; }
      .loading-screen .logo-box .loader__sq:nth-of-type(2)::after {
        --i: 4;
        background-color: #86d5fb;
        border-radius: 50%; }
        @supports (clip-path: circle()) {
          .loading-screen .logo-box .loader__sq:nth-of-type(2)::after {
            border-radius: 0;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } }
@keyframes loader-box-bounce {
  to {
    transform: translateY(0); } }
    .loading-screen .logo-box .loading-text {
      display: flex;
      justify-content: center;
      font-family: 'Noto Serif TC';
      align-items: center;
      letter-spacing: 0.1em;
      font-weight: 600;
      font-size: 0.8vw;
      padding-left: 0.6vw;
      color: #5186C4; }
      @media all and (max-width: 1440px) {
        .loading-screen .logo-box .loading-text {
          font-size: 1vw; } }
      @media all and (max-width: 1024px) {
        .loading-screen .logo-box .loading-text {
          font-size: 3.2vw; } }
      @media all and (max-width: 500px) {
        .loading-screen .logo-box .loading-text {
          font-size: 5vw; } }

header {
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 1vw;
  width: 100%;
  display: flex;
  justify-content: right;
  text-align: center;
  align-items: center;
  font-family: "微軟正黑體";
  letter-spacing: 0.1em;
  z-index: 99; }
  @media all and (max-width: 1440px) {
    header {
      padding-top: 1.5vw; } }
  @media all and (max-width: 1024px) {
    header {
      position: fixed;
      padding: 2vw 5vw;
      box-shadow: 0px 2px 9px rgba(57, 63, 72, 0.12);
      justify-content: space-between;
      background-color: white; } }
  header .left-box {
    display: flex; }
    header .left-box .logo-box {
      padding-right: 7vw; }
      @media all and (max-width: 1440px) {
        header .left-box .logo-box {
          padding-right: 5vw; } }
      @media all and (max-width: 1366px) {
        header .left-box .logo-box {
          padding-right: 3vw; } }
      @media all and (max-width: 1024px) {
        header .left-box .logo-box {
          display: flex;
          width: 100%; } }
      @media all and (max-width: 1024px) {
        header .left-box .logo-box a {
          display: flex;
          width: 100%; } }
      header .left-box .logo-box img {
        width: 6vw;
        align-items: center;
        display: flex; }
        @media all and (max-width: 1440px) {
          header .left-box .logo-box img {
            width: 7.5vw; } }
        @media all and (max-width: 1024px) {
          header .left-box .logo-box img {
            width: 27vw; } }
  header .right-box {
    display: flex;
    padding-right: 15vw; }
    @media all and (max-width: 1920px) {
      header .right-box {
        padding-right: 11vw; } }
    @media all and (max-width: 1440px) {
      header .right-box {
        padding-right: 5vw; } }
    @media all and (max-width: 1024px) {
      header .right-box {
        display: none; } }
    header .right-box .menu-link {
      display: flex;
      font-size: 20px;
      color: #000000;
      font-weight: bold;
      font-size: 0.61vw; }
      @media all and (max-width: 1920px) {
        header .right-box .menu-link {
          font-size: 15px; } }
      @media all and (max-width: 1440px) {
        header .right-box .menu-link {
          font-size: 13px; } }
      header .right-box .menu-link .link {
        margin-left: 3vw;
        cursor: pointer; }
        header .right-box .menu-link .link a {
          color: #000000; }
      header .right-box .menu-link .about-link {
        display: flex;
        flex-direction: column; }
        header .right-box .menu-link .about-link:hover, header .right-box .menu-link .about-link:focus, header .right-box .menu-link .about-link:active {
          color: #5186c4; }
        header .right-box .menu-link .about-link .nohidden-box {
          display: flex;
          position: relative;
          padding-right: 1vw;
          background-image: url(../images/arrow.svg);
          background-repeat: no-repeat;
          background-size: 0.8vw;
          background-position-y: 0.2vw;
          background-position-x: 2.7vw;
          transition: background-image 0.2s ease; }
          header .right-box .menu-link .about-link .nohidden-box:hover, header .right-box .menu-link .about-link .nohidden-box:focus, header .right-box .menu-link .about-link .nohidden-box:active {
            color: #5186c4;
            background-image: url(../images/arrow_hover.svg); }
          @media all and (max-width: 1920px) {
            header .right-box .menu-link .about-link .nohidden-box {
              padding-right: 1.25vw;
              background-position-x: 3.5vw;
              background-position-y: 0.3vw; } }
          @media all and (max-width: 1680px) {
            header .right-box .menu-link .about-link .nohidden-box {
              padding-right: 1.25vw;
              background-size: 1vw;
              background-position-x: 4vw;
              background-position-y: 0.3vw; } }
          @media all and (max-width: 1440px) {
            header .right-box .menu-link .about-link .nohidden-box {
              padding-right: 1.4vw;
              background-size: 1vw;
              background-position-x: 4vw; } }
          @media all and (max-width: 1366px) {
            header .right-box .menu-link .about-link .nohidden-box {
              background-size: 1.1vw;
              background-position-y: 0.35vw; } }
          @media all and (max-width: 1280px) {
            header .right-box .menu-link .about-link .nohidden-box {
              background-position-x: 4.6vw; } }
        header .right-box .menu-link .about-link .hidden-about {
          margin-top: 0.5vw;
          display: flex;
          flex-direction: column;
          text-align: left;
          padding-left: 0.3vw;
          border-left: 1px solid black;
          position: absolute;
          top: 2vw;
          opacity: 0;
          z-index: -1; }
          @media all and (max-width: 1680px) {
            header .right-box .menu-link .about-link .hidden-about {
              margin-top: 1.7vw; } }
          header .right-box .menu-link .about-link .hidden-about a:hover, header .right-box .menu-link .about-link .hidden-about a:focus, header .right-box .menu-link .about-link .hidden-about a:active {
            color: #5186c4; }
          header .right-box .menu-link .about-link .hidden-about :nth-child(1) {
            margin-bottom: 0.5vw; }
  header .menu-btn {
    display: none;
    padding-top: 2vw;
    padding-bottom: 2vw; }
    @media all and (max-width: 1024px) {
      header .menu-btn {
        display: flex; } }
    header .menu-btn img {
      width: 8vw; }

.active {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  -webkit-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  box-shadow: 0px 15px 10px -15px rgba(104, 104, 104, 0.17); }

.menu-moblie {
  position: fixed;
  z-index: -1;
  opacity: 0;
  max-width: 1024px;
  width: 100vw;
  height: 0vh;
  background-color: #4DCFE5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 30vw;
  padding-bottom: 5vw;
  overflow: hidden; }
  .menu-moblie .close-btn {
    position: absolute;
    top: 4vw;
    right: 4.5vw; }
    .menu-moblie .close-btn img {
      width: 55px; }
      @media all and (max-width: 500px) {
        .menu-moblie .close-btn img {
          width: 8vw; } }
      @media all and (max-width: 280px) {
        .menu-moblie .close-btn img {
          width: 7vw; } }
  .menu-moblie .link-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding-left: 15vw; }
    .menu-moblie .link-box a {
      display: flex;
      color: white;
      margin-bottom: 5vw; }
      @media all and (max-width: 500px) {
        .menu-moblie .link-box a {
          margin-bottom: 7.5vw; } }
      .menu-moblie .link-box a .link {
        display: flex;
        font-family: 'Cormorant Garamond';
        font-size: 5.5vw;
        letter-spacing: 0.3em;
        align-items: center;
        font-weight: 500; }
        @media all and (max-width: 500px) {
          .menu-moblie .link-box a .link {
            font-size: 6vw; } }
      .menu-moblie .link-box a .number {
        display: flex;
        font-family: 'Cormorant Garamond';
        font-size: 2.5vw;
        align-items: center;
        letter-spacing: 0.1em;
        margin-left: 10.5vw; }
        @media all and (max-width: 500px) {
          .menu-moblie .link-box a .number {
            font-size: 4vw; } }
    .menu-moblie .link-box .about-box {
      display: flex;
      flex-direction: column; }
      .menu-moblie .link-box .about-box .about-nohidden-box-moblie {
        display: flex; }
        .menu-moblie .link-box .about-box .about-nohidden-box-moblie .about-text {
          display: flex;
          font-family: 'Cormorant Garamond';
          font-size: 5.5vw;
          letter-spacing: 0.3em;
          align-items: center;
          font-weight: 500;
          color: white; }
          @media all and (max-width: 500px) {
            .menu-moblie .link-box .about-box .about-nohidden-box-moblie .about-text {
              font-size: 6vw; } }
        .menu-moblie .link-box .about-box .about-nohidden-box-moblie .arrow {
          display: flex;
          width: 3.5vw;
          margin-left: 0.5vw; }
          @media all and (max-width: 500px) {
            .menu-moblie .link-box .about-box .about-nohidden-box-moblie .arrow {
              width: 4vw;
              margin-left: 1vw; } }
          .menu-moblie .link-box .about-box .about-nohidden-box-moblie .arrow img {
            width: 100%; }
        .menu-moblie .link-box .about-box .about-nohidden-box-moblie .number {
          display: flex;
          font-family: 'Cormorant Garamond';
          font-size: 2.5vw;
          align-items: center;
          letter-spacing: 0.1em;
          margin-left: 5vw;
          color: white;
          font-weight: bolder; }
          @media all and (max-width: 500px) {
            .menu-moblie .link-box .about-box .about-nohidden-box-moblie .number {
              font-size: 4vw;
              margin-bottom: 1vw; } }
      .menu-moblie .link-box .about-box .about-hidden-box-moblie {
        margin-top: 6vw;
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-left: 3vw;
        padding-left: 4vw;
        border-left: 1px solid white;
        height: 17vw;
        font-family: 'Noto Serif TC', serif;
        letter-spacing: 0.2em;
        color: white;
        height: 17vw;
        z-index: 1;
        font-size: 4.2vw;
        margin-bottom: 7vw; }
        .menu-moblie .link-box .about-box .about-hidden-box-moblie .a-box {
          display: flex;
          flex-direction: column; }
          .menu-moblie .link-box .about-box .about-hidden-box-moblie .a-box :nth-child(1) {
            margin-bottom: 4vw; }
    .menu-moblie .link-box .work-link .number {
      margin-left: 10vw; }
      @media all and (max-width: 500px) {
        .menu-moblie .link-box .work-link .number {
          margin-left: 14vw; } }
  .menu-moblie .copyright-box {
    font-family: 'Noto Serif TC', serif;
    letter-spacing: 0.15em;
    color: white;
    display: flex;
    font-size: 2.5vw;
    justify-content: center; }
    @media all and (max-width: 500px) {
      .menu-moblie .copyright-box {
        font-size: 3vw; } }

footer {
  position: relative;
  bottom: 0px;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 0.2em;
  text-align: center;
  padding-bottom: 1vw;
  font-size: 0.8vw;
  width: 100%; }
  @media all and (max-width: 1440px) {
    footer {
      font-size: 0.9vw; } }
  @media all and (max-width: 1024px) {
    footer {
      font-size: 16px;
      padding: 2vw 0vw;
      background-color: white; } }
  @media all and (max-width: 500px) {
    footer {
      font-size: 3.3vw;
      padding-bottom: 4vw; } }
  @media all and (max-width: 375px) {
    footer {
      font-size: 3.2vw; } }

@media all and (max-width: 1680px) {
  .index-body header .right-box {
    padding-right: 5vw; } }
.index-body .container {
  background-image: url(../images/home/fixed_bg.webp);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  position: relative;
  opacity: 0; }
  @media all and (max-width: 1024px) {
    .index-body .container {
      background-image: url(../images/home/bg_moblie.webp);
      background-attachment: initial;
      background-size: contain;
      background-position: right; } }
  .index-body .container .c1-box {
    display: flex;
    width: 100%;
    background-color: white;
    height: 100vh;
    border-bottom-right-radius: 10vw;
    position: relative;
    overflow: hidden; }
    @media all and (max-width: 1024px) {
      .index-body .container .c1-box {
        flex-direction: column;
        height: auto;
        border-bottom-right-radius: 25vw; } }
    .index-body .container .c1-box .float-box {
      position: absolute;
      z-index: 1;
      left: 30vw;
      top: 17vw; }
      @media all and (max-width: 1440px) {
        .index-body .container .c1-box .float-box {
          top: 19vw; } }
      @media all and (max-width: 1024px) {
        .index-body .container .c1-box .float-box {
          top: 76vw;
          left: -10vw; } }
      @media all and (max-width: 500px) {
        .index-body .container .c1-box .float-box {
          top: 116vw;
          left: -7vw; } }
      .index-body .container .c1-box .float-box img {
        width: 22vw; }
        @media all and (max-width: 1440px) {
          .index-body .container .c1-box .float-box img {
            width: 24vw; } }
        @media all and (max-width: 1024px) {
          .index-body .container .c1-box .float-box img {
            width: 35vw; } }
        @media all and (max-width: 500px) {
          .index-body .container .c1-box .float-box img {
            width: 44vw; } }
    .index-body .container .c1-box .bottom-float-box {
      position: absolute;
      z-index: 1;
      right: 20vw;
      bottom: 3vw;
      mask-image: url(../images/home/mask.png);
      -webkit-mask-size: 2%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: left;
      mask-size: 2%;
      mask-repeat: no-repeat;
      mask-position: left; }
      @media all and (max-width: 1024px) {
        .index-body .container .c1-box .bottom-float-box {
          right: initial;
          left: -2vw;
          bottom: 14vw;
          -moz-transform: scaleX(-1);
          -webkit-transform: scaleX(-1);
          -o-transform: scaleX(-1);
          transform: scaleX(-1); } }
      .index-body .container .c1-box .bottom-float-box img {
        width: 36vw; }
        @media all and (max-width: 1024px) {
          .index-body .container .c1-box .bottom-float-box img {
            width: 55vw; } }
    .index-body .container .c1-box .c1-left-box {
      width: 40%;
      height: 100vh;
      overflow: hidden;
      font-family: "Cormorant Garamond";
      position: relative;
      font-size: 6.5vw;
      color: white; }
      @media all and (max-width: 1440px) {
        .index-body .container .c1-box .c1-left-box {
          font-size: 7.5vw;
          width: 42%; } }
      @media all and (max-width: 1024px) {
        .index-body .container .c1-box .c1-left-box {
          width: 100%;
          height: 90vh;
          font-size: 14vw; } }
      @media all and (max-width: 500px) {
        .index-body .container .c1-box .c1-left-box {
          font-size: 18vw; } }
      .index-body .container .c1-box .c1-left-box .top-small-box {
        position: absolute;
        z-index: 2;
        left: 3.5vw;
        top: 4vw; }
        @media all and (max-width: 1024px) {
          .index-body .container .c1-box .c1-left-box .top-small-box {
            display: none; } }
        .index-body .container .c1-box .c1-left-box .top-small-box img {
          width: 34vw; }
        .index-body .container .c1-box .c1-left-box .top-small-box #top-small-svg {
          width: 35vw; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-left-box .top-small-box #top-small-svg {
              width: 100vw; } }
          .index-body .container .c1-box .c1-left-box .top-small-box #top-small-svg textPath {
            font-size: 14px; }
      .index-body .container .c1-box .c1-left-box .top-small-box-moblie {
        display: none;
        position: absolute;
        z-index: 2;
        left: -2.5vw;
        top: 3vw; }
        @media all and (max-width: 1024px) {
          .index-body .container .c1-box .c1-left-box .top-small-box-moblie {
            display: flex;
            top: 8vw; } }
        @media all and (max-width: 500px) {
          .index-body .container .c1-box .c1-left-box .top-small-box-moblie {
            top: 18vw; } }
        .index-body .container .c1-box .c1-left-box .top-small-box-moblie img {
          width: 34vw; }
        .index-body .container .c1-box .c1-left-box .top-small-box-moblie #top-small-svg-moblie {
          width: 110vw; }
      .index-body .container .c1-box .c1-left-box .middle-main-box {
        display: flex;
        z-index: 99999;
        width: 100%;
        flex-direction: column; }
        @media all and (max-width: 1024px) {
          .index-body .container .c1-box .c1-left-box .middle-main-box {
            padding-top: 20vw; } }
        @media all and (max-width: 500px) {
          .index-body .container .c1-box .c1-left-box .middle-main-box {
            padding-top: 40vw; } }
        .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box {
          display: flex;
          z-index: 2;
          z-index: 99999;
          padding-top: 5vw;
          padding-left: 4.3vw;
          position: relative; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box {
              padding-top: 12vw;
              padding-left: 12vw; } }
          .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text {
            display: flex;
            letter-spacing: 0.15em;
            position: relative; }
            .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text #c1-yep-svg {
              width: 18vw; }
            .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .y {
              transform: translate(2.2vw, 6.2vw) rotate(-9.15deg); }
              @media all and (max-width: 1024px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .y {
                  transform: translate(2.2vw, 5.78vw) rotate(-10deg); } }
            .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .e {
              transform: translate(1.9vw, 5.2vw) rotate(-15.8deg); }
              @media all and (max-width: 1024px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .e {
                  transform: translate(0.7vw, 4vw) rotate(-14.3deg); } }
            .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .p {
              transform: translate(1.4vw, 3.7vw) rotate(-24.9301deg); }
              @media all and (max-width: 1024px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .p {
                  transform: translate(-1.5vw, 1.3vw) rotate(-23deg); } }
            .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .yep-line {
              position: absolute;
              top: 9vw;
              left: -2.5vw; }
              @media all and (max-width: 1024px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .yep-line {
                  top: 11vw;
                  left: -6.5vw; } }
              @media all and (max-width: 500px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .yep-line {
                  top: 13vw;
                  left: -8.5vw; } }
              .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .yep-line img {
                width: 18vw; }
                @media all and (max-width: 1440px) {
                  .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .yep-line img {
                    width: 19vw; } }
                @media all and (max-width: 1024px) {
                  .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .yep-line img {
                    width: 34vw; } }
                @media all and (max-width: 500px) {
                  .index-body .container .c1-box .c1-left-box .middle-main-box .yep-box .text .yep-line img {
                    width: 45vw; } }
        .index-body .container .c1-box .c1-left-box .middle-main-box .middle-line {
          position: relative;
          left: 12vw;
          top: 4.5vw;
          z-index: 99; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-left-box .middle-main-box .middle-line {
              left: 26vw;
              top: 2.5vw; } }
          @media all and (max-width: 500px) {
            .index-body .container .c1-box .c1-left-box .middle-main-box .middle-line {
              left: 31vw;
              top: 3vw; } }
          .index-body .container .c1-box .c1-left-box .middle-main-box .middle-line img {
            width: 8vw; }
            @media all and (max-width: 1680px) {
              .index-body .container .c1-box .c1-left-box .middle-main-box .middle-line img {
                width: 12vw; } }
            @media all and (max-width: 1366px) {
              .index-body .container .c1-box .c1-left-box .middle-main-box .middle-line img {
                width: 8vw; } }
            @media all and (max-width: 1280px) {
              .index-body .container .c1-box .c1-left-box .middle-main-box .middle-line img {
                width: 12vw; } }
            @media all and (max-width: 1024px) {
              .index-body .container .c1-box .c1-left-box .middle-main-box .middle-line img {
                width: 18vw; } }
        .index-body .container .c1-box .c1-left-box .middle-main-box .media-box {
          position: relative;
          z-index: 2;
          position: relative;
          left: 15vw;
          top: -3.5vw; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-left-box .middle-main-box .media-box {
              left: 32vw;
              top: -11vw; } }
          .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .text {
            display: flex; }
            .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .text .m {
              transform: translate(41.2px, 125.77px) rotate(5.47deg);
              transform: translate(1.3vw, 4vw) rotate(5.46972deg); }
            .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .text .e {
              transform: translate(56.61px, 163.5px) rotate(21.47deg);
              transform: translate(1.8vw, 5.1vw) rotate(21.4698deg); }
              @media all and (max-width: 1024px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .text .e {
                  transform: translate(4vw, 7vw) rotate(21.4698deg); } }
            .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .text .d {
              transform: translate(67.18px, 221.58px) rotate(27.8deg);
              transform: translate(2.1vw, 6.9vw) rotate(21.8002deg); }
              @media all and (max-width: 1024px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .text .d {
                  transform: translate(4.7vw, 12vw) rotate(27deg); } }
            .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .text .i {
              transform: translate(63.22px, 255.61px) rotate(22.71deg);
              transform: translate(2vw, 8vw) rotate(22.7102deg); }
              @media all and (max-width: 1024px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .text .i {
                  transform: translate(5vw, 16vw) rotate(22deg); } }
            .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .text .a {
              transform: translate(68.59px, 288.87px) rotate(11.2deg);
              transform: translate(2.15vw, 9vw) rotate(11.1997deg); }
              @media all and (max-width: 1024px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .text .a {
                  transform: translate(5.5vw, 19vw) rotate(11.1997deg); } }
          .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .media-line {
            position: absolute;
            top: 10vw; }
            @media all and (max-width: 1440px) {
              .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .media-line {
                top: 10.5vw; } }
            @media all and (max-width: 1280px) {
              .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .media-line {
                top: 11vw; } }
            @media all and (max-width: 1024px) {
              .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .media-line {
                top: 18vw;
                left: -3vw; } }
            @media all and (max-width: 500px) {
              .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .media-line {
                top: 19vw; } }
            .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .media-line img {
              width: 21vw; }
              @media all and (max-width: 1440px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .media-line img {
                  width: 23vw; } }
              @media all and (max-width: 1024px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .media-line img {
                  width: 52vw; } }
              @media all and (max-width: 500px) {
                .index-body .container .c1-box .c1-left-box .middle-main-box .media-box .media-line img {
                  width: 65vw; } }
      .index-body .container .c1-box .c1-left-box .open-circle {
        position: absolute;
        bottom: 1vw;
        left: 3vw;
        z-index: 3; }
        @media all and (max-width: 1024px) {
          .index-body .container .c1-box .c1-left-box .open-circle {
            display: none; } }
        .index-body .container .c1-box .c1-left-box .open-circle .circle-box {
          width: 100%; }
          .index-body .container .c1-box .c1-left-box .open-circle .circle-box img {
            width: 10vw; }
      .index-body .container .c1-box .c1-left-box .video-box {
        width: 100%;
        height: 100%;
        z-index: 0;
        position: absolute;
        top: 0px;
        left: 0px; }
        .index-body .container .c1-box .c1-left-box .video-box video {
          width: 100%;
          height: 100%;
          object-fit: cover; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-left-box .video-box video {
              height: 100%; } }
    .index-body .container .c1-box .c1-right-box {
      width: 60%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative; }
      @media all and (max-width: 1024px) {
        .index-body .container .c1-box .c1-right-box {
          width: 100%;
          height: 85vh;
          flex-direction: column-reverse; } }
      @media all and (max-width: 500px) {
        .index-body .container .c1-box .c1-right-box {
          height: 70vh; } }
      .index-body .container .c1-box .c1-right-box .open-circle-moblie {
        display: none;
        position: absolute;
        top: -7vw;
        right: 9vw;
        overflow: hidden; }
        @media all and (max-width: 1024px) {
          .index-body .container .c1-box .c1-right-box .open-circle-moblie {
            display: flex;
            top: -13vw; } }
        .index-body .container .c1-box .c1-right-box .open-circle-moblie .circle-box {
          border-radius: 28vw;
          width: 100%;
          position: relative;
          overflow: hidden;
          width: 18vw;
          height: 18vw; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-right-box .open-circle-moblie .circle-box {
              width: 20vw;
              height: 20vw; } }
          @media all and (max-width: 500px) {
            .index-body .container .c1-box .c1-right-box .open-circle-moblie .circle-box {
              width: 25vw;
              height: 25vw; } }
          .index-body .container .c1-box .c1-right-box .open-circle-moblie .circle-box img {
            width: 30vw;
            height: 29vw;
            margin-top: -7vw;
            margin-left: -8vw;
            overflow: hidden; }
            @media all and (max-width: 1024px) {
              .index-body .container .c1-box .c1-right-box .open-circle-moblie .circle-box img {
                width: 40vw;
                height: 39vw;
                margin-top: -15vw; } }
            @media all and (max-width: 500px) {
              .index-body .container .c1-box .c1-right-box .open-circle-moblie .circle-box img {
                width: 45vw;
                height: 44vw; } }
      .index-body .container .c1-box .c1-right-box .rectangle-box {
        width: 17.6vw;
        margin-bottom: 5vw;
        position: relative;
        font-family: "Cormorant Garamond"; }
        @media all and (max-width: 1024px) {
          .index-body .container .c1-box .c1-right-box .rectangle-box {
            width: 48vw; } }
        .index-body .container .c1-box .c1-right-box .rectangle-box .rectangle {
          width: 100%; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-right-box .rectangle-box .rectangle {
              display: none; } }
        .index-body .container .c1-box .c1-right-box .rectangle-box .rectangle-moblie {
          width: 100%;
          display: none; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-right-box .rectangle-box .rectangle-moblie {
              display: flex;
              margin-top: 15vw; } }
        .index-body .container .c1-box .c1-right-box .rectangle-box .text-integral {
          position: absolute;
          background-color: white;
          top: 4.5vw;
          left: -0.6vw;
          font-size: 1.3vw;
          letter-spacing: 0.4em; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-right-box .rectangle-box .text-integral {
              font-size: 4.8vw;
              top: 23.5vw;
              left: -2.5vw; } }
          .index-body .container .c1-box .c1-right-box .rectangle-box .text-integral img {
            height: 0.9vw; }
        .index-body .container .c1-box .c1-right-box .rectangle-box .text-marketing {
          position: absolute;
          background-color: white;
          top: 7.3vw;
          left: 2.5vw;
          font-size: 1.3vw;
          letter-spacing: 0.4em; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-right-box .rectangle-box .text-marketing {
              font-size: 4.8vw;
              top: 31vw;
              left: 6vw; } }
          .index-body .container .c1-box .c1-right-box .rectangle-box .text-marketing img {
            height: 1.1vw; }
        .index-body .container .c1-box .c1-right-box .rectangle-box .text-planning {
          position: absolute;
          background-color: white;
          top: 10.1vw;
          left: 7.5vw;
          font-size: 1.3vw;
          letter-spacing: 0.4em; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-right-box .rectangle-box .text-planning {
              font-size: 4.8vw;
              top: 38vw;
              left: 14vw; } }
          .index-body .container .c1-box .c1-right-box .rectangle-box .text-planning img {
            height: 1.1vw; }
        .index-body .container .c1-box .c1-right-box .rectangle-box .text-design {
          position: absolute;
          background-color: white;
          top: 13vw;
          left: 12.5vw;
          font-size: 1.3vw;
          letter-spacing: 0.4em; }
          @media all and (max-width: 1024px) {
            .index-body .container .c1-box .c1-right-box .rectangle-box .text-design {
              font-size: 4.8vw;
              top: 45.5vw;
              left: 28vw;
              width: 26vw; } }
          .index-body .container .c1-box .c1-right-box .rectangle-box .text-design img {
            height: 1.2vw; }
      .index-body .container .c1-box .c1-right-box .title {
        position: absolute;
        right: 8vw;
        display: flex;
        writing-mode: vertical-rl;
        font-size: 1.2vw;
        letter-spacing: 1em;
        font-family: "Noto Serif TC";
        align-items: center;
        font-weight: 600;
        margin-bottom: 4.5vw; }
        @media all and (max-width: 1440px) {
          .index-body .container .c1-box .c1-right-box .title {
            margin-bottom: 0vw;
            font-size: 1.5vw; } }
        @media all and (max-width: 1024px) {
          .index-body .container .c1-box .c1-right-box .title {
            display: none; } }
      .index-body .container .c1-box .c1-right-box .title-moblie {
        display: none;
        letter-spacing: 0.6em;
        align-items: center;
        font-weight: 600;
        font-family: "Noto Serif TC"; }
        @media all and (max-width: 1024px) {
          .index-body .container .c1-box .c1-right-box .title-moblie {
            display: flex;
            font-size: 5vw;
            font-weight: 500; } }
  .index-body .container .c2-box {
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative; }
    @media all and (max-width: 1024px) {
      .index-body .container .c2-box {
        flex-direction: column;
        height: auto;
        padding-bottom: 27vw; } }
    .index-body .container .c2-box .left-box {
      width: 20%;
      height: 100vh;
      display: flex;
      background-color: white;
      padding-top: 5vw;
      justify-content: center; }
      @media all and (max-width: 1024px) {
        .index-body .container .c2-box .left-box {
          background-color: unset;
          background: none;
          width: 100%;
          padding-top: 8vw;
          height: auto; } }
      .index-body .container .c2-box .left-box .title-box {
        writing-mode: vertical-rl;
        font-size: 1.5vw;
        letter-spacing: 1em;
        font-family: "Noto Serif TC", serif;
        font-weight: bold; }
        @media all and (max-width: 1440px) {
          .index-body .container .c2-box .left-box .title-box {
            margin-bottom: 0vw;
            font-size: 1.8vw; } }
        @media all and (max-width: 1024px) {
          .index-body .container .c2-box .left-box .title-box {
            font-size: 5.5vw;
            font-weight: 500; } }
        @media all and (max-width: 1024px) {
          .index-body .container .c2-box .left-box .title-box {
            writing-mode: initial;
            justify-content: center;
            text-align: center;
            padding-left: 4vw; } }
    .index-body .container .c2-box .right-box {
      display: flex;
      width: 80%;
      height: 100vh;
      position: relative;
      overflow: hidden; }
      .index-body .container .c2-box .right-box .c2-cover-bg {
        position: absolute;
        z-index: 99;
        background-color: #fff;
        width: 100vw;
        height: 100vh; }
        @media all and (max-width: 1024px) {
          .index-body .container .c2-box .right-box .c2-cover-bg {
            display: none; } }
      @media all and (max-width: 1024px) {
        .index-body .container .c2-box .right-box {
          width: 100%;
          flex-direction: column-reverse;
          height: auto; } }
      .index-body .container .c2-box .right-box .c2-rectangle-box {
        margin-top: 4vw;
        margin-left: 5.5vw;
        position: relative; }
        @media all and (max-width: 1024px) {
          .index-body .container .c2-box .right-box .c2-rectangle-box {
            display: flex;
            justify-content: center;
            margin-top: 4vw;
            margin-left: 0vw; } }
        .index-body .container .c2-box .right-box .c2-rectangle-box .c2-rectangle {
          z-index: 1;
          width: 28vw; }
          @media all and (max-width: 1024px) {
            .index-body .container .c2-box .right-box .c2-rectangle-box .c2-rectangle {
              display: none; } }
        .index-body .container .c2-box .right-box .c2-rectangle-box .c2-rectangle-moblie {
          z-index: 1;
          width: 33vw;
          display: none; }
          @media all and (max-width: 1024px) {
            .index-body .container .c2-box .right-box .c2-rectangle-box .c2-rectangle-moblie {
              display: flex; } }
        .index-body .container .c2-box .right-box .c2-rectangle-box .text-svg {
          position: absolute;
          z-index: 2;
          left: -5vw;
          bottom: 16vw; }
          @media all and (max-width: 1440px) {
            .index-body .container .c2-box .right-box .c2-rectangle-box .text-svg {
              bottom: 21vw; } }
          @media all and (max-width: 1024px) {
            .index-body .container .c2-box .right-box .c2-rectangle-box .text-svg {
              bottom: 8vw;
              left: 28vw; } }
          .index-body .container .c2-box .right-box .c2-rectangle-box .text-svg img {
            width: 27vw; }
            @media all and (max-width: 1024px) {
              .index-body .container .c2-box .right-box .c2-rectangle-box .text-svg img {
                width: 45vw; } }
          @media all and (max-width: 1024px) {
            .index-body .container .c2-box .right-box .c2-rectangle-box .text-svg .c2-small-text {
              display: none; } }
          .index-body .container .c2-box .right-box .c2-rectangle-box .text-svg .c2-small-text-moblie {
            display: none; }
            @media all and (max-width: 1024px) {
              .index-body .container .c2-box .right-box .c2-rectangle-box .text-svg .c2-small-text-moblie {
                display: flex; } }
      .index-body .container .c2-box .right-box .list-content {
        display: flex;
        flex-direction: column;
        writing-mode: vertical-rl;
        font-size: 1vw;
        letter-spacing: 1em;
        font-family: "Noto Serif TC", serif;
        font-weight: bold;
        padding-top: 6vw;
        width: 100%;
        justify-content: center; }
        @media all and (max-width: 1440px) {
          .index-body .container .c2-box .right-box .list-content {
            font-size: 1.2vw; } }
        @media all and (max-width: 1024px) {
          .index-body .container .c2-box .right-box .list-content {
            writing-mode: initial;
            font-size: 3.9vw;
            font-weight: initial;
            flex-direction: column-reverse;
            letter-spacing: 0.3em;
            padding-top: 8vw; } }
        @media all and (max-width: 500px) {
          .index-body .container .c2-box .right-box .list-content {
            font-size: 3.9vw; } }
        .index-body .container .c2-box .right-box .list-content .list {
          margin-left: 2.5vw; }
          @media all and (max-width: 1024px) {
            .index-body .container .c2-box .right-box .list-content .list {
              margin-left: 0vw;
              text-align: center;
              display: flex;
              justify-content: center;
              margin-bottom: 3vw; } }
          .index-body .container .c2-box .right-box .list-content .list .list-circle {
            display: none; }
            @media all and (max-width: 1024px) {
              .index-body .container .c2-box .right-box .list-content .list .list-circle {
                display: flex;
                margin-right: 3vw;
                width: 1vw;
                height: 1vw;
                align-self: center; } }
          @media all and (max-width: 1024px) {
            .index-body .container .c2-box .right-box .list-content .list span {
              display: none; } }
    .index-body .container .c2-box .c2-circle-box {
      position: absolute;
      bottom: -3vw;
      right: 10vw;
      overflow: hidden;
      z-index: 3; }
      @media all and (max-width: 1024px) {
        .index-body .container .c2-box .c2-circle-box {
          right: initial;
          left: -5vw;
          bottom: 20vw; } }
      .index-body .container .c2-box .c2-circle-box .c2-circle {
        border-radius: 10vw;
        width: 100%;
        position: relative;
        overflow: hidden;
        width: 17vw;
        height: 17vw; }
        @media all and (max-width: 1024px) {
          .index-body .container .c2-box .c2-circle-box .c2-circle {
            width: 25vw;
            height: 25vw;
            border-radius: 13vw; } }
        .index-body .container .c2-box .c2-circle-box .c2-circle img {
          width: 30vw;
          height: 28vw;
          overflow: hidden;
          margin-top: -8vw;
          margin-left: -10vw; }
          @media all and (max-width: 1024px) {
            .index-body .container .c2-box .c2-circle-box .c2-circle img {
              width: 36vw;
              margin-top: -6vw;
              height: 32vw; } }
  .index-body .container .c3-box {
    display: flex;
    width: 100%;
    height: 100vh;
    background-color: white;
    border-bottom-right-radius: 13vw;
    position: relative; }
    @media all and (max-width: 1024px) {
      .index-body .container .c3-box {
        flex-direction: column;
        height: auto; } }
    .index-body .container .c3-box .left-box {
      width: 40%; }
      @media all and (max-width: 1024px) {
        .index-body .container .c3-box .left-box {
          width: 100%; } }
      .index-body .container .c3-box .left-box .c3-circle-box {
        position: absolute;
        top: -4vw;
        left: -9vw;
        z-index: 3; }
        @media all and (max-width: 1024px) {
          .index-body .container .c3-box .left-box .c3-circle-box {
            position: relative;
            top: initial;
            left: initial;
            margin-top: -17vw;
            display: flex;
            justify-content: center; } }
        .index-body .container .c3-box .left-box .c3-circle-box .c3-circle {
          border-radius: 28vw;
          width: 100%;
          position: relative;
          overflow: hidden;
          width: 45vw;
          height: 45vw; }
          @media all and (max-width: 1024px) {
            .index-body .container .c3-box .left-box .c3-circle-box .c3-circle {
              width: 60vw;
              height: 60vw;
              border-radius: 37vw; } }
          .index-body .container .c3-box .left-box .c3-circle-box .c3-circle img {
            width: 65vw;
            height: 69vw;
            overflow: hidden;
            margin-top: -19vw;
            margin-left: -13vw; }
            @media all and (max-width: 1024px) {
              .index-body .container .c3-box .left-box .c3-circle-box .c3-circle img {
                width: 83vw;
                height: 92vw; } }
          .index-body .container .c3-box .left-box .c3-circle-box .c3-circle video {
            width: 100%;
            height: 100%;
            object-fit: cover; }
          .index-body .container .c3-box .left-box .c3-circle-box .c3-circle .partner-moblie {
            position: absolute;
            width: 30vw;
            display: none;
            right: 0vw;
            bottom: -2vw;
            height: auto; }
            @media all and (max-width: 1024px) {
              .index-body .container .c3-box .left-box .c3-circle-box .c3-circle .partner-moblie {
                display: block; } }
        .index-body .container .c3-box .left-box .c3-circle-box .partner {
          position: absolute;
          width: 18vw;
          bottom: 2vw;
          right: 2vw; }
          @media all and (max-width: 1024px) {
            .index-body .container .c3-box .left-box .c3-circle-box .partner {
              display: none; } }
        .index-body .container .c3-box .left-box .c3-circle-box .title-box-moblie {
          display: none; }
          @media all and (max-width: 1024px) {
            .index-body .container .c3-box .left-box .c3-circle-box .title-box-moblie {
              display: flex;
              position: absolute;
              font-size: 1.5vw;
              letter-spacing: 1em;
              font-family: "Noto Serif TC", serif;
              font-weight: bold;
              top: 25vw;
              padding-left: 4vw;
              letter-spacing: 0.7em;
              justify-content: center; } }
  @media all and (max-width: 1024px) and (max-width: 1440px) {
    .index-body .container .c3-box .left-box .c3-circle-box .title-box-moblie {
      margin-bottom: 0vw;
      font-size: 1.8vw; } }
  @media all and (max-width: 1024px) and (max-width: 1024px) {
    .index-body .container .c3-box .left-box .c3-circle-box .title-box-moblie {
      font-size: 5.5vw;
      font-weight: 500; } }

      .index-body .container .c3-box .left-box .title-box {
        position: absolute;
        top: 8vw;
        left: 11vw;
        z-index: 10;
        writing-mode: vertical-rl;
        font-size: 1.5vw;
        letter-spacing: 1em;
        font-family: "Noto Serif TC", serif;
        font-weight: bold; }
        @media all and (max-width: 1440px) {
          .index-body .container .c3-box .left-box .title-box {
            margin-bottom: 0vw;
            font-size: 1.8vw; } }
        @media all and (max-width: 1024px) {
          .index-body .container .c3-box .left-box .title-box {
            font-size: 5.5vw;
            font-weight: 500; } }
        @media all and (max-width: 1024px) {
          .index-body .container .c3-box .left-box .title-box {
            display: none; } }
    .index-body .container .c3-box .right-box {
      width: 60%;
      display: flex;
      overflow: hidden;
      padding: 7vw;
      position: relative;
      padding-top: 10vw; }
      @media all and (max-width: 1024px) {
        .index-body .container .c3-box .right-box {
          width: 100%;
          padding-top: 7vw;
          padding-bottom: 10vw; } }
      .index-body .container .c3-box .right-box .swiper-prev,
      .index-body .container .c3-box .right-box .swiper-next {
        cursor: pointer; }
      .index-body .container .c3-box .right-box .swiper-button-next,
      .index-body .container .c3-box .right-box .swiper-button-prev {
        opacity: 1;
        transition: 0.5s ease-in-out; }
      .index-body .container .c3-box .right-box .swiper-button-disabled {
        visibility: hidden;
        opacity: 0;
        transition: 0.5s ease-in-out; }
      .index-body .container .c3-box .right-box .swiper {
        width: 100%; }
        @media all and (max-width: 1024px) {
          .index-body .container .c3-box .right-box .swiper {
            overflow: initial; } }
        .index-body .container .c3-box .right-box .swiper .swiper-slide {
          display: grid;
          grid-template-rows: 50% 50%;
          grid-template-columns: 33.3% 33.3% 33.3%; }
          @media all and (max-width: 1024px) {
            .index-body .container .c3-box .right-box .swiper .swiper-slide {
              display: flex;
              grid-template-rows: initial;
              grid-template-columns: initial;
              display: flex;
              flex-wrap: wrap; } }
          @media all and (max-width: 1024px) {
            .index-body .container .c3-box .right-box .swiper .swiper-slide :nth-child(odd) {
              justify-content: end;
              padding-left: 3vw;
              padding-bottom: 2vw; } }
          @media all and (max-width: 500px) {
            .index-body .container .c3-box .right-box .swiper .swiper-slide :nth-child(odd) {
              padding-left: 0vw;
              padding-right: 1.5vw; } }
          @media all and (max-width: 1024px) {
            .index-body .container .c3-box .right-box .swiper .swiper-slide :nth-child(even) {
              justify-content: start; } }
          .index-body .container .c3-box .right-box .swiper .swiper-slide div {
            display: flex;
            justify-content: center;
            width: 100%;
            height: fit-content; }
            @media all and (max-width: 1024px) {
              .index-body .container .c3-box .right-box .swiper .swiper-slide div {
                width: 50%; } }
            .index-body .container .c3-box .right-box .swiper .swiper-slide div img {
              width: 11vw;
              filter: grayscale(1);
              transition: filter 0.5s; }
              @media all and (max-width: 1024px) {
                .index-body .container .c3-box .right-box .swiper .swiper-slide div img {
                  width: 33vw; } }
              .index-body .container .c3-box .right-box .swiper .swiper-slide div img:hover {
                filter: grayscale(0); }
        .index-body .container .c3-box .right-box .swiper .swiper-pagination {
          bottom: 0vw; }
          @media all and (max-width: 1024px) {
            .index-body .container .c3-box .right-box .swiper .swiper-pagination {
              bottom: -10vw; } }
          .index-body .container .c3-box .right-box .swiper .swiper-pagination .swiper-pagination-bullet {
            margin-right: 0.8vw;
            width: 11px;
            height: 11px; }
            @media all and (max-width: 1024px) {
              .index-body .container .c3-box .right-box .swiper .swiper-pagination .swiper-pagination-bullet {
                width: 8px;
                height: 8px; } }
          .index-body .container .c3-box .right-box .swiper .swiper-pagination .swiper-pagination-bullet-active {
            background-color: #565656; }
      .index-body .container .c3-box .right-box .swiper-prev {
        position: absolute;
        top: 22vw;
        left: 3vw; }
        @media all and (max-width: 1440px) {
          .index-body .container .c3-box .right-box .swiper-prev {
            top: 25vw; } }
        @media all and (max-width: 1024px) {
          .index-body .container .c3-box .right-box .swiper-prev {
            top: 55vw;
            right: 5vw; } }
        .index-body .container .c3-box .right-box .swiper-prev img {
          width: 30px; }
          @media all and (max-width: 1440px) {
            .index-body .container .c3-box .right-box .swiper-prev img {
              width: 17px; } }
          @media all and (max-width: 500px) {
            .index-body .container .c3-box .right-box .swiper-prev img {
              width: 3vw; } }
      .index-body .container .c3-box .right-box .swiper-next {
        position: absolute;
        top: 22vw;
        right: 3vw; }
        @media all and (max-width: 1440px) {
          .index-body .container .c3-box .right-box .swiper-next {
            top: 25vw; } }
        @media all and (max-width: 1024px) {
          .index-body .container .c3-box .right-box .swiper-next {
            top: 55vw;
            right: 5vw; } }
        .index-body .container .c3-box .right-box .swiper-next img {
          width: 30px; }
          @media all and (max-width: 1440px) {
            .index-body .container .c3-box .right-box .swiper-next img {
              width: 17px; } }
          @media all and (max-width: 500px) {
            .index-body .container .c3-box .right-box .swiper-next img {
              width: 3vw; } }
  .index-body .container .c4-box {
    display: flex;
    width: 100%;
    height: 100vh;
    background-color: white;
    position: relative;
    overflow: hidden; }
    @media all and (max-width: 1024px) {
      .index-body .container .c4-box {
        display: none; } }
    .index-body .container .c4-box .yep-svg {
      margin-top: 10vw;
      margin-left: 10vw;
      position: relative; }
      @media all and (max-width: 1440px) {
        .index-body .container .c4-box .yep-svg {
          margin-top: 15vw; } }
      @media all and (max-width: 1024px) {
        .index-body .container .c4-box .yep-svg {
          position: absolute;
          margin-top: 0vw;
          margin-left: 0vw;
          top: 23vw;
          left: 13vw; } }
      .index-body .container .c4-box .yep-svg .yep {
        width: 11vw; }
        @media all and (max-width: 1024px) {
          .index-body .container .c4-box .yep-svg .yep {
            width: 30vw; } }
      .index-body .container .c4-box .yep-svg #c4-yep-svg {
        width: 11vw; }
        @media all and (max-width: 1024px) {
          .index-body .container .c4-box .yep-svg #c4-yep-svg {
            width: 30vw; } }
      .index-body .container .c4-box .yep-svg .yep-line-svg {
        position: absolute;
        top: 3.5vw;
        left: -4.8vw; }
        @media all and (max-width: 1024px) {
          .index-body .container .c4-box .yep-svg .yep-line-svg {
            top: 10vw;
            left: -8vw; } }
        .index-body .container .c4-box .yep-svg .yep-line-svg img {
          width: 17vw; }
          @media all and (max-width: 1024px) {
            .index-body .container .c4-box .yep-svg .yep-line-svg img {
              width: 40vw; } }
    .index-body .container .c4-box .middle-line {
      position: absolute;
      top: 16vw;
      left: 15vw; }
      @media all and (max-width: 1440px) {
        .index-body .container .c4-box .middle-line {
          top: 22vw; } }
      @media all and (max-width: 1024px) {
        .index-body .container .c4-box .middle-line {
          top: 43vw;
          left: 30vw; } }
      .index-body .container .c4-box .middle-line img {
        width: 9vw; }
        @media all and (max-width: 1680px) {
          .index-body .container .c4-box .middle-line img {
            width: 6.5vw; } }
        @media all and (max-width: 1024px) {
          .index-body .container .c4-box .middle-line img {
            width: 20vw; } }
    .index-body .container .c4-box .media-svg {
      position: absolute;
      bottom: 15.5vw;
      left: 19vw; }
      @media all and (max-width: 1920px) {
        .index-body .container .c4-box .media-svg {
          bottom: 13vw; } }
      @media all and (max-width: 1440px) {
        .index-body .container .c4-box .media-svg {
          bottom: 19vw; } }
      @media all and (max-width: 1024px) {
        .index-body .container .c4-box .media-svg {
          bottom: 32vw;
          left: 39vw; } }
      @media all and (max-width: 500px) {
        .index-body .container .c4-box .media-svg {
          bottom: 43vw;
          left: 39vw; } }
    .index-body .container .c4-box .media {
      width: 15vw; }
      @media all and (max-width: 1024px) {
        .index-body .container .c4-box .media {
          width: 47vw; } }
    .index-body .container .c4-box .media-line-svg {
      position: absolute;
      top: 3vw;
      left: -2vw; }
      @media all and (max-width: 1024px) {
        .index-body .container .c4-box .media-line-svg {
          top: 11vw;
          left: -4vw; } }
      .index-body .container .c4-box .media-line-svg img {
        width: 17vw; }
        @media all and (max-width: 1024px) {
          .index-body .container .c4-box .media-line-svg img {
            width: 49vw; } }
    .index-body .container .c4-box .item1 {
      margin-left: 15vw;
      margin-top: 5vw; }
      @media all and (max-width: 1024px) {
        .index-body .container .c4-box .item1 {
          position: absolute;
          bottom: 30vw;
          left: -10vw;
          margin-left: 0vw;
          margin-top: 0vw; } }
      .index-body .container .c4-box .item1 img {
        width: 27vw; }
        @media all and (max-width: 1024px) {
          .index-body .container .c4-box .item1 img {
            width: 37vw; } }
    .index-body .container .c4-box .item2 {
      position: absolute;
      bottom: 2vw;
      left: -2vw; }
      .index-body .container .c4-box .item2 img {
        width: 35vw;
        mask-image: url(../images/home/mask.png);
        -webkit-mask-size: 0%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: left;
        mask-size: 0%;
        mask-repeat: no-repeat;
        mask-position: left; }
      .index-body .container .c4-box .item2 img {
        width: 30vw; }
        @media all and (max-width: 1024px) {
          .index-body .container .c4-box .item2 img {
            width: 35vw; } }
    .index-body .container .c4-box .item3 {
      margin-left: 10vw;
      margin-top: 12vw; }
      @media all and (max-width: 1024px) {
        .index-body .container .c4-box .item3 {
          position: absolute;
          top: 10vw;
          right: 5vw;
          margin-left: 0vw;
          margin-top: 0vw; } }
      .index-body .container .c4-box .item3 img {
        width: 16vw;
        mask-image: url(../images/home/sea_mask.png);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-size: 100%;
        mask-repeat: no-repeat;
        mask-position: center; }
        @media all and (max-width: 1024px) {
          .index-body .container .c4-box .item3 img {
            width: 23vw; } }
    .index-body .container .c4-box .text {
      position: absolute;
      font-size: 26pt;
      font-family: "Noto Serif TC";
      align-items: center;
      font-weight: bolder;
      letter-spacing: 0.7em;
      right: 10vw;
      bottom: 8vw; }
      @media all and (max-width: 1440px) {
        .index-body .container .c4-box .text {
          bottom: 10vw;
          font-size: 1.5vw; } }
      @media all and (max-width: 1024px) {
        .index-body .container .c4-box .text {
          position: relative;
          right: 0vw;
          bottom: 0vw;
          width: 100%;
          text-align: center;
          align-items: flex-end;
          justify-content: center;
          padding-bottom: 15vw;
          font-size: 3.9vw;
          display: flex; } }
      @media all and (max-width: 500px) {
        .index-body .container .c4-box .text {
          padding-bottom: 21vw; } }
  .index-body .container .c4-box-moblie {
    display: none;
    width: 100%;
    padding-top: 20vw;
    padding-bottom: 10vw;
    background-color: white;
    position: relative;
    flex-direction: column;
    overflow: hidden; }
    @media all and (max-width: 1024px) {
      .index-body .container .c4-box-moblie {
        display: flex; } }
    .index-body .container .c4-box-moblie .top-box {
      display: flex;
      flex-direction: column;
      padding-top: 5vw;
      position: relative; }
      .index-body .container .c4-box-moblie .top-box .item1 {
        position: absolute;
        left: -10vw;
        bottom: 0vw; }
        .index-body .container .c4-box-moblie .top-box .item1 img {
          width: 40vw; }
      .index-body .container .c4-box-moblie .top-box .item3 {
        position: absolute;
        right: 5vw;
        top: 12vw;
        mask-image: url(../images/home/sea_mask.png);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-size: 0%;
        mask-repeat: no-repeat;
        mask-position: center; }
        .index-body .container .c4-box-moblie .top-box .item3 img {
          width: 25vw; }
      .index-body .container .c4-box-moblie .top-box .yep-box {
        position: relative;
        padding-left: 16vw; }
        .index-body .container .c4-box-moblie .top-box .yep-box .yep {
          width: 30vw; }
        .index-body .container .c4-box-moblie .top-box .yep-box .yep-line-svg {
          margin-top: -8vw;
          margin-left: -7vw; }
          .index-body .container .c4-box-moblie .top-box .yep-box .yep-line-svg img {
            width: 40vw; }
      .index-body .container .c4-box-moblie .top-box .middle-line {
        margin-left: 30vw;
        margin-top: -7vw; }
        .index-body .container .c4-box-moblie .top-box .middle-line img {
          width: 20vw; }
      .index-body .container .c4-box-moblie .top-box .media {
        margin-left: 38vw;
        width: 47vw;
        margin-top: -2vw; }
      .index-body .container .c4-box-moblie .top-box .media-line-svg {
        margin-left: 33vw;
        margin-top: -15vw; }
        .index-body .container .c4-box-moblie .top-box .media-line-svg img {
          width: 49vw; }
    .index-body .container .c4-box-moblie .bottom-box {
      display: flex;
      flex-direction: column;
      margin-top: 7vw; }
      .index-body .container .c4-box-moblie .bottom-box .text {
        font-family: "Noto Serif TC", serif;
        align-items: center;
        font-weight: 600;
        letter-spacing: 0.7em;
        justify-content: center;
        font-size: 3.9vw;
        display: flex;
        margin-bottom: 10vw; }
      .index-body .container .c4-box-moblie .bottom-box .item2 {
        margin-left: -3vw;
        margin-bottom: 5vw;
        mask-image: url(../images/home/mask.png);
        -webkit-mask-size: 0%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: left;
        mask-size: 0%;
        mask-repeat: no-repeat;
        mask-position: left; }
        .index-body .container .c4-box-moblie .bottom-box .item2 img {
          width: 50vw; }

.about-body {
  background-image: url(../images/about/big_bg.webp);
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  display: flex;
  flex-direction: column; }
  @media all and (max-width: 1024px) {
    .about-body {
      background-image: none;
      background-color: white; } }
  .about-body .left-bg {
    position: absolute;
    left: 0px;
    top: 17vw;
    width: 0%; }
    .about-body .left-bg img {
      width: 100%; }
  .about-body .container .title-box {
    position: absolute;
    top: 5vw;
    left: 5vw;
    font-size: 3vw;
    letter-spacing: 0.3em;
    font-family: "Noto Serif TC";
    align-items: center;
    font-weight: 600; }
    @media all and (max-width: 1024px) {
      .about-body .container .title-box {
        position: initial;
        display: flex;
        flex-direction: column-reverse;
        margin-top: 20vw;
        font-size: 3.9vw; } }
    .about-body .container .title-box .text-1 {
      margin-bottom: 0.5vw; }
      @media all and (max-width: 1024px) {
        .about-body .container .title-box .text-1 {
          font-size: 7.5vw;
          margin-bottom: 0vw; } }
    @media all and (max-width: 1024px) {
      .about-body .container .title-box .text-2 {
        letter-spacing: 1em;
        padding-left: 5vw;
        margin-bottom: 3vw; } }
  .about-body .container .top-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    height: 100vh;
    justify-content: center;
    padding-left: 15vw; }
    @media all and (max-width: 1024px) {
      .about-body .container .top-box {
        height: auto;
        padding-left: 0vw; } }
    .about-body .container .top-box .top-person-box {
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      width: 33%;
      padding-left: 5%; }
      @media all and (max-width: 1024px) {
        .about-body .container .top-box .top-person-box {
          width: 100%;
          padding-top: 20vw;
          margin-bottom: 20vw; } }
      .about-body .container .top-box .top-person-box .img-box {
        width: 100%;
        margin: 0 auto; }
        .about-body .container .top-box .top-person-box .img-box img {
          height: 16vw; }
          @media all and (max-width: 1024px) {
            .about-body .container .top-box .top-person-box .img-box img {
              height: 40vw; } }
          @media all and (max-width: 500px) {
            .about-body .container .top-box .top-person-box .img-box img {
              height: 48vw; } }
      .about-body .container .top-box .top-person-box .job-title-box,
      .about-body .container .top-box .top-person-box .name-box,
      .about-body .container .top-box .top-person-box .content-box {
        margin-top: 3vw;
        font-size: 1.1vw;
        letter-spacing: 0.6em;
        font-family: "Noto Serif TC";
        align-items: center;
        font-weight: 600;
        display: flex;
        justify-content: center; }
        @media all and (max-width: 1024px) {
          .about-body .container .top-box .top-person-box .job-title-box,
          .about-body .container .top-box .top-person-box .name-box,
          .about-body .container .top-box .top-person-box .content-box {
            width: 100%;
            font-size: 3.7vw; } }
        .about-body .container .top-box .top-person-box .job-title-box .job-title,
        .about-body .container .top-box .top-person-box .job-title-box .director-name,
        .about-body .container .top-box .top-person-box .job-title-box .content,
        .about-body .container .top-box .top-person-box .job-title-box .director-job,
        .about-body .container .top-box .top-person-box .name-box .job-title,
        .about-body .container .top-box .top-person-box .name-box .director-name,
        .about-body .container .top-box .top-person-box .name-box .content,
        .about-body .container .top-box .top-person-box .name-box .director-job,
        .about-body .container .top-box .top-person-box .content-box .job-title,
        .about-body .container .top-box .top-person-box .content-box .director-name,
        .about-body .container .top-box .top-person-box .content-box .content,
        .about-body .container .top-box .top-person-box .content-box .director-job {
          padding-left: 3vw;
          display: flex;
          justify-content: center; }
      .about-body .container .top-box .top-person-box .director-name-box {
        flex-direction: column; }
        @media all and (max-width: 1024px) {
          .about-body .container .top-box .top-person-box .director-name-box .director-content {
            font-size: 5vw;
            font-weight: bold; } }
      .about-body .container .top-box .top-person-box .director-job {
        margin-bottom: 1vw; }
      .about-body .container .top-box .top-person-box .content-box {
        margin-top: 1vw; }
        .about-body .container .top-box .top-person-box .content-box .content {
          line-height: 2vw; }
          @media all and (max-width: 1024px) {
            .about-body .container .top-box .top-person-box .content-box .content {
              line-height: 6.5vw;
              font-size: 3.4vw;
              letter-spacing: 0.2em; } }
  .about-body .container .person-list-box {
    width: 80%;
    display: flex;
    padding-left: 15vw;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden; }
    @media all and (max-width: 1024px) {
      .about-body .container .person-list-box {
        width: 100%;
        padding-left: 0vw; } }
    @media all and (max-width: 500px) {
      .about-body .container .person-list-box {
        width: 90%;
        padding-bottom: 10vw; } }
    .about-body .container .person-list-box .person-box {
      padding-bottom: 10vw;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      width: 33%; }
      @media all and (max-width: 1024px) {
        .about-body .container .person-list-box .person-box {
          width: 50%; } }
      @media all and (max-width: 500px) {
        .about-body .container .person-list-box .person-box {
          width: 45%; } }
      .about-body .container .person-list-box .person-box .img-box {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center; }
        .about-body .container .person-list-box .person-box .img-box img {
          height: 18vw; }
          @media all and (max-width: 1024px) {
            .about-body .container .person-list-box .person-box .img-box img {
              height: 40vw; } }
          @media all and (max-width: 500px) {
            .about-body .container .person-list-box .person-box .img-box img {
              height: 42vw; } }
      .about-body .container .person-list-box .person-box .job-title-box,
      .about-body .container .person-list-box .person-box .name-box,
      .about-body .container .person-list-box .person-box .content-box {
        margin-top: 2vw;
        font-size: 1.1vw;
        letter-spacing: 0.6em;
        font-family: "Noto Serif TC";
        align-items: center;
        font-weight: 600;
        display: flex;
        justify-content: center; }
        @media all and (max-width: 1024px) {
          .about-body .container .person-list-box .person-box .job-title-box,
          .about-body .container .person-list-box .person-box .name-box,
          .about-body .container .person-list-box .person-box .content-box {
            margin-top: 5vw;
            font-size: 3.7vw; } }
        .about-body .container .person-list-box .person-box .job-title-box .job-title,
        .about-body .container .person-list-box .person-box .name-box .job-title,
        .about-body .container .person-list-box .person-box .content-box .job-title {
          display: flex; }
          @media all and (max-width: 1024px) {
            .about-body .container .person-list-box .person-box .job-title-box .job-title,
            .about-body .container .person-list-box .person-box .name-box .job-title,
            .about-body .container .person-list-box .person-box .content-box .job-title {
              flex-direction: column; } }
        .about-body .container .person-list-box .person-box .job-title-box .job-title,
        .about-body .container .person-list-box .person-box .job-title-box .name,
        .about-body .container .person-list-box .person-box .job-title-box .content,
        .about-body .container .person-list-box .person-box .name-box .job-title,
        .about-body .container .person-list-box .person-box .name-box .name,
        .about-body .container .person-list-box .person-box .name-box .content,
        .about-body .container .person-list-box .person-box .content-box .job-title,
        .about-body .container .person-list-box .person-box .content-box .name,
        .about-body .container .person-list-box .person-box .content-box .content {
          padding-left: 3vw;
          display: flex;
          justify-content: center;
          text-align: center; }
        .about-body .container .person-list-box .person-box .job-title-box .content,
        .about-body .container .person-list-box .person-box .name-box .content,
        .about-body .container .person-list-box .person-box .content-box .content {
          line-height: 2vw; }
          @media all and (max-width: 1024px) {
            .about-body .container .person-list-box .person-box .job-title-box .content,
            .about-body .container .person-list-box .person-box .name-box .content,
            .about-body .container .person-list-box .person-box .content-box .content {
              line-height: 6.5vw;
              font-size: 3.4vw;
              letter-spacing: 0.2em; } }
        @media all and (max-width: 1024px) {
          .about-body .container .person-list-box .person-box .job-title-box .name,
          .about-body .container .person-list-box .person-box .name-box .name,
          .about-body .container .person-list-box .person-box .content-box .name {
            font-size: 4.2vw;
            font-weight: bold; } }
        @media all and (max-width: 500px) {
          .about-body .container .person-list-box .person-box .job-title-box .name,
          .about-body .container .person-list-box .person-box .name-box .name,
          .about-body .container .person-list-box .person-box .content-box .name {
            font-size: 5vw;
            font-weight: bold; } }

* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

.contact-body {
  background-image: url(../images/contact/contact_bg.webp);
  background-color: white;
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  background-attachment: fixed; }
  @media all and (max-width: 1024px) {
    .contact-body {
      background-image: none;
      background-attachment: initial; } }
  .contact-body .footer {
    display: none;
    background-color: white; }
  .contact-body .container {
    display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
    overflow: hidden; }
    @media all and (max-width: 1024px) {
      .contact-body .container {
        padding-top: 9.8vw;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        background-image: url(../images/contact/moblie_bg.webp); } }
    .contact-body .container .top-box {
      display: flex;
      width: 100%;
      position: relative; }
      .contact-body .container .top-box .item1 {
        position: absolute;
        width: 17vw;
        right: 5vw;
        bottom: 5vw; }
        @media all and (max-width: 1024px) {
          .contact-body .container .top-box .item1 {
            bottom: 38vw;
            width: 23vw;
            right: -11vw; } }
        @media all and (max-width: 500px) {
          .contact-body .container .top-box .item1 {
            width: 38vw; } }
      .contact-body .container .top-box .bubble {
        position: absolute;
        z-index: 2;
        top: -5vw;
        left: 30vw; }
        @media all and (max-width: 1920px) {
          .contact-body .container .top-box .bubble {
            top: -7vw;
            left: 22vw; } }
        @media all and (max-width: 1024px) {
          .contact-body .container .top-box .bubble {
            top: -10vw;
            left: 56vw; } }
        .contact-body .container .top-box .bubble img {
          width: 100%; }
          @media all and (max-width: 1920px) {
            .contact-body .container .top-box .bubble img {
              width: 14vw; } }
          @media all and (max-width: 1024px) {
            .contact-body .container .top-box .bubble img {
              width: 24vw; } }
      .contact-body .container .top-box .text-img {
        position: absolute;
        z-index: 2;
        top: 5vw;
        right: 20vw; }
        @media all and (max-width: 1920px) {
          .contact-body .container .top-box .text-img {
            top: 8vw;
            right: 1vw; } }
        @media all and (max-width: 1024px) {
          .contact-body .container .top-box .text-img {
            display: none; } }
        .contact-body .container .top-box .text-img img {
          width: 150%; }
          @media all and (max-width: 1920px) {
            .contact-body .container .top-box .text-img img {
              width: 48vw; } }
      .contact-body .container .top-box .content {
        display: flex;
        width: 80%;
        margin: 0 auto;
        height: 100vh;
        background-color: white;
        border-top-left-radius: 8vw;
        border-bottom-right-radius: 8vw;
        flex-direction: column;
        padding-top: 16vw;
        overflow: hidden; }
        @media all and (max-width: 1920px) {
          .contact-body .container .top-box .content {
            height: auto;
            padding-bottom: 18vw;
            overflow: initial; } }
        @media all and (max-width: 1024px) {
          .contact-body .container .top-box .content {
            border-top-left-radius: 25vw;
            border-bottom-right-radius: 25vw;
            height: 94vh; } }
        @media all and (max-width: 500px) {
          .contact-body .container .top-box .content {
            padding-top: 20vw;
            height: auto; } }
        .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box {
          display: flex;
          justify-content: center;
          width: 75%;
          margin: 0 auto; }
          @media all and (max-width: 1024px) {
            .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box {
              display: none; } }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box img {
            width: 80%; }
            @media all and (max-width: 1024px) {
              .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box img {
                width: 20vw; } }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box .speech-bubbles1 {
            margin-top: 4vw; }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box .speech-bubbles2 {
            margin-top: 0vw;
            margin-right: -5vw; }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box .speech-bubbles3 {
            margin-top: 6.5vw; }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box .speech-bubbles4 {
            margin-top: 2vw;
            margin-left: -1vw; }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box .speech-bubbles5 {
            margin-top: 5vw; }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box .speech-bubbles6 {
            margin-top: 2vw; }
        .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie {
          display: flex;
          flex-direction: column;
          width: 75%;
          margin: 0 auto;
          display: none;
          position: relative; }
          @media all and (max-width: 1024px) {
            .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie {
              display: flex; } }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie img {
            width: 20vw; }
            @media all and (max-width: 500px) {
              .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie img {
                width: 30vw; } }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie .speech-bubbles {
            position: relative;
            display: flex;
            justify-content: center; }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie .zh {
            margin-bottom: 2vw; }
            @media all and (max-width: 500px) {
              .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie .zh {
                margin-bottom: 5vw; } }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie .en {
            margin-right: 20vw;
            margin-bottom: 2vw; }
            @media all and (max-width: 500px) {
              .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie .en {
                margin-right: 32vw; } }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie .japan {
            position: absolute;
            right: 6vw;
            bottom: 3.5vw; }
            @media all and (max-width: 500px) {
              .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie .japan {
                right: -2vw; } }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie .es {
            margin-bottom: 1vw;
            margin-top: 1vw; }
            @media all and (max-width: 500px) {
              .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie .es {
                margin-top: 6vw;
                margin-bottom: 3vw; } }
          .contact-body .container .top-box .content .speech-bubbles-overflow .speech-bubbles-box-moblie .korean {
            margin-right: 3vw; }
        .contact-body .container .top-box .content .dot-box {
          display: flex;
          width: 20%;
          position: relative;
          top: 7vw;
          font-size: 1vw;
          left: 38vw;
          color: #72c3fb; }
          @media all and (max-width: 1024px) {
            .contact-body .container .top-box .content .dot-box {
              display: none; } }
          .contact-body .container .top-box .content .dot-box .dot-left {
            display: flex; }
            .contact-body .container .top-box .content .dot-box .dot-left .dot {
              margin-left: 1vw; }
          .contact-body .container .top-box .content .dot-box .dot-right {
            display: flex;
            margin-left: 3vw; }
            .contact-body .container .top-box .content .dot-box .dot-right .dot {
              margin-left: 1vw; }
        .contact-body .container .top-box .content .text {
          display: flex;
          font-size: 1.1vw;
          letter-spacing: 0.2em;
          font-family: "Noto Serif TC";
          align-items: center;
          font-weight: 600;
          position: relative;
          top: 8vw;
          left: 25vw; }
          @media all and (max-width: 1024px) {
            .contact-body .container .top-box .content .text {
              display: none; } }
        .contact-body .container .top-box .content .text-moblie {
          display: none;
          font-size: 5vw;
          letter-spacing: 0.2em;
          font-family: "Noto Serif TC";
          text-align: center;
          font-weight: 600;
          justify-content: center;
          margin-top: 10vw; }
          @media all and (max-width: 1024px) {
            .contact-body .container .top-box .content .text-moblie {
              display: flex; } }
          @media all and (max-width: 500px) {
            .contact-body .container .top-box .content .text-moblie {
              margin-top: 13vw; } }
        .contact-body .container .top-box .content .dot-moblie {
          display: flex;
          width: 80%;
          justify-content: center;
          margin: 0 auto;
          margin-top: 3vw;
          display: none; }
          .contact-body .container .top-box .content .dot-moblie img {
            width: 22vw; }
          @media all and (max-width: 1024px) {
            .contact-body .container .top-box .content .dot-moblie {
              display: flex; } }
        .contact-body .container .top-box .content .text-img-moblie {
          display: flex;
          justify-content: center;
          margin: 0 auto;
          position: relative;
          width: 90vw;
          display: none;
          left: 20vw;
          top: 14vw; }
          @media all and (max-width: 1024px) {
            .contact-body .container .top-box .content .text-img-moblie {
              display: flex; } }
          @media all and (max-width: 500px) {
            .contact-body .container .top-box .content .text-img-moblie {
              width: 100vw; } }
    .contact-body .container .item2 {
      position: absolute;
      width: 19vw;
      top: 43vw;
      left: 4vw; }
      @media all and (max-width: 1440px) {
        .contact-body .container .item2 {
          top: 38vw; } }
      @media all and (max-width: 1024px) {
        .contact-body .container .item2 {
          bottom: 0vw;
          width: 25vw;
          top: initial;
          left: -12vw;
          display: none; } }
    .contact-body .container .bottom-box {
      display: flex;
      width: 100%;
      background-color: white;
      width: 80%;
      margin: 0 auto;
      border-top-right-radius: 8vw;
      border-bottom-left-radius: 8vw; }
      @media all and (max-width: 1024px) {
        .contact-body .container .bottom-box {
          display: none; } }
      .contact-body .container .bottom-box .content {
        display: flex;
        width: 100%;
        padding: 5vw 10vw;
        justify-content: right;
        flex-direction: column;
        position: relative; }
        .contact-body .container .bottom-box .content .mark {
          position: absolute;
          width: 23vw;
          right: -5vw;
          top: 12vw; }
        .contact-body .container .bottom-box .content .top-input-box {
          display: flex;
          width: 40vw;
          justify-content: right;
          margin-left: 18vw; }
          .contact-body .container .bottom-box .content .top-input-box .left-box {
            display: flex;
            flex-direction: column;
            width: 50%; }
            .contact-body .container .bottom-box .content .top-input-box .left-box .input-group {
              width: 100%;
              display: flex;
              position: relative;
              margin-bottom: 2vw; }
              .contact-body .container .bottom-box .content .top-input-box .left-box .input-group .input-label {
                position: absolute;
                top: -1vw;
                background-color: #86d5fb;
                font-family: "Noto Serif TC";
                align-items: center;
                letter-spacing: 0.1em;
                font-weight: 600;
                line-height: 1;
                border-radius: 1.8em;
                padding: 0.4em 1.2em;
                font-size: 0.85vw; }
              .contact-body .container .bottom-box .content .top-input-box .left-box .input-group input {
                font-size: 0.85vw;
                padding-top: 0.9vw;
                padding-bottom: 0.5vw;
                padding-left: 1vw;
                padding-right: 1vw;
                width: 15vw;
                border-radius: 1.4vw;
                border: 1px solid black; }
          .contact-body .container .bottom-box .content .top-input-box .right-box {
            display: flex;
            flex-direction: column;
            width: 50%; }
            .contact-body .container .bottom-box .content .top-input-box .right-box .input-group {
              width: 100%;
              display: flex;
              position: relative;
              margin-bottom: 2vw; }
              .contact-body .container .bottom-box .content .top-input-box .right-box .input-group .input-label {
                position: absolute;
                top: -1vw;
                background-color: #86d5fb;
                font-family: "Noto Serif TC";
                align-items: center;
                letter-spacing: 0.1em;
                font-weight: 600;
                line-height: 1;
                border-radius: 1.8em;
                padding: 0.5em 1.4em 0.6em 1.5em;
                font-size: 0.85vw; }
              .contact-body .container .bottom-box .content .top-input-box .right-box .input-group input {
                font-size: 0.85vw;
                padding-top: 0.9vw;
                padding-bottom: 0.5vw;
                padding-left: 1vw;
                padding-right: 1vw;
                width: 15vw;
                border-radius: 1.4vw;
                border: 1px solid black; }
        .contact-body .container .bottom-box .content .middle-input-box {
          display: flex;
          width: 100%;
          flex-direction: column;
          margin-top: 1vw; }
          .contact-body .container .bottom-box .content .middle-input-box .title-box {
            display: flex; }
            .contact-body .container .bottom-box .content .middle-input-box .title-box .title {
              background-color: #86d5fb;
              font-family: "Noto Serif TC";
              align-items: center;
              letter-spacing: 0.1em;
              font-weight: 600;
              line-height: 1;
              border-radius: 1.8em;
              padding: 0.5em 1.4em 0.6em 1.5em;
              font-size: 0.85vw; }
          .contact-body .container .bottom-box .content .middle-input-box .button-box {
            display: flex;
            width: 100%;
            margin-top: 0.8vw;
            position: relative; }
            .contact-body .container .bottom-box .content .middle-input-box .button-box .btn-group {
              display: flex;
              width: 75%;
              flex-wrap: wrap; }
              .contact-body .container .bottom-box .content .middle-input-box .button-box .btn-group .select {
                position: relative;
                font-family: "Noto Serif TC";
                margin-right: 0.5vw;
                margin-bottom: 0.5vw; }
                .contact-body .container .bottom-box .content .middle-input-box .button-box .btn-group .select input:checked + label {
                  background-color: #5186c4;
                  color: white;
                  border: 1px solid #5186c4;
                  border-radius: 0.9vw; }
                  @media all and (max-width: 1024px) {
                    .contact-body .container .bottom-box .content .middle-input-box .button-box .btn-group .select input:checked + label {
                      border-radius: 6vw; } }
                .contact-body .container .bottom-box .content .middle-input-box .button-box .btn-group .select input {
                  opacity: 0;
                  position: absolute; }
                .contact-body .container .bottom-box .content .middle-input-box .button-box .btn-group .select .button_select {
                  color: black;
                  display: flex;
                  background-color: transparent;
                  padding: 0.5em 1.4em 0.6em 1.5em;
                  border-radius: 0.9vw;
                  align-items: center;
                  letter-spacing: 0.15em;
                  font-weight: 600;
                  line-height: 1;
                  border: 1px solid black;
                  cursor: pointer;
                  font-size: 0.85vw; }
          .contact-body .container .bottom-box .content .middle-input-box .dashed-row {
            margin-top: 1vw;
            width: 80%;
            margin-bottom: 1vw; }
        .contact-body .container .bottom-box .content .bottom-input-box {
          display: flex;
          width: 100%;
          position: relative;
          margin-top: 1vw; }
          .contact-body .container .bottom-box .content .bottom-input-box .left-button-box {
            display: flex;
            flex-direction: column;
            width: 50%;
            position: relative; }
            .contact-body .container .bottom-box .content .bottom-input-box .left-button-box .dashed-column {
              position: absolute;
              right: 0px;
              height: 6.3vw; }
            .contact-body .container .bottom-box .content .bottom-input-box .left-button-box .title-box {
              display: flex;
              margin-bottom: 0.8vw; }
              .contact-body .container .bottom-box .content .bottom-input-box .left-button-box .title-box .title {
                background-color: #86d5fb;
                font-family: "Noto Serif TC";
                align-items: center;
                letter-spacing: 0.1em;
                font-weight: 600;
                line-height: 1;
                border-radius: 1.8em;
                padding: 0.5em 1.4em 0.6em 1.5em;
                font-size: 0.85vw; }
            .contact-body .container .bottom-box .content .bottom-input-box .left-button-box .btn-group {
              display: flex;
              width: 100%;
              flex-wrap: wrap; }
              .contact-body .container .bottom-box .content .bottom-input-box .left-button-box .btn-group .select {
                position: relative;
                font-family: "Noto Serif TC";
                margin-right: 0.5vw;
                margin-bottom: 0.5vw; }
                .contact-body .container .bottom-box .content .bottom-input-box .left-button-box .btn-group .select input:checked + label {
                  background-color: #5186c4;
                  color: white;
                  border: 1px solid #5186c4;
                  border-radius: 0.9vw; }
                  @media all and (max-width: 1024px) {
                    .contact-body .container .bottom-box .content .bottom-input-box .left-button-box .btn-group .select input:checked + label {
                      border-radius: 6vw; } }
                .contact-body .container .bottom-box .content .bottom-input-box .left-button-box .btn-group .select input {
                  opacity: 0;
                  position: absolute; }
                .contact-body .container .bottom-box .content .bottom-input-box .left-button-box .btn-group .select .button_select {
                  color: black;
                  display: flex;
                  background-color: transparent;
                  padding: 0.5em 1.4em 0.6em 1.5em;
                  border-radius: 0.9vw;
                  align-items: center;
                  letter-spacing: 0.15em;
                  font-weight: 600;
                  line-height: 1;
                  border: 1px solid black;
                  cursor: pointer;
                  font-size: 0.85vw; }
          .contact-body .container .bottom-box .content .bottom-input-box .right-button-box {
            display: flex;
            flex-direction: column;
            width: 50%;
            position: relative;
            margin-left: 3vw; }
            .contact-body .container .bottom-box .content .bottom-input-box .right-button-box .title-box {
              display: flex;
              margin-bottom: 0.8vw; }
              .contact-body .container .bottom-box .content .bottom-input-box .right-button-box .title-box .title {
                background-color: #86d5fb;
                font-family: "Noto Serif TC";
                align-items: center;
                letter-spacing: 0.1em;
                font-weight: 600;
                line-height: 1;
                border-radius: 1.8em;
                padding: 0.5em 1.4em 0.6em 1.5em;
                font-size: 0.85vw; }
            .contact-body .container .bottom-box .content .bottom-input-box .right-button-box .btn-group input {
              border: none;
              padding: 0.7vw;
              font-size: 0.85vw;
              width: 120%;
              border-bottom: 1px solid #808080; }
        .contact-body .container .bottom-box .content .send-button-box {
          display: flex;
          width: 100%;
          justify-content: center;
          margin-top: 4vw; }
          .contact-body .container .bottom-box .content .send-button-box button {
            font-family: "Noto Serif TC";
            align-items: center;
            letter-spacing: 0.1em;
            font-weight: 600;
            line-height: 1;
            border: 1px solid black;
            background: none;
            padding: 0.8em 1.3em 0.8em 1.4em;
            font-size: 0.85vw;
            cursor: pointer;
            overflow: hidden;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            position: relative; }
            .contact-body .container .bottom-box .content .send-button-box button:before {
              content: "";
              position: absolute;
              width: 100%;
              height: 100%;
              z-index: -1;
              top: 0;
              left: -100%;
              background-color: #5186c4;
              -webkit-transition: all 0.3s ease-in-out;
              -o-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out; }
            .contact-body .container .bottom-box .content .send-button-box button:hover {
              color: #ecf0f1;
              z-index: 2;
              border: 1px solid #5186c4; }
              .contact-body .container .bottom-box .content .send-button-box button:hover:before {
                left: 0%; }
    .contact-body .container .contact-info-box {
      display: flex;
      width: 100%;
      position: relative; }
      @media all and (max-width: 1024px) {
        .contact-body .container .contact-info-box {
          display: none; } }
      .contact-body .container .contact-info-box .item1 {
        position: absolute;
        width: 12vw;
        right: 26vw;
        bottom: 26vw; }
      .contact-body .container .contact-info-box .contact-info-item {
        position: absolute;
        width: 14vw;
        bottom: 14vw;
        left: 25vw; }
      .contact-body .container .contact-info-box .bubble {
        position: absolute;
        z-index: 2;
        top: -7vw;
        left: 22vw; }
        .contact-body .container .contact-info-box .bubble img {
          width: 14vw;
          transform: rotateX(180deg); }
      .contact-body .container .contact-info-box .text-img {
        position: absolute;
        z-index: 2;
        top: 2vw;
        left: 30vw; }
        .contact-body .container .contact-info-box .text-img img {
          width: 31vw; }
      .contact-body .container .contact-info-box .content {
        width: 80%;
        margin: 0 auto;
        background-color: white;
        border-top-left-radius: 8vw;
        border-bottom-right-radius: 8vw;
        padding-top: 33vw;
        padding-bottom: 3vw;
        overflow: hidden;
        color: black;
        font-family: "Noto Serif TC";
        letter-spacing: 0.1em;
        font-weight: 600;
        line-height: 1.7;
        font-size: 0.85vw; }
        @media all and (max-width: 1920px) {
          .contact-body .container .contact-info-box .content {
            overflow: initial;
            margin-top: -0.3vw; } }
        @media all and (max-width: 1440px) {
          .contact-body .container .contact-info-box .content {
            font-size: 0.9vw;
            padding-top: 52vw; } }
        @media all and (max-width: 1366px) {
          .contact-body .container .contact-info-box .content {
            padding-top: 32vw; } }
        .contact-body .container .contact-info-box .content .contact_footer {
          display: flex;
          text-align: center;
          padding-top: 4%;
          border-top: 2px solid #4E8CCA;
          margin: 0 2%; }
        .contact-body .container .contact-info-box .content .top-logo {
          width: 100%;
          flex: 1 1 13%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 3%; }
          .contact-body .container .contact-info-box .content .top-logo .logo-text {
            font-size: 1.3vw; }
          .contact-body .container .contact-info-box .content .top-logo img {
            width: 27%; }
        .contact-body .container .contact-info-box .content .bottom-info {
          display: flex;
          margin: 0 auto;
          text-align: left;
          flex: 1 1 56%; }
          .contact-body .container .contact-info-box .content .bottom-info .info1 {
            padding: 0 6%;
            position: relative; }
            .contact-body .container .contact-info-box .content .bottom-info .info1 h3 img {
              position: absolute;
              width: 13%;
              top: -25%;
              left: -6%; }
          .contact-body .container .contact-info-box .content .bottom-info .info2 {
            padding: 0 6%;
            position: relative; }
            .contact-body .container .contact-info-box .content .bottom-info .info2 h3 img {
              position: absolute;
              width: 14.5%;
              top: -25%;
              left: -7%; }
          .contact-body .container .contact-info-box .content .bottom-info .info1 h3, .contact-body .container .contact-info-box .content .bottom-info .info2 h3 {
            position: relative;
            padding-bottom: 4%; }
          .contact-body .container .contact-info-box .content .bottom-info .info1::before, .contact-body .container .contact-info-box .content .bottom-info .info2::before {
            content: '';
            width: 2px;
            height: 50%;
            position: absolute;
            background-color: #314da0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto; }
        .contact-body .container .contact-info-box .content .text {
          display: flex;
          font-size: 1.1vw;
          letter-spacing: 0.2em;
          font-family: "Noto Serif TC";
          align-items: center;
          font-weight: 600;
          position: relative;
          top: 8vw;
          left: 25vw; }
      .contact-body .container .contact-info-box .c3_1 {
        position: absolute;
        width: 23%;
        right: 18%;
        top: -18%; }
      .contact-body .container .contact-info-box .c3_4 {
        position: absolute;
        width: 15%;
        top: 7%;
        left: 34%; }
      .contact-body .container .contact-info-box .c3_5 {
        position: absolute;
        width: 7%;
        left: 42%;
        top: 25%; }
      .contact-body .container .contact-info-box .c3_6 {
        position: absolute;
        width: 22%;
        left: 43%;
        top: 29%; }
    .contact-body .container .info-box-moblie {
      position: relative;
      background-repeat: no-repeat;
      width: 100%;
      height: 94vh;
      background-size: cover;
      background-position: top;
      background-image: url(../images/contact/moblie_bg.webp);
      display: none; }
      @media all and (max-width: 1024px) {
        .contact-body .container .info-box-moblie {
          display: flex;
          flex-direction: column; } }
      @media all and (max-width: 500px) {
        .contact-body .container .info-box-moblie {
          height: auto; } }
      .contact-body .container .info-box-moblie .moblie-item1 {
        position: absolute;
        width: 18vw;
        top: -15vw;
        left: 0px;
        z-index: 2; }
      .contact-body .container .info-box-moblie .moblie-item2 {
        position: absolute;
        width: 25vw;
        bottom: 5vw;
        right: 0px; }
      .contact-body .container .info-box-moblie .moblie-item3 {
        position: absolute;
        width: 50vw;
        bottom: -15vw;
        z-index: 20;
        left: 0px; }
      .contact-body .container .info-box-moblie .info-content-box {
        display: flex;
        width: 86%;
        margin: 0 auto;
        flex-direction: column;
        background-color: white;
        border-top-right-radius: 25vw;
        border-bottom-left-radius: 25vw;
        height: 94vh;
        position: relative; }
        @media all and (max-width: 500px) {
          .contact-body .container .info-box-moblie .info-content-box {
            height: calc(var(--loadingvh, 1vh) * 80); } }
        .contact-body .container .info-box-moblie .info-content-box .bottom-circle {
          display: none;
          position: absolute;
          bottom: 35vw;
          right: -0.7vw;
          width: 20vw; }
          @media all and (max-width: 1024px) {
            .contact-body .container .info-box-moblie .info-content-box .bottom-circle {
              display: flex; } }
          @media all and (max-width: 500px) {
            .contact-body .container .info-box-moblie .info-content-box .bottom-circle {
              bottom: 46vw; } }
        .contact-body .container .info-box-moblie .info-content-box .input-box {
          display: flex;
          flex-direction: column;
          width: 95%;
          display: flex;
          margin: 0 auto;
          padding-top: 22vw;
          padding-left: 2vw;
          padding-right: 2vw; }
          .contact-body .container .info-box-moblie .info-content-box .input-box .input-group {
            width: 100%;
            display: flex;
            position: relative;
            margin-bottom: 8vw; }
            .contact-body .container .info-box-moblie .info-content-box .input-box .input-group .input-label {
              position: absolute;
              top: -3.8vw;
              background-color: #86d5fb;
              font-family: "Noto Serif TC";
              align-items: center;
              letter-spacing: 0.1em;
              font-weight: 600;
              line-height: 1;
              border-radius: 1.8em;
              padding: 0.35em 1.2em;
              padding-bottom: 0.45em;
              font-size: 3.9vw; }
            .contact-body .container .info-box-moblie .info-content-box .input-box .input-group input {
              font-size: 3.7vw;
              padding-top: 3vw;
              padding-bottom: 2.5vw;
              padding-left: 1vw;
              padding-right: 1vw;
              width: 100%;
              border-radius: 6vw;
              border: 1px solid black; }
              .contact-body .container .info-box-moblie .info-content-box .input-box .input-group input:focus, .contact-body .container .info-box-moblie .info-content-box .input-box .input-group input:active {
                color: white;
                border: 1px solid #5186c4;
                border-radius: 6vw; }
              .contact-body .container .info-box-moblie .info-content-box .input-box .input-group input[type="text"] {
                color: #000; }
        .contact-body .container .info-box-moblie .info-content-box .title-box {
          display: flex;
          margin-top: 13vw;
          justify-content: center; }
          .contact-body .container .info-box-moblie .info-content-box .title-box .title {
            background-color: #86d5fb;
            font-family: "Noto Serif TC";
            align-items: center;
            letter-spacing: 0.1em;
            font-weight: 600;
            line-height: 1;
            font-size: 5vw;
            border-radius: 1.8em;
            padding: 0.35em 1.2em;
            padding-bottom: 0.45em; }
        .contact-body .container .info-box-moblie .info-content-box .button-box {
          display: flex;
          width: 100%;
          margin-top: 0.8vw;
          position: relative;
          justify-content: center; }
          .contact-body .container .info-box-moblie .info-content-box .button-box .btn-group {
            display: flex;
            width: 75%;
            flex-wrap: wrap;
            justify-content: space-evenly;
            margin-top: 10vw; }
            .contact-body .container .info-box-moblie .info-content-box .button-box .btn-group .select {
              position: relative;
              font-family: "Noto Serif TC";
              margin-right: 0.5vw;
              margin-bottom: 3vw; }
              .contact-body .container .info-box-moblie .info-content-box .button-box .btn-group .select input:checked + label {
                background-color: #5186c4;
                color: white;
                border: 1px solid #5186c4;
                border-radius: 0.9vw; }
                @media all and (max-width: 1024px) {
                  .contact-body .container .info-box-moblie .info-content-box .button-box .btn-group .select input:checked + label {
                    border-radius: 6vw; } }
              .contact-body .container .info-box-moblie .info-content-box .button-box .btn-group .select input {
                opacity: 0;
                position: absolute; }
              .contact-body .container .info-box-moblie .info-content-box .button-box .btn-group .select .button_select {
                color: black;
                display: flex;
                background-color: transparent;
                padding: 0.5em 0em 0.6em 0em;
                border-radius: 6vw;
                text-align: center;
                align-items: center;
                letter-spacing: 0.15em;
                font-weight: 600;
                justify-content: center;
                width: 24vw;
                line-height: 1;
                border: 1px solid black;
                cursor: pointer;
                font-size: 3.7vw; }
        .contact-body .container .info-box-moblie .info-content-box .interval-button-box {
          display: flex;
          width: 100%;
          position: relative;
          justify-content: center;
          flex-direction: column;
          margin: 0 auto;
          margin-bottom: 4vw; }
          .contact-body .container .info-box-moblie .info-content-box .interval-button-box .btn-group {
            display: flex;
            width: 75%;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin: 0 auto;
            margin-top: 7vw; }
            .contact-body .container .info-box-moblie .info-content-box .interval-button-box .btn-group .select {
              position: relative;
              font-family: "Noto Serif TC";
              margin-right: 0.5vw;
              margin-bottom: 3vw; }
              .contact-body .container .info-box-moblie .info-content-box .interval-button-box .btn-group .select input:checked + label {
                background-color: #5186c4;
                color: white;
                border: 1px solid #5186c4;
                border-radius: 0.9vw; }
                @media all and (max-width: 1024px) {
                  .contact-body .container .info-box-moblie .info-content-box .interval-button-box .btn-group .select input:checked + label {
                    border-radius: 6vw; } }
              .contact-body .container .info-box-moblie .info-content-box .interval-button-box .btn-group .select input {
                opacity: 0;
                position: absolute; }
              .contact-body .container .info-box-moblie .info-content-box .interval-button-box .btn-group .select .button_select {
                color: black;
                display: flex;
                background-color: transparent;
                padding: 0.5em 0em 0.6em 0em;
                border-radius: 6vw;
                text-align: center;
                align-items: center;
                letter-spacing: 0.15em;
                font-weight: 600;
                justify-content: center;
                width: 26vw;
                line-height: 1;
                border: 1px solid black;
                cursor: pointer;
                font-size: 3.7vw; }
        .contact-body .container .info-box-moblie .info-content-box .message-input {
          margin: 0 auto;
          width: 90%;
          margin-top: 6vw; }
          .contact-body .container .info-box-moblie .info-content-box .message-input input#message-moblie {
            border: none;
            padding: 0.7vw;
            font-size: 3.7vw;
            width: 100%;
            margin: 0 auto;
            justify-content: center;
            border-bottom: 1px solid #808080; }
        .contact-body .container .info-box-moblie .info-content-box .send-button-box {
          display: flex;
          width: 100%;
          justify-content: center;
          margin-top: 10vw; }
          @media all and (max-width: 500px) {
            .contact-body .container .info-box-moblie .info-content-box .send-button-box {
              margin-bottom: 10vw; } }
          .contact-body .container .info-box-moblie .info-content-box .send-button-box button {
            font-family: "Noto Serif TC";
            align-items: center;
            letter-spacing: 0.1em;
            font-weight: 600;
            line-height: 1;
            border: 1px solid black;
            background: none;
            padding: 0.8em 1.3em 0.8em 1.4em;
            font-size: 3.7vw;
            cursor: pointer;
            color: black; }
            .contact-body .container .info-box-moblie .info-content-box .send-button-box button:hover {
              background-color: #5186c4;
              color: white;
              border: 1px solid #5186c4; }
        .contact-body .container .info-box-moblie .info-content-box .arrow {
          display: flex;
          height: 20vw;
          justify-content: center; }
          @media all and (max-width: 500px) {
            .contact-body .container .info-box-moblie .info-content-box .arrow {
              height: 30vw;
              margin-bottom: 3.5vw; } }
          .contact-body .container .info-box-moblie .info-content-box .arrow img {
            width: 5vw; }
            @media all and (max-width: 500px) {
              .contact-body .container .info-box-moblie .info-content-box .arrow img {
                width: 7vw; } }
      .contact-body .container .info-box-moblie:nth-child(even) .info-content-box {
        border-top-left-radius: 25vw;
        border-bottom-right-radius: 25vw;
        border-top-right-radius: 0vw;
        border-bottom-left-radius: 0vw; }
      .contact-body .container .info-box-moblie .moblie-item3 {
        border-top-right-radius: 0vw;
        border-bottom-left-radius: 0vw;
        border-top-left-radius: 0vw;
        border-bottom-right-radius: 0vw; }
      .contact-body .container .info-box-moblie :nth-child(3) {
        border-top-right-radius: 25vw;
        border-bottom-left-radius: 25vw;
        border-top-left-radius: 0vw;
        border-bottom-right-radius: 0vw; }
      .contact-body .container .info-box-moblie .info-content-box3 {
        border-top-right-radius: 25vw;
        border-bottom-left-radius: 25vw;
        border-top-left-radius: 0vw;
        border-bottom-right-radius: 0vw; }
      .contact-body .container .info-box-moblie .new-info-content-moblie {
        border-top-right-radius: 25vw;
        border-bottom-left-radius: 25vw;
        border-top-left-radius: 0vw;
        border-bottom-right-radius: 0vw; }
        .contact-body .container .info-box-moblie .new-info-content-moblie .item1 {
          position: absolute;
          width: 70%;
          top: 18%;
          right: -26%; }
        .contact-body .container .info-box-moblie .new-info-content-moblie .bubble {
          position: absolute;
          width: 45%;
          transform: rotateY(180deg);
          top: 1%;
          left: 15%; }
          .contact-body .container .info-box-moblie .new-info-content-moblie .bubble img {
            width: 100%; }
        .contact-body .container .info-box-moblie .new-info-content-moblie .c3_1 {
          position: absolute;
          width: 90%;
          left: 56%;
          top: -11%; }
        .contact-body .container .info-box-moblie .new-info-content-moblie .txt_box img {
          position: absolute; }
        .contact-body .container .info-box-moblie .new-info-content-moblie .txt_box .c3_4 {
          width: 44%;
          top: 25%;
          left: 10%; }
        .contact-body .container .info-box-moblie .new-info-content-moblie .txt_box .c3_5 {
          width: 20%;
          top: 36%;
          left: 34%; }
        .contact-body .container .info-box-moblie .new-info-content-moblie .txt_box .c3_6 {
          width: 54%;
          top: 40%;
          left: 38%; }
        .contact-body .container .info-box-moblie .new-info-content-moblie .text-img {
          width: 190%;
          position: absolute;
          top: 58%;
          left: -76%; }
          .contact-body .container .info-box-moblie .new-info-content-moblie .text-img img {
            width: 100%; }
        .contact-body .container .info-box-moblie .new-info-content-moblie .contact-info-item {
          position: absolute;
          width: 55%;
          bottom: 2%;
          left: 5%; }
        .contact-body .container .info-box-moblie .new-info-content-moblie .content {
          display: flex;
          flex-direction: column;
          font-family: "Noto Serif TC";
          text-align: left;
          align-items: center;
          letter-spacing: 0.15em;
          line-height: 1.8;
          font-size: 3.2vw;
          color: black;
          font-weight: 600;
          padding-top: 7vw; }
          @media all and (max-width: 500px) {
            .contact-body .container .info-box-moblie .new-info-content-moblie .content {
              position: absolute;
              width: 100%;
              padding-top: 0vw;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%); } }
          .contact-body .container .info-box-moblie .new-info-content-moblie .content .top-logo {
            display: flex;
            margin: 0 auto;
            text-align: center;
            align-items: center; }
            @media (max-width: 900px) {
              .contact-body .container .info-box-moblie .new-info-content-moblie .content .top-logo {
                border-bottom: 1px solid #314DA0;
                padding-bottom: 4%;
                margin: 0 7%; } }
            .contact-body .container .info-box-moblie .new-info-content-moblie .content .top-logo img {
              width: 47%; }
              @media all and (max-width: 900px) {
                .contact-body .container .info-box-moblie .new-info-content-moblie .content .top-logo img {
                  width: 29%; } }
            @media all and (max-width: 900px) {
              .contact-body .container .info-box-moblie .new-info-content-moblie .content .top-logo .logo-text {
                font-size: 5vw; } }
            @media all and (max-width: 900px) {
              .contact-body .container .info-box-moblie .new-info-content-moblie .content .top-logo .logo-text br {
                display: none; } }
          .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info {
            display: flex;
            margin-top: 10vw;
            justify-content: center;
            flex-direction: column; }
            @media (max-width: 900px) {
              .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info {
                width: 100%; } }
            .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info a {
              color: black; }
            .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info .info1 h3, .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info .info2 h3 {
              position: relative;
              margin-bottom: 2%;
              font-size: 4vw; }
              .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info .info1 h3 img, .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info .info2 h3 img {
                position: absolute;
                width: 14%;
                top: -47%;
                left: -4%; }
            @media (max-width: 900px) {
              .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info .info1 {
                border-bottom: 1px solid #314DA0;
                padding-bottom: 7%;
                margin: 0 6%; } }
            @media (max-width: 900px) {
              .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info .info1 h3 img {
                top: -31%; } }
            .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info .info2 {
              margin-top: 5vw; }
              @media (max-width: 900px) {
                .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info .info2 {
                  padding-top: 12%;
                  margin: 0 6%; } }
              @media (max-width: 900px) {
                .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info .info2 h3 img {
                  width: 14%;
                  left: -4%;
                  top: -32%; } }
              .contact-body .container .info-box-moblie .new-info-content-moblie .content .bottom-info .info2 a {
                color: black; }

.ad-body {
  background-image: url(../images/ad/ad_bg.webp);
  background-color: white;
  position: relative;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  @media all and (max-width: 1024px) {
    .ad-body {
      background-image: none;
      background-attachment: initial; } }
  @media all and (max-width: 1440px) {
    .ad-body header .right-box {
      padding-right: 13vw; } }
  .ad-body .container {
    width: 100%;
    padding-top: 7vw;
    padding-bottom: 1vw; }
    @media all and (max-width: 500px) {
      .ad-body .container {
        padding-top: 13vw; } }
    .ad-body .container .c1-box {
      padding-bottom: 3vw;
      width: 100%;
      position: relative;
      overflow: hidden; }
      @media all and (max-width: 1024px) {
        .ad-body .container .c1-box {
          height: calc(var(--loadingvh, 1vh) *83);
          display: flex;
          justify-content: center;
          flex-direction: column; } }
      .ad-body .container .c1-box .moblie-c1-bg {
        position: absolute;
        width: 130vw;
        left: -13vw;
        bottom: 0vw;
        z-index: 1;
        display: none; }
        @media all and (max-width: 1024px) {
          .ad-body .container .c1-box .moblie-c1-bg {
            display: flex; } }
        @media all and (max-width: 500px) {
          .ad-body .container .c1-box .moblie-c1-bg {
            width: 145vw; } }
      .ad-body .container .c1-box .title-box {
        font-size: 1.1vw;
        letter-spacing: 0.3em;
        font-family: 'Noto Serif TC';
        align-items: center;
        font-weight: 600;
        width: 80%;
        margin: 0 auto; }
        @media all and (max-width: 1024px) {
          .ad-body .container .c1-box .title-box {
            display: none; } }
        .ad-body .container .c1-box .title-box .text-1-box {
          display: flex;
          justify-content: space-between;
          width: 85%;
          margin: 0 auto;
          margin-bottom: 0.5vw; }
          @media all and (max-width: 1024px) {
            .ad-body .container .c1-box .title-box .text-1-box {
              margin-bottom: 0vw; } }
          .ad-body .container .c1-box .title-box .text-1-box .line {
            width: 57%; }
            .ad-body .container .c1-box .title-box .text-1-box .line img {
              width: 100%;
              text-align: center;
              padding-bottom: 0.2vw; }
        .ad-body .container .c1-box .title-box .text-2 {
          width: 85%;
          margin: 0 auto; }
          @media all and (max-width: 1024px) {
            .ad-body .container .c1-box .title-box .text-2 {
              letter-spacing: 1em;
              padding-left: 5vw;
              margin-bottom: 3vw;
              font-size: 5.5vw; } }
      .ad-body .container .c1-box .title-box-moblie {
        font-family: 'Noto Serif TC';
        align-items: center;
        font-weight: 600;
        width: 80%;
        margin: 0 auto;
        padding-top: 17vw;
        display: flex;
        flex-direction: column;
        display: none; }
        @media all and (max-width: 1024px) {
          .ad-body .container .c1-box .title-box-moblie {
            display: flex;
            padding-top: 0vw; } }
        .ad-body .container .c1-box .title-box-moblie .text-1 {
          text-align: center;
          font-size: 5vw;
          letter-spacing: 0.5em;
          margin-bottom: 3vw; }
          @media all and (max-width: 500px) {
            .ad-body .container .c1-box .title-box-moblie .text-1 {
              margin-bottom: 5vw; } }
        .ad-body .container .c1-box .title-box-moblie .text-2-box {
          text-align: center;
          letter-spacing: 0.2em;
          font-size: 3.7vw; }
          @media all and (max-width: 500px) {
            .ad-body .container .c1-box .title-box-moblie .text-2-box :nth-child(1) {
              margin-bottom: 1vw; } }
      .ad-body .container .c1-box .content {
        width: 80vw;
        margin: 0 auto;
        display: flex;
        padding-top: 3vw;
        position: relative; }
        @media all and (max-width: 1024px) {
          .ad-body .container .c1-box .content {
            display: none; } }
        .ad-body .container .c1-box .content .left-box {
          width: 14vw;
          align-self: self-end;
          position: absolute; }
          .ad-body .container .c1-box .content .left-box img {
            width: 100%; }
        .ad-body .container .c1-box .content .middle-box {
          width: 100%;
          padding-bottom: 10vw;
          text-align: center;
          position: relative;
          padding-right: 3vw; }
          .ad-body .container .c1-box .content .middle-box img {
            width: 28vw; }
          .ad-body .container .c1-box .content .middle-box .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-8%, -85%);
            font-family: "Noto Serif TC";
            align-items: center;
            letter-spacing: 0.1em;
            font-weight: 600;
            line-height: 1.5vw;
            font-size: 0.85vw; }
            @media all and (max-width: 1440px) {
              .ad-body .container .c1-box .content .middle-box .text {
                font-size: 1vw;
                line-height: 1.8vw; } }
          .ad-body .container .c1-box .content .middle-box .item1 {
            position: absolute;
            top: 13.5vw;
            left: 22vw;
            width: 13vw; }
          .ad-body .container .c1-box .content .middle-box .item2 {
            position: absolute;
            bottom: 4vw;
            right: 0.5vw;
            width: 24vw; }
        .ad-body .container .c1-box .content .right-box {
          width: 21vw;
          position: absolute;
          right: 0.5vw;
          overflow: hidden; }
          .ad-body .container .c1-box .content .right-box img {
            width: 100%; }
      .ad-body .container .c1-box .content-moblie {
        width: 100vw;
        margin: 0 auto;
        display: flex;
        padding-top: 3vw;
        position: relative;
        padding-top: 15vw;
        display: none; }
        @media all and (max-width: 500px) {
          .ad-body .container .c1-box .content-moblie {
            padding-top: 17vw;
            display: flex; } }
        .ad-body .container .c1-box .content-moblie .text {
          display: flex;
          font-family: "Noto Serif TC";
          align-items: center;
          letter-spacing: 0.1em;
          text-align: center;
          font-weight: 600;
          justify-content: center;
          margin: 0 auto;
          line-height: 9vw;
          position: relative;
          z-index: 2;
          font-size: 3.9vw; }
          @media all and (max-width: 500px) {
            .ad-body .container .c1-box .content-moblie .text {
              line-height: 9vw; } }
    .ad-body .container .divider {
      display: none; }
      @media all and (max-width: 1024px) {
        .ad-body .container .divider {
          margin-top: 5vw;
          display: flex;
          width: 100vw;
          height: 13vw;
          margin-bottom: 8vw; } }
      @media all and (max-width: 500px) {
        .ad-body .container .divider {
          height: 20vw;
          margin-bottom: 10vw; } }
    .ad-body .container .content-box {
      width: 100%;
      display: flex;
      flex-direction: column; }
      @media all and (max-width: 1024px) {
        .ad-body .container .content-box {
          padding-bottom: 7vw; } }
      .ad-body .container .content-box .number-left {
        display: flex;
        width: 80vw;
        margin: 0 auto;
        display: flex;
        position: relative;
        height: 70vh; }
        @media all and (max-width: 1024px) {
          .ad-body .container .content-box .number-left {
            flex-direction: column;
            width: 90vw;
            height: auto;
            margin-bottom: 15vw; } }
        @media all and (max-width: 500px) {
          .ad-body .container .content-box .number-left {
            margin-bottom: 18vw; } }
        .ad-body .container .content-box .number-left .left {
          width: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-right: 1px solid black; }
          @media all and (max-width: 1024px) {
            .ad-body .container .content-box .number-left .left {
              border-right: none;
              width: 100%; } }
          .ad-body .container .content-box .number-left .left .left-content {
            display: flex;
            justify-content: right;
            padding-right: 4vw;
            position: relative; }
            @media all and (max-width: 1024px) {
              .ad-body .container .content-box .number-left .left .left-content {
                justify-content: center;
                padding-right: 0vw; } }
            .ad-body .container .content-box .number-left .left .left-content .icon-box {
              display: flex;
              flex-direction: column;
              position: absolute;
              left: 14vw;
              top: 3vw; }
              @media all and (max-width: 1024px) {
                .ad-body .container .content-box .number-left .left .left-content .icon-box {
                  top: 9vw; } }
              .ad-body .container .content-box .number-left .left .left-content .icon-box img {
                width: 7vw; }
                @media all and (max-width: 1024px) {
                  .ad-body .container .content-box .number-left .left .left-content .icon-box img {
                    width: 11vw; } }
            .ad-body .container .content-box .number-left .left .left-content .text-box .number-box {
              display: flex;
              margin-bottom: 1vw;
              justify-content: right; }
              @media all and (max-width: 1024px) {
                .ad-body .container .content-box .number-left .left .left-content .text-box .number-box {
                  justify-content: center;
                  margin-bottom: 6vw; } }
              .ad-body .container .content-box .number-left .left .left-content .text-box .number-box img {
                width: 8vw; }
                @media all and (max-width: 1024px) {
                  .ad-body .container .content-box .number-left .left .left-content .text-box .number-box img {
                    width: 20vw; } }
            .ad-body .container .content-box .number-left .left .left-content .text-box .title-box {
              font-size: 1.1vw;
              letter-spacing: 0.2em;
              font-family: 'Noto Serif TC';
              align-items: center;
              text-align: right;
              font-weight: 600;
              margin-bottom: 1vw; }
              @media all and (max-width: 1024px) {
                .ad-body .container .content-box .number-left .left .left-content .text-box .title-box {
                  font-size: 3.9vw;
                  text-align: center;
                  margin-bottom: 5vw; } }
              @media all and (max-width: 500px) {
                .ad-body .container .content-box .number-left .left .left-content .text-box .title-box {
                  font-size: 4.5vw; } }
            .ad-body .container .content-box .number-left .left .left-content .text-box .text {
              font-size: 0.8vw;
              letter-spacing: 0.15em;
              font-family: 'Noto Serif TC';
              text-align: right;
              font-weight: 600;
              line-height: 1.5vw;
              display: flex;
              flex-direction: column;
              margin-bottom: 1vw; }
              @media all and (max-width: 1440px) {
                .ad-body .container .content-box .number-left .left .left-content .text-box .text {
                  font-size: 0.9vw;
                  line-height: 1.7vw; } }
              @media all and (max-width: 1024px) {
                .ad-body .container .content-box .number-left .left .left-content .text-box .text {
                  font-size: 3.7vw;
                  line-height: 7vw;
                  text-align: center;
                  margin-bottom: 7vw; } }
              @media all and (max-width: 500px) {
                .ad-body .container .content-box .number-left .left .left-content .text-box .text {
                  font-size: 3.9vw;
                  line-height: 8vw; } }
              .ad-body .container .content-box .number-left .left .left-content .text-box .text .star-text {
                color: #324d99; }
        .ad-body .container .content-box .number-left .right {
          width: 50%;
          display: flex;
          justify-content: center; }
          @media all and (max-width: 1024px) {
            .ad-body .container .content-box .number-left .right {
              width: 100%; } }
          .ad-body .container .content-box .number-left .right .img-box {
            display: flex;
            flex-direction: column;
            justify-content: center; }
            .ad-body .container .content-box .number-left .right .img-box img {
              width: 30vw; }
              @media all and (max-width: 1024px) {
                .ad-body .container .content-box .number-left .right .img-box img {
                  width: 80vw; } }
      .ad-body .container .content-box .number-right {
        display: flex;
        width: 80vw;
        margin: 0 auto;
        display: flex;
        position: relative;
        height: 70vh;
        flex-direction: row-reverse; }
        @media all and (max-width: 1024px) {
          .ad-body .container .content-box .number-right {
            flex-direction: column;
            width: 90vw;
            height: auto;
            margin-bottom: 15vw; } }
        @media all and (max-width: 500px) {
          .ad-body .container .content-box .number-right {
            margin-bottom: 18vw; } }
        .ad-body .container .content-box .number-right .left {
          width: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center; }
          @media all and (max-width: 1024px) {
            .ad-body .container .content-box .number-right .left {
              width: 100%; } }
          .ad-body .container .content-box .number-right .left .left-content {
            display: flex;
            justify-content: left;
            padding-left: 4vw;
            flex-direction: row-reverse;
            position: relative; }
            @media all and (max-width: 1024px) {
              .ad-body .container .content-box .number-right .left .left-content {
                justify-content: center;
                padding-left: 0vw; } }
            .ad-body .container .content-box .number-right .left .left-content .icon-box {
              display: flex;
              flex-direction: column;
              right: 13vw;
              top: 3vw;
              position: absolute; }
              @media all and (max-width: 1024px) {
                .ad-body .container .content-box .number-right .left .left-content .icon-box {
                  top: 11vw; } }
              .ad-body .container .content-box .number-right .left .left-content .icon-box img {
                width: 7vw; }
                @media all and (max-width: 1024px) {
                  .ad-body .container .content-box .number-right .left .left-content .icon-box img {
                    width: 11vw; } }
            .ad-body .container .content-box .number-right .left .left-content .text-box .number-box {
              margin-bottom: 1vw;
              display: flex;
              justify-content: left; }
              @media all and (max-width: 1024px) {
                .ad-body .container .content-box .number-right .left .left-content .text-box .number-box {
                  justify-content: center;
                  margin-bottom: 6vw; } }
              .ad-body .container .content-box .number-right .left .left-content .text-box .number-box img {
                width: 8vw; }
                @media all and (max-width: 1024px) {
                  .ad-body .container .content-box .number-right .left .left-content .text-box .number-box img {
                    width: 20vw; } }
            .ad-body .container .content-box .number-right .left .left-content .text-box .title-box {
              font-size: 1.1vw;
              letter-spacing: 0.2em;
              font-family: 'Noto Serif TC';
              align-items: center;
              text-align: left;
              font-weight: 600;
              margin-bottom: 1vw; }
              @media all and (max-width: 1024px) {
                .ad-body .container .content-box .number-right .left .left-content .text-box .title-box {
                  font-size: 3.9vw;
                  text-align: center;
                  margin-bottom: 5vw; } }
              @media all and (max-width: 500px) {
                .ad-body .container .content-box .number-right .left .left-content .text-box .title-box {
                  font-size: 4.5vw; } }
            .ad-body .container .content-box .number-right .left .left-content .text-box .text {
              font-size: 0.8vw;
              letter-spacing: 0.15em;
              font-family: 'Noto Serif TC';
              text-align: left;
              font-weight: 600;
              line-height: 1.5vw;
              display: flex;
              flex-direction: column;
              margin-bottom: 1vw; }
              @media all and (max-width: 1440px) {
                .ad-body .container .content-box .number-right .left .left-content .text-box .text {
                  font-size: 0.9vw;
                  line-height: 1.7vw; } }
              @media all and (max-width: 1024px) {
                .ad-body .container .content-box .number-right .left .left-content .text-box .text {
                  font-size: 3.7vw;
                  line-height: 7vw;
                  margin-bottom: 7vw;
                  text-align: center; } }
              @media all and (max-width: 500px) {
                .ad-body .container .content-box .number-right .left .left-content .text-box .text {
                  font-size: 3.9vw;
                  line-height: 8vw; } }
              .ad-body .container .content-box .number-right .left .left-content .text-box .text .star-text {
                color: #324d99; }
        .ad-body .container .content-box .number-right .right {
          width: 50%;
          display: flex;
          justify-content: center;
          border-right: 1px solid black; }
          @media all and (max-width: 1024px) {
            .ad-body .container .content-box .number-right .right {
              border-right: none;
              width: 100%; } }
          .ad-body .container .content-box .number-right .right .img-box {
            display: flex;
            flex-direction: column;
            justify-content: center; }
            .ad-body .container .content-box .number-right .right .img-box img {
              width: 30vw; }
              @media all and (max-width: 1024px) {
                .ad-body .container .content-box .number-right .right .img-box img {
                  width: 80vw; } }
      .ad-body .container .content-box .content1 .left .left-content {
        position: relative; }
        .ad-body .container .content-box .content1 .left .left-content .icon-box {
          display: flex;
          flex-direction: column;
          position: absolute;
          left: 14vw;
          top: 3vw; }
          @media all and (max-width: 1024px) {
            .ad-body .container .content-box .content1 .left .left-content .icon-box {
              left: 0vw; } }
          .ad-body .container .content-box .content1 .left .left-content .icon-box img {
            width: 11vw; }
            @media all and (max-width: 1024px) {
              .ad-body .container .content-box .content1 .left .left-content .icon-box img {
                width: 17vw; } }
      @media all and (max-width: 1024px) {
        .ad-body .container .content-box .content6 .left .left-content .text-box .text {
          display: none; } }
      .ad-body .container .content-box .content6 .left .left-content .text-box .text-moblie {
        font-size: 0.8vw;
        letter-spacing: 0.15em;
        font-family: 'Noto Serif TC';
        text-align: left;
        font-weight: 600;
        line-height: 1.5vw;
        display: none;
        flex-direction: column;
        margin-bottom: 1vw; }
        @media all and (max-width: 1024px) {
          .ad-body .container .content-box .content6 .left .left-content .text-box .text-moblie {
            display: flex;
            font-size: 3.7vw;
            line-height: 7vw;
            margin-bottom: 7vw;
            text-align: center; } }

.work-body {
  position: relative;
  width: 100%; }
  @media all and (max-width: 1440px) {
    .work-body header .right-box {
      padding-right: 13vw; } }
  .work-body .container {
    width: 100%;
    padding-bottom: 3vw; }
    .work-body .container .c1-c4-box {
      width: 100%;
      background-image: url(../images/work/bg_01.jpg);
      background-color: white;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: relative; }
      @media all and (max-width: 1024px) {
        .work-body .container .c1-c4-box {
          background-image: url(../images/work/moblie_bg1.webp); } }
      .work-body .container .c1-c4-box .c1-box {
        width: 88vw;
        height: 32vw;
        background-color: white;
        position: relative; }
        @media all and (max-width: 1024px) {
          .work-body .container .c1-c4-box .c1-box {
            width: 95vw;
            border-bottom-left-radius: 25vw;
            display: flex;
            justify-content: center;
            flex-direction: column; } }
        @media all and (max-width: 500px) {
          .work-body .container .c1-c4-box .c1-box {
            height: calc(var(--loadingvh, 1vh) * 62); } }
        .work-body .container .c1-c4-box .c1-box .item1 {
          position: absolute;
          width: 30vw;
          left: -14vw;
          top: -2vw;
          transform: rotate(-11deg); }
          @media all and (max-width: 1024px) {
            .work-body .container .c1-c4-box .c1-box .item1 {
              width: 37vw;
              left: -11vw;
              top: 29vw;
              transform: rotate(-17deg); } }
        .work-body .container .c1-c4-box .c1-box .item2 {
          position: absolute;
          width: 25vw;
          right: -7vw;
          bottom: -12vw;
          opacity: 0.4;
          z-index: 10; }
          @media all and (max-width: 1024px) {
            .work-body .container .c1-c4-box .c1-box .item2 {
              width: 30vw;
              right: 6vw;
              bottom: 16vw; } }
        .work-body .container .c1-c4-box .c1-box .top-small-text {
          position: absolute;
          width: 50vw;
          left: 6vw;
          bottom: -3vw;
          z-index: 10; }
          @media all and (max-width: 1024px) {
            .work-body .container .c1-c4-box .c1-box .top-small-text {
              display: none; } }
        .work-body .container .c1-c4-box .c1-box .c1-content {
          width: 90vw;
          overflow: hidden; }
          @media all and (max-width: 1024px) {
            .work-body .container .c1-c4-box .c1-box .c1-content {
              width: 95vw;
              display: flex;
              justify-content: center; } }
          .work-body .container .c1-c4-box .c1-box .c1-content .title-box {
            width: 50vw;
            margin-top: 18vw;
            margin-left: 20vw; }
            @media all and (max-width: 1024px) {
              .work-body .container .c1-c4-box .c1-box .c1-content .title-box {
                display: none; } }
            .work-body .container .c1-c4-box .c1-box .c1-content .title-box .text {
              letter-spacing: 0.5em;
              font-family: "Noto Serif TC";
              align-items: center;
              font-weight: 600;
              font-size: 1.3vw;
              margin-bottom: 0.7vw; }
            .work-body .container .c1-c4-box .c1-box .c1-content .title-box .en-text {
              letter-spacing: 0.2em;
              font-size: 3vw; }
          .work-body .container .c1-c4-box .c1-box .c1-content .title-box-moblie {
            display: flex;
            font-family: "Noto Serif TC";
            align-items: center;
            font-weight: 600;
            flex-direction: column;
            margin-top: 20vw;
            display: none; }
            @media all and (max-width: 1024px) {
              .work-body .container .c1-c4-box .c1-box .c1-content .title-box-moblie {
                display: flex;
                margin-top: 0vw; } }
            .work-body .container .c1-c4-box .c1-box .c1-content .title-box-moblie .title {
              letter-spacing: 1em;
              margin-bottom: 3vw;
              padding-left: 5vw;
              font-size: 5.5vw; }
            .work-body .container .c1-c4-box .c1-box .c1-content .title-box-moblie .en-text {
              font-size: 7.5vw;
              letter-spacing: 0.3em; }
            .work-body .container .c1-c4-box .c1-box .c1-content .title-box-moblie .content-text-box {
              margin-top: 10vw;
              font-size: 4.5vw; }
              .work-body .container .c1-c4-box .c1-box .c1-content .title-box-moblie .content-text-box .content-text {
                font-size: 4.5vw;
                margin-bottom: 4vw;
                letter-spacing: 0.3em; }
      .work-body .container .c1-c4-box .c2-box {
        width: 88vw;
        height: auto;
        background-color: white;
        position: relative;
        border-bottom-right-radius: 10vw;
        border-bottom-left-radius: 10vw;
        padding-bottom: 15vw;
        overflow: hidden; }
        @media all and (max-width: 1024px) {
          .work-body .container .c1-c4-box .c2-box {
            width: 95vw;
            border-top-left-radius: 25vw;
            border-bottom-right-radius: 15vw;
            border-bottom-left-radius: 0vw; } }
        @media all and (max-width: 500px) {
          .work-body .container .c1-c4-box .c2-box {
            height: 165vw; } }
        .work-body .container .c1-c4-box .c2-box .c2-content {
          display: flex;
          flex-direction: column; }
          .work-body .container .c1-c4-box .c2-box .c2-content .top {
            display: flex;
            width: 60vw;
            justify-content: center;
            margin: 0 auto;
            margin-top: 15vw; }
            @media all and (max-width: 1024px) {
              .work-body .container .c1-c4-box .c2-box .c2-content .top {
                flex-direction: column;
                width: 100%;
                margin-top: 18vw; } }
            .work-body .container .c1-c4-box .c2-box .c2-content .top .icon {
              display: flex;
              flex-direction: column;
              width: 10vw;
              margin-right: 3.2vw; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c2-box .c2-content .top .icon {
                  margin-right: 0vw;
                  width: 20vw;
                  margin: 0 auto;
                  text-align: center;
                  margin-bottom: 8vw; } }
              .work-body .container .c1-c4-box .c2-box .c2-content .top .icon img {
                width: 100%; }
            .work-body .container .c1-c4-box .c2-box .c2-content .top .rectangle-box {
              position: relative; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c2-box .c2-content .top .rectangle-box {
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  margin: 0 auto; } }
              .work-body .container .c1-c4-box .c2-box .c2-content .top .rectangle-box .rectangle {
                width: 32vw; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c1-c4-box .c2-box .c2-content .top .rectangle-box .rectangle {
                    display: none; } }
              .work-body .container .c1-c4-box .c2-box .c2-content .top .rectangle-box .rectangle-moblie {
                display: none; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c1-c4-box .c2-box .c2-content .top .rectangle-box .rectangle-moblie {
                    display: flex;
                    width: 63vw; } }
              .work-body .container .c1-c4-box .c2-box .c2-content .top .rectangle-box .text-film {
                position: absolute;
                top: 2vw;
                left: -1.4vw;
                background-color: white;
                letter-spacing: 0.5em;
                font-family: "Noto Serif TC";
                align-items: center;
                font-weight: 600;
                font-size: 2vw; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c1-c4-box .c2-box .c2-content .top .rectangle-box .text-film {
                    font-size: 5vw;
                    left: 10.5vw;
                    top: 3.5vw; } }
          .work-body .container .c1-c4-box .c2-box .c2-content .bottom {
            display: flex;
            width: 60vw;
            justify-content: center;
            margin: 0 auto;
            margin-top: 7vw;
            position: relative; }
            @media all and (max-width: 1024px) {
              .work-body .container .c1-c4-box .c2-box .c2-content .bottom {
                margin-top: 8vw; } }
            .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box {
              position: relative;
              width: 100%; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box {
                  display: none; } }
              .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box .film-line {
                width: 65vw;
                text-align: center; }
              .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box .item-box {
                display: flex;
                width: 50vw;
                justify-content: space-evenly;
                margin-top: -2.55vw;
                margin-left: 6.8vw; }
                @media all and (max-width: 1680px) {
                  .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box .item-box {
                    margin-top: -2.7vw; } }
                @media all and (max-width: 1366px) {
                  .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box .item-box {
                    margin-top: -2.8vw; } }
                .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box .item-box .item {
                  display: flex;
                  flex-direction: column;
                  top: -0.2vw;
                  left: 9vw;
                  text-align: center; }
                  .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box .item-box .item .text {
                    font-family: "Noto Serif TC";
                    align-items: center;
                    font-weight: 600;
                    font-size: 1vw;
                    text-align: center;
                    letter-spacing: 0.2em; }
                  .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box .item-box .item .circle {
                    width: 0.4vw;
                    margin-top: 0.7vw;
                    margin-bottom: 0.7vw;
                    align-items: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-self: center; }
                    .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box .item-box .item .circle img {
                      width: 100%; }
                  .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box .item-box .item .number {
                    font-family: "Noto Serif TC";
                    align-items: center;
                    font-weight: 600;
                    font-size: 1vw; }
            .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box-moblie {
              display: flex;
              width: 100%;
              justify-content: center;
              display: none;
              position: relative; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box-moblie {
                  display: flex; } }
              .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box-moblie .film-line {
                margin-top: -4vw;
                margin-right: 14.5vw;
                width: 0.2vw;
                height: 89vw; }
              .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box-moblie .item-box {
                display: flex;
                position: absolute;
                width: 50vw;
                top: 11vw;
                left: 8.4vw;
                justify-content: space-evenly;
                flex-direction: column; }
                .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box-moblie .item-box .item {
                  display: flex;
                  flex-direction: row-reverse;
                  left: 0vw;
                  text-align: center;
                  justify-content: space-around; }
                  .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box-moblie .item-box .item .text {
                    font-family: "Noto Serif TC";
                    align-items: center;
                    font-weight: 600;
                    text-align: center;
                    font-size: 4.5vw;
                    margin-bottom: 5vw;
                    letter-spacing: 0.3em; }
                  .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box-moblie .item-box .item .circle {
                    width: 1.5vw;
                    align-items: center;
                    display: flex;
                    flex-direction: column;
                    padding-top: 2.53vw; }
                    .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box-moblie .item-box .item .circle img {
                      width: 100%; }
                  .work-body .container .c1-c4-box .c2-box .c2-content .bottom .time-box-moblie .item-box .item .number {
                    font-family: "Noto Serif TC";
                    align-items: center;
                    font-weight: 600;
                    font-size: 3.9vw; }
        .work-body .container .c1-c4-box .c2-box .border-radius-img {
          position: absolute;
          bottom: -10vw;
          width: 10vw; }
      .work-body .container .c1-c4-box .c3-box {
        width: 100%;
        background-color: white;
        position: relative;
        border-top-left-radius: 10vw;
        padding-bottom: 10vw; }
        @media all and (max-width: 1024px) {
          .work-body .container .c1-c4-box .c3-box {
            border-top-left-radius: 0vw;
            padding-bottom: 30vw; } }
        .work-body .container .c1-c4-box .c3-box .c3-content {
          display: flex;
          position: relative; }
          @media all and (max-width: 1024px) {
            .work-body .container .c1-c4-box .c3-box .c3-content {
              flex-direction: column-reverse;
              overflow: hidden; } }
          .work-body .container .c1-c4-box .c3-box .c3-content .left-box {
            display: flex;
            flex-direction: column;
            position: relative; }
            .work-body .container .c1-c4-box .c3-box .c3-content .left-box .small-text {
              top: 5vw;
              left: 4vw;
              z-index: 10;
              position: absolute; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c3-box .c3-content .left-box .small-text {
                  display: none; } }
              .work-body .container .c1-c4-box .c3-box .c3-content .left-box .small-text img {
                width: 45vw; }
            .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box {
              position: absolute;
              top: 14vw;
              left: 5vw;
              z-index: 10; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box {
                  position: initial; } }
              .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box {
                position: relative; }
                .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box .circle-moblie-text {
                  position: absolute;
                  width: 96%;
                  top: -29vw;
                  left: 2vw;
                  display: none; }
                  @media all and (max-width: 1024px) {
                    .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box .circle-moblie-text {
                      display: flex; } }
                .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box .circle {
                  width: 33vw; }
                  @media all and (max-width: 1024px) {
                    .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box .circle {
                      width: 90vw;
                      display: none; } }
                .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box .circle-moblie {
                  display: none;
                  margin: 0 auto;
                  margin-top: 30vw; }
                  @media all and (max-width: 1024px) {
                    .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box .circle-moblie {
                      width: 90vw;
                      display: flex; } }
                .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box .text {
                  position: absolute;
                  top: 12vw;
                  left: 4vw;
                  font-family: "Noto Serif TC";
                  font-weight: 600;
                  font-size: 1vw;
                  letter-spacing: 0.2em; }
                  @media all and (max-width: 1024px) {
                    .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box .text {
                      top: initial;
                      bottom: 38vw;
                      left: 16vw;
                      font-size: 3.9vw; } }
                .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box .bottom-text {
                  font-family: "Noto Serif TC";
                  margin-left: 10vw;
                  font-weight: 600;
                  font-size: 1vw;
                  margin-top: 0.3vw;
                  letter-spacing: 0.2em; }
                  @media all and (max-width: 1024px) {
                    .work-body .container .c1-c4-box .c3-box .c3-content .left-box .circle-item-box .circle-box .bottom-text {
                      top: initial;
                      margin-top: 0vw;
                      margin-left: 0vw;
                      text-align: center;
                      font-size: 3.9vw; } }
          .work-body .container .c1-c4-box .c3-box .c3-content .right-box {
            display: flex;
            text-align: right;
            align-items: flex-end;
            padding-top: 1vw;
            width: 100%;
            position: relative; }
            @media all and (max-width: 1024px) {
              .work-body .container .c1-c4-box .c3-box .c3-content .right-box {
                justify-content: center; } }
            .work-body .container .c1-c4-box .c3-box .c3-content .right-box .yt-box {
              padding-right: 5vw;
              display: flex;
              align-items: flex-end;
              justify-content: right;
              width: 100%;
              flex-direction: column; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c3-box .c3-content .right-box .yt-box {
                  justify-content: center;
                  align-items: center;
                  padding-right: 0vw; } }
              .work-body .container .c1-c4-box .c3-box .c3-content .right-box .yt-box iframe {
                width: 60vw;
                height: 33vw;
                border-radius: 1vw; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c1-c4-box .c3-box .c3-content .right-box .yt-box iframe {
                    width: 90vw;
                    height: 51vw;
                    border-radius: 2vw; } }
                @media all and (max-width: 500px) {
                  .work-body .container .c1-c4-box .c3-box .c3-content .right-box .yt-box iframe {
                    height: 50vw; } }
              .work-body .container .c1-c4-box .c3-box .c3-content .right-box .yt-box .text {
                font-family: "Noto Serif TC";
                margin-left: 10vw;
                font-weight: 600;
                font-size: 1vw;
                margin-top: 0.3vw;
                letter-spacing: 0.2em; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c1-c4-box .c3-box .c3-content .right-box .yt-box .text {
                    margin-left: 0vw;
                    font-size: 3.9vw;
                    margin-top: 3vw; } }
        .work-body .container .c1-c4-box .c3-box .c3-item {
          position: absolute;
          width: 25vw;
          bottom: -3vw;
          right: 4vw;
          z-index: 20; }
          @media all and (max-width: 1024px) {
            .work-body .container .c1-c4-box .c3-box .c3-item {
              width: 63vw;
              bottom: 4vw;
              right: 30vw; } }
      .work-body .container .c1-c4-box .c4-box {
        width: 100%;
        position: relative;
        background-color: white;
        display: flex;
        flex-direction: column; }
        .work-body .container .c1-c4-box .c4-box .top-bg {
          position: absolute;
          z-index: 1;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 25vw;
          overflow: hidden; }
          @media all and (max-width: 1024px) {
            .work-body .container .c1-c4-box .c4-box .top-bg {
              display: none; } }
          .work-body .container .c1-c4-box .c4-box .top-bg img {
            width: 100vw; }
        .work-body .container .c1-c4-box .c4-box .c4-content {
          display: flex;
          width: 100%;
          padding: 0vw 3vw;
          padding-top: 4vw;
          padding-bottom: 5vw;
          justify-content: flex-start;
          flex-wrap: wrap;
          gap: 5%; }
          @media all and (max-width: 1024px) {
            .work-body .container .c1-c4-box .c4-box .c4-content {
              flex-direction: column;
              padding: 0vw 6vw; } }
          .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box {
            display: flex;
            flex-direction: column;
            width: 30%;
            z-index: 2;
            padding: 2% 0; }
            @media all and (max-width: 1024px) {
              .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box {
                width: 100%;
                margin-top: 15vw; } }
            .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box.short {
              width: 21%; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box.short {
                  width: 100%; } }
            .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .title-box {
              font-family: "Noto Serif TC";
              align-items: center;
              font-weight: 600;
              font-size: 1.1vw;
              letter-spacing: 0.1em;
              padding-top: 1vw;
              border-top: 1px solid black;
              margin-bottom: 2.5vw; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .title-box {
                  order: 2;
                  border-top: none;
                  text-align: center;
                  margin-top: 3vw;
                  margin-bottom: 3vw;
                  font-size: 4.5vw; } }
            .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .yt-box {
              display: flex;
              width: 100%; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .yt-box {
                  order: 1; } }
              .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .yt-box iframe {
                width: 50vw;
                height: 18vw;
                border-radius: 1vw; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .yt-box iframe {
                    width: 100%;
                    height: 53vw;
                    border-radius: 2vw; } }
                @media all and (max-width: 500px) {
                  .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .yt-box iframe {
                    height: 50vw; } }
              .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .yt-box.short iframe {
                height: 35vw; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .yt-box.short iframe {
                    height: 158vw; } }
            .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .content-title {
              font-family: "Noto Serif TC";
              align-items: left;
              font-weight: 600;
              font-size: 1.1vw;
              letter-spacing: 0.1em;
              margin-top: 2vw;
              margin-bottom: 1vw; }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .content-title {
                  font-size: 4.5vw;
                  text-align: center;
                  margin-top: 2vw;
                  margin-bottom: 5vw;
                  order: 3; } }
            .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .content {
              font-family: "Noto Serif TC";
              align-items: left;
              font-weight: 600;
              font-size: 0.8vw;
              letter-spacing: 0.1em; }
              @media all and (max-width: 1440px) {
                .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .content {
                  font-size: 0.9vw;
                  line-height: 1.7vw; } }
              @media all and (max-width: 1024px) {
                .work-body .container .c1-c4-box .c4-box .c4-content .yt-video-item-box .content {
                  font-size: 3.7vw;
                  line-height: 7vw;
                  order: 4;
                  padding: 0vw 2vw;
                  text-align: justify; } }
        .work-body .container .c1-c4-box .c4-box .more-yt-box {
          width: 100%;
          display: flex;
          justify-content: right;
          padding-right: 3vw;
          margin-bottom: 3vw; }
          @media all and (max-width: 1024px) {
            .work-body .container .c1-c4-box .c4-box .more-yt-box {
              margin-top: 15vw;
              margin-bottom: 15vw;
              justify-content: center; } }
          .work-body .container .c1-c4-box .c4-box .more-yt-box .yt-button {
            font-family: "Noto Serif TC";
            align-items: left;
            font-weight: 600;
            font-size: 0.8vw;
            letter-spacing: 0.1em;
            border: 1px solid black;
            padding: 0.5vw 1vw;
            overflow: hidden;
            color: black;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            position: relative;
            z-index: 2; }
            @media all and (max-width: 1440px) {
              .work-body .container .c1-c4-box .c4-box .more-yt-box .yt-button {
                font-size: 0.9vw;
                line-height: 1.7vw; } }
            @media all and (max-width: 1024px) {
              .work-body .container .c1-c4-box .c4-box .more-yt-box .yt-button {
                font-size: 3.7vw;
                padding: 4vw 5vw;
                letter-spacing: 0.2em; } }
            .work-body .container .c1-c4-box .c4-box .more-yt-box .yt-button:before {
              content: "";
              position: absolute;
              width: 100%;
              height: 100%;
              z-index: -1;
              top: 0;
              left: -100%;
              background-color: #86d5fb;
              -webkit-transition: all 0.3s ease-in-out;
              -o-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out; }
            .work-body .container .c1-c4-box .c4-box .more-yt-box .yt-button:hover {
              color: #ecf0f1;
              z-index: 2;
              border: 1px solid #86d5fb; }
              .work-body .container .c1-c4-box .c4-box .more-yt-box .yt-button:hover:before {
                left: 0%; }
    .work-body .container .c5-c6-box {
      width: 100%;
      background-image: url(../images/work/bg_04.jpg);
      background-color: white;
      background-size: cover;
      background-repeat: no-repeat;
      position: relative; }
      .work-body .container .c5-c6-box .cirlce-item {
        position: absolute;
        width: 16vw;
        left: 0vw;
        top: -8vw;
        z-index: 10; }
        @media all and (max-width: 1024px) {
          .work-body .container .c5-c6-box .cirlce-item {
            width: 37vw;
            left: -1vw;
            top: 9vw; } }
      .work-body .container .c5-c6-box .c5-box {
        background-color: white;
        border-top-right-radius: 40vw;
        width: 100%; }
        @media all and (max-width: 1024px) {
          .work-body .container .c5-c6-box .c5-box {
            border-top-right-radius: 100vw;
            padding-bottom: 3vw; } }
        .work-body .container .c5-c6-box .c5-box .c5-content {
          padding-top: 15vw;
          padding-bottom: 15vw;
          position: relative; }
          @media all and (max-width: 1024px) {
            .work-body .container .c5-c6-box .c5-box .c5-content {
              padding-top: 60vw; } }
          .work-body .container .c5-c6-box .c5-box .c5-content .c5-item {
            position: absolute;
            width: 23vw;
            z-index: 10;
            left: 10vw;
            bottom: -4vw; }
            @media all and (max-width: 1024px) {
              .work-body .container .c5-c6-box .c5-box .c5-content .c5-item {
                width: 53vw;
                left: 8vw;
                bottom: -14vw; } }
          .work-body .container .c5-c6-box .c5-box .c5-content .top {
            display: flex;
            width: 60vw;
            margin: 0 auto; }
            @media all and (max-width: 1024px) {
              .work-body .container .c5-c6-box .c5-box .c5-content .top {
                flex-direction: column;
                width: 100%; } }
            .work-body .container .c5-c6-box .c5-box .c5-content .top .icon {
              display: flex;
              flex-direction: column;
              width: 10vw;
              margin-right: 3.2vw; }
              @media all and (max-width: 1024px) {
                .work-body .container .c5-c6-box .c5-box .c5-content .top .icon {
                  margin-right: 0vw;
                  width: 20vw;
                  margin: 0 auto;
                  text-align: center;
                  margin-bottom: 3vw; } }
              .work-body .container .c5-c6-box .c5-box .c5-content .top .icon img {
                width: 100%; }
            .work-body .container .c5-c6-box .c5-box .c5-content .top .rectangle-box {
              position: relative; }
              @media all and (max-width: 1024px) {
                .work-body .container .c5-c6-box .c5-box .c5-content .top .rectangle-box {
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  margin: 0 auto; } }
              .work-body .container .c5-c6-box .c5-box .c5-content .top .rectangle-box .rectangle {
                width: 32vw; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c5-c6-box .c5-box .c5-content .top .rectangle-box .rectangle {
                    display: none; } }
              .work-body .container .c5-c6-box .c5-box .c5-content .top .rectangle-box .rectangle-moblie {
                display: none; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c5-c6-box .c5-box .c5-content .top .rectangle-box .rectangle-moblie {
                    display: flex;
                    width: 63vw; } }
            .work-body .container .c5-c6-box .c5-box .c5-content .top .text-design-layout {
              position: absolute;
              top: 2vw;
              left: -1.4vw;
              background-color: white;
              letter-spacing: 0.5em;
              font-family: "Noto Serif TC";
              align-items: center;
              font-weight: 600;
              font-size: 2vw; }
              @media all and (max-width: 1024px) {
                .work-body .container .c5-c6-box .c5-box .c5-content .top .text-design-layout {
                  font-size: 5vw;
                  left: 10.5vw;
                  top: 3.5vw; } }
        .work-body .container .c5-c6-box .c5-box .title-box {
          display: flex;
          width: 100%;
          margin: 0 auto;
          margin-top: 5vw; }
          .work-body .container .c5-c6-box .c5-box .title-box .title {
            display: flex;
            margin: 0 auto;
            font-family: "Noto Serif TC";
            align-items: left;
            font-weight: 600;
            font-size: 1.2vw;
            letter-spacing: 0.2em;
            color: black; }
            @media all and (max-width: 1024px) {
              .work-body .container .c5-c6-box .c5-box .title-box .title {
                font-size: 4.5vw;
                flex-direction: column; } }
            @media all and (max-width: 1024px) {
              .work-body .container .c5-c6-box .c5-box .title-box .title .text {
                margin: 3vw 0vw; } }
            .work-body .container .c5-c6-box .c5-box .title-box .title .img-box {
              display: flex;
              flex-direction: column;
              text-align: center;
              align-self: center;
              margin: 0 1vw; }
              .work-body .container .c5-c6-box .c5-box .title-box .title .img-box img {
                width: 80%;
                text-align: center;
                align-items: flex-end; }
                @media all and (max-width: 1440px) {
                  .work-body .container .c5-c6-box .c5-box .title-box .title .img-box img {
                    width: 1.2vw; } }
                @media all and (max-width: 1024px) {
                  .work-body .container .c5-c6-box .c5-box .title-box .title .img-box img {
                    width: 4vw; } }
      .work-body .container .c5-c6-box .c6-box {
        background-color: white;
        width: 100%;
        height: 90vh; }
        @media all and (max-width: 1024px) {
          .work-body .container .c5-c6-box .c6-box {
            height: auto;
            padding-top: 13vw; } }
        .work-body .container .c5-c6-box .c6-box .c6-content {
          position: relative;
          display: flex; }
          @media all and (max-width: 1024px) {
            .work-body .container .c5-c6-box .c6-box .c6-content {
              flex-direction: column; } }
          .work-body .container .c5-c6-box .c6-box .c6-content .left-box {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 0 auto; }
            @media all and (max-width: 1024px) {
              .work-body .container .c5-c6-box .c6-box .c6-content .left-box {
                width: 100%;
                padding: 0vw 6vw; } }
            .work-body .container .c5-c6-box .c6-box .c6-content .left-box .content-box {
              display: flex;
              flex-direction: column;
              width: 52%;
              justify-content: center;
              margin: 0 auto; }
              @media all and (max-width: 1024px) {
                .work-body .container .c5-c6-box .c6-box .c6-content .left-box .content-box {
                  width: 100%; } }
              .work-body .container .c5-c6-box .c6-box .c6-content .left-box .content-box .left-content {
                display: flex;
                flex-direction: column;
                margin-bottom: 5vw;
                justify-content: center; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c5-c6-box .c6-box .c6-content .left-box .content-box .left-content {
                    margin-bottom: 8vw; } }
                .work-body .container .c5-c6-box .c6-box .c6-content .left-box .content-box .left-content .title-box {
                  display: flex;
                  font-family: "Noto Serif TC";
                  align-items: left;
                  font-weight: 600;
                  font-size: 1.2vw;
                  letter-spacing: 0.2em;
                  color: black;
                  margin-bottom: 1vw;
                  justify-content: center;
                  text-align: center; }
                  @media all and (max-width: 1024px) {
                    .work-body .container .c5-c6-box .c6-box .c6-content .left-box .content-box .left-content .title-box {
                      font-size: 4.5vw;
                      margin-bottom: 2vw; } }
                .work-body .container .c5-c6-box .c6-box .c6-content .left-box .content-box .left-content .content {
                  display: flex;
                  font-family: "Noto Serif TC";
                  align-items: left;
                  font-weight: 600;
                  font-size: 0.8vw;
                  letter-spacing: 0.1em;
                  line-height: 1.5vw; }
                  @media all and (max-width: 1440px) {
                    .work-body .container .c5-c6-box .c6-box .c6-content .left-box .content-box .left-content .content {
                      font-size: 0.9vw;
                      line-height: 1.7vw; } }
                  @media all and (max-width: 1024px) {
                    .work-body .container .c5-c6-box .c6-box .c6-content .left-box .content-box .left-content .content {
                      line-height: 7vw;
                      font-size: 3.7vw;
                      text-align: justify; } }
          .work-body .container .c5-c6-box .c6-box .c6-content .right-box {
            width: 50%;
            background-image: url(../images/work/c6_swiper_bg.webp);
            background-color: white;
            background-size: cover;
            background-repeat: no-repeat;
            height: auto;
            padding-top: 7vw;
            padding-bottom: 7vw;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center; }
            @media all and (max-width: 1024px) {
              .work-body .container .c5-c6-box .c6-box .c6-content .right-box {
                width: 100%;
                margin-top: 4vw; } }
            .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper {
              width: 65%;
              display: flex;
              justify-content: center;
              margin: 0 auto; }
              @media all and (max-width: 1024px) {
                .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper {
                  width: 75%; } }
              .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper .swiper-wrapper {
                display: flex; }
                .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper .swiper-wrapper .swiper-slide {
                  width: 100%; }
                  .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper .swiper-wrapper .swiper-slide img {
                    width: 100%;
                    border-radius: 1vw; }
                    @media all and (max-width: 1024px) {
                      .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper .swiper-wrapper .swiper-slide img {
                        border-radius: 4vw; } }
            .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper-prev {
              position: absolute;
              left: 6vw;
              cursor: pointer; }
              @media all and (max-width: 1024px) {
                .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper-prev {
                  left: 4vw; } }
              .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper-prev img {
                width: 30px; }
                @media all and (max-width: 1680px) {
                  .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper-prev img {
                    width: 1vw; } }
                @media all and (max-width: 1024px) {
                  .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper-prev img {
                    width: 3vw; } }
            .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper-next {
              position: absolute;
              right: 6vw;
              cursor: pointer; }
              @media all and (max-width: 1024px) {
                .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper-next {
                  right: 4vw; } }
              .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper-next img {
                width: 30px; }
                @media all and (max-width: 1680px) {
                  .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper-next img {
                    width: 1vw; } }
                @media all and (max-width: 1024px) {
                  .work-body .container .c5-c6-box .c6-box .c6-content .right-box .swiper-next img {
                    width: 3vw; } }
          .work-body .container .c5-c6-box .c6-box .c6-content .circle {
            position: absolute;
            width: 25vw;
            left: 37vw;
            bottom: -10vw;
            opacity: 0.4;
            z-index: 10; }
    .work-body .container .c7-c9-box {
      width: 100%;
      background-image: url(../images/work/bg_03.jpg);
      background-color: white;
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      overflow: hidden; }
      @media all and (max-width: 1024px) {
        .work-body .container .c7-c9-box {
          background-position: center; } }
      .work-body .container .c7-c9-box .c7-box {
        display: flex;
        justify-content: right;
        width: 100%; }
        .work-body .container .c7-c9-box .c7-box .c7-content {
          padding-top: 15vw;
          position: relative;
          width: 88vw;
          background-color: white;
          border-bottom-left-radius: 10vw;
          height: auto;
          padding-bottom: 12vw; }
          @media all and (max-width: 1024px) {
            .work-body .container .c7-c9-box .c7-box .c7-content {
              height: auto;
              width: 95vw;
              padding-top: 25vw;
              padding-bottom: 30vw;
              border-bottom-left-radius: 30vw;
              border-bottom-right-radius: 40vw; } }
          .work-body .container .c7-c9-box .c7-box .c7-content .c7-item {
            position: absolute;
            width: 23vw;
            z-index: 10;
            left: 10vw;
            bottom: -4vw; }
          .work-body .container .c7-c9-box .c7-box .c7-content .top {
            display: flex;
            width: 60vw;
            margin: 0 auto; }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c7-box .c7-content .top {
                flex-direction: column;
                width: 100%; } }
            .work-body .container .c7-c9-box .c7-box .c7-content .top .icon {
              display: flex;
              flex-direction: column;
              width: 10vw;
              margin-right: 3.2vw; }
              @media all and (max-width: 1024px) {
                .work-body .container .c7-c9-box .c7-box .c7-content .top .icon {
                  margin-right: 0vw;
                  width: 20vw;
                  margin: 0 auto;
                  text-align: center;
                  margin-bottom: 8vw; } }
              .work-body .container .c7-c9-box .c7-box .c7-content .top .icon img {
                width: 100%; }
            .work-body .container .c7-c9-box .c7-box .c7-content .top .rectangle-box {
              position: relative; }
              @media all and (max-width: 1024px) {
                .work-body .container .c7-c9-box .c7-box .c7-content .top .rectangle-box {
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  margin: 0 auto; } }
              .work-body .container .c7-c9-box .c7-box .c7-content .top .rectangle-box .rectangle {
                width: 32vw; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c7-c9-box .c7-box .c7-content .top .rectangle-box .rectangle {
                    display: none; } }
              .work-body .container .c7-c9-box .c7-box .c7-content .top .rectangle-box .rectangle-moblie {
                display: none; }
                @media all and (max-width: 1024px) {
                  .work-body .container .c7-c9-box .c7-box .c7-content .top .rectangle-box .rectangle-moblie {
                    display: flex;
                    width: 63vw; } }
            .work-body .container .c7-c9-box .c7-box .c7-content .top .text-web-design {
              position: absolute;
              top: 2vw;
              left: -1.4vw;
              background-color: white;
              letter-spacing: 0.5em;
              font-family: "Noto Serif TC";
              align-items: center;
              font-weight: 600;
              font-size: 2vw; }
              @media all and (max-width: 1024px) {
                .work-body .container .c7-c9-box .c7-box .c7-content .top .text-web-design {
                  font-size: 5vw;
                  left: 10.5vw;
                  top: 3.5vw; } }
        .work-body .container .c7-c9-box .c7-box .title-box {
          display: flex;
          width: 100%;
          margin: 0 auto;
          margin-top: 5vw;
          flex-direction: column; }
          @media all and (max-width: 1024px) {
            .work-body .container .c7-c9-box .c7-box .title-box {
              margin-top: 10vw; } }
          .work-body .container .c7-c9-box .c7-box .title-box .title {
            display: flex;
            margin: 0 auto;
            font-family: "Noto Serif TC";
            font-weight: 600;
            font-size: 1.2vw;
            letter-spacing: 0.2em;
            color: black; }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c7-box .title-box .title {
                font-size: 3.9vw; } }
          .work-body .container .c7-c9-box .c7-box .title-box .content {
            display: flex;
            font-family: "Noto Serif TC";
            margin: 0 auto;
            font-weight: 600;
            font-size: 0.8vw;
            margin-top: 1vw;
            letter-spacing: 0.1em; }
            @media all and (max-width: 1440px) {
              .work-body .container .c7-c9-box .c7-box .title-box .content {
                font-size: 0.9vw;
                line-height: 1.7vw; } }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c7-box .title-box .content {
                font-size: 3.9vw;
                margin-top: 2vw; } }
      .work-body .container .c7-c9-box .c8-box {
        display: flex;
        justify-content: left;
        width: 100%;
        height: auto; }
        .work-body .container .c7-c9-box .c8-box .c8-content {
          position: relative;
          width: 100%;
          background-color: white;
          border-bottom-right-radius: 15vw;
          padding-bottom: 5vw; }
          @media all and (max-width: 1024px) {
            .work-body .container .c7-c9-box .c8-box .c8-content {
              border-top-right-radius: 40vw;
              border-bottom-right-radius: 0vw;
              height: auto; } }
          .work-body .container .c7-c9-box .c8-box .c8-content .title-box {
            letter-spacing: 0.2em;
            font-family: "Noto Serif TC";
            align-items: center;
            font-weight: 600;
            font-size: 1.2vw;
            text-align: center;
            margin-top: 5vw;
            margin-bottom: 5vw; }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c8-box .c8-content .title-box {
                font-size: 4.5vw;
                margin-top: 15vw;
                margin-bottom: 10vw; } }
          .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box {
            display: flex;
            width: 60%;
            justify-content: center;
            margin: 0 auto;
            position: relative;
            padding: 0vw 5vw;
            z-index: 25; }
            @media all and (max-width: 1920px) {
              .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box {
                width: 70%; } }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box {
                width: 95%; } }
            .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper {
              width: 100%;
              display: flex; }
              .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper .swiper-wrapper {
                width: 100%;
                display: flex; }
                .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper .swiper-wrapper .swiper-slide {
                  width: auto; }
                .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper .swiper-wrapper .swiper-slide {
                  display: flex;
                  justify-content: center;
                  align-items: center; }
                  .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper .swiper-wrapper .swiper-slide a {
                    display: flex;
                    justify-content: center;
                    padding: 10px; }
                  .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper .swiper-wrapper .swiper-slide img {
                    display: block;
                    object-fit: cover;
                    width: 95%;
                    box-shadow: 3px 3px 10px #0000002e; }
                    @media all and (max-width: 1920px) {
                      .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper .swiper-wrapper .swiper-slide img {
                        width: 90%; } }
            .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper-pagination-horizontal {
              bottom: -1.5vw; }
              @media all and (max-width: 1440px) {
                .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper-pagination-horizontal {
                  bottom: -2.5vw; } }
              @media all and (max-width: 1024px) {
                .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper-pagination-horizontal {
                  bottom: -3.5vw; } }
              .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper-pagination-horizontal .swiper-pagination-bullet {
                margin: 0.35vw; }
                @media all and (max-width: 500px) {
                  .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper-pagination-horizontal .swiper-pagination-bullet {
                    width: 6px;
                    height: 6px;
                    margin: 0.75vw; } }
              .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .swiper-pagination-horizontal .swiper-pagination-bullet-active {
                background: #565656; }
            .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .c8-swiper-prev {
              position: absolute;
              left: 1vw;
              cursor: pointer;
              top: 7vw; }
              @media all and (max-width: 1024px) {
                .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .c8-swiper-prev {
                  top: 33vw;
                  left: -1vw;
                  padding: 3% 5%;
                  z-index: 10; } }
              .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .c8-swiper-prev img {
                width: 25px; }
                @media all and (max-width: 1680px) {
                  .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .c8-swiper-prev img {
                    width: 1vw; } }
                @media all and (max-width: 1024px) {
                  .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .c8-swiper-prev img {
                    width: 3vw; } }
            .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .c8-swiper-next {
              position: absolute;
              right: 1vw;
              top: 7vw;
              cursor: pointer; }
              @media all and (max-width: 1024px) {
                .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .c8-swiper-next {
                  top: 33vw;
                  right: -1vw;
                  padding: 3% 5%;
                  z-index: 10; } }
              .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .c8-swiper-next img {
                width: 25px; }
                @media all and (max-width: 1680px) {
                  .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .c8-swiper-next img {
                    width: 1vw; } }
                @media all and (max-width: 1024px) {
                  .work-body .container .c7-c9-box .c8-box .c8-content .swiper-box .c8-swiper-next img {
                    width: 3vw; } }
          .work-body .container .c7-c9-box .c8-box .c8-content .content {
            display: flex;
            font-family: "Noto Serif TC";
            margin: 0 auto;
            font-weight: 600;
            font-size: 0.8vw;
            margin-top: 5vw;
            letter-spacing: 0.1em;
            justify-content: center;
            text-align: center;
            line-height: 1.5vw; }
            @media all and (max-width: 1440px) {
              .work-body .container .c7-c9-box .c8-box .c8-content .content {
                font-size: 0.9vw;
                line-height: 1.7vw; } }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c8-box .c8-content .content {
                display: none; } }
          .work-body .container .c7-c9-box .c8-box .c8-content .content-moblie {
            display: flex;
            justify-content: center;
            margin: 0 auto;
            font-weight: 600;
            font-family: "Noto Serif TC";
            font-size: 3.7vw;
            text-align: left;
            letter-spacing: 0.1em;
            line-height: 7vw;
            padding: 0 13vw;
            margin-top: 8vw;
            position: relative;
            z-index: 30;
            display: none; }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c8-box .c8-content .content-moblie {
                display: flex; } }
      .work-body .container .c7-c9-box .c9-box {
        display: flex;
        justify-content: left;
        width: 100%;
        height: auto;
        position: relative; }
        .work-body .container .c7-c9-box .c9-box .big-circle {
          position: absolute;
          width: 55vw;
          height: 55vw;
          top: -24vw;
          left: -27vw;
          z-index: 20; }
          @media all and (max-width: 1024px) {
            .work-body .container .c7-c9-box .c9-box .big-circle {
              width: 100vw;
              height: 100vw;
              top: -114vw;
              left: -52vw; } }
        .work-body .container .c7-c9-box .c9-box .big-circle2 {
          position: absolute;
          width: 100vw;
          height: 100vw;
          top: initial;
          left: initial;
          right: -52vw;
          z-index: 20;
          bottom: 30vw;
          display: none; }
          @media all and (max-width: 1024px) {
            .work-body .container .c7-c9-box .c9-box .big-circle2 {
              display: flex; } }
        .work-body .container .c7-c9-box .c9-box .bottom-circle {
          position: absolute;
          width: 25vw;
          bottom: 0vw;
          right: 5vw;
          z-index: 20; }
          @media all and (max-width: 1024px) {
            .work-body .container .c7-c9-box .c9-box .bottom-circle {
              display: none; } }
        .work-body .container .c7-c9-box .c9-box .c9-content {
          position: relative;
          width: 100%;
          background-color: white;
          border-top-right-radius: 15vw;
          padding-top: 5vw;
          overflow: hidden; }
          @media all and (max-width: 1024px) {
            .work-body .container .c7-c9-box .c9-box .c9-content {
              border-top-right-radius: 0vw;
              height: auto; } }
          .work-body .container .c7-c9-box .c9-box .c9-content .c9-item {
            position: absolute;
            width: 25vw;
            bottom: -1vw;
            right: -4vw;
            z-index: 20; }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c9-box .c9-content .c9-item {
                bottom: initial;
                right: initial;
                left: -15vw;
                width: 35vw; } }
          .work-body .container .c7-c9-box .c9-box .c9-content .title-box {
            letter-spacing: 0.2em;
            font-family: "Noto Serif TC";
            align-items: center;
            font-weight: 600;
            font-size: 1.2vw;
            text-align: center;
            margin-top: 5vw;
            margin-bottom: 5vw; }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c9-box .c9-content .title-box {
                font-size: 4.5vw;
                margin-top: 15vw;
                margin-bottom: 10vw; } }
          .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box {
            display: flex;
            width: 60%;
            justify-content: center;
            margin: 0 auto;
            position: relative;
            padding: 0vw 5vw;
            z-index: 25; }
            @media all and (max-width: 1920px) {
              .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box {
                width: 70%; } }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box {
                width: 95%; } }
            .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper {
              width: 100%;
              display: flex;
              overflow: hidden; }
              .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper .swiper-wrapper {
                width: 100%;
                display: flex; }
                .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper .swiper-wrapper .swiper-slide {
                  width: auto; }
                .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper .swiper-wrapper .swiper-slide {
                  display: flex;
                  justify-content: center;
                  align-items: center; }
                  .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper .swiper-wrapper .swiper-slide a {
                    display: flex;
                    justify-content: center;
                    padding: 10px; }
                  .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper .swiper-wrapper .swiper-slide img {
                    display: block;
                    object-fit: cover;
                    width: 95%;
                    box-shadow: 3px 3px 10px #0000002e; }
                    @media all and (max-width: 1920px) {
                      .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper .swiper-wrapper .swiper-slide img {
                        width: 90%; } }
            .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper-pagination2 {
              position: absolute;
              bottom: -1.5vw;
              width: 10vw;
              left: 28vw; }
              @media all and (max-width: 1920px) {
                .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper-pagination2 {
                  left: 33vw; } }
              @media all and (max-width: 1440px) {
                .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper-pagination2 {
                  bottom: -2.5vw; } }
              @media all and (max-width: 1024px) {
                .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper-pagination2 {
                  bottom: -3.5vw;
                  width: 30vw;
                  left: 42vw; } }
              @media all and (max-width: 500px) {
                .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper-pagination2 {
                  width: 100%;
                  left: 0;
                  text-align: center; } }
            .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper-pagination-horizontal .swiper-pagination-bullet {
              margin: 0.35vw; }
              @media all and (max-width: 500px) {
                .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper-pagination-horizontal .swiper-pagination-bullet {
                  width: 6px;
                  height: 6px;
                  margin: 0.75vw; } }
            .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .swiper-pagination-horizontal .swiper-pagination-bullet-active {
              background: #565656; }
            .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .c9-swiper-prev {
              position: absolute;
              left: 1vw;
              top: 7vw;
              cursor: pointer; }
              @media all and (max-width: 1024px) {
                .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .c9-swiper-prev {
                  top: 33vw;
                  left: -1vw;
                  padding: 3% 5%;
                  z-index: 10; } }
              .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .c9-swiper-prev img {
                width: 25px; }
                @media all and (max-width: 1680px) {
                  .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .c9-swiper-prev img {
                    width: 1vw; } }
                @media all and (max-width: 1024px) {
                  .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .c9-swiper-prev img {
                    width: 3vw; } }
            .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .c9-swiper-next {
              position: absolute;
              right: 1vw;
              top: 7vw;
              cursor: pointer; }
              @media all and (max-width: 1024px) {
                .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .c9-swiper-next {
                  top: 33vw;
                  right: -1vw;
                  padding: 3% 5%;
                  z-index: 10; } }
              .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .c9-swiper-next img {
                width: 25px; }
                @media all and (max-width: 1680px) {
                  .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .c9-swiper-next img {
                    width: 1vw; } }
                @media all and (max-width: 1024px) {
                  .work-body .container .c7-c9-box .c9-box .c9-content .swiper-box .c9-swiper-next img {
                    width: 3vw; } }
          .work-body .container .c7-c9-box .c9-box .c9-content .content {
            display: flex;
            font-family: "Noto Serif TC";
            margin: 0 auto;
            font-weight: 600;
            font-size: 0.8vw;
            margin-top: 5vw;
            letter-spacing: 0.1em;
            justify-content: center;
            text-align: center;
            line-height: 1.5vw;
            margin-bottom: 3vw; }
            @media all and (max-width: 1440px) {
              .work-body .container .c7-c9-box .c9-box .c9-content .content {
                font-size: 0.9vw;
                line-height: 1.7vw; } }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c9-box .c9-content .content {
                display: none; } }
          .work-body .container .c7-c9-box .c9-box .c9-content .content-moblie {
            display: flex;
            justify-content: center;
            margin: 0 auto;
            font-weight: 600;
            font-family: "Noto Serif TC";
            font-size: 3.7vw;
            text-align: left;
            letter-spacing: 0.1em;
            line-height: 7vw;
            padding: 0 13vw;
            margin-top: 8vw;
            margin-bottom: 13vw;
            position: relative;
            z-index: 30;
            display: none; }
            @media all and (max-width: 1024px) {
              .work-body .container .c7-c9-box .c9-box .c9-content .content-moblie {
                display: flex; } }

.other-body {
  background-color: white;
  position: relative;
  width: 100%; }
  .other-body .container {
    position: relative;
    width: 100%; }
    .other-body .container .footer {
      position: absolute; }
      @media all and (max-width: 1024px) {
        .other-body .container .footer {
          position: relative; } }
    .other-body .container .c1-box {
      position: relative;
      width: 100%;
      padding-top: 10vw;
      display: flex;
      justify-content: right;
      padding-bottom: 10vw; }
      @media all and (max-width: 1440px) {
        .other-body .container .c1-box {
          padding-top: 15vw;
          padding-bottom: 16vw; } }
      @media all and (max-width: 1024px) {
        .other-body .container .c1-box {
          flex-direction: column;
          padding-top: 0vw;
          padding-bottom: 10vw; } }
      .other-body .container .c1-box .title-box {
        position: absolute;
        top: 5vw;
        left: 5vw;
        font-size: 3vw;
        letter-spacing: 0.3em;
        font-family: "Noto Serif TC";
        align-items: center;
        font-weight: 600; }
        @media all and (max-width: 1024px) {
          .other-body .container .c1-box .title-box {
            position: initial;
            display: flex;
            flex-direction: column-reverse;
            margin-top: 20vw;
            font-size: 7.5vw; } }
        .other-body .container .c1-box .title-box .text-1 {
          margin-bottom: 0.5vw; }
          @media all and (max-width: 1024px) {
            .other-body .container .c1-box .title-box .text-1 {
              margin-bottom: 0vw; } }
        @media all and (max-width: 1024px) {
          .other-body .container .c1-box .title-box .text-2 {
            letter-spacing: 1em;
            padding-left: 5vw;
            margin-bottom: 3vw;
            font-size: 5.5vw; } }
      .other-body .container .c1-box .c1-bg {
        position: absolute;
        width: 40vw;
        bottom: -2vw;
        left: -2vw; }
        @media all and (max-width: 1024px) {
          .other-body .container .c1-box .c1-bg {
            display: none; } }
      .other-body .container .c1-box .right-box {
        width: 68%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 10vw;
        position: relative; }
        @media all and (max-width: 1024px) {
          .other-body .container .c1-box .right-box {
            width: 100%;
            margin-top: 10vw;
            padding-bottom: 10vw; } }
        .other-body .container .c1-box .right-box .moblie-left-item {
          display: none; }
          @media all and (max-width: 1024px) {
            .other-body .container .c1-box .right-box .moblie-left-item {
              display: flex;
              position: absolute;
              bottom: 0px;
              left: -2vw;
              width: 38vw; } }
        .other-body .container .c1-box .right-box .moblie-right-item {
          display: none; }
          @media all and (max-width: 1024px) {
            .other-body .container .c1-box .right-box .moblie-right-item {
              display: flex;
              position: absolute;
              bottom: 19vw;
              right: 0vw;
              width: 13vw; } }
        .other-body .container .c1-box .right-box .swiper-box {
          width: 100%;
          padding: 0vw 5vw;
          position: relative; }
          @media all and (max-width: 1024px) {
            .other-body .container .c1-box .right-box .swiper-box {
              width: 80%;
              display: flex;
              justify-content: center;
              margin: 0 auto;
              padding: 0vw 0vw; } }
          .other-body .container .c1-box .right-box .swiper-box .swiper {
            width: 100%; }
            @media all and (max-width: 1024px) {
              .other-body .container .c1-box .right-box .swiper-box .swiper {
                padding-bottom: 6vw; } }
            .other-body .container .c1-box .right-box .swiper-box .swiper .swiper-wrapper {
              width: 100%; }
              .other-body .container .c1-box .right-box .swiper-box .swiper .swiper-wrapper .swiper-slide a {
                color: black;
                text-decoration: none; }
              .other-body .container .c1-box .right-box .swiper-box .swiper .swiper-wrapper .swiper-slide img {
                display: block;
                width: 100%; }
              .other-body .container .c1-box .right-box .swiper-box .swiper .swiper-wrapper .swiper-slide .title {
                font-size: 0.9vw;
                letter-spacing: 0.2em;
                font-family: "Noto Serif TC";
                align-items: center;
                font-weight: 600;
                margin-top: 1vw;
                height: 3vw; }
                @media all and (max-width: 1920px) {
                  .other-body .container .c1-box .right-box .swiper-box .swiper .swiper-wrapper .swiper-slide .title {
                    height: 4vw; } }
                @media all and (max-width: 1440px) {
                  .other-body .container .c1-box .right-box .swiper-box .swiper .swiper-wrapper .swiper-slide .title {
                    font-size: 1vw;
                    line-height: 1.8vw; } }
                @media all and (max-width: 1024px) {
                  .other-body .container .c1-box .right-box .swiper-box .swiper .swiper-wrapper .swiper-slide .title {
                    text-align: center;
                    font-size: 3.7vw;
                    margin-top: 0vw;
                    padding-top: 17vw;
                    white-space: nowrap; } }
              .other-body .container .c1-box .right-box .swiper-box .swiper .swiper-wrapper .swiper-slide .year {
                font-size: 0.9vw;
                letter-spacing: 0.1em;
                font-family: "Noto Serif TC";
                align-items: center;
                font-weight: 600; }
                @media all and (max-width: 1440px) {
                  .other-body .container .c1-box .right-box .swiper-box .swiper .swiper-wrapper .swiper-slide .year {
                    font-size: 1vw;
                    line-height: 1.8vw; } }
                @media all and (max-width: 1024px) {
                  .other-body .container .c1-box .right-box .swiper-box .swiper .swiper-wrapper .swiper-slide .year {
                    font-size: 3.7vw;
                    text-align: center;
                    margin-top: 9vw; } }
          .other-body .container .c1-box .right-box .swiper-box .swiper-pagination-horizontal {
            bottom: -3vw; }
            @media all and (max-width: 1024px) {
              .other-body .container .c1-box .right-box .swiper-box .swiper-pagination-horizontal {
                bottom: 22vw; } }
            .other-body .container .c1-box .right-box .swiper-box .swiper-pagination-horizontal .swiper-pagination-bullet {
              margin: 0.35vw; }
              @media all and (max-width: 1440px) {
                .other-body .container .c1-box .right-box .swiper-box .swiper-pagination-horizontal .swiper-pagination-bullet {
                  width: 6px;
                  height: 6px;
                  margin: 0.75vw; } }
              @media all and (max-width: 500px) {
                .other-body .container .c1-box .right-box .swiper-box .swiper-pagination-horizontal .swiper-pagination-bullet {
                  width: 6px;
                  height: 6px;
                  margin: 0.75vw; } }
            .other-body .container .c1-box .right-box .swiper-box .swiper-pagination-horizontal .swiper-pagination-bullet-active {
              background: #565656; }
          .other-body .container .c1-box .right-box .swiper-box .c1-swiper-prev {
            position: absolute;
            left: 3vw;
            cursor: pointer;
            top: 5.5vw; }
            @media all and (max-width: 1920px) {
              .other-body .container .c1-box .right-box .swiper-box .c1-swiper-prev {
                left: 2vw; } }
            @media all and (max-width: 1024px) {
              .other-body .container .c1-box .right-box .swiper-box .c1-swiper-prev {
                top: 38vw;
                left: -7vw; } }
            .other-body .container .c1-box .right-box .swiper-box .c1-swiper-prev img {
              width: 1vw; }
              @media all and (max-width: 1024px) {
                .other-body .container .c1-box .right-box .swiper-box .c1-swiper-prev img {
                  width: 3vw; } }
          .other-body .container .c1-box .right-box .swiper-box .c1-swiper-next {
            position: absolute;
            right: 3vw;
            top: 5.5vw;
            cursor: pointer; }
            @media all and (max-width: 1920px) {
              .other-body .container .c1-box .right-box .swiper-box .c1-swiper-next {
                right: 2vw; } }
            @media all and (max-width: 1024px) {
              .other-body .container .c1-box .right-box .swiper-box .c1-swiper-next {
                top: 38vw;
                right: -7vw; } }
            .other-body .container .c1-box .right-box .swiper-box .c1-swiper-next img {
              width: 1vw; }
              @media all and (max-width: 1024px) {
                .other-body .container .c1-box .right-box .swiper-box .c1-swiper-next img {
                  width: 3vw; } }
    .other-body .container .c2-box {
      width: 100%;
      height: 100vh;
      background-image: url(../images/other/c2_bg.webp);
      background-color: white;
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      display: flex;
      overflow: hidden; }
      @media all and (max-width: 1024px) {
        .other-body .container .c2-box {
          display: none; } }
      .other-body .container .c2-box .left-box {
        width: 40%;
        display: flex;
        position: relative;
        padding-top: 7vw;
        padding-bottom: 7vw;
        justify-content: right; }
        @media all and (max-width: 1440px) {
          .other-body .container .c2-box .left-box {
            padding-top: 13vw; } }
        .other-body .container .c2-box .left-box .machine-box {
          position: relative; }
          @media all and (max-width: 1440px) {
            .other-body .container .c2-box .left-box .machine-box {
              scale: 1.2; } }
          .other-body .container .c2-box .left-box .machine-box .all-machine {
            width: 20vw; }
          .other-body .container .c2-box .left-box .machine-box .origin-machine {
            position: absolute;
            width: 24vw;
            left: -5.5vw;
            top: 5.3vw;
            opacity: 0; }
          .other-body .container .c2-box .left-box .machine-box .change1-machine {
            position: absolute;
            width: 4vw;
            left: 9.2vw;
            top: 7.8vw;
            opacity: 0; }
          .other-body .container .c2-box .left-box .machine-box .change2-machine {
            position: absolute;
            width: 2.5vw;
            left: 14.65vw;
            top: 7.4vw;
            opacity: 0; }
          .other-body .container .c2-box .left-box .machine-box .change3-machine {
            position: absolute;
            width: 1.8vw;
            left: 15vw;
            top: 15vw;
            opacity: 0; }
          .other-body .container .c2-box .left-box .machine-box .change4-machine {
            position: absolute;
            width: 17vw;
            left: 1.8vw;
            top: 4.3vw;
            opacity: 0; }
      .other-body .container .c2-box .right-box {
        width: 60%;
        display: flex;
        position: relative;
        flex-direction: column; }
        @media all and (max-width: 1366px) {
          .other-body .container .c2-box .right-box {
            margin-top: 7vw; } }
        .other-body .container .c2-box .right-box .tab-box {
          width: 80%;
          display: flex;
          border-bottom: 1px solid #b6c2d1;
          margin-top: 6vw;
          padding-left: 5vw;
          margin-left: 5vw; }
          @media all and (max-width: 1440px) {
            .other-body .container .c2-box .right-box .tab-box {
              margin-top: 7vw; } }
          @media all and (max-width: 1366px) {
            .other-body .container .c2-box .right-box .tab-box {
              margin-top: 4vw; } }
          .other-body .container .c2-box .right-box .tab-box .tab {
            background-color: #e5ecf6;
            font-size: 1vw;
            letter-spacing: 0.1em;
            font-family: "Noto Serif TC";
            align-items: center;
            font-weight: 600;
            padding: 0.4vw 1.3vw;
            border-top-left-radius: 1vw;
            border-top-right-radius: 1vw;
            margin-left: 0.5vw;
            cursor: pointer;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            z-index: 3; }
            @media all and (max-width: 1440px) {
              .other-body .container .c2-box .right-box .tab-box .tab {
                font-size: 1.1vw; } }
            .other-body .container .c2-box .right-box .tab-box .tab:hover {
              background-color: #acd8f9; }
          .other-body .container .c2-box .right-box .tab-box .tab-active {
            background-color: #acd8f9; }
        .other-body .container .c2-box .right-box .c2-svg-text-top {
          width: 30vw;
          top: -17vw;
          right: -10vw;
          position: absolute; }
          @media all and (max-width: 1440px) {
            .other-body .container .c2-box .right-box .c2-svg-text-top {
              width: 32vw;
              right: -11vw; } }
          @media all and (max-width: 1366px) {
            .other-body .container .c2-box .right-box .c2-svg-text-top {
              top: -22vw; } }
        .other-body .container .c2-box .right-box .c2-svg-text-bottom {
          width: 30vw;
          bottom: -15vw;
          left: -14vw;
          position: absolute; }
          @media all and (max-width: 1440px) {
            .other-body .container .c2-box .right-box .c2-svg-text-bottom {
              width: 32vw;
              bottom: -15vw;
              left: -9vw; } }
          @media all and (max-width: 1366px) {
            .other-body .container .c2-box .right-box .c2-svg-text-bottom {
              bottom: -18vw; } }
        .other-body .container .c2-box .right-box .change-box {
          width: 70%;
          display: flex;
          flex-direction: column;
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translate(-50%, -50%); }
          @media all and (max-width: 1366px) {
            .other-body .container .c2-box .right-box .change-box {
              top: 18%; } }
          .other-body .container .c2-box .right-box .change-box .content-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-top: 3vw;
            position: absolute;
            top: 0px; }
            .other-body .container .c2-box .right-box .change-box .content-box .title-box {
              display: flex;
              flex-direction: column; }
              .other-body .container .c2-box .right-box .change-box .content-box .title-box .dot {
                display: flex;
                flex-direction: column;
                width: 8vw;
                margin-bottom: 0.5vw; }
                @media all and (max-width: 1440px) {
                  .other-body .container .c2-box .right-box .change-box .content-box .title-box .dot {
                    width: 10vw; } }
              .other-body .container .c2-box .right-box .change-box .content-box .title-box .title {
                font-size: 1.1vw;
                letter-spacing: 0.2em;
                font-family: "Noto Serif TC";
                align-items: center;
                font-weight: 600;
                margin-bottom: 1.5vw; }
                @media all and (max-width: 1440px) {
                  .other-body .container .c2-box .right-box .change-box .content-box .title-box .title {
                    font-size: 1.25vw; } }
            .other-body .container .c2-box .right-box .change-box .content-box .content {
              font-size: 0.85vw;
              letter-spacing: 0.1em;
              font-family: "Noto Serif TC";
              align-items: center;
              line-height: 1.7vw;
              font-weight: 600; }
              @media all and (max-width: 1440px) {
                .other-body .container .c2-box .right-box .change-box .content-box .content {
                  font-size: 1vw;
                  line-height: 1.9vw; } }
            .other-body .container .c2-box .right-box .change-box .content-box .button-box {
              display: flex;
              justify-content: space-between;
              margin-top: 3vw; }
              .other-body .container .c2-box .right-box .change-box .content-box .button-box .button {
                position: relative;
                overflow: hidden;
                background-image: url(../images/other/btn_bg.png);
                background-repeat: no-repeat;
                background-size: cover;
                width: 9vw;
                height: 9vw;
                flex-direction: column;
                display: flex;
                align-items: center;
                justify-content: center; }
                @media all and (max-width: 1440px) {
                  .other-body .container .c2-box .right-box .change-box .content-box .button-box .button {
                    width: 11vw;
                    height: 11vw; } }
                .other-body .container .c2-box .right-box .change-box .content-box .button-box .button .text {
                  width: 6vw;
                  font-size: 1.1vw;
                  letter-spacing: 0.2em;
                  font-family: "Noto Serif TC";
                  text-align: center;
                  font-weight: 600; }
                  @media all and (max-width: 1440px) {
                    .other-body .container .c2-box .right-box .change-box .content-box .button-box .button .text {
                      font-size: 1.25vw; } }
          .other-body .container .c2-box .right-box .change-box .content-box2 {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-top: 2vw;
            position: absolute;
            top: 0px;
            opacity: 0; }
            .other-body .container .c2-box .right-box .change-box .content-box2 .button-box {
              display: flex;
              justify-content: space-between;
              margin-top: 3vw; }
              .other-body .container .c2-box .right-box .change-box .content-box2 .button-box .item {
                position: relative;
                width: 20%;
                display: flex;
                flex-direction: column; }
                .other-body .container .c2-box .right-box .change-box .content-box2 .button-box .item .content2-button {
                  position: relative;
                  overflow: hidden;
                  background-image: url(../images/other/geay_btn.png);
                  background-repeat: no-repeat;
                  background-size: cover;
                  width: 8vw;
                  height: 8vw;
                  flex-direction: column;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  -webkit-transition: all 0.5s ease-in-out;
                  -o-transition: all 0.5s ease-in-out;
                  transition: all 0.5s ease-in-out; }
                  .other-body .container .c2-box .right-box .change-box .content-box2 .button-box .item .content2-button:hover {
                    background-image: url(../images/other/btn_bg.png); }
                  @media all and (max-width: 1440px) {
                    .other-body .container .c2-box .right-box .change-box .content-box2 .button-box .item .content2-button {
                      width: 9vw;
                      height: 9vw; } }
                  .other-body .container .c2-box .right-box .change-box .content-box2 .button-box .item .content2-button .text {
                    width: 5.5vw;
                    font-size: 1.1vw;
                    letter-spacing: 0.2em;
                    font-family: "Noto Serif TC";
                    text-align: center;
                    font-weight: 600; }
                    @media all and (max-width: 1440px) {
                      .other-body .container .c2-box .right-box .change-box .content-box2 .button-box .item .content2-button .text {
                        font-size: 1.2vw;
                        width: 6vw; } }
                .other-body .container .c2-box .right-box .change-box .content-box2 .button-box .item .item-content {
                  font-size: 0.75vw;
                  letter-spacing: 0.1em;
                  font-family: "Noto Serif TC";
                  text-align: center;
                  align-items: center;
                  font-weight: 600;
                  margin-top: 0.5vw;
                  opacity: 0; }
                  @media all and (max-width: 1440px) {
                    .other-body .container .c2-box .right-box .change-box .content-box2 .button-box .item .item-content {
                      font-size: 0.9vw; } }
            .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box {
              width: 100%;
              padding: 0vw 5vw;
              position: relative;
              margin-top: 3vw; }
              .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .swiper {
                width: 100%; }
                .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .swiper .swiper-wrapper {
                  width: 100%; }
                  .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .swiper .swiper-wrapper .swiper-slide a {
                    color: black;
                    text-decoration: none; }
                  .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .swiper .swiper-wrapper .swiper-slide img {
                    display: block;
                    width: 100%; }
              .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-pagination {
                display: flex;
                justify-content: center;
                margin-top: 0.5vw; }
                .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-pagination .swiper-pagination-bullet {
                  margin: 0.35vw; }
                  @media all and (max-width: 1440px) {
                    .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-pagination .swiper-pagination-bullet {
                      width: 6px;
                      height: 6px;
                      margin: 0.75vw; } }
                  @media all and (max-width: 500px) {
                    .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-pagination .swiper-pagination-bullet {
                      width: 6px;
                      height: 6px;
                      margin: 0.75vw; } }
                .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-pagination .swiper-pagination-bullet-active {
                  background: #565656; }
              .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-prev {
                position: absolute;
                left: 3vw;
                cursor: pointer;
                top: 3.5vw; }
                .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-prev img {
                  width: 1vw; }
                  @media all and (max-width: 1024px) {
                    .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-prev img {
                      width: 3vw; } }
              .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-next {
                position: absolute;
                right: 3vw;
                top: 3.5vw;
                cursor: pointer; }
                .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-next img {
                  width: 1vw; }
                  @media all and (max-width: 1024px) {
                    .other-body .container .c2-box .right-box .change-box .content-box2 .fixed-swiper-box .c2-swiper-next img {
                      width: 3vw; } }
          .other-body .container .c2-box .right-box .change-box .content-box3 {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-top: 3vw;
            position: absolute;
            top: 0px;
            opacity: 0; }
            .other-body .container .c2-box .right-box .change-box .content-box3 .title-box {
              display: flex;
              flex-direction: column; }
              .other-body .container .c2-box .right-box .change-box .content-box3 .title-box .dot {
                display: flex;
                flex-direction: column;
                width: 6vw;
                margin-bottom: 0.5vw; }
              .other-body .container .c2-box .right-box .change-box .content-box3 .title-box .title {
                font-size: 1.1vw;
                letter-spacing: 0.2em;
                font-family: "Noto Serif TC";
                align-items: center;
                font-weight: 600;
                margin-bottom: 1.5vw; }
                @media all and (max-width: 1440px) {
                  .other-body .container .c2-box .right-box .change-box .content-box3 .title-box .title {
                    font-size: 1.25vw; } }
            .other-body .container .c2-box .right-box .change-box .content-box3 .button-box {
              display: flex;
              justify-content: space-between;
              margin-top: 3vw; }
              .other-body .container .c2-box .right-box .change-box .content-box3 .button-box .button {
                position: relative;
                overflow: hidden;
                background-image: url(../images/other/geay_btn.png);
                background-repeat: no-repeat;
                background-size: cover;
                width: 9vw;
                height: 9vw;
                flex-direction: column;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                -webkit-transition: all 0.5s ease-in-out;
                -o-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out; }
                .other-body .container .c2-box .right-box .change-box .content-box3 .button-box .button:hover {
                  background-image: url(../images/other/btn_bg.png); }
                .other-body .container .c2-box .right-box .change-box .content-box3 .button-box .button .text {
                  width: 6vw;
                  font-size: 1.1vw;
                  letter-spacing: 0.2em;
                  font-family: "Noto Serif TC";
                  text-align: center;
                  font-weight: 600; }
                  @media all and (max-width: 1440px) {
                    .other-body .container .c2-box .right-box .change-box .content-box3 .button-box .button .text {
                      font-size: 1.25vw; } }
            .other-body .container .c2-box .right-box .change-box .content-box3 .content-text-box {
              margin-top: 2vw;
              font-size: 0.85vw;
              letter-spacing: 0.1em;
              font-family: "Noto Serif TC";
              align-items: center;
              line-height: 1.7vw;
              font-weight: 600;
              position: relative; }
              @media all and (max-width: 1440px) {
                .other-body .container .c2-box .right-box .change-box .content-box3 .content-text-box {
                  font-size: 1vw;
                  line-height: 1.9vw; } }
              .other-body .container .c2-box .right-box .change-box .content-box3 .content-text-box .text {
                position: absolute;
                top: 0px;
                left: 0px;
                opacity: 0; }
        .other-body .container .c2-box .right-box .content-box3-scrolltop-btn {
          position: absolute;
          font-size: 0.8vw;
          letter-spacing: 0.2em;
          font-family: "Noto Serif TC";
          align-items: center;
          font-weight: bold;
          bottom: 3vw;
          right: 5vw;
          padding: 0.5vw 0.7vw;
          padding-left: 0.95vw;
          border: 1px solid black;
          overflow: hidden;
          color: black;
          -webkit-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          cursor: pointer; }
          @media all and (max-width: 1440px) {
            .other-body .container .c2-box .right-box .content-box3-scrolltop-btn {
              font-size: 1vw; } }
          @media all and (max-width: 1024px) {
            .other-body .container .c2-box .right-box .content-box3-scrolltop-btn {
              display: none; } }
          .other-body .container .c2-box .right-box .content-box3-scrolltop-btn:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            top: 0;
            left: -100%;
            background-color: #86d5fb;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out; }
          .other-body .container .c2-box .right-box .content-box3-scrolltop-btn:hover {
            color: white;
            z-index: 2;
            border: 1px solid #86d5fb; }
            .other-body .container .c2-box .right-box .content-box3-scrolltop-btn:hover:before {
              left: 0%; }
    .other-body .container .c2-box-moblie {
      display: flex;
      flex-direction: column;
      width: 100%;
      position: relative;
      justify-content: center;
      margin-bottom: 20vw;
      display: none; }
      @media all and (max-width: 1024px) {
        .other-body .container .c2-box-moblie {
          display: flex; } }
      .other-body .container .c2-box-moblie .moblie-bg {
        width: 100%; }
      .other-body .container .c2-box-moblie .tab-box-moblie {
        display: flex;
        width: 90%;
        justify-content: center;
        border-bottom: 1px solid #b6c2d1;
        margin: 0 auto;
        margin-top: -8vw; }
        .other-body .container .c2-box-moblie .tab-box-moblie .tab-moblie {
          background-color: #e5ecf6;
          font-size: 3.7vw;
          letter-spacing: 0.1em;
          font-family: "Noto Serif TC";
          align-items: center;
          font-weight: 600;
          padding: 1vw 2.5vw;
          padding-left: 3vw;
          border-top-left-radius: 3vw;
          border-top-right-radius: 3vw;
          margin-left: 1vw;
          cursor: pointer;
          z-index: 3; }
        .other-body .container .c2-box-moblie .tab-box-moblie .tab-active-moblie {
          background-color: #acd8f9; }
      .other-body .container .c2-box-moblie .tab1-content {
        margin-top: 10vw;
        padding: 0vw 5vw; }
        .other-body .container .c2-box-moblie .tab1-content .title-box {
          display: flex;
          flex-direction: column;
          margin: 0 auto;
          text-align: center; }
          .other-body .container .c2-box-moblie .tab1-content .title-box .dot {
            display: flex;
            width: 40vw;
            margin-bottom: 1vw;
            padding-right: 3vw;
            align-self: center; }
          .other-body .container .c2-box-moblie .tab1-content .title-box .title {
            font-size: 3.9vw;
            letter-spacing: 0.2em;
            font-family: "Noto Serif TC";
            align-items: center;
            font-weight: 600;
            margin-bottom: 5vw; }
        .other-body .container .c2-box-moblie .tab1-content .content {
          font-size: 3.7vw;
          letter-spacing: 0.15em;
          font-family: "Noto Serif TC";
          align-items: center;
          line-height: 7vw;
          font-weight: 600;
          text-align: justify;
          padding: 0vw 3vw; }
        .other-body .container .c2-box-moblie .tab1-content .machine-box-moblie {
          position: relative;
          display: flex;
          justify-content: center; }
          .other-body .container .c2-box-moblie .tab1-content .machine-box-moblie .all-machine-moblie {
            width: 50vw; }
        .other-body .container .c2-box-moblie .tab1-content .content1-button-box-moblie {
          display: flex;
          justify-content: space-between;
          margin-top: 5vw; }
          .other-body .container .c2-box-moblie .tab1-content .content1-button-box-moblie .content1-button-moblie {
            position: relative;
            overflow: hidden;
            background-image: url(../images/other/btn_bg.png);
            background-repeat: no-repeat;
            background-size: cover;
            width: 27vw;
            height: 27vw;
            flex-direction: column;
            display: flex;
            align-items: center;
            justify-content: center; }
            .other-body .container .c2-box-moblie .tab1-content .content1-button-box-moblie .content1-button-moblie .text {
              width: 20vw;
              font-size: 3.7vw;
              letter-spacing: 0.15em;
              font-family: "Noto Serif TC";
              text-align: center;
              font-weight: 600;
              line-height: 6vw; }
      .other-body .container .c2-box-moblie .tab2-content {
        display: none;
        padding: 0vw 5vw;
        opacity: 0; }
        .other-body .container .c2-box-moblie .tab2-content .machine-box-moblie {
          position: relative;
          display: flex;
          justify-content: center; }
          .other-body .container .c2-box-moblie .tab2-content .machine-box-moblie .all-machine-moblie {
            width: 50vw; }
          .other-body .container .c2-box-moblie .tab2-content .machine-box-moblie .origin-machine-moblie {
            position: absolute;
            width: 61vw;
            left: 6.5vw;
            top: 13vw; }
          .other-body .container .c2-box-moblie .tab2-content .machine-box-moblie .change1-machine-moblie {
            position: absolute;
            width: 10vw;
            left: 42.6vw;
            top: 19.5vw; }
          .other-body .container .c2-box-moblie .tab2-content .machine-box-moblie .change2-machine-moblie {
            position: absolute;
            width: 6.5vw;
            left: 56.23vw;
            top: 18vw;
            opacity: 0; }
          .other-body .container .c2-box-moblie .tab2-content .machine-box-moblie .change3-machine-moblie {
            position: absolute;
            width: 5vw;
            left: 57vw;
            top: 37vw;
            opacity: 0; }
          .other-body .container .c2-box-moblie .tab2-content .machine-box-moblie .change4-machine-moblie {
            position: absolute;
            width: 43vw;
            left: 24vw;
            top: 10vw;
            opacity: 0; }
        .other-body .container .c2-box-moblie .tab2-content .button-swiper-box {
          margin-top: 10vw;
          position: relative; }
          .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .button-swiper {
            width: 80%;
            position: relative; }
            .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .button-swiper .swiper-wrapper .swiper-slide {
              display: flex;
              justify-content: space-around; }
              .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .button-swiper .swiper-wrapper .swiper-slide .button-box {
                position: relative;
                overflow: hidden;
                background-image: url(../images/other/btn_bg.png);
                background-repeat: no-repeat;
                background-size: cover;
                width: 30vw;
                height: 30vw;
                flex-direction: column;
                display: flex;
                align-items: center;
                justify-content: center;
                filter: grayscale(1);
                z-index: 1; }
                .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .button-swiper .swiper-wrapper .swiper-slide .button-box .text {
                  width: 20vw;
                  font-size: 3.7vw;
                  letter-spacing: 0.15em;
                  font-family: "Noto Serif TC";
                  text-align: center;
                  font-weight: 600;
                  z-index: 5; }
              .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .button-swiper .swiper-wrapper .swiper-slide .tab2-active-moblie {
                filter: grayscale(0); }
          .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .item-content-moblie {
            position: absolute;
            bottom: -10vw;
            font-size: 3.7vw;
            letter-spacing: 0.15em;
            font-family: "Noto Serif TC";
            text-align: center;
            font-weight: 600;
            align-items: center;
            display: flex;
            justify-content: center;
            width: 100%;
            opacity: 0; }
          .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .bottle-content-moblie {
            opacity: 1; }
          .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .button-swiper-next {
            position: absolute;
            right: 2vw;
            cursor: pointer;
            top: 12vw; }
            .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .button-swiper-next img {
              width: 3vw; }
          .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .button-swiper-prev {
            position: absolute;
            left: 2vw;
            cursor: pointer;
            top: 12vw; }
            .other-body .container .c2-box-moblie .tab2-content .button-swiper-box .button-swiper-prev img {
              width: 3vw; }
        .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie {
          margin-top: 20vw;
          position: relative;
          margin-bottom: 10vw; }
          .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie .fixed-swiper-moblie {
            width: 100%;
            position: relative; }
            .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie .fixed-swiper-moblie .swiper-wrapper .swiper-slide {
              display: flex;
              justify-content: center; }
              .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie .fixed-swiper-moblie .swiper-wrapper .swiper-slide img {
                width: 66vw; }
          .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie .swiper-pagination-horizontal {
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: -8vw; }
            .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie .swiper-pagination-horizontal .swiper-pagination-bullet {
              margin: 0.9vw;
              width: 8px;
              height: 8px; }
            .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie .swiper-pagination-horizontal .swiper-pagination-bullet-active {
              background: #565656; }
          .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie .c2-swiper-next-moblie {
            position: absolute;
            right: 2vw;
            cursor: pointer;
            top: 29vw;
            z-index: 10; }
            .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie .c2-swiper-next-moblie img {
              width: 3vw; }
          .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie .c2-swiper-prev-moblie {
            position: absolute;
            left: 2vw;
            cursor: pointer;
            top: 29vw;
            z-index: 10; }
            .other-body .container .c2-box-moblie .tab2-content .fixed-swiper-box-moblie .c2-swiper-prev-moblie img {
              width: 3vw; }
      .other-body .container .c2-box-moblie .tab3-content {
        margin-top: 10vw;
        padding: 0vw 5vw;
        display: none;
        opacity: 0; }
        .other-body .container .c2-box-moblie .tab3-content .title-box {
          display: flex;
          flex-direction: column;
          margin: 0 auto;
          text-align: center; }
          .other-body .container .c2-box-moblie .tab3-content .title-box .dot {
            display: flex;
            width: 40vw;
            margin-bottom: 1vw;
            padding-right: 3vw;
            align-self: center; }
          .other-body .container .c2-box-moblie .tab3-content .title-box .title {
            font-size: 3.9vw;
            letter-spacing: 0.2em;
            font-family: "Noto Serif TC";
            align-items: center;
            font-weight: 600;
            margin-bottom: 5vw; }
        .other-body .container .c2-box-moblie .tab3-content .tab3-button-box {
          display: flex;
          justify-content: space-around; }
          .other-body .container .c2-box-moblie .tab3-content .tab3-button-box .tab3-button {
            position: relative;
            overflow: hidden;
            background-image: url(../images/other/btn_bg.png);
            background-repeat: no-repeat;
            background-size: cover;
            width: 27vw;
            height: 27vw;
            flex-direction: column;
            display: flex;
            align-items: center;
            justify-content: center;
            filter: grayscale(1); }
            .other-body .container .c2-box-moblie .tab3-content .tab3-button-box .tab3-button .text {
              width: 20vw;
              font-size: 3.7vw;
              letter-spacing: 0.15em;
              font-family: "Noto Serif TC";
              text-align: center;
              font-weight: 600;
              z-index: 5; }
          .other-body .container .c2-box-moblie .tab3-content .tab3-button-box .tab3-active-moblie {
            filter: grayscale(0); }
        .other-body .container .c2-box-moblie .tab3-content .tab3-content-text-box {
          position: relative;
          font-size: 3.7vw;
          letter-spacing: 0.15em;
          font-family: "Noto Serif TC";
          text-align: justify;
          font-weight: 500;
          line-height: 6.5vw;
          margin-bottom: 40vw; }
          .other-body .container .c2-box-moblie .tab3-content .tab3-content-text-box .tab3-content-text {
            position: absolute;
            top: 10vw;
            left: 0px;
            opacity: 0; }
          .other-body .container .c2-box-moblie .tab3-content .tab3-content-text-box .tab3-content-text1 {
            opacity: 1; }

.news-body {
  width: 100%;
  position: relative;
  background-color: white; }
  .news-body .footer {
    padding-top: 2vw; }
    @media all and (max-width: 500px) {
      .news-body .footer {
        padding-top: 4vw; } }
  .news-body .container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 4.5vw;
    flex-direction: column;
    position: relative;
    padding-bottom: 8vw; }
    @media all and (max-width: 1440px) {
      .news-body .container {
        padding-top: 9vw; } }
    @media all and (max-width: 1024px) {
      .news-body .container {
        justify-content: initial;
        padding-top: 18vw;
        padding-bottom: 30vw; } }
    @media all and (max-width: 500px) {
      .news-body .container {
        height: calc(var(--loadingvh, 1vh) * 94); } }
    .news-body .container .left-box {
      text-align: center;
      width: 65%;
      align-self: center;
      margin-top: 2vw;
      line-height: 1.8; }
      @media all and (max-width: 1024px) {
        .news-body .container .left-box {
          width: 90%;
          padding-left: 0vw;
          justify-content: center; } }
      .news-body .container .left-box h1 {
        font-family: "Noto Serif TC";
        font-weight: bold;
        letter-spacing: 0.1em; }
        @media (max-width: 1024px) {
          .news-body .container .left-box h1 {
            font-size: 6vw; } }
      .news-body .container .left-box h4 {
        letter-spacing: 0.1em;
        font-weight: 400;
        font-family: "Noto Serif TC";
        margin-bottom: 0.5vw; }
    .news-body .container .right-box {
      display: flex;
      align-self: center;
      font-size: 1vw;
      letter-spacing: 0.2em;
      font-family: "Noto Serif TC";
      width: 65%;
      font-weight: 600;
      line-height: 1.8vw;
      justify-content: center;
      margin-top: 2vw; }
      @media all and (max-width: 1024px) {
        .news-body .container .right-box {
          font-size: 3.9vw;
          line-height: 7vw;
          margin-top: 7vw;
          align-self: center;
          width: 100%; } }
      .news-body .container .right-box .content {
        background-color: white;
        width: 100%;
        align-items: left;
        display: flex;
        flex-direction: column;
        text-align: justify; }
        @media all and (max-width: 1024px) {
          .news-body .container .right-box .content {
            width: 90%;
            border: none; } }
        .news-body .container .right-box .content img {
          max-width: 100%; }
    .news-body .container .return-btn {
      position: absolute;
      font-size: 0.8vw;
      letter-spacing: 0.2em;
      font-family: "Noto Serif TC";
      align-items: center;
      font-weight: bold;
      bottom: -1vw;
      right: 5vw;
      padding: 0.2vw 0.7vw;
      padding-left: 0.95vw;
      border: 1px solid black;
      overflow: hidden;
      color: black;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      cursor: pointer; }
      @media all and (max-width: 1024px) {
        .news-body .container .return-btn {
          right: 5vw;
          bottom: 3vw;
          font-size: 3.7vw; } }
      .news-body .container .return-btn a {
        color: black; }
      .news-body .container .return-btn:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        left: -100%;
        background-color: #86d5fb;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
      .news-body .container .return-btn:hover {
        z-index: 2;
        border: 1px solid #86d5fb; }
        .news-body .container .return-btn:hover a {
          color: white; }
        .news-body .container .return-btn:hover:before {
          left: 0%; }

.text-danger {
  color: #de0e0e; }