@charset "UTF-8";
body {
  color: white;
  font-family: 'Noto Sans TC', sans-serif; }

main {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%; }
  main::after {
    content: "";
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 19.7vw;
    height: 21.9vw; }
    @media (max-width: 800px) {
      main::after {
        width: 29.6vw;
        height: 32.8vw; } }
    @media (max-width: 550px) {
      main::after {
        display: none; } }
  main::before {
    content: "";
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 19.8vw;
    height: 20.2vw; }
    @media (max-width: 800px) {
      main::before {
        width: 29.7vw;
        height: 30.3vw; } }
    @media (max-width: 550px) {
      main::before {
        display: none; } }
  main .title {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 27.6vw;
    height: 20.5vw;
    left: 8%;
    top: 4%; }
    @media (max-width: 800px) {
      main .title {
        width: 40vw;
        height: 30vw; } }
    main .title::before {
      content: "";
      position: absolute;
      background-repeat: no-repeat;
      background-size: 100%;
      width: 42.4vw;
      height: 31.5vw;
      left: -16%;
      top: 68%;
      z-index: 2; }
      @media (max-width: 800px) {
        main .title::before {
          width: 42vw;
          height: 28vw;
          left: 98%;
          top: 22%; } }
      @media (max-width: 550px) {
        main .title::before {
          display: none; } }
    @media (max-width: 550px) {
      main .title {
        width: 50vw;
        height: 40vw;
        left: 50%;
        transform: translateX(-50%);
        top: 1%; } }
  main .title-ok {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 15vw;
    height: 11.5vw;
    left: 50%;
    transform: translateX(-50%);
    top: 4%; }
    @media (max-width: 800px) {
      main .title-ok {
        width: 40vw;
        height: 30vw; } }
    @media (max-width: 550px) {
      main .title-ok {
        width: 50vw;
        height: 40vw;
        left: 50%;
        transform: translateX(-50%);
        top: 1%; } }
  main ol {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-15%, -50%);
    width: 44%; }
    @media (max-width: 800px) {
      main ol {
        transform: translate(-44%, -35%);
        width: 88%; } }
    @media (max-width: 550px) {
      main ol {
        width: 80%;
        height: 68%;
        margin: 40% auto 0;
        top: 0;
        transform: translate(-50%, 0);
        padding: 5%;
        overflow-y: scroll;
        border-radius: 20px; } }
    main ol::before {
      content: "";
      position: absolute;
      width: 110%;
      height: 139%;
      left: 50%;
      top: 50%;
      transform: translate(-55%, -50%) rotate(10deg);
      border-radius: 33px;
      opacity: .88; }
      @media (max-width: 800px) {
        main ol::before {
          width: 96%;
          height: 130%;
          transform: translate(-56%, -45%) rotate(10deg); } }
      @media (max-width: 550px) {
        main ol::before {
          display: none; } }
    main ol li {
      position: relative;
      text-align: left;
      padding: .5vw 0; }
      @media (max-width: 800px) {
        main ol li {
          padding: 1vw 0; } }
      @media (max-width: 550px) {
        main ol li {
          padding: 2vw 0; } }
      main ol li a {
        text-decoration: none;
        font-size: 1.2vw;
        font-weight: 700;
        transition: all .3s; }
        @media (max-width: 800px) {
          main ol li a {
            font-size: 2.5vw; } }
        @media (max-width: 550px) {
          main ol li a {
            font-size: 5vw; } }
        main ol li a::after {
          content: "\f027";
          font-family: "Font Awesome 5 Free";
          font-weight: 600;
          color: white; }
        main ol li a span {
          color: white;
          font-weight: 300;
          margin-left: .5vw; }
          @media (max-width: 550px) {
            main ol li a span {
              margin-left: 4.5vw; } }
        main ol li a br {
          display: none; }
          @media (max-width: 550px) {
            main ol li a br {
              display: block; } }
        main ol li a:hover {
          border-bottom: solid 1px rgba(255, 255, 255, 0.33);
          padding-bottom: .2vw; }
  main ul {
    display: inline-block;
    border-radius: 24px;
    padding: 1.5vw;
    margin-top: 14.5vw; }
    @media (max-width: 800px) {
      main ul {
        padding: 2.5vw;
        margin-top: 38vw;
        width: 77%; } }
    @media (max-width: 550px) {
      main ul {
        padding: 5vw;
        margin-top: 42vw; } }
    main ul * {
      margin: 1vw auto; }
      @media (max-width: 800px) {
        main ul * {
          margin: 2vw auto; } }
      @media (max-width: 550px) {
        main ul * {
          margin: 4vw auto; } }
    main ul img {
      position: relative;
      width: 12vw; }
      @media (max-width: 800px) {
        main ul img {
          width: 24vw; } }
      @media (max-width: 550px) {
        main ul img {
          width: 38vw; } }
    main ul p {
      position: relative;
      font-size: 2.5vw; }
      @media (max-width: 800px) {
        main ul p {
          font-size: 5vw; } }
      @media (max-width: 550px) {
        main ul p {
          font-size: 8vw; } }
      main ul p::before, main ul p::after {
        content: "＂"; }
    main ul aside {
      position: relative;
      font-size: 1.8vw;
      color: rgba(255, 255, 255, 0.77); }
      @media (max-width: 800px) {
        main ul aside {
          font-size: 3.5vw; } }
      @media (max-width: 550px) {
        main ul aside {
          font-size: 6.5vw; } }
    main ul button {
      position: relative;
      display: block;
      width: 20%;
      margin: 0 auto;
      border: 0px transparent;
      background-color: white;
      width: 5vw;
      height: 5vw;
      border-radius: 50%; }
      @media (max-width: 800px) {
        main ul button {
          width: 10vw;
          height: 10vw; } }
      @media (max-width: 550px) {
        main ul button {
          width: 20vw;
          height: 20vw; } }
      main ul button i {
        font-size: 2.5vw;
        cursor: pointer;
        color: dodgerblue; }
        @media (max-width: 800px) {
          main ul button i {
            font-size: 4vw; } }
        @media (max-width: 550px) {
          main ul button i {
            font-size: 8vw; } }

