@charset "UTF-8";
  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600&display=swap');
  /* CSS Document */

  * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      image-rendering: -moz-crisp-edges;
      /* Firefox        */
      image-rendering: -o-crisp-edges;
      /* Opera          */
      image-rendering: -webkit-optimiz-contrast;
      /* Safari         */
      image-rendering: optimize-contrst;
      /* CSS3 Proposed  */
      -ms-interpolation-mode: neares-neighbor;
      /* IE8+           */
  }

  html {
      width: 100%;
      height: 100%;
      font-family: Arial, Helvetica, "微軟正黑體", sans-serif;
      text-size-adjust: none;
      font-size: 15px;
  }

  ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  /*置頂按鈕*/

  .gotop {
      position: fixed;
      right: 10px;
      bottom: 255px;
      width: 75px;
      height: 75px;
      background-color: #555;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: all 0.4s ease-in-out 0s;
      z-index: 888;
      border-radius: 50%;
  }

  .gotop a {
      font-size: 20px;
      text-align: center;
      color: #ccc;
      text-decoration: none;
      transition: all .3s;
  }

  .gotop a:hover {
      color: #ffe113;
      text-decoration: none;
  }

  .gotop:active {
      box-shadow: 1px 1px 3px 2px rgba(20%, 20%, 40%, 0.5) inset;
      transition: all 0s;
  }
  /* == 桌機版優先 ============================================================================= */

  .wrap {
      padding-top: 40px;
      overflow: hidden;
  }

  .wrap img {
      max-width: 100%;
  }

  .wrap ul {
      padding: 0;
  }
  /* header */

  header {
      background: url(../images/header-bg01.png) no-repeat;
      background-position: center center;
      background-color: #d6e400;
      width: 100%;
      height: 720px;
  }

  header .head {
      padding: 3% calc((100% - 1200px)/2) 0;
      display: flex;
  }

  header .head .tit {
      margin: 60px 0 0;
  }

  header .head .tit h1 {
      font-size: 6.2rem;
      display: inline-block;
      font-weight: bold;
      line-height: 1.2;
      color: #214098;
  }

  header .head .tit h1 .circle {
      float: left;
      width: 120px;
      height: 120px;
      line-height: 120px;
      background-color: #fff;
      border-radius: 50%;
      border: 1px dashed #f77d9a;
      font-size: 6.8rem;
      text-align: center;
      font-weight: bold;
      color: #f77d9a;
  }

  header .head .tit h3 {
      margin: 10px 5px 20px 20px;
      font-size: 2.4rem;
      font-weight: normal;
      color: #214098;
  }

  header .head .tit ul {
      margin: 20px 0 0 10px;
      padding: 0;
      display: flex;
  }

  header .head .tit li {
      position: relative;
      margin-right: 10px;
  }

  header .head .tit li img {
      position: absolute;
      top: -20px;
      left: 14px;
  }

  header .head .tit li a {
      display: inline-block;
      width: 180px;
      height: 60px;
      background-color: #214098;
      border-radius: 0 50px 50px 0;
      color: #fff;
      font-size: 2.1rem;
      text-decoration: none;
      line-height: 60px;
      text-indent: 55px;
      transition: .3s;
  }

  header .head .tit li a:hover {
      background-color: #041742;
  }

  header .head .postman {
      margin: 30px 80px 0 0;
  }

  header .head-mobile {
      display: none;
  }
  /*考取經驗談*/

  .experience {
      padding: 80px calc((100% - 1200px)/2) 20px;
      text-align: center;
  }

  .experience h2 {
      font-size: 2.8rem;
      font-weight: bold;
      color: #214098;
      text-align: center;
  }

  .experience ul {
      display: flex;
      justify-content: space-between;
      margin: 50px 0;
      padding: 0;
  }

  .experience ul li {
      display: flex;
      justify-content: flex-end;
  }

  .experience ul li:nth-of-type(1) {
      width: 38%;
  }

  .experience ul li:nth-of-type(2) {
      width: 24%;
      margin: 20px;
  }

  .experience ul li:nth-of-type(2) img {
      width: 100%;
  }

  .experience ul li:nth-of-type(3) {
      width: 38%;
  }

  .experience ul li .exp-main {
      padding: 30px 35px;
      background-color: #efecdf;
      border-radius: 20px;
  }

  .experience ul li h4 {
      font-size: 3rem;
      font-weight: normal;
      line-height: 1.2;
      color: #32870f;
  }

  .experience ul li h4 span {
      color: #fa7c9c;
  }

  .experience ul li p {
      margin: 10px 0 0;
      font-size: 1.1rem;
      line-height: 1.6;
      text-align: left;
      color: #333333;
  }

  .experience ul li h5 {
      display: block;
      margin: 10px 0;
      padding: 10px;
      font-size: 1.4rem;
      font-weight: bold;
      color: #fff;
      text-align: center;
      background-color: #214098;
  }

  .experience .btn {
      margin: 20px 0 0;
      display: flex;
      justify-content: center;
  }

  .experience .btn a.A {
      margin: 0 10px;
      display: block;
      padding: 12px 0;
      width: 300px;
      font-size: 1.5em;
      text-align: center;
      background-color: #f77d9a;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      color: #fff;
      box-shadow: 0px 6px 0 rgba(214, 86, 123, 1);
      transition: .2s;
  }

  .experience .btn a.A:hover {
      transform: translateY(4px);
      box-shadow: 0px 4px 0 rgba(214, 86, 123, 1);
  }
  /* 郵局非考不可的四大理由 */

  .reason {
      padding: 80px calc((100% - 1200px)/2) 80px;
      background: #f4f2e9;
  }

  .reason h2 {
      margin: 0 0 10px;
      font-size: 2.8rem;
      font-weight: bold;
      color: #214098;
      text-align: center;
  }

  .reason ul {
      padding: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
  }

  .reason li {
      margin: 30px 0;
      width: 46%;
  }

  .reason li .left {
      float: left;
      width: 30%;
      margin: 0 20px 0 0;
  }

  .reason li .left img {
      width: 100%;
  }

  .reason li .right {
      float: right;
      width: 65%;
  }

  .reason li:nth-of-type(odd) {
      margin: 0 20px;
  }

  .reason li h3 {
      color: #008c43;
      font-size: 2.2rem;
      font-weight: bold;
      line-height: 1.5;
  }

  .reason li p {
      font-size: 1.5rem;
      font-weight: normal;
      line-height: 1.6;
      color: #333;
      text-align: left;
  }

  .reason li span {
      font-size: 1.1rem;
      color: #666;
  }

  .reason .btn {
      margin: 30px 0 0;
      display: flex;
      justify-content: center;
  }

  .reason .btn a.B {
      margin: 0 10px;
      display: block;
      padding: 12px 0;
      width: 300px;
      font-size: 1.5em;
      text-align: center;
      background-color: #8cc63f;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      color: #fff;
      box-shadow: 0px 6px 0 rgba(105, 153, 29, 1);
      transition: .2s;
  }

  .reason .btn a.B:hover {
      transform: translateY(4px);
      box-shadow: 0px 4px 0 rgba(105, 153, 29, 1);
  }
  /* 郵局考科少 */

  .onThelist {
      position: relative;
      padding: 80px calc((100% - 1200px)/2) 100px;
      text-align: center;
  }

  .onThelist h2 {
      font-size: 2.8rem;
      font-weight: bold;
      color: #214098;
      text-align: center;
  }

  .onThelist>p {
      padding: 15px 0;
      font-size: 1.2rem;
      font-weight: normal;
      line-height: 1.6;
      color: #333;
      text-align: left;
  }

  .onThelist .box {
      position: relative;
      border: 3px solid #008c43;
      margin-top: 20px;
  }

  .onThelist .box .top {
      padding: 10px 0 5px 0;
      background: #008c43;
      color: #fff;
  }
  /* .onThelist .box .top a {
      display: block;
      height: 100%;
      padding: 80px 30px 20px 30px;
      background: #008c43;
      border-radius: 20px;
      position: relative;
      box-sizing: border-box;
      text-decoration: none;
      color: #fff;
      font-size: 19px;
      text-align: left;
      line-height: 1.3;
  }
   */

  .onThelist .box .top img {
      position: absolute;
      top: 0;
      left: 10%;
      width: 20%;
      transform: translateY(-50%);
  }

  .onThelist .box .top h4 {
      font-size: 2rem;
      font-weight: bold;
      color: #fcee21;
  }

  .onThelist .box .down {
      padding: 20px 0 10px 0;
  }

  .onThelist .box .down p {
      font-size: 18px;
      line-height: 0.75;
      font-weight: normal;
      color: #333;
  }

  .onThelist .btn {
      margin: 80px 0 0;
      display: flex;
      justify-content: center;
  }

  .onThelist .btn a.A {
      margin: 0 10px;
      display: block;
      padding: 12px 0;
      width: 300px;
      font-size: 1.5em;
      text-align: center;
      background-color: #f77d9a;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      color: #fff;
      box-shadow: 0px 6px 0 rgba(214, 86, 123, 1);
      transition: .2s;
  }

  .onThelist .btn a.A:hover {
      transform: translateY(4px);
      box-shadow: 0px 4px 0 rgba(214, 86, 123, 1);
  }
  /*郵局招考好試多*/

  .Combine {
      padding: 80px calc((100% - 1200px)/2) 100px;
      background: #efecdf;
      width: 100%;
      background-size: cover;
      background-position: center center;
      text-align: center;
  }

  .Combine h2 {
      font-size: 2.8em;
      font-weight: bold;
      color: #214098;
  }

  .Combine p {
      padding: 15px 0;
      font-size: 1.2rem;
      font-weight: normal;
      line-height: 1.6;
      color: #333;
  }

  .Combine .suject {
      margin: 20px auto 0;
      overflow: hidden;
      padding: 20px;
      display: flex;
      justify-content: center;
  }

  .Combine .suject a {
      text-decoration: none;
  }

  .Combine .suject div {
      width: 140px;
      height: 210px;
      background: #008c43;
      float: left;
      position: relative;
      display: flex;
      align-items: center;
      margin: 0 35px;
      justify-content: center;
  }

  .Combine .suject div:nth-of-type(1) {
      animation-delay: 0.2s;
  }

  .Combine .suject div:nth-of-type(2) {
      animation-delay: 0.3s;
  }

  .Combine .suject div:nth-of-type(3) {
      animation-delay: 0.4s;
  }

  .Combine .suject div:nth-of-type(4) {
      animation-delay: 0.5s;
  }

  .Combine .suject div:nth-of-type(5) {
      animation-delay: 0.6s;
  }

  .Combine .suject div h3 {
      color: #fff;
      font-size: 2.3rem;
  }

  .Combine .suject div h4 {
      margin: 5px 0;
      font-size: 1.5rem;
      background-color: #d6e400;
      font-weight: normal;
      color: #214098;
      border-radius: 50px;
      padding: 5px;
  }

  .Combine .suject div::before {
      content: "";
      width: 0px;
      position: absolute;
      left: -60px;
      top: 0px;
      border: 105px solid transparent;
      border-left: none;
      border-right: 60px solid #008c43;
  }

  .Combine .suject div::after {
      content: "";
      width: 0px;
      position: absolute;
      right: -60px;
      top: 0px;
      border: 105px solid transparent;
      border-left: 60px solid #008c43;
      border-right: none;
  }

  .Combine .suject div:nth-child(2n) {
      margin-top: 110px;
      background-color: #214098;
  }

  .Combine .suject div:nth-child(2n)::before {
      content: "";
      width: 0px;
      position: absolute;
      left: -60px;
      top: 0px;
      border: 105px solid transparent;
      border-left: none;
      border-right: 60px solid #214098;
  }

  .Combine .suject div:nth-child(2n)::after {
      content: "";
      width: 0px;
      position: absolute;
      right: -60px;
      top: 0px;
      border: 105px solid transparent;
      border-left: 60px solid #214098;
      border-right: none;
  }

  .Combine h4 {
      font-size: 1.2em;
      color: #666;
  }

  .Combine .btn {
      margin: 20px 0 0;
      display: flex;
      justify-content: center;
  }

  .Combine .btn a.A {
      margin: 0 10px;
      display: block;
      padding: 12px 0;
      width: 300px;
      font-size: 1.5em;
      text-align: center;
      background-color: #f77d9a;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      color: #fff;
      box-shadow: 0px 6px 0 rgba(214, 86, 123, 1);
      transition: .2s;
  }

  .Combine .btn a.A:hover {
      transform: translateY(4px);
      box-shadow: 0px 4px 0 rgba(214, 86, 123, 1);
  }
  /*卡位好時機*/

  .chance {
      padding: 80px calc((100% - 1200px)/2);
      width: 100%;
      text-align: center;
  }

  .chance h2 {
      font-size: 2.8em;
      font-weight: bold;
      color: #214098
  }

  .chance p {
      font-size: 1.6rem;
      font-weight: normal;
      line-height: 1.6;
      color: #333;
  }

  .chance p span {
      color: #fa7c9c;
  }

  .chance img {
      margin: 20px 0 0;
  }

  .chance .btn {
      margin: 20px 0 0;
      display: flex;
      justify-content: center;
  }

  .chance .btn a.A {
      margin: 0 10px;
      display: block;
      padding: 12px 0;
      width: 300px;
      font-size: 1.5em;
      text-align: center;
      background-color: #f77d9a;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      color: #fff;
      box-shadow: 0px 6px 0 rgba(214, 86, 123, 1);
      transition: .2s;
  }

  .chance .btn a.A:hover {
      transform: translateY(4px);
      box-shadow: 0px 4px 0 rgba(214, 86, 123, 1);
  }
  /* 郵局非考不可的四大理由 */

  .jd {
      padding: 80px calc((100% - 1000px)/2) 80px;
      background: #f4f2e9;
      text-align: center;
  }

  .jd>h2 {
      font-size: 2.8rem;
      font-weight: bold;
      color: #4d4d4d;
      text-align: center;
  }

  .jd p {
      font-size: 1.2rem;
      font-weight: normal;
      line-height: 1.6;
      color: #333;
  }

  .jd .jd-info {
      margin: 30px 0 0;
      display: flex;
      justify-content: space-around;
  }

  .jd .jd-info div {
      width: 400px;
  }

  .jd .jd-info img {
      width: 80%;
  }

  .jd .jd-info h2 {
      font-size: 1.8rem;
  }

  .jd .jd-info h2.A {
      color: #214098;
  }

  .jd .jd-info h2.B {
      color: #008c43;
  }

  .jd .btn {
      margin: 40px 0 0;
      display: flex;
      justify-content: center;
  }

  .jd .btn a.A {
      margin: 0 10px;
      display: block;
      padding: 12px 0;
      width: 300px;
      font-size: 1.5em;
      text-align: center;
      background-color: #f77d9a;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      color: #fff;
      box-shadow: 0px 6px 0 rgba(214, 86, 123, 1);
      transition: .2s;
  }

  .jd .btn a.A:hover {
      transform: translateY(4px);
      box-shadow: 0px 4px 0 rgba(214, 86, 123, 1);
  }
  /*考郵局上榜必備　勝算加倍*/

  .course {
      padding: 80px calc((100% - 1200px)/2);
      text-align: center;
  }

  .course h2 {
      font-size: 2.8em;
      font-weight: bold;
      color: #4d4d4d;
  }

  .course p {
      font-size: 1.2rem;
      font-weight: normal;
      color: #666;
  }

  .course .pic {
      margin: 40px 0 0;
      text-align: center;
  }

  .course .pic>p {
      margin: 0 10px;
      display: inline-block;
      width: 25%;
  }

  .course .pic>p img {
      width: 100%;
  }

  .course .btn {
      margin: 40px 0 0;
      display: flex;
      justify-content: center;
  }

  .course .btn a.A {
      margin: 0 10px;
      display: block;
      padding: 12px 0;
      width: 300px;
      font-size: 1.5em;
      text-align: center;
      background-color: #8cc63f;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      color: #fff;
      box-shadow: 0px 6px 0 rgba(105, 153, 29, 1);
      transition: .2s;
  }

  .course .btn a.A:hover {
      transform: translateY(4px);
      box-shadow: 0px 4px 0 rgba(105, 153, 29, 1);
  }

  .course .btn a.B {
      margin: 0 10px;
      display: block;
      padding: 12px 0;
      width: 300px;
      font-size: 1.5em;
      text-align: center;
      background-color: #f77d9a;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700;
      color: #fff;
      box-shadow: 0px 6px 0 rgba(214, 86, 123, 1);
      transition: .2s;
  }

  .course .btn a.B:hover {
      transform: translateY(4px);
      box-shadow: 0px 4px 0 rgba(214, 86, 123, 1);
  }
  /* 留單區 */

  .form {
      padding: 30px 0;
      background-color: #f48537;
  }

  .form img {
      width: 220px;
  }

  .form h2 {
      font-size: 2rem;
      line-height: 1.3;
      font-weight: normal;
      color: #FFF;
  }

  .form a {
      margin: 20px auto;
      display: block;
      width: 90%;
      border-radius: 10px;
      background-color: #ff0;
      font-size: 1.7em;
      padding: 10px;
      color: #0e303f;
      text-align: center;
      text-decoration: none;
  }

  .form a:hover {
      font-weight: bold;
  }
  /*表尾*/
  /* footer */

  .FOOTER {
      margin: 0;
      padding: 50px calc((100% - 1200px)/2);
      width: 100%;
      background-color: #2c3c49;
      box-sizing: border-box;
  }

  .FOOTER ul {
      display: flex;
      flex-wrap: wrap;
  }

  .FOOTER li {
      width: 20%;
      margin: 5px 0;
  }

  .FOOTER li a {
      display: block;
      font-size: 20px;
      text-decoration: none;
      color: #FFF;
  }
  /* ===== phone ========================================================================================= */

  @media(max-width:991px) {
      .form img {
          width: 110px;
      }
      .form h2 {
          font-size: 1rem;
      }
      .form a {
          font-size: 1rem;
          padding: 5px;
          margin-top: 10px;
      }
  }

  @media(max-width:600px) {
      /* header */
      header {
          background: url(../images/header-mobile.jpg)no-repeat;
          background-color: #d6e400;
          padding-bottom: 85.7%;
          background-size: cover;
          background-position: center -50px;
      }
      header .head {
          display: none;
      }
      header .head-mobile {
          display: block;
          padding: 8% 2% 0;
          text-align: center;
      }
      header .head-mobile h1 {
          margin: 5px 0 0;
          font-size: 2.6rem;
          display: inline-block;
          font-weight: bold;
          line-height: 1;
          color: #214098;
      }
      header .head-mobile h1 .circle {
          float: left;
          width: 70px;
          height: 70px;
          line-height: 1.2;
          border: 1px dashed #f77d9a;
          background-color: #fff;
          border-radius: 50%;
          font-size: 3.4rem;
          text-align: center;
          font-weight: bold;
          color: #f77d9a;
      }
      header .head-mobile h3 {
          font-size: 1.6rem;
          font-weight: normal;
          color: #214098;
      }
      header .head-mobile .tit ul {
          margin: 20px 0 0 10px;
          display: flex;
          justify-content: center;
      }
      header .head-mobile .tit li {
          position: relative;
          margin-right: 5px;
      }
      header .head-mobile .tit li img {
          position: absolute;
          top: -15px;
          left: 8px;
          width: 22px;
      }
      header .head-mobile .tit li a {
          display: inline-block;
          width: 110px;
          height: 40px;
          background-color: #214098;
          border-radius: 0 50px 50px 0;
          color: #fff;
          font-size: 1.4rem;
          text-decoration: none;
          line-height: 40px;
          text-indent: 15px;
          transition: .3s;
      }
      header .head-mobile .tit li a:hover {
          background-color: #041742;
      }
      header .head-mobile .postman {
          margin: 30px 80px 0 0;
      }
      header .head-mobile .postman img {
          width: 80%;
          margin: 0 auto;
      }
      /*考取經驗談*/
      .experience {
          padding: 0px 3% 40px;
      }
      .experience h2 {
          font-size: 2.3rem;
          line-height: 1.2;
          word-break: keep-all;
      }
      .experience ul {
          justify-content: center;
          margin: 0;
          flex-wrap: wrap;
      }
      .experience ul li {
          width: 95%;
          margin: 10px 0;
      }
      .experience ul li:nth-of-type(1) {
          width: 100%;
          order: 2;
      }
      .experience ul li:nth-of-type(2) {
          width: 100%;
          margin: 0 auto;
          order: 1;
      }
      .experience ul li:nth-of-type(2) img {
          width: 50%;
          margin: 0 auto;
      }
      .experience ul li:nth-of-type(3) {
          width: 100%;
          order: 3;
      }
      .experience ul li .exp-main {
          padding: 30px;
      }
      .experience ul li h4 {
          font-size: 2.8rem;
      }
      .experience ul li h5 {
          font-size: 1.1rem;
      }
      .experience .btn {
          margin: 0;
          flex-wrap: wrap;
      }
      .experience .btn a.A {
          margin: 20px 0;
      }
      /* 郵局非考不可的四大理由 */
      .reason {
          padding: 50px 3% 40px;
      }
      .reason h2 {
          font-size: 2.3rem;
          line-height: 1.2;
          word-break: keep-all;
      }
      .reason ul {
          flex-wrap: wrap;
          margin: 20px 0 0;
      }
      .reason li {
          margin: 15px 0;
          width: 100%;
      }
      .reason li .left {
          width: 25%;
          margin: 0 10px 0 0;
      }
      .reason li .right {
          width: 70%;
      }
      .reason li:nth-of-type(odd) {
          margin: 0;
      }
      .reason li h3 {
          font-size: 1.6rem;
          line-height: 1.5;
      }
      .reason li p {
          font-size: 1.2rem;
          line-height: 1.4;
      }
      .reason li span {
          font-size: 0.9rem;
      }
      .reason .btn {
          margin: 0;
          flex-wrap: wrap;
      }
      .reason .btn a.B {
          margin: 20px 0;
      }
      /* 郵局考科少 */
      .onThelist {
          padding: 50px 3% 50px;
      }
      .onThelist h2 {
          font-size: 2.3rem;
          line-height: 1.2;
          word-break: keep-all;
      }
      .onThelist p {
          font-size: 1.2rem;
      }
      .onThelist>img {
          position: absolute;
          bottom: 0;
          left: 5.5%;
          width: 13.6vw;
      }
      .onThelist ul {
          margin-top: -50px;
          flex-wrap: wrap;
      }
      .onThelist ul li {
          width: 85%;
          margin: 120px 0 0;
      }
      .onThelist ul .top h4 {
          font-size: 3.6rem;
      }
      .onThelist .btn {
          margin: 40px 0 0;
          flex-wrap: wrap;
      }
      .onThelist .btn a.A {
          margin: 20px 0;
      }
      /*郵局招考好試多*/
      .Combine {
          padding: 50px 3% 50px;
      }
      .Combine h2 {
          font-size: 2.3rem;
          line-height: 1.2;
          word-break: keep-all;
      }
      .Combine p {
          font-size: 1.2rem;
          line-height: 1.6;
          text-align: left;
      }
      .Combine .suject {
          margin: 0 30px;
          flex-wrap: wrap;
      }
      .Combine .suject div {
          margin: 10px 20px;
      }
      .Combine .suject div:nth-child(2n) {
          margin: 0;
      }
      .Combine .btn {
          margin: 0;
          flex-wrap: wrap;
      }
      .Combine .btn a.A {
          margin: 20px 0;
      }
      /*卡位好時機**/
      .chance {
          padding: 50px 3% 50px;
      }
      .chance h2 {
          font-size: 2.3rem;
          line-height: 1.2;
          word-break: keep-all;
      }
      .chance p {
          font-size: 1.8rem;
          line-height: 1.6;
      }
      .chance img {
          margin: 20px 0 0;
          width: 100%;
      }
      .chance .btn {
          margin: 0;
          flex-wrap: wrap;
      }
      .chance .btn a.A {
          margin: 20px 0;
      }
      /* 郵局非考不可的四大理由 */
      .jd {
          padding: 50px 3% 50px;
      }
      .jd>h2 {
          font-size: 2.3rem;
          line-height: 1.2;
          word-break: keep-all;
      }
      .jd p {
          font-size: 1.3rem;
          line-height: 1.6;
      }
      .jd .jd-info {
          margin: 20px 0;
          padding: 0 20px 0;
          flex-wrap: wrap;
      }
      .jd .jd-info div {
          width: 100%;
          margin: 20px 0;
      }
      .jd .jd-info h2 {
          font-size: 2rem;
      }
      .jd .btn {
          margin: 40px 0 0;
          display: flex;
          justify-content: center;
      }
      .jd .btn {
          margin: 0;
          flex-wrap: wrap;
      }
      .jd .btn a.A {
          margin: 20px 0;
      }
      /*考郵局上榜必備　勝算加倍*/
      .course {
          padding: 50px 3%;
      }
      .course h2 {
          font-size: 2.3rem;
          line-height: 1.2;
          word-break: keep-all;
      }
      .course p {
          font-size: 1.4rem;
          word-break: keep-all;
          line-height: 1.6;
      }
      .course .pic>p {
          margin: 5px 0;
          width: 80%;
      }
      .course .btn {
          margin: 20px 0;
          flex-wrap: wrap;
      }
      .course .btn a.A {
          margin: 10px 0;
      }
      .course .btn a.B {
          margin: 10px 0;
      }
      /* footer */
      .FOOTER {
          padding: 20px 2% 70px;
      }
      .FOOTER ul li {
          width: 33%;
          text-align: center;
      }
      .FOOTER li a {
          font-size: 15px;
      }
  }
  /* ===== table ====================================================================================== */

  @media screen and ( min-width:768px) and ( max-width:1023.99px) {
      /* header */
      header {
          height: auto;
          background-size: 100%;
      }
      header .head {
          padding: 20px 4% 60px;
      }
      header .head .tit {
          margin: 20px 0 0;
      }
      header .head .tit h1 {
          font-size: 3.4rem;
      }
      header .head .tit h1 .circle {
          width: 70px;
          height: 70px;
          line-height: 70px;
          font-size: 3.8rem;
      }
      header .head .tit h3 {
          margin: 0 10px;
          font-size: 2rem;
      }
      header .head .tit ul {
          margin: 20px 0 0 10px;
          display: flex;
      }
      header .head .tit li {
          position: relative;
          margin-right: 10px;
      }
      header .head .tit li img {
          top: -15px;
          left: 10px;
          width: 24px;
      }
      header .head .tit li a {
          width: 140px;
          height: 40px;
          font-size: 1.6rem;
          line-height: 40px;
          text-indent: 40px;
      }
      header .head .postman {
          margin: 30px 50px 0 20px;
      }
      header .head .postman img {
          width: 100%;
      }
      header .head-mobile {
          display: none;
      }
      /*考取經驗談*/
      .experience {
          padding: 0px 3% 30px;
      }
      .experience h2 {
          font-size: 2.4rem;
      }
      .experience ul {
          margin: 20px 0;
      }
      .experience ul li:nth-of-type(2) {
          width: 24%;
          margin: 25px 5px;
      }
      .experience ul li:nth-of-type(2) img {
          width: 100%;
          margin: 0 auto;
      }
      .experience ul li .exp-main {
          padding: 20px 24px;
      }
      .experience ul li h4 {
          font-size: 1.6rem;
          font-weight: normal;
          line-height: 1.1;
      }
      .experience ul li p {
          margin: 10px 0 0;
          font-size: 0.85rem;
          line-height: 1.3;
      }
      .experience ul li h5 {
          margin: 5px 0;
          padding: 8px;
          font-size: 0.85rem;
      }
      /* 郵局非考不可的四大理由 */
      .reason {
          padding: 60px 3%;
      }
      .reason h2 {
          font-size: 2.4rem;
      }
      .reason li {
          margin: 20px 0;
          padding: 0;
          width: 45%;
          align-items: start;
      }
      .reason li .left {
          width: 25%;
          margin: 0 10px 0 0;
      }
      .reason li .left img {
          width: 100%;
      }
      .reason li .right {
          width: 70%;
      }
      .reason li:nth-of-type(odd) {
          margin: 0 5px;
      }
      .reason li h3 {
          font-size: 1.8rem;
      }
      .reason li p {
          font-size: 1rem;
          line-height: 1.6;
      }
      .reason li span {
          font-size: 0.8rem;
      }
      .reason .btn {
          margin: 10px 0 0;
          flex-wrap: wrap;
      }
      .reason .btn a.A {
          margin: 20px 0;
      }
      /* 郵局考科少 */
      .onThelist {
          padding: 60px 3%;
      }
      .onThelist h2 {
          font-size: 2.4rem;
      }
      .onThelist p {
          font-size: 1rem;
      }
      .onThelist ul {
          margin-top: 50px;
      }
      .onThelist ul li {
          width: 31%;
      }
      .onThelist ul .top {
          height: 170px;
      }
      .onThelist ul .top a {
          padding: 60px 30px 20px 30px;
      }
      .onThelist ul .top h4 {
          margin: 0 0 5px;
          font-size: 2.6rem;
          font-weight: bold;
          line-height: 36px;
      }
      .onThelist ul .top p.tit {
          font-size: 1.6rem;
          margin: 5px 0;
      }
      .onThelist ul .down {
          border: 6px solid #008c43;
          border-radius: 20px;
          margin-top: 50px;
          padding: 20px 15px;
      }
      .onThelist ul .down p {
          font-size: 15px;
          line-height: 1.5;
      }
      .onThelist ul .down>a {
          text-decoration: none;
          box-sizing: border-box;
          display: block;
      }
      .onThelist .btn {
          margin: 60px 0 0;
      }
      /*郵局招考好試多*/
      .Combine {
          padding: 60px 3%;
      }
      .Combine h2 {
          font-size: 2.4em;
      }
      .Combine p {
          font-size: 1rem;
      }
      .Combine .suject {
          margin: 20px auto 0;
          overflow: hidden;
          padding: 20px;
          display: flex;
          justify-content: center;
      }
      .Combine .suject a {
          text-decoration: none;
      }
      .Combine .suject div {
          width: 150px;
          height: 160px;
          background: #008c43;
          float: left;
          position: relative;
          display: flex;
          align-items: center;
          margin: 0 20px;
      }
      .Combine .suject div h3 {
          color: #fff;
          font-size: 1.5rem;
      }
      .Combine .suject div h4 {
          margin: 5px 0;
          font-size: 1rem;
          background-color: #d6e400;
          font-weight: normal;
          color: #214098;
          border-radius: 50px;
          padding: 5px;
      }
      .Combine .suject div::before {
          content: "";
          width: 0px;
          position: absolute;
          left: -40px;
          top: 0px;
          border: 80px solid transparent;
          border-left: none;
          border-right: 40px solid #008c43;
      }
      .Combine .suject div::after {
          content: "";
          width: 0px;
          position: absolute;
          right: -40px;
          top: 0px;
          border: 80px solid transparent;
          border-left: 40px solid #008c43;
          border-right: none;
      }
      .Combine .suject div:nth-child(2n) {
          margin-top: 80px;
          background-color: #214098;
      }
      .Combine .suject div:nth-child(2n)::before {
          content: "";
          width: 0px;
          position: absolute;
          left: -40px;
          top: 0px;
          border: 80px solid transparent;
          border-left: none;
          border-right: 40px solid #214098;
      }
      .Combine .suject div:nth-child(2n)::after {
          content: "";
          width: 0px;
          position: absolute;
          right: -40px;
          top: 0px;
          border: 80px solid transparent;
          border-left: 40px solid #214098;
          border-right: none;
      }
      .Combine h4 {
          font-size: 1.2em;
          color: #666;
      }
      .Combine .btn {
          margin: 20px 0 0;
          display: flex;
          justify-content: center;
      }
      .Combine .btn a.A {
          margin: 0 10px;
          display: block;
          padding: 12px 0;
          width: 300px;
          font-size: 1.5em;
          text-align: center;
          background-color: #f77d9a;
          border-radius: 50px;
          text-decoration: none;
          font-weight: 700;
          color: #fff;
          box-shadow: 0px 6px 0 rgba(214, 86, 123, 1);
          transition: .2s;
      }
      .Combine .btn a.A:hover {
          transform: translateY(4px);
          box-shadow: 0px 4px 0 rgba(214, 86, 123, 1);
      }
      /*卡位好時機*/
      .chance {
          padding: 60px 3%;
      }
      .chance h2 {
          font-size: 2.4rem;
      }
      .chance p {
          font-size: 1.6rem;
      }
      .chance img {
          margin: 20px 0 0;
          width: 70%;
      }
      .chance .btn {
          margin: 20px 0 0;
      }
      /* 郵局非考不可的四大理由 */
      .jd {
          padding: 60px 3%;
      }
      .jd>h2 {
          font-size: 2.4rem;
      }
      .jd p {
          font-size: 1rem;
      }
      .jd .jd-info {
          margin: 30px 0 0;
          justify-content: space-between;
      }
      .jd .jd-info div {
          width: 360px;
      }
      .jd .jd-info img {
          width: 80%;
      }
      .jd .jd-info h2 {
          font-size: 1.6rem;
      }
      .jd .btn {
          margin: 40px 0 0;
      }
      /*考郵局上榜必備　勝算加倍*/
      .course {
          padding: 60px 3%;
      }
      .course>h2 {
          font-size: 2.4rem;
      }
      .course p {
          font-size: 1rem;
      }
      /* footer */
      .FOOTER {
          width: 100%;
          padding: 20px 4%;
      }
      .FOOTER ul li {
          width: 20%;
      }
      .FOOTER ul a {
          font-size: 16px;
          text-align: center;
      }
  }

  @media(max-width:768px) {}
  /* ===== other ====================================================================================== */

  @media (min-width: 1024px) and (max-width: 1199.99px) {
      /* header */
      header {
          padding-bottom: 46.88%;
      }
      header .head {
          padding: 2% 2% 0;
          text-align: center;
      }
      header .head h1 {
          font-size: 2rem;
      }
      header .head h2 {
          font-size: 2em;
      }
      header .head-mobile {
          display: none;
      }
      /*考取經驗談*/
      .experience {
          padding: 60px 4% 80px;
      }
      .experience ul li h4 {
          font-size: 3.2em;
      }
      /*公告*/
      .notice {
          padding: 60px 4%;
          background-color: #efecdf;
          background-image: none;
          height: auto;
          padding-bottom: auto;
      }
      .notice table td:nth-child(1) {
          width: 18%;
      }
      .notice table td:nth-child(2) {
          width: 62%;
      }
      .notice table td:nth-child(3) {
          width: 20%;
      }
      /*專為農田水利事業考生量身打造*/
      .course {
          padding: 60px 4%;
      }
  }