body {
  font-family: "Microsoft JhengHei", Arial, Helvetica, sans-serif;
  color: #656565;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1px;
  position: relative;
  text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

a {
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
}

/* ------------------------------------------ */
/* 共用樣式 */
/* ============================= */
/* 文字大小 */
h1 {
  font-size: 2.4em;
}

h2,
.font-title {
  font-size: 2.2em;
  font-weight: bold;
  color: #000;
}

h3 {
  font-size: 1.6em;
  color: #000;
}

.title-content {
  font-size: 1.2em;
}

.english-title {
  font-family: "Arial", Helvetica, sans-serif;
}

/* ============================= */
/* 文字排版 */
.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

/* ============================= */
/* 文字顏色 */
.font-color-black {
  color: black;
}

.font-color-white {
  color: white;
}

.font-color-main {
  color: #C9207A;
}

/* ============================= */
/* 文字粗細 */
.font-weight-bold {
  font-weight: bold;
}

/* ============================= */
/* 間隔 */
.line-height-1 {
  line-height: 1;
}

.m-t-10 {
  margin-top: 10px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-l-10 {
  margin-left: 10px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-t-20 {
  margin-top: 20px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.m-l-20 {
  margin-left: 20px;
}

.m-r-20 {
  margin-right: 20px;
}

.m-t-30 {
  margin-top: 30px;
}

.m-b-30 {
  margin-bottom: 30px;
}

.m-l-30 {
  margin-left: 30px;
}

.m-r-30 {
  margin-right: 30px;
}

.m-t-40 {
  margin-top: 40px;
}

.m-b-40 {
  margin-bottom: 40px;
}

.m-l-40 {
  margin-left: 40px;
}

.m-r-40 {
  margin-right: 40px;
}

.m-t-50 {
  margin-top: 50px;
}

.m-b-50 {
  margin-bottom: 50px;
}

.m-l-50 {
  margin-left: 50px;
}

.m-r-50 {
  margin-right: 50px;
}

/* ============================= */
/* 範圍 */
section,
.wrap {
  max-width: 1024px;
  margin: 0 auto;
  padding-top: 100px;
  padding-right: 20px;
  padding-bottom: 100px;
  padding-left: 20px;
}

.wrap {
  padding-top: 0;
  padding-bottom: 0;
}

/* ============================= */
/* 排列方式 */
.display-flex {
  display: flex;
}

.flex-wrap-wrap {
  flex-wrap: wrap;
}

.align-center {
  align-items: center;
}

.align-flex-end {
  align-items: flex-end;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.justify-content-space-between {
  justify-content: space-between;
}

.justify-content-space-evenly {
  justify-content: space-evenly;
}

/* ============================= */
/* list 樣式 */
.margin-block-start-0 {
  margin-block-start: 0;
}

.margin-block-end-0 {
  margin-block-end: 0;
}

.list-style-type-none {
  list-style-type: none;
}

.list-padding-inline-start-0 {
  padding-inline-start: 0px;
}

/* ============================= */
/* a 標籤樣式 */
a {
  color: #444;
  transition: color .3s ease-in-out;
}

a:hover,
a:active {
  color: #C9207A;
}

/* ============================= */
/* 圓角 */
.border-radius {
  border-radius: 16px;
}

/* ============================= */
/* icon-block */
.icon-card {
  margin-bottom: 50px;
}

.icon-card:last-child {
  margin-bottom: 0;
}

.icon {
  width: 120px;
  height: 120px;
  background-size: 85%;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: auto;
  margin-left: auto;
  border-radius: 100%;
  border: 1px solid #000;
  background-color: #fff;
}

/* 背景色 */
.bg-color-gradient {
  background: -webkit-linear-gradient(0deg, rgb(255, 232, 247), rgb(255, 255, 255));
  background: linear-gradient(0deg, rgb(255, 232, 247), rgb(255, 255, 255));
}

.bg-color {
  background-color: #FFE8F7;
}

/* ------------------------------------------ */
/* ============================= */
/* header */
header {
  background-color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  border-bottom: 2px solid #C9207A;
  width: 100%;
}

header .wrap {
  height: 50px;
  width: 100%;
}

.nextlink-logo {
  width: 120px;
}

/* ============================= */
/* mobile menu icon */
input[type="checkbox"] {
  display: none;
}

.menu-btn {
  position: fixed;
  z-index: 99;
  right: 20px;
  top: 0px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.menu-btn span,
.menu-btn:before,
.menu-btn:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 30%;
  width: 40%;
  border-bottom: 2px solid #000;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.menu-btn:before {
  transform: translateY(-8px);
}

.menu-btn:after {
  transform: translateY(8px);
}

.close {
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: background .6s;
}

#menu-btn-active.close-block+.menu-btn span {
  transform: scaleX(0);
}

#menu-btn-active.close-block+.menu-btn:before {
  transform: rotate(45deg);
  border-color: #000;
}

#menu-btn-active.close-block+.menu-btn:after {
  transform: rotate(-45deg);
  border-color: #000;
}

/* ============================= */
/* menu-item-block */
.menu-item-block {
  position: fixed;
  top: 0;
  right: -100vw;
  height: 100vh;
  width: 100%;
  background: #f4f4f4;
  transition: all 0.5s ease-in-out;
  z-index: 90;
}

.menu-item-block.show {
  right: 0;
}

.menu-item-block ul {
  margin-top: 15vh;
}

.menu-item-block li {
  padding-bottom: 30px;
  font-size: 1.3em;
  font-weight: bold;
}

/* ============================= */
/* index-banner */
#index-banner {
  height: 300px;
  margin-top: 50px;
  background-color: #FFE8F7;
  position: relative;
}

#index-banner .wrap {
  position: relative;
  height: 300px;
}

