@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: #4b4b4b; 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: #fff; text-decoration:none;}
  .gotop:active{ box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;transition: all 0s;}

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

/* header */
header{ margin:0; background:url(../images/header.jpg)no-repeat; width: 100%; height: 0; padding-bottom:28.64%; background-size:cover; }
header .head{ padding:18% 0 0; text-align: center;}
header .head h2{ margin:0 0 20px; font-size: 3.3em; line-height: 1; color: #4b4b4b;}
header .head h1{ margin:0; font-size: 8.5em; line-height: 1; color: #23b9e8;}

@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;}
  }

/* 中油利多 */
.advantage{ padding: 50px calc((100% - 1200px)/2) 20px;}
.advantage ul{ display: flex; justify-content: space-between; text-align: center;}
.advantage ul li{ width: 33%; padding: 15px 0; font-size: 2em; color: #fff; font-weight: 700; background-color: #23b9e8; border-bottom: 6px solid #df2424;}

/* 中油介紹 */
.cpcinfo{ padding: 50px calc((100% - 1100px)/2) 120px; text-align: center;}
.cpcinfo h2{ font-size: 3em; color: #4b4b4b;}
.cpcinfo p{ padding: 20px 0 0; font-size: 1.4em; line-height: 1.6; color: #000;}
.cpcinfo>div{ padding: 40px 0 0; display: flex; justify-content: center; align-items: center;}
.cpcinfo>div img{ margin-right: 20px; max-width: 100%; aspect-ratio: 38/36;}
.cpcinfo>div ul{ width: 60%; text-align: left; overflow: hidden;}
.cpcinfo>div ul li{ width:100%; margin: 5px 0; padding: 15px; font-size: 1.6em; color: #fff; font-weight:700; background-color: #ffa73f; border-radius: 0 50px 50px 0;}
.cpcinfo>div ul li:nth-child(even){ background-color: #4b4b4b;}

/* 中油僱員與職員差在哪？ */
.difference{ padding:100px calc((100% - 1100px)/2); text-align: center; background-color: #ffa73f; 
      background-image: url(../images/difference-bg.jpg); background-repeat: no-repeat; background-position: top center;}
.difference h2{ font-size: 3em; color: #4b4b4b;}
.difference p{ padding: 20px 0 40px; font-size: 1.4em; line-height: 1.6;}
.difference h3{ display: inline-block; padding: 15px 30px; font-size: 1.7em; color: #fff; background-color: #23b9e8;}
.difference table{ margin: 20px 0 40px; width: 100%; border-spacing: 4px; border-collapse: separate;}
.difference table th{ padding: 15px; font-size: 1.4em; color: #fff; font-weight: 700; background-color: #4b4b4b; border-radius: 10px;}
.difference table td{ padding: 15px; font-size: 1.2em; line-height: 1.5; background-color: #ffffff; border-radius: 10px; text-align: left;}
.difference table td:nth-child(1){ width: 16%; font-size: 1.4em; color: #fff; font-weight: 700; background-color: #4b4b4b; text-align: center;}
.difference table td:nth-child(2){ width: 42%;}
.difference table td:nth-child(3){ width: 42%;}
.difference table td span{ color: #df2424;}
.difference .btn{ display: flex; justify-content: center;}
.difference .btn a{ display: block; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; background-color: #df2424; 
      border-radius: 50px; text-decoration: none; font-weight: 500; color: #fff; box-shadow: 0px 8px 0 rgba(176,37, 37, 1);}
.difference .btn a:hover{ transform: translateY(4px); box-shadow: 0px 4px 0 rgba(176,37, 37, 1);}

/* 中油僱員VS中油職員推薦理由 */
.suggest{ padding:100px calc((100% - 1200px)/2);}
.suggest h2{ font-size: 3em; color: #4b4b4b; text-align: center;}
.suggest .subtitle{ display:flex; justify-content: center;}
.suggest .subtitle p{ display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; font-size: 2em; color:#fff; background-color: #df2424; border-radius: 50%;}
.suggest ul{ margin: 40px 0; display: flex; justify-content:space-around; }
.suggest ul li{ width: 46%; text-align: center;}
.suggest ul li a{ display: block; cursor: pointer;}
.suggest ul li a img{ max-width: 100%;}
.suggest ul li a i{ display: block; font-size: 4.5em; animation: arrowmove 1s linear infinite alternate;}
.suggest ul li:nth-child(1) a i{ color: #f6a742;}
.suggest ul li:nth-child(2) a i{ color: #00a9e0;}
.suggest ul li .suggest-box{ display: none; width: 100%; text-align: left;}
.suggest ul li .suggest-box p{ margin: 2px 0; padding: 10px; font-size: 1.4em; background-color: #f3edea;}
.suggest ul li .suggest-boxA01 i{ color: #f6a742;}
.suggest ul li .suggest-boxA02 i{ color: #00a9e0;}


/*中油考試超高投報術*/
.many{ padding: 100px calc((100% - 1100px)/2); text-align: center; background-color: #23b9e8; background-image: url(../images/many-02.jpg); 
      background-position: top left; background-repeat: no-repeat; background-size: cover;}
.many h2{ padding: 20px 0;  font-size: 3.3em; color: #fff;}
.many h3{ display: inline-block; padding: 12px 40px; font-size: 1.7em; color: #fff; border: 2px solid #fff; border-radius: 50px;}
.many p{ padding: 0 10%; font-size: 1.4em; line-height: 1.6;}
.many .many-main{ padding: 50px 0; display: flex; justify-content: center; align-items: center;}
.many .many-main ul{ width: 30%;}
.many .many-main ul li a{ display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 75px; line-height: 75px;
      background-color: #4b4b4b; border-radius: 50px; font-size: 2.2em; color: #fff; margin: 4px 0;}
.many .many-main ul li h4{ width: 23%; display: block; padding-left: 10px; background-color: #df2424; border-radius: 50px 0 0 50px;}
.many .many-main ul li h5{ width: 77%; display: block; text-align: left; padding-left: 20px;}
.many .many-main img{ margin: 0 40px; max-width: 100%;}
.many .btn{ display: flex; justify-content: center;}
.many .btn a{ display: block; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; background-color: #ff8a00; 
      border-radius: 50px; text-decoration: none; font-weight: 500; color: #fff; box-shadow: 0px 8px 0 rgba(221,121, 3, 1);}
.many .btn a:hover{ transform: translateY(4px); box-shadow: 0px 4px 0 rgba(221,121, 3, 1);}


/*我們都在 志光．保成．學儒 快速考取*/
.experience{ padding:100px calc((100% - 1200px)/2); text-align: center; overflow: hidden;}
.experience img{ max-width: 100%;}
.experience h2{ padding: 15px 0; font-size: 3em; color: #4b4b4b;}
.experience ul{ margin: 40px 0; display: flex; justify-content: center;}
.experience ul li{ width: 45%; margin: 0 10px; padding:60px 40px 40px; background-color: #f3edea; border-radius: 20px; position: relative;}
.experience ul li>div{ padding:10px 0; width: 60%; font-size: 2.3em; color: #fff; background-color: #00a9e0; border-radius: 50px; 
      position: absolute; top: -30px; left: calc((100% - 60%)/2);}
.experience ul li img{ max-width: 100%;}
.experience ul li h3{ font-size: 2.2em; color: #ff8a00;}
.experience ul li h4{ font-size: 2.2em; color: #4b4b4b;}
.experience ul li p{ padding: 5px 0; font-size: 1.2em; line-height: 1.6; text-align: justify;}
.experience .btn{ margin:0; display: flex; justify-content: center;}
.experience .btn a.A{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; background-color: #ff8a00; 
      border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff; box-shadow: 0px 8px 0 rgba(221,121, 3, 1);}
.experience .btn a.B{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; background-color: #df2424; 
            border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff; box-shadow: 0px 8px 0 rgba(176,37, 37, 1);}
.experience .btn a.A:hover{ transform: translateY(4px); box-shadow: 0px 4px 0 rgba(221,121, 3, 1);}
.experience .btn a.B:hover{ transform: translateY(4px); box-shadow: 0px 4px 0 rgba(176,37, 37, 1);}


/*必備線上資源*/
.resource{ padding:100px calc((100% - 1000px)/2); background-color: #fbab18; background-image: url(../images/resource-bg.jpg); 
      background-repeat: no-repeat; background-position: top left; background-size: cover;}
.resource h2{ font-size: 3em; color: #4b4b4b; text-align: center;}
.resource p{ padding: 20px 10%; font-size: 1.4em; line-height: 1.6; text-align: center;}
.resource .resource-btn{ margin: 10px 0 40px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.resource .resource-btn a{ width: 33%; margin: 5px 0; padding: 15px; text-decoration: none; font-size: 1.6em; color: #fff; 
      background-color: #4b4b4b; border-radius: 5px;}

.resource .btn{ display: flex; justify-content: center;}
.resource .btn a{ display: block; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; background-color: #df2424; 
      border-radius: 50px; text-decoration: none; font-weight: 500; color: #fff; box-shadow: 0px 8px 0 rgba(176,37, 37, 1);}
.resource .btn a:hover{ transform: translateY(4px); box-shadow: 0px 4px 0 rgba(176,37, 37, 1);}

/*考中油學習方式超多元*/
.studymode{ padding:100px calc((100% - 1200px)/2); text-align: center;}
.studymode h2{ font-size: 3em; font-weight: 500; color: #4b4b4b;}
.studymode h3{ display: inline-block; margin: 30px 0; padding: 10px 20px; font-size:1.6em; color: #fff; background-color: #000;}
.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; 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{ margin:0; display: flex; justify-content: center;}
.studymode .btn a.A{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; background-color: #ff8a00; 
      border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff; box-shadow: 0px 8px 0 rgba(221,121, 3, 1);}
.studymode .btn a.B{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.6em; text-align: center; background-color: #df2424; 
            border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff; box-shadow: 0px 8px 0 rgba(176,37, 37, 1);}
.studymode .btn a.A:hover{ transform: translateY(4px); box-shadow: 0px 4px 0 rgba(221,121, 3, 1);}
.studymode .btn a.B:hover{ transform: translateY(4px); box-shadow: 0px 4px 0 rgba(176,37, 37, 1);}
.studymodemobile { display: none;}

/* footer */
.FOOTER{ margin:1px 0 0;width:100%; background-color:#2c3c49;  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 */
 header .head{ padding:18% 0 0;}
 header .head h2{ font-size: 3.1em;}
 header .head h1{ font-size: 7.2em;}
}

@media(max-width:1440px){

 /* header */
 header .head{ padding:18% 0 0;}
 header .head h2{ font-size: 2.8em;}
 header .head h1{ font-size: 6.8em;}
}

@media(max-width:1280px){

 /* header */
 header .head{ padding:18% 0 0;}
 header .head h2{ margin: 0 0 10px; font-size: 2.3em;}
 header .head h1{ font-size: 5.5em;}

}

@media(max-width:1180px){

 /* header */
 header{ background:url(../images/header-mobile.jpg)no-repeat; padding-bottom: 86%; background-size: cover;}
 header .head{ display: none;}

 /* 中油利多 */
.advantage{ padding: 20px 2%;}
.advantage ul li{ font-size: 2em;}

.path{ margin: 0; padding: 0 2%;}
.path ol{ margin:0; padding:0;}

/* 中油介紹 */
.cpcinfo{ padding: 50px 2%;}
.cpcinfo h2{ font-size: 3em;}
.cpcinfo p{ font-size: 1.4em;}
.cpcinfo>div{ padding: 40px 0 0;}
.cpcinfo>div ul{ width: 60%;}
.cpcinfo>div ul li{ font-size: 1.5em;}

/* 中油僱員與職員差在哪？ */
.difference{ padding:100px 2%;}
.difference h2{ font-size: 3em;}
.difference p{ padding: 20px 0 40px; font-size: 1.4em;}
.difference h3{ padding: 15px 30px; font-size: 1.7em;}
.difference table{ margin: 20px 0 40px; width: 100%; border-spacing: 4px;}
.difference table th{ padding: 15px; font-size: 1.3em;}
.difference table td{ padding: 15px; font-size: 1.1em;}
.difference table td:nth-child(1){ width: 16%; font-size: 1.3em;}
.difference table td:nth-child(2){ width: 42%;}
.difference table td:nth-child(3){ width: 42%;}
.difference .btn{ display: flex; justify-content: center;}
.difference .btn a{ width: 320px; font-size: 1.5em;}

/* 中油僱員VS中油職員推薦理由 */
.suggest{ padding:100px 2%;}
.suggest h2{ font-size: 3em;}
.suggest .subtitle p{ width: 60px; height: 60px; font-size: 2em;}
.suggest ul{ margin: 40px 0; display: flex; justify-content:space-around; }
.suggest ul li{ width: 46%;}
.suggest ul li a img{ max-width: 100%;}
.suggest ul li a i{ display: block; font-size: 4.5em;}
.suggest ul li .suggest-box{ display: none; width: 100%;}
.suggest ul li .suggest-box p{ padding: 10px; font-size: 1.3em;}

/*中油考試超高投報術*/
.many{ padding: 100px 2%;}
.many h2{ padding: 20px 0;  font-size: 3em;}
.many h3{ padding: 12px 40px; font-size: 1.7em;}
.many p{ padding: 0 10%; font-size: 1.4em;}
.many .many-main{ padding: 50px 0;}
.many .many-main ul{ width: 30%;}
.many .many-main ul li a{ font-size: 2em;}
.many .many-main ul li h4{ width: 23%; padding-left: 10px;}
.many .many-main ul li h5{ width: 77%; padding-left: 20px;}
.many .many-main img{ margin: 0 20px; max-width: 100%;}
.many .btn a{ width: 320px; font-size: 1.5em;}

/*我們都在 志光．保成．學儒 快速考取*/
.experience{ padding:100px 2%;}
.experience img{ max-width: 100%;}
.experience h2{ padding: 15px 0; font-size: 3em;}
.experience ul{ margin: 40px 0;}
.experience ul li{ width: 46%; margin: 0 10px; padding:60px 40px 40px;}
.experience ul li>div{ padding:10px 0; width: 60%; font-size: 2.3em; top: -30px; left: calc((100% - 60%)/2);}
.experience ul li h3{ font-size: 2.2em;}
.experience ul li h4{ font-size: 2.2em;}
.experience ul li p{ font-size: 1.1em;}
.experience .btn a.A{ width: 320px; font-size: 1.5em; }
.experience .btn a.B{ width: 320px; font-size: 1.5em;}

/*必備線上資源*/
.resource{ padding:100px 2%;}
.resource h2{ font-size: 3em;}
.resource p{ padding: 20px 10%; font-size: 1.4em;}
.resource .resource-btn{ margin: 10px 0 40px;}
.resource .resource-btn a{ width: 33%; margin: 5px 0; padding: 15px; font-size: 1.4em;}
.resource .btn a{ width: 320px; font-size: 1.5em;}

/*考中油學習方式超多元*/
.studymode{ padding:100px 2%;}
.studymode h2{ font-size: 3em;}
.studymode h3{ margin: 20px 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.25rem; line-height: 1.6; color: #4d4d4d; border-top: #4d4d4d 1px solid;}
.studymode .btn a.A{ width: 320px; font-size: 1.5em;}
.studymode .btn a.B{ width: 320px; font-size: 1.5em;}

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

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

@media(max-width:820px){

/* 中油利多 */
.advantage{ padding: 0 2%;}
.advantage ul{ flex-wrap: wrap; justify-content: center;}
.advantage ul li{ width: 80%; margin: 5px 0; padding: 15px 0; font-size: 1.8em;}

/* 中油介紹 */
.cpcinfo{ padding: 20px 2% 80px;}
.cpcinfo h2{ font-size: 2.8em;}
.cpcinfo p{ padding: 10px 0 0; font-size: 1.2em;}
.cpcinfo>div{ padding: 20px 0 0;}
.cpcinfo>div img{ margin-right: 20px; max-width: 35%;}
.cpcinfo>div ul{ width: 65%;}
.cpcinfo>div ul li{ padding: 15px; font-size: 1.2em;}

/* 中油僱員與職員差在哪？ */
.difference{ padding:80px 2%;}
.difference h2{ font-size: 2.8em;}
.difference p{ padding: 10px 0 20px; font-size: 1.2em;}
.difference h3{ font-size: 1.5em;}
.difference table th{ padding: 10px; font-size: 1.2em;}
.difference table td{ padding: 10px; font-size: 1.1em;}
.difference table td:nth-child(1){ width: 16%; font-size: 1.2em;}
.difference table td:nth-child(2){ width: 42%;}
.difference table td:nth-child(3){ width: 42%;}
.difference .btn a{ width: 320px; font-size: 1.5em;}

/* 中油僱員VS中油職員推薦理由 */
.suggest{ padding:80px 2% 50px;}
.suggest h2{ font-size: 2.8em;}
.suggest .subtitle p{ width: 50px; height: 50px; font-size: 1.8em;}
.suggest ul{ margin: 20px 0;}
.suggest ul li{ width: 46%;}
.suggest ul li a img{ max-width: 100%;}
.suggest ul li a i{ font-size: 4.5em;}
.suggest ul li .suggest-box p{ font-size: 1.1em;}

/*中油考試超高投報術*/
.many{ padding: 80px 4%;}
.many h2{ padding: 10px 0; font-size: 2.8em;}
.many h3{ padding: 12px 40px; font-size: 1.7em;}
.many p{ padding: 0 5%; font-size: 1.4em;}
.many .many-main{ padding: 30px 0;}
.many .many-main ul{ width: 35%;}
.many .many-main ul li a{ height: 55px; line-height: 55px; font-size: 1.5em;}
.many .many-main ul li h4{ width: 23%; padding-left: 5px;}
.many .many-main ul li h5{ width: 77%; padding-left: 10px;}
.many .many-main img{ margin: 0 10px; max-width: 30%;}
.many .btn a{ width: 320px; font-size: 1.5em;}

/*我們都在 志光．保成．學儒 快速考取*/
.experience{ padding:80px 2%;}
.experience img{ max-width: 100%;}
.experience h2{ font-size: 2.8em;}
.experience ul{ margin: 40px 0; flex-wrap: wrap;}
.experience ul li{ width: 80%; margin: 10px 0 60px; padding:60px 40px 40px;}
.experience ul li:last-child{ margin: 10px 0 0;}
.experience ul li>div{ width: 60%; font-size: 2em; left: calc((100% - 60%)/2);}
.experience ul li h3{ font-size: 2em;}
.experience ul li h4{ font-size: 2em;}
.experience ul li p{ font-size: 1.2em;}
.experience .btn a.A{ margin: 0 5px; width: 320px; font-size: 1.5em; }
.experience .btn a.B{ margin: 0 5px; width: 320px; font-size: 1.5em;}

/*必備線上資源*/
.resource{ padding:100px 2%;}
.resource h2{ font-size: 2.8em;}
.resource p{ padding: 10px 5%; font-size: 1.4em;}
.resource .resource-btn{ margin: 10px 0 40px;}
.resource .resource-btn a{ width: 32%; margin: 5px 0; font-size: 1.3em;}
.resource .btn a{ width: 320px; font-size: 1.5em;}

/*考中油學習方式超多元*/
.studymode{ padding:80px 2%;}
.studymode h2{ font-size: 2.8em;}
.studymode h3{ margin: 20px 0; font-size:1.5em;}
.studymode ul{ margin:20px 0 30px;}
.studymode ul li .box p{font-size: 1rem;}
.studymode .btn a.A{ margin: 0 5px; width: 320px; font-size: 1.5em;}
.studymode .btn a.B{ margin: 0 5px; width: 320px; font-size: 1.5em;}

}

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

 header{ margin: 0; background:url(../images/header-mobile.jpg)no-repeat; padding-bottom: 86%; background-size: cover;}

 /* 中油利多 */
.advantage ul li{ padding: 10px 0; font-size: 1.3em;}

/* 中油介紹 */
.cpcinfo{ padding: 20px 4% 65px;}
.cpcinfo h2{ font-size: 1.8em;}
.cpcinfo p{ padding: 10px 0 0; font-size:16px; text-align:justify;}
.cpcinfo>div{ padding: 20px 0 0; flex-wrap: wrap;}
.cpcinfo>div img{ margin-right: 0; max-width: 60%;}
.cpcinfo>div ul{ width: 100%;}
.cpcinfo>div ul li{ padding: 15px; font-size: 1em; border-radius: 0 10px 10px 0;}

/* 中油僱員與職員差在哪？ */
.difference{ padding:65px 4%;}
.difference h2{ font-size: 1.8em;}
.difference p{ padding: 10px 0 20px; font-size:16px; text-align:justify;}
.difference h3{ font-size: 1.2em;}
.difference table th{ padding: 8px; font-size: 1em;}
.difference table td{ padding: 8px; font-size: 1em;}
.difference table td:nth-child(1){ width: 18%; font-size: 1em;}
.difference table td:nth-child(2){ width: 41%;}
.difference table td:nth-child(3){ width: 41%;}
.difference .btn a{ width: 300px; font-size: 1.3em;}

/* 中油僱員VS中油職員推薦理由 */
.suggest{ padding:65px 4%;}
.suggest h2{ font-size: 2em;}
.suggest .subtitle p{ width: 50px; height: 50px; font-size: 1.4em;}
.suggest ul{ margin: 0; flex-wrap: wrap;}
.suggest ul li{ padding: 10px 0; width: 100%;}
.suggest ul li a i{ font-size: 4em;}
.suggest ul li .suggest-box p{ font-size: 1.1em;}

/*中油考試超高投報術*/
.many{ padding: 65px 4%;}
.many h2{ padding: 10px 0; font-size: 2.1em;}
.many h3{ padding: 10px 30px; font-size: 1.4em;}
.many p{ padding: 0; font-size:16px; text-align:justify;}
.many .many-main{ padding: 0 0 20px; flex-wrap: wrap;}
.many .many-main ul{ width: 90%; }
.many .many-main ul li a{ font-size: 1.8em;}
.many .many-main ul li h4{ width: 23%; padding-left: 5px;}
.many .many-main ul li h5{ width: 77%; padding-left: 10px;}
.many .many-main ul:nth-child(1){ order: 2;}
.many .many-main ul:nth-child(3){ order: 3;}
.many .many-main img{ order: 1; margin:20px 0; max-width: 60%;}
.many .btn a{ width: 300px; font-size: 1.3em;}

/*我們都在 志光．保成．學儒 快速考取*/
.experience{ padding:65px 4%;}
.experience img{ max-width: 60%;}
.experience h2{ font-size: 1.8em;}
.experience ul{ margin: 40px 0 20px; flex-wrap: wrap;}
.experience ul li{ width: 100%; margin: 10px 0 55px; padding:55px 25px 30px;}
.experience ul li:last-child{ margin: 10px 0 0;}
.experience ul li>div{ width: 80%; font-size: 1.8em; left: calc((100% - 80%)/2);}
.experience ul li img{ max-width: 30%;}
.experience ul li h3{ font-size: 2em;}
.experience ul li h4{ font-size: 2em;}
.experience ul li p{ font-size: 1em;}
.experience .btn{ flex-wrap: wrap;}
.experience .btn a.A{ margin: 0 0 15px; width: 300px; font-size: 1.3em;}
.experience .btn a.B{ margin: 0; width: 300px; font-size: 1.3em;}

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

/*考中油學習方式超多元*/
.studymode {display: none;}
.studymodemobile { display: block;padding:65px 4%; text-align: center;}
.studymodemobile h2{ font-size: 1.8em; font-weight: 500; color: #4b4b4b;}
.studymodemobile h3{ display: inline-block; margin: 20px 0; padding: 10px 20px; font-size:1.2em; color: #fff; background-color: #000;}
.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.A{ padding: 15px 0; width: 300px; font-size: 1.3em; text-align: center; background-color: #ff8a00; border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff; box-shadow: 0px 8px 0 rgba(221,121, 3, 1);}
.studymodemobile .btn a.B{ padding: 15px 0; width: 300px; font-size: 1.3em; text-align: center; background-color: #df2424; border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff; box-shadow: 0px 8px 0 rgba(176,37, 37, 1);}
.studymodemobile .btn a.A:hover{ transform: translateY(4px); box-shadow: 0px 4px 0 rgba(221,121, 3, 1);}
.studymodemobile .btn a.B:hover{ transform: translateY(4px); box-shadow: 0px 4px 0 rgba(176,37, 37, 1);}
}

.gotop { position: fixed; right: 5px; 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;}
 .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;}
.studymodemobile ul li i { font-size: 2rem;}
.studymodemobile ul li .sublist p { font-size: 1.3rem;}
}