.ver1 {
  background-image: url("../images/bg-a.png");
  background-color: #ef7043; }
  @media (max-width: 800px) {
    .ver1 {
      background-image: url("../images/bg-a-m.png"); } }
  .ver1::after {
    background-image: url("../images/border-corner-1.svg"); }
  .ver1::before {
    background-image: url("../images/border-corner-2.svg"); }
  .ver1 .title, .ver1 .title-ok {
    background-image: url("../images/tilte-a.png"); }
    .ver1 .title::before, .ver1 .title-ok::before {
      background-image: url("../images/family-a.png"); }
  @media (max-width: 550px) {
    .ver1 ol {
      background-color: #eb5734; } }
  .ver1 ol::before {
    background-color: #eb5734; }
  .ver1 ol li a {
    color: yellow; }
  .ver1 ul {
    background-color: rgba(235, 87, 52, 0.77); }

.ver2 {
  background-image: url("../images/bg-b.png");
  background-color: #a79ac1; }
  @media (max-width: 800px) {
    .ver2 {
      background-image: url("../images/bg-b-m.png"); } }
  .ver2::after {
    background-image: url("../images/border-corner-3.svg"); }
  .ver2::before {
    background-image: url("../images/border-corner-4.svg"); }
  .ver2 .title, .ver2 .title-ok {
    background-image: url("../images/tilte-b.png"); }
    .ver2 .title::before, .ver2 .title-ok::before {
      background-image: url("../images/family-b.png"); }
  @media (max-width: 550px) {
    .ver2 ol {
      background-color: #8a79ad; } }
  .ver2 ol::before {
    background-color: #8a79ad; }
  .ver2 ol li a {
    color: aqua; }
  .ver2 ul {
    background-color: rgba(138, 121, 173, 0.77); }

.icon-source {
  position: absolute;
  bottom: 1%;
  right: 1%;
  opacity: .22;
  font-size: 50%;
  font-weight: 300; }