.oval {
  width: 100%;
  z-index: -1;
}

.title-img {
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  bottom: -70px;
  background-image: url(/img/banner-title-1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/* ============================= */
/* Bootcamp Program特色 */
#feature {
  position: relative;
  max-width: 1124px;
}

#feature .icon-1 {
  background-image: url(/img/icon-1.png);
}

#feature .icon-2 {
  background-image: url(/img/icon-2.png);
}

#feature .icon-3 {
  background-image: url(/img/icon-3.png);
}

/* ============================= */
/* 招募職缺 */
#recruitment-vacancies {
  position: relative;
}

.job-card {
  width: 100%;
  max-width: 330px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px;
}

.job-card:last-child {
  margin-bottom: 0;
}

.job-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 5%;
  width: 90%;
  height: 100%;
  transform: skew(-4deg);
  border-radius: 16px;
  background-color: #EFABD2;
  z-index: -2;
}

.job-title {
  padding-top: 30px;
  padding-left: 50px;
}

.job-title h3 {
  margin-bottom: 4px;
}

.job-content-area {
  margin-left: 30px;
  padding: 30px;
  background-color: #fff;
  border: 1px solid #000;
  position: relative;
}

.job-content-area::after {
  content: '';
  position: absolute;
  top: 7px;
  right: -7px;
  bottom: -7px;
  left: 0;
  border-radius: 16px;
  background-color: #000;
  z-index: -1;
}

.job-content-title {
  width: 100%;
  border-bottom: 2px solid #000;
  height: 25px;
}

.job-content-area ul {
  padding-inline-start: 20px;
}

.job-content-area li {
  margin-bottom: 8px;
}

.job-card .people {
  display: none;
}

.cloud-icon {
  width: auto;
  height: 18px;
  display: inline-block;
}

/* ============================= */
/* 職涯發展 */
.career-introduce-card {
  background-color: #EFABD2;
  width: 260px;
  height: 260px;
  border-radius: 100%;
  position: relative;
  margin-bottom: 50px;
  margin-right: auto;
  margin-left: auto;
}

.career-introduce-card::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 100%;
  border: 1px solid #000;
  top: 10px;
  left: -10px;
  bottom: -10px;
}

.career-introduce-card:nth-child(2):before {
  top: -10px;
  left: 10px;
  bottom: 10px;
}

.career-introduce-card:nth-child(3):before {
  top: 10px;
  left: 10px;
  bottom: -10px;
}

.text-content {
  padding-top: 50px;
  padding-left: 48px;
  padding-right: 45px;
  position: absolute;
}

/* .career-introduce-card:nth-child(2) .text-content {
  padding-top: 41px;
  padding-left: 50px;
  padding-right: 40px;
} */

