body{
    margin: 0;
    padding: 0;
    font-family:Arial, Helvetica,"微軟正黑體",sans-serif;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #ffffff; opacity: 1; background-size: 9px 9px;
    background-image: repeating-linear-gradient(45deg, #f6f6f6 0, #f6f6f6 0.9px, #ffffff 0, #ffffff 50%);
}
ul{ margin:0; padding:0; list-style:none;}
p{ margin:0; padding:0;}

:root {
    --dark-blue: #2C80C5;
    --primary-blue: #1DAAD2;
    --primary-yellow: #ffe18d;
    --primary-pink: #E15FA4;
  }

/* 背景色 */
.kpbg-primary-blue{ background-color: #1DAAD2;}
.kpbg-dark-blue{ background-color: #2C80C5;}
.kpbg-primary-pink{ background-color: #E15FA4;}
.kpbg-primary-purpler{ background-color: #8E6ACF;}

/* 字體顏色 */
.kpfc-primary-blue{ color: #1DAAD2;}
.kpfc-dark-blue{ color: #2C80C5;}
.kpfc-primary-pink{ color: #E15FA4;}
.kpfc-primary-purpler{ color: #8E6ACF;}


/* header 刊頭 */
header{
  width: 100%;
  height: 0;
  background-image: url(../images/header-img.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  padding-bottom: 36.45%;
  background-size: cover;
}

/* 高普考導覽選單 */
.kp-menu{ display: flex; width: 100%; }
.kp-menu ul{ display: flex; justify-content: space-between; width:100%;}
.kp-menu ul::before{ content: '';  width: 100%; background:#1DAAD2; }
.kp-menu ul::after{ content: ''; width: 100%; background:#2C80C5; }
.kp-menu ul li{ width:60%; height: 65px; line-height: 65px; position: relative; }
.kp-menu ul li:nth-Child(odd){ background:#1DAAD2;}
.kp-menu ul li:nth-Child(even){ background:#2C80C5;}
.kp-menu ul li::before{ content:''; clip-path:polygon(100% 0%, 0% 100%,100% 100%); transform: translateX(-95%); display: block; position: absolute; top: 0; left: 0; width: 10%; height: 100%; }
.kp-menu ul li::after{ content:''; clip-path:polygon(0% 0%,100% 0,0% 100%); transform: translateX(95%); display: block; position: absolute; top: 0; right: 0; width: 10%; height: 100%; }
.kp-menu ul li:nth-child(odd)::before{ background:#1DAAD2; }
.kp-menu ul li:nth-child(odd)::after{ background:#1DAAD2; }
.kp-menu ul li:nth-child(even)::before{ background:#2C80C5; }
.kp-menu ul li:nth-child(even)::after{ background:#2C80C5; }        
.kp-menu ul li a{ display: block; padding: 0 24px; font-size: 1.4rem; text-decoration: none; color: #FFFFFF; }

/* h2標題 */
section .kp-h2-title{ text-align: center;}
section .kp-h2-title h2{
  font-family: "Noto Serif TC", serif;
  font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 3rem;
}
section .kp-h2-title h2 span{ color: #E15FA4;}
section .kp-h2-title p{ font-size: 1.6rem; color: #666;}
section .kp-h2-title p span{ color: #1DAAD2;}

/* 留單按鈕 */
.kp-btn{ display: flex; justify-content: center; text-align: center;}
.kp-btn a{ 
  display: block; width:25%; margin: 0; padding: 12px 0; border: 2px solid #fff; 
  font-size: 1.6rem; color: #fff; border-radius: 50rem;
  box-shadow: 4px 5px 0 rgba(44, 128, 197, 0.3); transform: translateY(0);
}
.kp-btn a:hover{ color: #fff; transform: translateY(-5px); transition: all 1s;}

/* 熱門關注焦點------------------------------------------------------------------------------------------ */
.kp-info{ padding: 80px 0; text-align: center;}
.kp-info h3{
  font-family: "Noto Serif TC", serif;
  font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 2.6rem; color: #E15FA4;
}
/* 箭頭導引動畫 */
.animation-arrow{ margin: 30px auto 20px; text-align: center;}
.animation-arrow i{ color: #E15FA4;}
.animation-arrow .vertical-bar{ width: .1rem; height: 50px; background-color: #fff; margin: 0 auto; overflow: hidden; }
.animation-arrow .vertical-bar .animation-bar{ width: .1rem; height: 80px; background-color: #E15FA4;  transform: translateY(-100%);  animation: arrowloop 1s ease infinite;}
@keyframes arrowloop{
  0%{ transform: translateY(-100%);}
  25%{ transform: translateY(-80%);}
  50%{ transform: translateY(0);}
  75%{ transform: translateY(80%);}
  100%{ transform: translateY(100%);}
}
/* 公務員福利制度 */
.kp-info .kp-point{ display: flex; align-items: center; border: 1px solid #E15FA4; background-color: #fff; border-radius: 100px;}
.kp-info .kp-point .kp-point-img{ width: 25%; padding: 10px 0; flex-shrink: 0; text-align: center; 
  background-color: #E15FA4; border-radius: 100px 0 0 100px;
}
.kp-info .kp-point .kp-point-img img{ margin: 0 auto; max-width: 100%; display: block;}
.kp-info .kp-point .kp-point-img h4{ display: inline-block; font-size: 1rem; color: #E15FA4; background-color: #fff; border-radius: 50px;}
.kp-info .kp-point p{ text-align: left; font-size: 1.6rem;}

/* 高普考推薦類科---------------------------------------------------------------------------------------- */
.kp-recommend{ padding: 80px 0; position: relative;}
.kp-recommend::before{ 
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background:url(../images/images-skybg.jpg) no-repeat; 
  background-position: center bottom; background-size: cover; z-index: -1; opacity: 0.5;
}
.recommend-card>div{ width: 22%; border-radius: 30px; background-color: #fff; text-align: center;}
.recommend-card-text{ padding-bottom: 20px;}
.recommend-card-text h3{ display: block; margin-bottom: 0; padding: 20px 0; font-size: 1.6rem; color: #fff; border-radius: 30px 30px 0 0;}
.recommend-card-text h4{ padding: 20px 30px 10px; font-size: 1.4rem;}
.recommend-card-text a{ display: block; margin: 0 auto; padding: 5px 0; width: 70%; border-radius: 50px; transition: all 0.5s;}
.recommend-card>div:nth-child(odd) a{ border: 1px solid #E15FA4; color: #E15FA4;}
.recommend-card>div:nth-child(even) a{ border: 1px solid #8E6ACF; color: #8E6ACF;}
.recommend-card>div:nth-child(odd) a:hover{ border: 1px solid #E15FA4; color: #fff; background-color: #E15FA4;}
.recommend-card>div:nth-child(even) a:hover{ border: 1px solid #8E6ACF; color: #fff; background-color: #8E6ACF;}

/* 高普考上榜生心路歷程報導---------------------------------------------------------------------------------------- */
.experience{ padding: 80px 0px; background: url(../images/images-experiencebg.png) no-repeat; background-position: center center;}
.experience .experienceBox{ padding: 0px 25px 25px; border: 1px solid #E15FA4; background-color: #fff; border-radius: 20px; text-align: center;}
.experience .experienceBox h3{ display: block; padding: 12px 0; font-size: 1.5rem; color: #fff; 
  background-color: #E15FA4; border-radius: 0 0 20px 20px;}
.experience .experienceBox h3 span{ color: #FFEF00;}
.experience .experienceBox h4{ padding: 10px 0 5px; font-size: 1.4rem; color: #E15FA4;}
.experience .experienceBox p{ text-align: left; line-height: 1.8rem;}
.experience .experienceBox p span{ display: inline-block; margin-left: 4px; padding: 0 10px; color: #fff; background-color: #1DAAD2; border-radius: 20px;}

/*輪播*/
.experience-swiper-fn {
    position: relative; margin: 40px 0px;
}
.experience-swiper-fn .swiper-wrapper {
    height: auto;
}
.experience-swiper-fn .swiper-slide {
    margin: 0px;
    padding: 0 25px;
}
.experience-swiper-fn .swiper-button-next {
    position: absolute;
    z-index: 57;
    top: calc(100%/2);
    background: rgba(0, 0, 0, 0.5);
    right: -25px;
    width: 40px;
    height: 40px;
    border-radius: 25px;
}
.experience-swiper-fn .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
}
.experience-swiper-fn .swiper-button-prev {
    position: absolute;
    z-index: 57;
    background: rgba(0, 0, 0, 0.5);
    left: -25px;
    width: 40px;
    height: 40px;
    border-radius: 25px;
}
.experience-swiper-fn .swiper-button-prev:hover {
  background: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
}
.experience-swiper-fn .swiper-button-next img {
    position: absolute;
    z-index: 57;
    left: 10px;
    top: 10px;
    width: 50%;
}
.experience-swiper-fn .swiper-button-prev img {
    position: absolute;
    z-index: 57;
    right: 10px;
    top: 10px;
    width: 50%;
}
.experience-swiper-fn .swiper-pagination {
    position: relative;
    z-index: 56;
    width: 100%;
    margin: 20px auto 0px auto;
}
.experience-swiper-fn .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #666;
    opacity: 1;
    background: #999;
    position: relative;
    top: 0px;
    margin: 0px 5px;
}
.experience-swiper-fn .swiper-pagination-bullet-active {
    color: #fff; background: #1DAAD2;
}

/* 高普考雙榜 各科準備秘訣公開 */
.skill{
  text-align: center;
  padding: 20px calc((100% - 1000px) / 2) 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.skill > img {
  position: absolute;
  bottom: 0px;
  right: calc((100% - 1000px) / 2);
  transform-origin: 0 100%;
  animation: handSlide 2s linear infinite;
}
@keyframes handSlide {
  0% {
    transform: rotateZ(0);
  }
  50% {
    transform: rotateZ(-10deg);
  }
  100% {
    transform: rotateZ(0);
  }
}
.skill .ipad{
  background: url(../images/open-ipad.png) no-repeat;
  padding: 30px 14% 170px 16%;
  /*width: 668px;*/
  background-size: cover;
}
.skill .ipad img{ width: 100%;}
.skill .slickContent button{ display: none !important;}

/* 索取免費資源 */
.download{ padding: 80px 0; background: url(../images/images-downloadbg.jpg) no-repeat; background-position: right bottom;}
.download h2{ 
  font-size: 3rem; color: #fff; font-family: "Noto Serif TC", serif;
  font-optical-sizing: auto; font-weight: 600; font-style: normal;
}
.download h2 span{ color: #FFCF00;}
.download .row a{ display: block; margin: 15px 0; padding: 10px; width: 90%; font-size: 1.7rem; text-align: center; color: #E15FA4; 
  background-color: #fff; border-radius: 50px; box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.3); transform: translateY(0);
}
.download .row a:hover{ transform: translateY(-5px); transition: all 1s;}

/* 專屬課程優惠 */
.kpvip{ padding: 80px 0; position: relative;}
.kpvip::before{ 
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #FFCF00; z-index: -1; opacity: 0.4;
}
.kpvip h2{
  font-size: 2.2rem; font-family: "Noto Serif TC", serif;
  font-optical-sizing: auto; font-weight: 600; font-style: normal;
}
.kpvip h2 span{ color: #E15FA4;}
.kpvip .row a{ 
  display: block; margin: 15px 0; padding: 10px; width: 80%; font-size: 1.6rem; text-align: center; color: #fff; 
  background-color: #000; border-radius: 50px; border: 2px solid #fff; box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.3); transform: translateY(0);
}
.kpvip .row a:hover{ transform: translateY(-5px); transition: all 1s;}

/* 各系列連結 */
footer { background-color: #000;}
footer ul { display: flex; flex-wrap: wrap; gap: 8px 0px;}
footer ul li {  width: 20%;}
.footerText { font-size: 1.2rem;  color: #fff; text-decoration: none; position: relative;}
.footerText:hover{ color: #fff;}
.footerText::after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -2px;
    left: 45%;
    width: 0;
    height: 1px;
    background: #fff;
    transition: all 0.8s;
}
.footerText:hover::after{ left: 0; width: 99%;}

/* ===== other ====================================================================================== */

@media(max-width:1680px){

    /* 高普考導覽選單 */
    .kp-menu ul::before{ width: 50%;}
    .kp-menu ul::after{ width: 50%;}
}

@media(max-width:1280px){
  /* 高普考導覽選單 */
  .kp-menu ul::before{ width: 10%;}
  .kp-menu ul::after{ width: 10%;}
  .kp-menu ul li a{ padding: 0 24px; font-size: 1.4rem;}
}

@media(max-width:1180px){

  /* 留單按鈕 */
  .kp-btn{ display: flex; justify-content: center; text-align: center;}
  .kp-btn a{ width:40%; margin: 0 5px; font-size: 1.4rem;}

  /* 索取免費資源 */
  .download{ padding: 80px 0;}
  .download h2{ font-size: 2.5rem;}
  .download .row a{ margin: 15px 0; padding: 10px; width: 90%; font-size: 1.6rem;}

/* 專屬課程優惠 */
.kpvip{ padding: 80px 0; position: relative;}
.kpvip::before{ 
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #FFCF00; z-index: -1; opacity: 0.4;
}
.kpvip h2{
  font-size: 2.2rem; font-family: "Noto Serif TC", serif;
  font-optical-sizing: auto; font-weight: 600; font-style: normal;
}
.kpvip h2 span{ color: #E15FA4;}
.kpvip .row a{ 
  display: block; margin: 15px 0; padding: 10px; width: 80%; font-size: 1.6rem; text-align: center; color: #fff; 
  background-color: #000; border-radius: 50px; border: 2px solid #fff; box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.3); transform: translateY(0);
}
.kpvip .row a:hover{ transform: translateY(-5px); transition: all 1s;}

/* 高普考上榜生心路歷程報導---------------------------------------------------------------------------------------- */
.experience .experienceBox{ padding: 0px 20px 20px;}
.experience .experienceBox h3{ font-size: 1.3rem;}
.experience .experienceBox h4{ padding: 10px 0 5px; font-size: 1.3rem;}
.experience .experienceBox p{ text-align: left; line-height: 1.8rem;}
.experience .experienceBox p span{ display: inline-block; margin-left: 4px; padding: 0 10px; color: #fff; background-color: #1DAAD2; border-radius: 20px;}

/*輪播*/
.experience-swiper-fn {
    position: relative; margin: 40px 0px;
}
.experience-swiper-fn .swiper-wrapper {
    height: auto;
}
.experience-swiper-fn .swiper-slide {
    margin: 0px;
    padding: 0 8px;
}
}

@media(max-width:1024px){

  /* 高普考導覽選單 */
  .kp-menu ul::before{ width: 10%;}
  .kp-menu ul::after{ width: 10%;}
  .kp-menu ul li a{ padding: 0 20px; font-size: 1.4rem;}

  /* 高普考雙榜 各科準備秘訣公開 */
  .skill{ padding: 80px 2%;}

}

/* ===== 平板Tablet ====================================================================================== */

@media(max-width:992px){

  /* 刊頭 */
  header{}

  /* 高普考導覽選單 */
  .kp-menu ul{ flex-wrap: wrap; }
  .kp-menu ul::before,nav ul::after{ display: none; }
  .kp-menu ul li{ margin: 0 0 1px 0; width:50%; text-align: center; height: 50px; line-height: 50px; }
  .kp-menu ul li a{ font-size: 1.05rem; }
  .kp-menu ul li::before,.kp-menu ul li::after{ display: none;}

  /* 高普考上榜生心路歷程報導 */
  .skill {
    padding: 50px 1%;
  }
  .skill h2 {
    font-size: 6.3vw;
  }
  .skill .ipad {
    width: 100%;
    box-sizing: border-box;
    padding: 3vw 14% 17vw 16%;
  }
  .skill > img {
    right: 1%;
    width: 175px;
  }
  .skill .ipad > a {
    padding: 10px 0;
    font-size: 3vw;
    left: calc((100% - 300px) / 2);
    width: 300px;
  }

}


/* ===== 手機mobile ====================================================================================== */
@media(max-width:667px){

  /* 刊頭 */
  header{ background-image: url(../images/header-img-mobile.jpg); padding-bottom: 111%;}

  /* 高普考導覽選單 */
  .kp-menu ul{ flex-wrap: wrap; }
  .kp-menu ul::before,nav ul::after{ display: none; }
  .kp-menu ul li{ margin: 0 0 1px 0; width:50%; text-align: center; height: 50px; line-height: 50px; }
  .kp-menu ul li a{ font-size: 1.05rem; }
  .kp-menu ul li::before,.kp-menu ul li::after{ display: none;}

  /* h2標題 */
  section .kp-h2-title h2{ font-size: 2.2rem;}
  section .kp-h2-title p{ font-size: 1rem;}

  /* 留單按鈕 */
  .kp-btn{ flex-wrap: wrap; justify-content: center;}
  .kp-btn a{ width:90%; margin: 5px 0; padding: 12px 0; font-size: 1.2rem;}

  /* 熱門關注焦點------------------------------------------------------------------------------------------ */
  .kp-info{ padding: 40px 0;}
  .kp-info h3{font-size: 1.9rem;}

  /* 箭頭導引動畫 */
  .animation-arrow{ margin: 10px auto; text-align: center;}
  .animation-arrow .vertical-bar{ height: 30px;}
  .animation-arrow .vertical-bar .animation-bar{ height: 30px;}
  
  /* 公務員福利制度 */
  .kp-info .kp-point .kp-point-img{ width: 34%; padding: 5px 0;}
  .kp-info .kp-point .kp-point-img img{ width: 50%;}
  .kp-info .kp-point .kp-point-img h4{ font-size: 0.9rem;}
  .kp-info .kp-point p{ font-size: 1.1rem;}

  /* 高普考推薦類科---------------------------------------------------------------------------------------- */
  .kp-recommend{ padding: 40px 0;}
  .recommend-card>div{ width: 49%; margin: 2px 0; border-radius: 15px;}
  .recommend-card-text{ padding-bottom: 20px;}
  .recommend-card-text h3{ padding: 15px 0; font-size: 1.3rem; border-radius: 15px 15px 0 0;}
  .recommend-card-text h4{ padding: 15px 20px 0px; font-size: 1rem;}
  .recommend-card-text p{ font-size: 0.85rem;}
  .recommend-card-text a{ padding: 5px 0; width: 90%; font-size: 0.8rem;}

  /* 高普考上榜生心路歷程報導---------------------------------------------------------------------------------------- */
  .experience{ padding: 40px 0px 20px;}
  .experience .experienceBox{ padding: 0px 20px 20px;}
  .experience .experienceBox h3{ padding: 12px 0; font-size: 1.2rem;}
  .experience .experienceBox h4{ padding: 10px 0 0; font-size: 1.3rem;}
  .experience .experienceBox p{ font-size: 0.95rem; line-height: 1.6rem;}

  /*輪播*/
  .experience-swiper-fn { margin: 20px 0px;}
  .experience-swiper-fn .swiper-button-next {
    right: 0px;
  }
.experience-swiper-fn .swiper-button-prev {
    left: 0px;
}
  .experience-swiper-fn .swiper-pagination {
    margin: 10px auto 0px;
  }
  .experience-swiper-fn .swiper-pagination-bullet{
    width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
  }

  .skill{ padding: 0 1% 100px;}
  .skill > img{
    width: 25%;
    bottom: 20vw;
    right: 5%;
  }


  /* 索取免費資源 */
  .download{ padding: 20px 0; background: url(../images/images-downloadbg.jpg) no-repeat; background-position: center center;}
  .download h2{ font-size: 2.2rem; text-align: center;}
  .download .row a{ width: 100%; font-size: 1.3rem;}

  /* 專屬課程優惠 */
  .kpvip{ padding: 20px 0;}
  .kpvip h2{
    font-size: 1.5rem; text-align: center;
  }
  .kpvip .row a{ margin: 15px 0; padding: 10px; width: 100%; font-size: 1.3rem;}

  /* footer */
  .footerText{ font-size: 1rem;}

}