@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;}
  
  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:5px;  bottom:5px; width: 75px;  height: 75px; background-color: #fed300; display: flex; justify-content: center; align-items: center;
    opacity: 0;  transition: all 0.4s ease-in-out 0s;  z-index: 999;  border-radius: 50%; }
  .gotop a{  font-size:20px; color: #000; text-decoration:none;}
  .gotop:active{ box-shadow:1px 1px 3px 2px rgba(0,0,0,0.5) inset;transition: all 0s;}

/* == 桌機版優先 ============================================================================= */

/* header */
header{ margin:0; background:url(../images/header.jpg)no-repeat; width: 100%; height: 0; padding-bottom:36.45%; background-size:cover; }
header>div{ padding: 0 calc((100% - 1100px)/2);}
header>div .title{ padding: 17% 0 0 32%; text-align: center;}
header>div .title h2{ width:65%; margin: 0 auto; padding: 15px 0; font-size: 2.8em; color: #fed300; line-height:1; font-family: ar-fangxinshuh7b5std, sans-serif; background-color: #000; border-radius: 50px;}
header>div .title h1{ padding: 15px 0 0; font-size:11em; font-family: ar-fangxinshuh7b5std, sans-serif;}
header>div .title p{ margin: 0; padding: 0; font-size:2.3em; color: #e94a49; font-weight: 700;}

@keyframes arrowmove{
      0%{ transform: translateY(-8px);}
      20%{ /*從 20% 的地方才開始變形*/}
      50%{ transform: translateY(0px); }
      80%{ }
      100%{ transform: translateY(-10px)}
  }

  @keyframes bubbleup{
      0%{opacity:0;}
      50%{opacity:0.8;}
      90%{opacity:0.8;}
      100%{opacity:0;}
  }
/* 想進台糖？先認識台糖考試 */
.info{ padding:0 calc((100% - 1000px)/2) 100px;}
.info .title{  text-align: center;}
.info .title h2{ margin: 0 auto; display: inline-block; padding:5px 20px; font-size: 2.5em; color: #fff; background-color: #000;}
.info .title p{ padding: 20px 0 0; font-size: 1.2em; line-height: 1.6; color: #000; text-align: left;}
.info ul{ margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.info ul li{ margin: 20px 0; width: 47%; display: flex; align-items: center;}
.info ul li .pic img{ max-width: 100%;}
.info ul li .text{ width: 100%; padding-left:15px;}
.info ul li .text h3{ margin-bottom:5px; font-size: 1.3em; color: #e94a49;}
.info ul li .text p{ font-size: 1.2em; font-weight: 700; line-height: 1.4;}
.info span{ display: block; color: #666; text-align: center;}


/* 台糖工員與台糖職員差在哪？ */
.introduce{ padding:100px calc((100% - 1000px)/2); background-color: #e94a49; background-image: url(../images/introduce-bg.png); background-repeat: no-repeat; background-position: top left;}
.introduce .title{ margin-bottom:40px; text-align: center;}
.introduce .title h2{ margin: 0 auto; display: inline-block; padding:5px 20px; font-size: 2.5em; color: #fff; background-color: #000;}
.introduce .title p{ padding: 20px 0 0; font-size: 1.2em; line-height: 1.6; color: #fff; text-align: left;}
.introduce h3{ font-size: 1.8em; color: #fff; text-align: center;}
.introduce table{ margin:25px 0 0; width: 100%; border-spacing: 1px; border-collapse: separate;}
.introduce table th{ padding: 12px 0; font-size: 1.2em; background-color: #3ed7b7; text-align: center;}
.introduce table td{ padding: 12px; font-size: 1.1em; background-color: #fff;}
.introduce table td:nth-child(1){ width: 10%; text-align: center; background-color: #e5e5e5;}
.introduce td span{ color: #e94a49;}
.introduce .ps{ padding-top: 10px; text-align: right;}
.introduce .ctabtn{ margin-top: 50px;}
.introduce .ctabtn a{ display: block; margin: 0 auto; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; border-radius: 50px; text-decoration: none; 
      font-weight: 500; color: #fff; background-color: #000; border: 5px solid #e94a49; box-shadow: 0 0 0 1px #000;}
.introduce .ctabtn a:hover{ transform: translateY(2px);}

/* 台糖工員 VS 台糖職員推薦理由 */
.recommend{ padding:100px calc((100% - 1000px)/2); text-align: center;}
.recommend h2{ font-size: 2.8em;}
.recommend .subtitle{ margin: 10px 0; display: flex; justify-content: center;}
.recommend .subtitle div{ width: 65px; height: 65px; background-color: #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; 
      font-size: 1.8em; color: #fff; font-family: ar-fangxinshuh7b5std, sans-serif;}
.recommend ul{ margin: 50px 0; display: flex; justify-content:space-around;}
.recommend ul li{ width: 48%; text-align: center;}
.recommend ul li a{ display: block; cursor: pointer;}
.recommend ul li img{ max-width: 100%;}
.recommend ul li h3{ font-size: 2.6em;}
.recommend ul li h4{ font-size: 2em; color: #e94a49; font-weight: 500;}
.recommend ul li i{ font-size: 3em; color: #000; animation: arrowmove 1s linear infinite alternate;}
.recommend ul li .sublist{ display: none;}
.recommend ul li .sublist div{ margin:1px 0; width: 100%; padding: 10px 0; font-size: 1.2em; color: #000; background-color: #efefef;}
.recommend ul li .sublist div.colyellow{ background-color: #fed300;}
.recommend ul li .sublist div.colgreen{ background-color: #3ed7b7;}

/* 台糖考試超高投報術 */
.examcombine{ padding:100px calc((100% - 1000px)/2); text-align: center; background-color: #fed300; background-image: url(../images/examcombine-bg.png); background-repeat: no-repeat; background-position: top left;}
.examcombine .subtitle{ margin: 0 auto; display: inline-block; padding:5px 50px; font-size: 2em; color: #fff; background-color: #e94a49; border-radius: 50px;}
.examcombine h2{ padding: 20px 0; font-size: 3.3em;}
.examcombine p{ font-size: 1.2em; line-height: 1.6; text-align: left;}
.examcombine ul{ padding:40px 0 60px; display: flex; justify-content: space-between;}
.examcombine ul li{ width: 23%;}
.examcombine ul li img{ padding: 15px 0; max-width: 100%;}
.examcombine ul li h3{ padding: 10px 0; font-size: 2em; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.examcombine .ctabtn a{ display: block; margin: 0 auto; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; border-radius: 50px; text-decoration: none; 
      color: #fff; background-color: #000; border: 5px solid #fed300; box-shadow: 0 0 0 1px #000;}
.examcombine .ctabtn a:hover{ transform: translateY(2px);}


/*台糖好考嗎？快速上榜實錄*/
.experience{ padding:100px calc((100% - 1100px)/2); text-align: center;}
.experience h2{ font-size: 3em;}
.experience>div{ margin: 50px 0; display: flex; justify-content: center; align-items: center;}
.experience>div .pic img{ max-width: 100%;}
.experience>div .text{ margin-left:20px; width:60%; text-align: justify;}
.experience>div .text h3{ display: block; padding: 10px; font-size: 1.6em; color: #fff; background-color: #e94a49; border-radius: 0 50px 50px 0;}
.experience>div .text p{ padding: 10px 0; font-size: 1.1em; line-height: 1.8;}
.experience .btn{ display: flex; justify-content: center;}
.experience .btn a{ display: block; margin: 0 10px; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; border-radius: 50px; text-decoration: none; 
      background-color: #000; border: 5px solid #fff; box-shadow: 0 0 0 1px #000;}
.experience .btn a:hover{ transform: translateY(2px);}
.experience .btn a.A{ color: #3ed7b7;}
.experience .btn a.B{ color: #fed300;}


/*必備線上資源*/
.resource{ padding:100px calc((100% - 1100px)/2); background-color: #e94a49; background-image: url(../images/introduce-bg.png); background-repeat: no-repeat; background-position: top left;}
.resource h2{ padding: 20px 0; font-size: 3em; color: #fff; text-align: center;}
.resource p{ font-size: 1.4em; line-height: 1.6; color: #fff;}
.resource ul{ margin: 20px 0 60px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.resource ul li{ width: 33%; margin: 5px 0; padding: 15px; text-decoration: none; font-size: 1.6em; color: #e94a49; 
      background-color: #fff; border-radius: 5px;}
.resource .ctabtn a{ display: block; margin: 0 auto; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; border-radius: 50px; text-decoration: none; 
      font-weight: 500; color: #fff; background-color: #000; border: 5px solid #e94a49; box-shadow: 0 0 0 1px #000;}
.resource .ctabtn a:hover{ transform: translateY(2px);}


/*學習方式超多元*/
.studymode{ padding:100px calc((100% - 1200px)/2); text-align: center;}
.studymode h2{ font-size: 3em;}
.studymode h3{ margin: 20px 0; font-size:1.8em; color: #e94a49;}
.studymode ul{ width: 100%; margin:20px 0 50px; display: flex; justify-content: space-between;}
.studymode ul { display: flex; justify-content: space-between; margin: 60px 0px 40px 0px;}
.studymode ul:nth-of-type(2) { justify-content: space-evenly;}
.studymode ul li { width: 28.5%;}
.studymode ul li .topword { margin: 0px 0px 10px 0px; display: flex; justify-content: flex-start; align-items: center;}
.studymode ul li .topword .circle { display: flex; justify-content: flex-start; width: 40%;}
.studymode ul li .topword .circle span { width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; font-weight: 700; color: #3d85f9; border-radius: 999px; outline: #fbb03b 2px solid;}
.studymode ul li .topword p { width: 60%; padding: 3px 0px; margin: 0px; font-size: 1.35rem; font-weight: 700; font-style: italic; color: #fbb03b; text-align: justify; border-bottom: #fbb03b 2px solid; }
.studymode ul li .topword span:nth-child(2) { transform: translate(-2px);}
.studymode ul li .topword span:nth-child(3) { transform: translate(-4px);}
.studymode img { max-width: 100%; display: block; margin: 0 auto;}
.studymode ul li .box p { margin: 20px 0px 0px 0px; padding: 12px 0px 0px; font-size: 1.35rem; line-height: 1.6; color: #4d4d4d; border-top: #4d4d4d 1px solid;}
.studymode .btn{ display: flex; justify-content: center;}
.studymode .btn a{ display: block; margin: 0 10px; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; border-radius: 50px; text-decoration: none; 
      background-color: #000; border: 5px solid #fff; box-shadow: 0 0 0 1px #000;}
.studymode .btn a:hover{ transform: translateY(2px);}
.studymode .btn a.A{ color: #3ed7b7;}
.studymode .btn a.B{ color: #fed300;}
.studymodemobile { display: none;}

/* footer */
.FOOTER{ margin:1px 0 0;width:100%; background-color:#000;  overflow:hidden;}
.FOOTER-CON{ margin:0 auto; padding:50px 0; max-width:1200px; display: flex; justify-content: center; align-items: center; overflow:hidden; }
.FOOTER-CONL{ max-width:230px;}
.FOOTER-CONR ul{ margin:0; display: flex; flex-wrap: wrap;}
.FOOTER-CONR li{ width: 24%;}
.FOOTER-CONR li a{ display:block; padding:0; margin:0 40px 10px 0; height:21px; font-size:20px; text-decoration:none; color:#FFF;  }

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

@media(max-width:1680px){

      header>div .title{ padding: 16% 0 0 29%;}
}

@media(max-width:1440px){

      header>div .title{ padding: 15% 0 0 25%;}
      header>div .title h2{ width:55%; padding: 15px 0; font-size: 2.2em;}
      header>div .title h1{ padding: 15px 0 0; font-size:9.5em;}
      header>div .title p{ font-size:2em;}
}

@media(max-width:1280px){

      header>div .title{ padding: 14% 0 0 22%;}
      header>div .title h2{ width:45%; padding: 15px 0; font-size: 2em;}
      header>div .title h1{ padding: 15px 0 0; font-size:8em;}
      header>div .title p{ font-size:2em;}
      .info .title h2{ padding: 10px 20px; font-size: 2.2em;}
      .introduce .title h2{ padding:10px 20px; font-size: 2.2em;}

}

@media(max-width:1180px){

 /* header */
 header>div{ padding:0;}
 header>div .title{ padding: 9% 0 0 18%;}
 header>div .title h2{ width:40%; padding: 15px 0; font-size: 2em;}
 header>div .title h1{ padding: 15px 0 0; font-size:7.5em;}
 header>div .title p{ font-size:1.8em;}

 /* 想進台糖？先認識台糖考試 */
.info{ padding:0 10% 100px;}
.info .title h2{ padding: 10px 20px; font-size: 2em;}
.info .title p{ font-size: 1.1em;}
.info ul{ margin: 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.info ul li{ margin: 15px 0; width: 48%; display: flex; align-items: center;}
.info ul li .text{ width: 100%; padding-left:15px;}
.info ul li .text h3{ margin-bottom:5px; font-size: 1.3em; color: #e94a49;}
.info ul li .text p{ font-size: 1.2em; font-weight: 700; line-height: 1.4;}
.info span{ display: block; color: #666; text-align: center;}

/* 台糖工員與台糖職員差在哪？ */
.introduce{ padding:100px 10%;}
.introduce .title{ margin-bottom:20px; }
.introduce .title h2{ padding:10px 20px; font-size: 2em;}
.introduce .title p{ font-size: 1.1em; }
.introduce h3{ font-size: 1.6em;}
.introduce table th{ padding: 10px 0; font-size: 1.1em;}
.introduce table td{ padding: 10px; font-size: 1em;}
.introduce .ctabtn{ margin-top: 30px;}

/* 台糖工員 VS 台糖職員推薦理由 */
.recommend{ padding:100px 10%;}
.recommend h2{ font-size: 2.8em;}
.recommend ul{ margin: 40px 0 0;}

/* 台糖考試超高投報術 */
.examcombine{ padding:100px 10%;}

/*台糖好考嗎？快速上榜實錄*/
.experience{ padding:100px 10%;}
.experience h2{ font-size: 3em;}
.experience>div{ margin: 40px 0;}
.experience>div .text{ width: 70%;}

/*必備線上資源*/
.resource{ padding:80px 10%;}
.resource h2{ font-size: 3em;}
.resource p{ padding: 20px 0; font-size: 1.4em;}
.resource ul{ margin: 10px 0 40px;}
.resource ul li{ width: 33%; margin: 5px 0; padding: 15px; font-size: 1.4em;}

/*學習方式超多元*/
.studymode{ padding:80px 5%;}
.studymode h2{ font-size: 3em;}
.studymode h3{ margin:10px 0; font-size:1.5em;}
.studymode ul{ width: 100%; margin:20px 0 50px;}
.studymode ul li{ margin:0 10px; padding:0;}
.studymode ul li .topword .circle span { width: 30px; height: 30px; font-size: 1.25rem;}
.studymode ul li .topword p { font-size: 1rem;}
.studymode ul li .box p { margin: 20px 0px 0px 0px; padding: 12px 0px 0px; font-size: 1.15rem; line-height: 1.6; color: #4d4d4d; border-top: #4d4d4d 1px solid;}

 /* footer */
 .FOOTER-CONR li{ width: 25%;}
 .FOOTER-CONR li a{ font-size:18px;}
}

@media(max-width:1024px){

 /* header */
 header>div{ padding:0;}
 header>div .title{ padding: 9% 0 0 18%;}
 header>div .title h2{ width:35%; padding: 15px 0; font-size: 1.6em;}
 header>div .title h1{ padding: 15px 0 0; font-size:6.5em;}
 header>div .title p{ font-size:1.3em;}
}

/* ===== table ====================================================================================== */

@media(max-width:820px){

 /* header */
 header{ background:url(../images/header-mobile.jpg)no-repeat; padding-bottom:100%; background-size: cover;}
 header>div{ padding:0;}
 header>div .title{ padding: 50% 0 0 0;}
 header>div .title h2{ width:70%; font-size: 3em;}
 header>div .title h1{ font-size:10em;}
 header>div .title p{ font-size:1.8em;}

 /* 想進台糖？先認識台糖考試 */
.info{ padding:20px 5% 100px;}
.info .title h2{ font-size: 2.2em;}
.info .title p{ font-size: 1.1em;}
.info ul{ margin: 20px 0;}
.info ul li{ margin: 15px 0; width: 49%;}
.info ul li .text{ width: 100%; padding-left:15px;}
.info ul li .text h3{ font-size: 1.3em;}
.info ul li .text p{ font-size: 1.1em;}


/* 台糖工員與台糖職員差在哪？ */
.introduce{ padding:80px 5%;}
.introduce .title{ margin-bottom:20px; }
.introduce .title h2{ font-size: 2.2em;}
.introduce .title p{ font-size: 1.1em;}
.introduce h3{ font-size: 1.6em;}
.introduce table{ margin:20px 0 0;}
.introduce table th{ padding: 12px 5px; font-size: 1.1em;}
.introduce table td{ padding: 12px 5px; font-size: 1em;}
.introduce table td:nth-child(1){ width: 12%;}
.introduce .ps{ padding-top: 5px;}
.introduce .ctabtn{ margin-top: 30px;}
.introduce .ctabtn a{ width: 300px; font-size: 1.3em;}

/* 台糖工員 VS 台糖職員推薦理由 */
.recommend{ padding:80px 5%;}
.recommend h2{ font-size: 2.8em;}
.recommend .subtitle{ margin: 10px 0;}
.recommend .subtitle div{ width: 55px; height: 55px; font-size: 1.5em;}
.recommend ul{ margin: 40px 0 0;}
.recommend ul li{ width: 49%;}
.recommend ul li h3{ font-size: 2.5em;}
.recommend ul li h4{ font-size: 1.8em;}
.recommend ul li i{ font-size: 3em;}
.recommend ul li .sublist div{ font-size: 1.1em;}

/* 台糖考試超高投報術 */
.examcombine{ padding:80px 5%;}
.examcombine .subtitle{ padding:5px 40px; font-size: 1.8em;}
.examcombine h2{ padding: 20px 0; font-size: 3em;}
.examcombine p{ font-size: 1.1em;}
.examcombine ul{ padding:20px 0 50px; flex-wrap: wrap; justify-content: center;}
.examcombine ul li{ width: 40%; margin: 10px 15px;}
.examcombine .ctabtn a{ width: 320px; font-size: 1.3em;}

/*台糖好考嗎？快速上榜實錄*/
.experience{ padding:80px 5%;}
.experience h2{ font-size: 2.8em;}
.experience>div{ margin: 40px 0; flex-wrap: wrap;}
.experience>div .text{ margin-left:0; width:100%;}
.experience>div .text h3{ font-size: 1.6em; text-align: center; border-radius: 50px;}
.experience>div .text p{ padding: 10px 0; font-size: 1.1em; line-height: 1.8;}
.experience .btn{ display: flex; justify-content: center;}
.experience .btn a{ margin: 0 5px; width: 320px; font-size: 1.3em;}

/*必備線上資源*/
.resource{ padding:80px 5%;}
.resource h2{ font-size: 2.8em;}
.resource p{ padding: 10px 5%; font-size: 1.4em;}
.resource ul{ margin: 10px 0 40px;}
.resource ul li{ width: 32%; margin: 5px 0; font-size: 1.2em;}
.resource .ctabtn a{ width: 300px; font-size: 1.3em;}

/*學習方式超多元*/
.studymode{ padding:80px 2%;}
.studymode h2{ font-size: 2.8em;}
.studymode h3{ margin: 20px 0; font-size:1.5em;}
.studymode ul{ width: 100%; margin:20px 0 30px;}
.studymode ul li{ margin:0 10px; padding:0;}
.studymode ul li img{ max-width: 100%;}
.studymode ul li h4{ padding: 10px 0; font-size: 1.3em;}
.studymode ul li .box p{ font-size: 1rem;}
.studymode .btn a{ width: 300px; font-size: 1.3em;}

}

/* ===== phone ========================================================================================= */
@media(max-width:767px){


 /* header */
 header{ margin:0;}
 header>div .title{ padding: 50% 0 0 0;}
 header>div .title h2{ width:65%; font-size: 1.3em;}
 header>div .title h1{ padding:5px 0 0; font-size:5em;}
 header>div .title p{ font-size:1.1em;}

  /* 想進台糖？先認識台糖考試 */
.info{ padding:20px 5% 60px;}
.info .title h2{ font-size: 1.3em;}
.info .title p{ font-size: 1em;}
.info ul{ margin:0 0 10px;}
.info ul li{ margin: 12px 0; width:100%;}
.info ul li .text h3{ font-size: 1.3em;}
.info ul li .text p{ font-size: 1em;}

/* 台糖工員與台糖職員差在哪？ */
.introduce{ padding:60px 5%;}
.introduce .title{ margin-bottom:20px; }
.introduce .title h2{ font-size: 1.3em;}
.introduce .title p{ padding: 10px 0 0; font-size: 1em;}
.introduce h3{ font-size: 1.1em;}
.introduce table{ margin:20px 0 0;}
.introduce table th{ padding: 5px; font-size: 1em;}
.introduce table td{ padding: 5px; font-size: 14px;}
.introduce .ps{ padding-top: 10px;}
.introduce .ctabtn{ margin-top: 20px;}
.introduce .ctabtn a{ width: 280px; font-size: 1.2em;}

/* 台糖工員 VS 台糖職員推薦理由 */
.recommend{ padding:60px 5%;}
.recommend h2{ font-size: 2.1em;}
.recommend .subtitle div{ width: 50px; height: 50px;}
.recommend ul{ margin:0; flex-wrap: wrap;}
.recommend ul li{ margin: 10px 0; width: 100%;}
.recommend ul li h3{ font-size: 2em;}
.recommend ul li h4{ font-size: 1.5em;}
.recommend ul li i{ font-size: 3em;}
.recommend ul li .sublist div{ font-size: 1em;}

/* 台糖考試超高投報術 */
.examcombine{ padding:60px 5%;}
.examcombine .subtitle{ padding:5px 40px; font-size: 1.4em;}
.examcombine h2{ padding: 10px 0; font-size: 2.1em;}
.examcombine p{ font-size: 1em;}
.examcombine ul{ padding:0 0 20px; flex-wrap: wrap; justify-content:space-between;}
.examcombine ul li{ width: 45%; margin: 10px 0;}
.examcombine ul li h3{ font-size: 1.3em;}
.examcombine .ctabtn a{ width: 300px; font-size: 1.2em;}

/*台糖好考嗎？快速上榜實錄*/
.experience{ padding:60px 5%;}
.experience h2{ font-size: 1.8em;}
.experience>div{ margin: 20px 0 0;}
.experience>div .text{ margin-left:0; width:100%;}
.experience>div .text h3{ font-size: 1.2em;}
.experience>div .text p{ padding: 10px 0; font-size: 1em; line-height: 1.6;}
.experience .btn{ display: flex; justify-content: center; flex-wrap: wrap;}
.experience .btn a{ margin: 10px 0; width: 320px; font-size: 1.2em;}

/*必備線上資源*/
.resource{ padding:60px 5%;}
.resource h2{ padding: 20px 0 10px; font-size: 1.8em;}
.resource p{ padding: 0; font-size:1em; text-align:justify;}
.resource ul{ margin: 10px 0 30px; flex-wrap: wrap;}
.resource ul li{ width: 48%; margin: 5px 0; font-size: 1.1em;}
.resource ul li:nth-child(7){ width: 100%;}
.resource ul li:nth-child(8){ width: 100%;}
.resource ul li:nth-child(9){ width: 100%;}
.resource .ctabtn a{ padding: 15px 0; width: 300px; font-size: 1.3em;}

/*學習方式超多元*/
.studymode {display: none;}
.studymodemobile { display: block;padding:60px 4%; text-align: center;}
.studymodemobile h2{ font-size: 2em;}
.studymodemobile h3{ font-size:1.2em; color: #e94a49;}
.studymodemobile ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 25px; margin: 25px 0px 40px 0px;}
.studymodemobile ul li { width: 100%;}
.studymodemobile ul li a { cursor: pointer;}
.studymodemobile ul li .topword { margin: 0px 0px 10px 0px; display: flex; justify-content: flex-start; align-items: center;}
.studymodemobile ul li .topword .circle { display: flex; justify-content: flex-start; width: 40%;}
.studymodemobile ul li .topword .circle span { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: 700; color: #3d85f9; border-radius: 999px; outline: #fbb03b 2px solid;}
.studymodemobile ul li .topword p { width: 60%; padding: 3px 0px; font-size: 1.6rem; font-weight: 700; font-style: italic; color: #fbb03b; text-align: justify; border-bottom: #fbb03b 2px solid;}
.studymodemobile ul li .topword span:nth-child(2) { transform: translate(-2px);}
.studymodemobile ul li .topword span:nth-child(3) { transform: translate(-4px);}
.studymodemobile img { display: block; max-width: 100%; margin: 0 auto;}
.studymodemobile ul li i { padding: 15px 0px 10px 0px; font-size: 3rem; animation: arrowmove 1s linear infinite alternate;}
.studymodemobile ul li .sublist { display: none;}
.studymodemobile ul li .sublist p { display: inline-block; padding: 12px 0px 0px; font-size: 1.6rem; line-height: 1.6; color: #4d4d4d; border-top: #4d4d4d 1px solid;}
.studymodemobile .btn{ margin:0; display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 15px;}
.studymodemobile .btn a{ display: block; margin: 0 10px; padding: 15px 0; width: 320px; font-size: 1.3em; text-align: center; border-radius: 50px; text-decoration: none; background-color: #000; border: 5px solid #fff; box-shadow: 0 0 0 1px #000;}
.studymodemobile .btn a:hover{ transform: translateY(2px);}
.studymodemobile .btn a.A{ color: #3ed7b7;}
.studymodemobile .btn a.B{ color: #fed300;}
}

.gotop { right: 15px; bottom: 255px;}

@media(max-width:600px){

 /* footer */
 .FOOTER-CON{flex-wrap: wrap;}
 .FOOTER-CONR{width: 100%;margin: 0 auto;}
 .FOOTER-CONR ul{margin-top:20px; justify-content: center;}
 .FOOTER-CONR ul li{width:33%;text-align: center;}
 .FOOTER-CONR li a{margin: 0 0 10px 0;font-size:18px;}
}

@media (max-width: 430px) {

/* 多元學習模式 */
.studymodemobile ul li .topword .circle { width: 30%;}
.studymodemobile ul li .topword .circle span { width: 33px; height: 33px; font-size: 1.6rem;}
.studymodemobile ul li .topword p { width: 70%; font-size: 1.15rem; margin: 0;}
.studymodemobile ul li i { font-size: 2rem;}
.studymodemobile ul li .sublist p { font-size: 1.3rem;}
}