.career-introduce-card:nth-child(3) .text-content {
  padding-top: 50px;
  padding-left: 60px;
  padding-right: 30px;
}

.career-title {
  padding: 5px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #C9207A;
}

.people-img {
  display: none;
}

.icon-block-bg-block {
  position: relative;
  margin-bottom: 50px;
  width: calc(100% - 10px);
}

#career-development .icon-block {
  background-color: #fff;
  border: 1px solid #000;
  padding: 30px;
  position: relative;
}

.icon-block-bg-block::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 16px;
  top: 10px;
  right: -10px;
}

.career-block .icon-1 {
  background-image: url(/img/career-1.png);
}

.career-block .icon-2 {
  background-image: url(/img/career-2.png);
}

.career-block .icon-3 {
  background-image: url(/img/career-3.png);
}

.vector-people-3 {
  max-width: 878px;
  margin: 0 auto;
}

/* ============================= */
/* Bootcamp培訓系統 */
.tabulation {
  background-color: #fff;
  border: 1px solid #000;
  position: relative;
  margin-top: 100px;
  width: calc(100% - 10px);
  margin-left: auto;
}

.tabulation::before {
  content: '';
  background-color: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 10px;
  right: 10px;
  border-radius: 16px;
  z-index: -1;
}

.tabulation-content-block {
  margin-top: -50px;
}

.tabulation-content {
  padding: 0 20px;
}

.tabulation-content .title-block {
  padding: 30px 0;
  background-color: #EE609D;
}

.tabulation-content:nth-child(even) .title-block {
  background-color: #EFABD2;
}

.tabulation-content .content-block {
  padding: 0 15px;
}

.arrow-line-block {
  padding: 0 20px;
}

.arrow-bg {
  padding: 20px 0;
  background: -webkit-linear-gradient(-90deg, rgb(229, 229, 229), rgb(255, 255, 255));
  background: linear-gradient(-90deg, rgb(229, 229, 229), rgb(255, 255, 255));
  position: relative;
}

.intact-arrow {
  width: calc(100% - 30px);
}

.half-arrow {
  width: calc(40% - 30px);
}

.arrow-bg::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px;
  width: 30px;
  background-color: #e5e5e5;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ============================= */
/* 報名方式 */
#sign-up section {
  padding-bottom: 0;
}

.sign-up-content-block p {
  font-size: 1em;
  text-align: left;
}

.sign-up-content-block a {
  text-decoration: underline;
}

#sign-up .icon-1 {
  background-image: url(/img/sign-up-1.png);
}

#sign-up .icon-2 {
  background-image: url(/img/sign-up-2.png);
}

.vector-people-4 {
  max-width: 210px;
  margin-left: auto;
}

#sign-up ul {
  padding-inline-start: 20px;
}

#sign-up li {
  margin-bottom: 10px;
}

/* ============================= */
/* 報名與徵選時程 */
#schedule {
  position: relative;
}

.schedule-block {
  padding-top: 50px;
  padding-left: 0;
  position: relative;
}

.schedule-block::after {
  content: '';
  position: absolute;
  width: 2px;
  height: calc(100% - 20px);
  background-color: #C9207A;
  top: 0;
  bottom: 0;
  left: 9px;
}

.schedule-time {
  margin-bottom: 50px;
}

.schedule-time:last-child {
  margin-bottom: 0;
}

.dots {
  width: 10px;
  height: 10px;
  background-color: #C9207A;
  border-radius: 100%;
  position: relative;
  margin-left: -10px;
  margin-right: 20px;
}

.dots::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid #C9207A;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 100%;
  top: -10px;
  left: -10px;

}

.schedule-time p {
  font-size: 1em;
  text-align: left;
}

.schedule-time:nth-child(even) p {
  text-align: right;
}

.schedule-block::after {
  left: calc(50% - 1px);
  height: calc(100% - 30px);
}

.schedule-time {
  width: 50%;
  margin-bottom: 80px;
}

.schedule-time:nth-child(odd) {
  margin-left: calc(50% + 5px);
}

.schedule-time:nth-child(even) {
  margin-right: calc(50% + 10px);
  flex-direction: row-reverse;
  text-align: right;
}

.schedule-time:nth-child(even) .dots {
  margin-right: -5px;
  margin-left: 20px;
}




/* ============================= */
/* CTA */
.cta {
  background-image: url(/img/bg-pattern.png);
  background-size: cover;
  background-position: center;
  background-repeat: initial;
  background-attachment: fixed;
}

.cta h2 {
  font-size: 1.4em;
}

.btn {
  display: table;
  margin: 0 auto;
  padding: 15px 30px;
  background-color: #fff;
  font-size: 1em;
  border: 2px solid #000;
  transition: all 0.3s ease-in-out;
}

.btn:hover {
  background-color: #C9207A;
  border-color: #C9207A;
  color: #fff;
}

/* ============================= */
/* 向量人物 */
.vector-people {
  display: none;
}

/* ============================= */
/* footer */
footer {
  border-top: 2px solid #C9207A;
}

footer section {
  padding-top: 50px;
  padding-bottom: 50px;
}

.logo-media-block {
  margin-bottom: 50px;
}

.logo-content {
  margin-bottom: 20px;
}

.logo-content a {
  display: block;
}

.logo-content img {
  width: 130px;
}

.media-icon-block {
  display: flex;
}

.media-icon-block a {
  display: block;
  width: 30px;
  margin: 0 10px;
}

/* ------------------------------------------ */
/* ============================= */
/* RWD */
/* ============================= */
/* 桌機樣式 */
.web-style {
  display: none;
}


@media(min-width: 375px) {

  /* ============================= */
  /* 招募職缺 */
  .job-content-area {
    margin-left: 40px;
  }

  .job-card .people-sales {
    left: -30px;
  }

  .job-card .people-solution-architect {
    left: -60px;
    height: 260px;
  }

  .job-card .people-inter {
    left: -51px;
  }

  /* ============================= */
  /* 職涯發展 */
  .people-img {
    display: block;
    position: absolute;
    height: 123px;
    width: auto;
  }

  .people-img-1 {
    right: -30px;
    bottom: 10px;
  }

  .people-img-2 {
    left: -37px;
    bottom: 5px;
    height: 130px;
  }

  .people-img-3 {
    right: -25px;
    bottom: -20px;
    /* height: 130px; */
  }

  /* .text-content {
    padding-top: 65px;
    padding-left: 30px;
    padding-right: 60px;
  } */

  /* .career-introduce-card:nth-child(2) .text-content {
    padding-top: 33px;
    padding-left: 60px;
    padding-right: 30px;
  } */

  /* .career-introduce-card:nth-child(3) .text-content {
    padding-top: 55px;
    padding-left: 65px;
    padding-right: 25px;
  } */

}

@media(min-width: 510px) {

  /* ============================= */
  /* index-banner */
  .title-img {
    background-size: contain;
    bottom: -15vw;
  }

  /* ============================= */
  /* 報名方式 */
  .sign-up-content-block {
    display: flex;
    align-items: center;
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
  }

  .sign-up-content-block:nth-child(3) {
    align-items: flex-start;
  }

  .sign-up-content-block .content-block {
    width: calc(100% - 140px);
    padding-left: 30px;
  }

  .sign-up-content-block p {
    font-size: 1.4em;
  }

  /* ============================= */
  /* 招募職缺 */
  .job-card .people {
    display: block;
    position: absolute;
    bottom: 0;
    width: auto;
    /* height: 300px; */
    height: 255px;
  }
}

@media(min-width: 768px) {

  /* ============================= */
  /* icon-block */
  .icon-block {
    display: flex;
    padding: 0 50px;
  }

  .icon-card {
    width: calc(100% / 3);
    padding: 0 20px;
    margin-bottom: 0;
  }

  /* ============================= */
  /* 招募職缺 */
  .job-card .people-sales {
    left: -70px;
    height: 310px;
  }

  .job-card .people-solution-architect {
    height: 320px;
    left: -96px;
  }

  .job-card .people-inter {
    height: 310px;
    left: -79px;
  }

  /* ============================= */
  /* 職涯發展 */
  .career-introduce-block {
    display: flex;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
  }

  .career-introduce-card:nth-child(1) {
    margin-left: 0;
  }

  .career-introduce-card:nth-child(2) {
    margin-right: 0;
  }

  .people-img {
    height: 200px;
    bottom: -20px;
  }

  .people-img-1 {
    right: -100px;
  }

  .people-img-2 {
    /* height: 209px; */
    left: -126px;
  }

  /* .career-introduce-card:nth-child(2) .text-content {
    padding-left: 65px;
    padding-right: 25px
  } */

  .people-img-3 {
    left: 150px;
    /* bottom: 10px; */
    height: 180px;
  }

  .icon-block-bg-block {
    margin-top: -70px;
    margin-bottom: 100px;
    width: calc(100% - 10px);
  }

  /* ============================= */
  /* Bootcamp培訓系統 */
  .tabulation-content-block {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 0 30px;
  }

  .tabulation-content {
    width: calc(100% / 2);
    padding: 0;
  }

  .tabulation-content .content-block {
    padding: 0 30px;
  }

  .tabulation-content:nth-child(odd) .content-block {
    border-right: 1px solid #C0C0C0;
  }

  .tabulation-content:last-child .content-block {
    border-right: none;
  }

  .arrow-line-block p {
    font-size: 1.6em;
  }

  /* ============================= */
  /* 報名方式 */
  #sign-up li {
    font-size: 1.2em;
  }

  /* ============================= */
  /* 報名與徵選時程 */
  .schedule-block {
    padding-top: 80px;
    padding-left: 0;
  }

  .schedule-time p {
    font-size: 1.6em;
  }

  /* ============================= */
  /* CTA */
  .cta h2 {
    font-size: 2.2em;
  }

  .btn {
    font-size: 1.2em;
  }

  /* ============================= */
  /* footer */
  footer section {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo-content {
    margin-bottom: 0;
    width: 280px;
    border-right: 1px solid #000;
  }

  .logo-media-block {
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }

  .media-icon-block {
    margin-left: 30px;
  }
}

@media(min-width: 1024px) {
  .web-style {
    display: block;
  }

  .mobile-style {
    display: none;
  }

  /* ============================= */
  /* header */
  header .wrap {
    width: auto;
    max-width: 1220px;
  }

  header li {
    margin-left: 25px;
  }

  /* ============================= */
  /* 招募職缺 */
  .job-block {
    display: flex;
    flex-wrap: wrap;
  }

  .job-card {
    width: calc(100% / 2.5 - 60px);
    max-width: none;
  }

  .job-card .people {
    height: 350px;
  }

  /* .job-card:nth-child(odd) .people {
    height: 350px;
  } */

  /* .job-card .people-sales {
    left: -71px;
  } */

  .job-card .people-solution-architect {
    left: -108px;
  }

  .job-card .people-inter {
    left: -94px;
  }

  /* ============================= */
  /* 職涯發展 */
  .career-block {
    margin-top: 100px;
  }

  .people-img-1 {
    /* height: 220px; */
    right: -111px;
  }

  .people-img-2 {
    /* height: 226px; */
    left: -171px;
    /* bottom: -8px; */
  }

  /* ============================= */
  /* Bootcamp培訓系統 */
  .tabulation-content {
    width: calc(100% / 5);
  }

  .tabulation-content .content-block {
    border-right: 1px solid #C0C0C0;
    height: 251px;
  }

}

@media(min-width: 1290px) {

  /* ============================= */
  /* 向量人物 */
  .vector-people {
    display: block;
  }

  .vector-people-1 {
    position: absolute;
    width: 120px;
    top: 186px;
    left: 0px;
  }

  .vector-people-2 {
    position: absolute;
    width: 205px;
    top: -95px;
    right: 0px;
  }

  .vector-people-5 {
    position: absolute;
    width: 240px;
    top: 172px;
    left: 0px;
  }
}

@media(min-width: 1440px) {

  /* ============================= */
  /* 招募職缺 */
  #recruitment-vacancies {
    max-width: 1300px;
  }

  .job-card {
    width: 100%;
    max-width: 330px;
    margin-bottom: 0;
  }

  .job-card:nth-child(2) {
    margin-left: 80px;
  }

  .job-title {
    padding-left: 42px;
  }

  .job-card:nth-child(3) .job-content-area {
    height: 453px;
  }
}