@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: 50px;  height: 50px; background-color: #f95a57;  padding: 15px 10px;
    opacity: 0;  transition: all 0.4s ease-in-out 0s;  z-index: 999;  border-radius: 50%; }
  .gotop a{ text-align: center; 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{ background:url(../images/header.jpg)no-repeat; width: 100%; height: 0; padding-bottom:36.45%; background-size:cover; }
header .head{ position: relative;}
header .head .headline{ padding: 40px 0 0; text-align: center;}
header .head .headline h1{ display: block; margin: 0 auto; padding: 10px 0; width: 35%; background-color: #fff; border: 2px solid #01a280;
      border-radius: 100px; font-size: 5.4em; color: #01a280; box-shadow: 0px 8px 0 rgba(1, 162, 128, 1); animation: arrowmove 1s linear infinite alternate;}
header .head .headline h2{ padding: 20px 0 0; font-size: 3em; color: #000;}
header .head .headline h2 span{ color: #f95a57;}
header .head .bubble{ position: absolute; top: 0; left: 0; overflow: hidden; animation: bubbleup 2s linear; animation-fill-mode:both; animation-iteration-count: infinite;}
header .head .bubble img{ max-width: 100%; opacity:1;}

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

/* 台菸酒介紹 */
.ttlinfo{ padding: 0 calc((100% - 1200px)/2) 100px; background-color: #01a280; display: flex; justify-content: space-between;}
.ttlinfo .ttlinfo-main{ width: 48%; text-align: center;}
.ttlinfo .ttlinfo-main a{ display: block; text-decoration: none;}
.ttlinfo .ttlinfo-main img{ max-width: 100%;}
.ttlinfo .ttlinfo-main h2{ font-size: 3.3em; color: #fff; font-weight: normal;}
.ttlinfo .ttlinfo-main h3{ font-size: 2em; color: #ffc053;}
.ttlinfo .ttlinfo-main ul li{ display: flex; justify-content:flex-start; align-items:stretch; padding: 5px 0 0;}
.ttlinfo .ttlinfo-main ul li span{ display: flex; justify-content: center; align-items: center; padding: 0 0 0 5px; width: 10%; border-radius: 50px 0 0 50px; font-size: 1.8em; color: #fff;}
.ttlinfo .ttlinfo-main ul li p{ display: block; width: 90%; padding: 10px 15px; text-align: left; background-color: #fff; border-radius: 0 50px 50px 0; font-size: 1.4em;}
.ttlinfo .ttlinfo-main ul li:nth-child(odd) span{ background-color: #ffc053;}
.ttlinfo .ttlinfo-main ul li:nth-child(even) span{ background-color: #54c3f1;}

/* 考臺灣菸酒好嗎？ */
.condition{ padding:100px calc((100% - 1200px)/2);text-align: center; }
.condition h2{ font-size: 3.5em; color: #01a280;}
.condition h3{ padding: 20px 0 0; font-size: 1.4em; font-weight: normal; line-height: 1.6;}
.condition ul{ margin: 40px 0; display: flex; justify-content:space-around;}
.condition ul li{ width: 30%;}
.condition ul li a{ text-decoration: none; display: block;}
.condition ul li img{ max-width: 100%;}
.condition ul li h4{ padding: 20px 0 10px; font-size: 2em;}
.condition ul li p{ font-size: 1.5em; color: #333;}
.condition .btn{ display: flex; justify-content: center;}
.condition .btn a{ display: block; padding: 15px 0; width: 350px; font-size: 1.4em; text-align: center; background-color: #2c3c49; 
      border-radius: 50px; text-decoration: none; font-weight: 500; color: #fff;}
.condition .btn a:hover{ transform: translateY(4px);}

/* 臺灣菸酒職缺介紹 */
.work{ padding:100px calc((100% - 1200px)/2); background-color: #2c3c49;}
.work h2{ font-size: 3.5em; color: #ffb24c; text-align: center;}
.work h3{ padding: 20px 0 0; font-size: 1.4em; color: #fff; font-weight: normal; line-height: 1.6;}
.work ul{ margin: 40px 0 60px; display: flex; justify-content: space-between;}
.work ul li{ width: 23%; padding:30px; background-color: #fff; border-bottom: 10px solid #ffb24c; text-align: center;}
.work ul li:hover{ transform: scale(1.05,1.05);}
.work ul li h4{ font-size: 2.4em; color: #2c3c49;}
.work ul li p{ padding: 30px 0; font-size: 1.3em; line-height: 1.6; color: #2c3c49; text-align:justify;}
.work ul li img{ max-width: 100%; filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.3));}
.work .btn{ display: flex; justify-content: center;}
.work .btn a.A{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.4em; text-align: center; background-color: #f95a57; 
      border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff;}
.work .btn a.B{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.4em; text-align: center; background-color: #01a280; 
            border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff;}
.work .btn a.A:hover{ transform: translateY(4px);}
.work .btn a.B:hover{ transform: translateY(4px);}


/*臺灣菸酒年年開缺不斷*/
.quota{ padding: 100px calc((100% - 1200px)/2) 0; text-align: center;}
.quota h2{ font-size: 3.5em; color: #01a280;}
.quota p{ padding: 20px 0; font-size: 2em;}
.quota .quota-main{ margin:20px 0 50px; display: flex; justify-content:center; align-items: center;}
.quota .quota-main table{ width: 60%; border-spacing: 5px; border-collapse: separate;}
.quota .quota-main table tr:first-child{ background-color: #01a280; color: #fff;}
.quota .quota-main table tr:last-child{ background-color: #f95a57; color: #fff;}
.quota .quota-main table td{ padding: 15px 5px; font-size: 1.5em; font-weight: 700; border-radius: 15px;}
.quota .quota-main table td:nth-child(1){ background-color: #01a280; color: #fff;}
.quota .quota-main table td.bgsty{ background-color: #ededed; color: #2c3c49;}
.quota .quota-main div{ width: 35%;}
.quota .quota-main div img{ max-width: 100%;}
.quota .btn{ display: flex; justify-content: center;}
.quota .btn a{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.4em; text-align: center; background-color: #2c3c49; 
      border-radius: 50px; text-decoration: none; font-weight: 500; color: #fff;}
.quota .btn a:hover{ transform: translateY(4px);}


/*我們都在 志光．保成．學儒 快速考取*/
.experience-top{ background:url(../images/experience-top.gif)no-repeat; width: 100%; height: 0; padding-bottom:8.3%; background-size:cover;}
.experience-bottom{ background:url(../images/experience-bottom.gif)no-repeat; width: 100%; height: 0; padding-bottom:8.3%; background-size:cover;}
.experience{ padding:50px calc((100% - 1200px)/2); text-align: center; background-image: url(../images/experience-bg.gif); background-repeat: repeat-y;}
.experience img{ max-width: 100%;}
.experience h2{ padding: 15px 0; font-size: 3em; color: #fff;}
.experience h2 span{ color: #2c3c49;}
.experience ul{ margin: 30px 0 0; display: flex; justify-content: center;}
.experience ul li{ width: 40%; margin: 0 10px; padding:0 50px 30px; background-color: #fff; border-radius: 20px; box-shadow: 0px 8px 0 rgba(234, 151, 52, 1);}
.experience ul li>div{ margin: 0 auto; padding: 15px 0; width: 80%; text-align: center; background-color: #2c3c49; border-radius: 0 0 30px 30px; font-size: 2em; color: #ffc269;}
.experience ul li h3{ padding: 25px 0 5px; font-size: 2.6em; color: #000;}
.experience ul li h3 span{ color: #01a280;}
.experience ul li h4{ padding: 0 0 25px; font-size: 2.6em; color: #f95a57;}
.experience ul li p{ font-size: 1.2em; line-height: 1.8; text-align: justify;}


/*臺灣菸酒招考必備線上資源*/
.resource{ padding:20px calc((100% - 1200px)/2) 100px;}
.resource h2{ font-size: 3em; color: #01a280; text-align: center;}
.resource h3{ padding: 20px 0 0; font-size: 1.6em; font-weight: normal; line-height: 1.6;}
.resource>div{ margin: 50px 0; display: flex; justify-content: center; align-items: center;}
.resource>div .resource-img{ width: 48%;}
.resource>div .resource-img img{ max-width: 100%;}
.resource>div ul{ width: 40%; text-align: left;}
.resource>div ul li{ width: 100%; margin: 10px 0;}
.resource>div ul li a{ display: block; padding: 15px 25px; background-color: #2c3c49; font-size: 1.8em; font-weight: 700; color: #ffb24c; position: relative;}
.resource>div ul li a::after{ content:'\f061'; font-family:"Font Awesome 5 Free"; position: absolute; top: 22px; right: 25px;}
.resource>div ul li p{ padding: 5px 0; font-size: 1.4em; line-height: 1.6;}
.resource .btn{ margin:0; display: flex; justify-content: center;}
.resource .btn a.A{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.4em; text-align: center; background-color: #f95a57; 
      border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff;}
.resource .btn a.B{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.4em; text-align: center; background-color: #01a280; 
            border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff;}
.resource .btn a.A:hover{ transform: translateY(4px);}
.resource .btn a.B:hover{ transform: translateY(4px);}


/*臺灣菸酒優質課程推薦*/
.customize{ padding:100px calc((100% - 1200px)/2); background-color: #2c3c49; text-align: center;}
.customize h2{ font-size: 3.5em; color: #fff;}
.customize ul{ margin:30px 0 40px; display: flex; justify-content: space-between;}
.customize ul li{ width:30%; padding: 0;}
.customize ul li a{ text-decoration: none; display: block;}
.customize ul li img{ max-width: 100%;}
.customize ul li h3{ padding: 10px 0; font-size: 2.3em; color: #ffb24c;}
.customize ul li p{ font-size: 1.4em; line-height: 1.6; color: #fff;}
.customize .btn{ margin:0; display: flex; justify-content: center;}
.customize .btn a.A{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.4em; text-align: center; background-color: #f95a57; 
      border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff;}
.customize .btn a.B{ margin: 0 10px; display: block; padding: 15px 0; width: 350px; font-size: 1.4em; text-align: center; background-color: #01a280; 
            border-radius: 40px; text-decoration: none; font-weight: 500; color: #fff;}
.customize .btn a.A:hover{ transform: translateY(4px);}
.customize .btn a.B:hover{ transform: translateY(4px);}

/*學習方式超多元*/
.studymode{ padding:100px calc((100% - 1200px)/2); text-align: center; background-color: #F8F8F8;}
.studymode h2{ font-size: 3em; color: #01a280;}
.studymode h3{ display: inline-block; margin: 30px 0; padding: 10px 20px; font-size:1.6em; color: #2c3c49; border:1px solid #2c3c49;}
.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{ display: flex; justify-content: center;}
.studymode .btn a{ display: block; margin: 0 10px; padding: 15px 0; width: 350px; font-size: 1.4em; text-align: center; border-radius: 50px; text-decoration: none; 
      font-weight: 500; color: #fff;}
.studymode .btn a:hover{ transform: translateY(4px);}
.studymode .btn a.A{ background-color: #f95a57;}
.studymode .btn a.B{ background-color: #2c3c49;}
.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 .headline{ padding: 30px 0 0;}
 header .head .headline h1{ padding: 10px 0; width: 35%; font-size: 5em;}
 header .head .headline h2{ padding: 15px 0 0;}
}

@media(max-width:1440px){

      /* header */
      header .head .headline{ padding: 20px 0 0;}
      header .head .headline h1{ padding: 10px 0; width: 45%; font-size: 4.5em;}
      header .head .headline h2{ padding: 15px 0 0;}
     }

@media(max-width:1200px){

 /* header */
 header .head .headline{ padding: 10px 0 0;}
 header .head .headline h1{ padding: 10px 0; width:50%; font-size: 4em;}
 header .head .headline h2{ padding: 15px 0 0; font-size: 2em;}
}

@media(max-width:1180px){

 /* header */
 header{ background:url(../images/header-mobile.jpg)no-repeat; padding-bottom: 100%; background-size: cover;}
 header .head{ margin:0 auto; width: 100%;}
 header .head .headline{ padding: 10% 0 0;}
 header .head .headline h1{ padding: 10px 0; width: 60%; font-size: 5.4em;}
 header .head .headline h2{ padding: 30px 0 0; font-size: 3em; }
 header .head .bubble{ display: none;}

 /* 台菸酒介紹 */
.ttlinfo{ padding: 0 4% 100px;}
.ttlinfo .ttlinfo-main{ width: 48%;}
.ttlinfo .ttlinfo-main h2{ font-size: 3em;}
.ttlinfo .ttlinfo-main h3{ font-size: 1.8em;}
.ttlinfo .ttlinfo-main ul li{ display: flex; justify-content:flex-start; align-items:stretch; padding: 5px 0 0;}
.ttlinfo .ttlinfo-main ul li span{ font-size: 1.6em;}
.ttlinfo .ttlinfo-main ul li p{ width: 90%; padding: 10px 15px; font-size: 1.1em;}

 /* 考臺灣菸酒好嗎？ */
.condition{ padding: 100px 4%;}
.condition h2{ font-size: 3.5em;}
.condition h3{ padding: 20px 0 0; font-size: 1.4em;}
.condition ul{ margin: 40px 0;}
.condition ul li{ width: 30%;}
.condition ul li img{ max-width: 100%;}
.condition ul li h4{ padding: 20px 0 10px; font-size: 2em;}
.condition ul li p{ font-size: 1.1em;}

/* 臺灣菸酒職缺介紹 */
.work{ padding:100px 0;}
.work h2{ font-size: 3.5em;}
.work h3{ padding: 20px 0 0; font-size: 1.4em;}
.work ul{ margin: 40px 0 60px; display: flex; justify-content: space-between;}
.work ul li{ width: 23%; padding:30px;}
.work ul li h4{ font-size: 2.2em;}
.work ul li p{ padding: 30px 0; font-size: 1.2em;}
.work ul li img{ max-width: 100%;}

/*臺灣菸酒年年開缺不斷*/
.quota{ padding: 100px 4% 0;}
.quota h2{ font-size: 3.5em;}
.quota p{ padding: 20px 0; font-size: 2em;}
.quota .quota-main{ margin:20px 0 50px;}
.quota .quota-main table{ width: 65%;}
.quota .quota-main table td{ padding: 15px 5px; font-size: 1.3em;}
.quota .quota-main div{ width: 35%;}

/*我們都在 志光．保成．學儒 快速考取*/
.experience{ padding:50px 0; background-size:contain;}
.experience h2{ padding: 15px 0; font-size: 3em;}
.experience ul{ margin: 30px 0 0; display: flex; justify-content: center;}
.experience ul li{ width: 40%; margin: 0 10px; padding:0 50px 30px; border-radius: 20px;}
.experience ul li>div{ margin: 0 auto; padding: 15px 0; width: 80%; border-radius: 0 0 30px 30px; font-size: 2em;}
.experience ul li h3{ padding: 25px 0 5px; font-size: 2.4em;}
.experience ul li h4{ padding: 0 0 15px; font-size: 2.4em;}
.experience ul li p{ font-size: 1.2em;}

/*臺灣菸酒招考必備線上資源*/
.resource{ padding:40px 2% 100px;}
.resource h2{ font-size: 3em;}
.resource h3{ padding: 20px 0 0; font-size: 1.6em;}
.resource>div{ margin: 50px 0; }
.resource>div .resource-img{ width: 48%;}
.resource>div ul{ width: 40%; text-align: left;}
.resource>div ul li{ width: 100%; margin: 10px 0;}
.resource>div ul li a{ font-size: 1.8em;}
.resource>div ul li a::after{ top: 20px; right: 25px;}
.resource>div ul li p{ padding: 5px 0; font-size: 1.3em;}

/*臺灣菸酒優質課程推薦*/
.customize{ padding:100px 4%;}
.customize h2{ font-size: 3.5em;}
.customize ul{ margin:30px 0 40px;}
.customize ul li{ width:30%; padding: 0;}
.customize ul li img{ max-width: 100%;}
.customize ul li h3{ padding: 10px 0; font-size: 2em;}
.customize ul li p{ font-size: 1.3em;}

/*學習方式超多元*/
.studymode{ padding:80px 2%;}
.studymode h2{ font-size: 3em;}
.studymode h3{ 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{ width: 320px; font-size: 1.5em;}

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

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

@media(max-width:820px){

 /* header */
 header .head{ margin:0 auto; width: 100%;}
 header .head .headline{ padding: 10% 0 0;}
 header .head .headline h1{ width: 70%; font-size: 5em;}
 header .head .headline h2{ padding: 30px 0 0; font-size: 3em; }
 header .head .bubble{ display: none;}

 /* 台菸酒介紹 */
.ttlinfo{ padding: 0 0 80px; justify-content: space-around;}
.ttlinfo .ttlinfo-main{ width: 48%;}
.ttlinfo .ttlinfo-main img{ max-width: 60%;}
.ttlinfo .ttlinfo-main h2{ font-size: 3em;}
.ttlinfo .ttlinfo-main h3{ font-size: 1.6em;}
.ttlinfo .ttlinfo-main ul li{ padding: 5px 0 0;}
.ttlinfo .ttlinfo-main ul li span{ width: 10%; font-size: 1.3em;}
.ttlinfo .ttlinfo-main ul li p{ width: 90%; font-size: 14px;}

 /* 考臺灣菸酒好嗎？ */
 .condition{ padding: 80px 4%;}
 .condition h2{ font-size: 3em;}
 .condition h3{ font-size: 1.2em; text-align:justify;}
 .condition ul{ margin: 40px 0;}
 .condition ul li{ width: 30%;}
 .condition ul li img{ max-width: 80%;}
 .condition ul li h4{ padding: 20px 0 10px; font-size: 1.6em;}
 .condition ul li p{ font-size: 1.2em;}

 /* 臺灣菸酒職缺介紹 */
.work{ padding:80px 4%;}
.work h2{ font-size: 3em;}
.work h3{ font-size: 1.2em;}
.work ul{ margin: 35px 0 55px; display: flex; flex-wrap: wrap; justify-content: center;}
.work ul li{ width: 45%; margin: 5px 10px; padding: 30px;}
.work ul li h4{ font-size: 2.2em;}
.work ul li p{ padding: 30px 0; font-size: 1.2em;}

/*臺灣菸酒年年開缺不斷*/
.quota{ padding: 80px 4% 50px;}
.quota h2{ font-size: 3em;}
.quota p{ padding: 10px 0; font-size: 1.8em;}
.quota .quota-main table{ width: 65%;}
.quota .quota-main table td{ padding: 10px 5px; font-size: 1.2em;}
.quota .quota-main div{ width: 35%;}

/*我們都在 志光．保成．學儒 快速考取*/
.experience{ padding:50px 0; background-size:contain;}
.experience h2{ padding: 15px 0; font-size: 2.5em;}
.experience ul{ margin: 30px 0 0;}
.experience ul li{ width: 45%; margin: 0 10px; padding:0 25px 30px;}
.experience ul li>div{ padding: 10px 0; width: 80%; font-size: 1.8em;}
.experience ul li h3{ padding: 25px 0 5px; font-size: 2em;}
.experience ul li h4{ padding: 0 0 15px; font-size: 2em;}
.experience ul li p{ font-size: 1.1em; line-height: 1.6;}

/*臺灣菸酒招考必備線上資源*/
.resource{ padding:60px 4% 100px;}
.resource h2{ font-size: 3em;}
.resource h3{ padding: 20px 0 0; font-size: 1.2em;}
.resource>div{ margin: 30px 0; }
.resource>div .resource-img{ width: 48%;}
.resource>div ul{ width: 52%;}
.resource>div ul li{ width: 100%; margin: 10px 0;}
.resource>div ul li a{ font-size: 1.5em;}
.resource>div ul li a::after{ top: 16px; right: 25px;}
.resource>div ul li p{ padding: 5px 0; font-size: 1.1em;}

/*臺灣菸酒優質課程推薦*/
.customize{ padding:100px 4%;}
.customize h2{ font-size: 3em;}
.customize ul{ margin:30px 0 40px;}
.customize ul li{ width:30%; padding: 0;}
.customize ul li img{ max-width: 100%;}
.customize ul li h3{ padding: 10px 0; font-size: 2em;}
.customize ul li p{ font-size: 1.1em;}

/*學習方式超多元*/
.studymode h2{ font-size: 3em;}
.studymode ul{ margin:20px 0 30px;}
.studymode ul li .box p{font-size: 1rem;}
.studymode .btn a{ padding: 15px 0; width: 300px; font-size: 1.4em;}

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

}

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

 header{ background:url(../images/header-mobile.jpg)no-repeat; padding-bottom: 100%; background-size: cover;}
 header .head .headline{ padding: 10% 0 0;}
 header .head .headline h1{ width: 80%; font-size: 2.4em; box-shadow: 0px 5px 0 rgba(1, 162, 128, 1);}
 header .head .headline h2{ padding: 15px 0 0; font-size: 1.8em; }
 header .head .bubble{ display: none;}

/* 台菸酒介紹 */
.ttlinfo{ padding: 0 0 40px; flex-wrap: wrap; justify-content: center;}
.ttlinfo .ttlinfo-main{ margin: 0 0 25px; width: 92%;}
.ttlinfo .ttlinfo-main img{ max-width: 60%;}
.ttlinfo .ttlinfo-main h2{ font-size: 3em;}
.ttlinfo .ttlinfo-main h3{ font-size: 1.6em;}
.ttlinfo .ttlinfo-main ul li{ padding: 5px 0 0;}
.ttlinfo .ttlinfo-main ul li span{ font-size: 1.3em;}
.ttlinfo .ttlinfo-main ul li p{ font-size: 14px;}

/* 考臺灣菸酒好嗎？ */
.condition{ padding: 80px 4%;}
.condition h2{ font-size: 2.3em;}
.condition h3{ font-size: 1.1em;}
.condition ul{ margin: 0; flex-wrap:wrap; justify-content: center;}
.condition ul li{ width: 60%; margin: 10px 0;}
.condition ul li img{ max-width: 80%;}
.condition ul li h4{ padding: 20px 0 10px; font-size: 1.6em;}
.condition ul li p{ font-size: 1.2em;}

/* 臺灣菸酒職缺介紹 */
.work{ padding:80px 4%;}
.work h2{ font-size: 2.3em;}
.work h3{ font-size: 1.1em;}
.work ul{ margin: 35px 0; display: flex; flex-wrap: wrap; justify-content: center;}
.work ul li{ width: 80%; margin: 5px 10px; padding: 30px;}
.work ul li a{ text-decoration: none; display: block;}
.work ul li h4{ font-size: 2.2em;}
.work ul li p{ padding: 30px 0; font-size: 1.2em;}
.work .btn{ margin:0; display: flex; flex-wrap: wrap; justify-content: center;}
.work .btn a.A{ margin: 5px 0;}
.work .btn a.B{ margin: 5px 0;}

/*臺灣菸酒年年開缺不斷*/
.quota{ padding: 80px 4% 60px;}
.quota h2{ font-size: 2.3em;}
.quota p{ font-size: 1.5em;}
.quota .quota-main{ margin: 20px 0; flex-wrap: wrap;}
.quota .quota-main table{ width: 100%; order: 2;}
.quota .quota-main table td{ padding: 5px; font-size: 1em;}
.quota .quota-main div{ width: 65%; order: 1;}
.quota .btn{ display: flex; justify-content: center;}
.quota .btn a{ padding: 15px 0; width: 350px; font-size: 1.4em;}

/*我們都在 志光．保成．學儒 快速考取*/
.experience{ padding:50px 4%;}
.experience img{ max-width: 80%;}
.experience h2{ padding: 15px 0; font-size: 1.3em;}
.experience ul{ margin: 0; flex-wrap: wrap;}
.experience ul li{ width: 90%; margin: 15px 0; padding:0 25px 30px;}
.experience ul li>div{ padding: 5px 0; width: 80%; font-size: 1.6em; border-radius: 0 0 15px 15px;}
.experience ul li h3{ padding: 25px 0 5px; font-size: 2em;}
.experience ul li h4{ padding: 0 0 15px; font-size: 2em;}
.experience ul li p{ font-size: 1.1em; line-height: 1.6;}

/*臺灣菸酒招考必備線上資源*/
.resource{ padding:60px 4% 60px;}
.resource h2{ font-size: 1.8em;}
.resource h3{ padding: 15px 0 0; font-size: 1.1em;}
.resource>div{ margin: 20px 0 10px; flex-wrap: wrap;}
.resource>div .resource-img{ width: 80%;}
.resource>div ul{ width: 100%;}
.resource>div ul li{ width: 100%; margin: 10px 0;}
.resource>div ul li a{ font-size: 1.3em;}
.resource>div ul li a::after{ top: 18px; right: 20px;}
.resource>div ul li p{ padding: 5px 0; font-size: 1em;}
.resource .btn{ margin:0; display: flex; flex-wrap: wrap; justify-content: center;}
.resource .btn a.A{ margin: 5px 0;}
.resource .btn a.B{ margin: 5px 0;}

/*臺灣菸酒優質課程推薦*/
.customize{ padding:80px 4%;}
.customize h2{ font-size: 2em;}
.customize ul{ margin:30px 0; flex-wrap: wrap; justify-content: center;}
.customize ul li{ width:80%; padding: 0; margin: 15px 0;}
.customize ul li img{ max-width: 80%;}
.customize ul li h3{ padding: 10px 0; font-size: 2em;}
.customize ul li p{ font-size: 1.1em;}
.customize .btn{ margin:0; display: flex; flex-wrap: wrap; justify-content: center;}
.customize .btn a.A{ margin: 5px 0;}
.customize .btn a.B{ margin: 5px 0;}

/*學習方式超多元*/
.studymode {display: none;}
.studymodemobile { display: block;padding:65px 4%; text-align: center; background-color: #F8F8F8;}
.studymodemobile h2{ font-size: 2em; color: #01a280;}
.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{ display: block; margin: 0 10px; padding: 15px 0; width: 350px; font-size: 1.4em; text-align: center; border-radius: 50px; text-decoration: none; font-weight: 500; color: #fff;}
.studymodemobile .btn a:hover{ transform: translateY(4px);}
.studymodemobile .btn a.A{ background-color: #f95a57;}
.studymodemobile .btn a.B{ background-color: #2c3c49;}
}

@media(max-width:600px){

  /* 台菸酒介紹 */
 .ttlinfo{ padding: 0 0 40px;}
 .ttlinfo .ttlinfo-main{ margin: 0 0 25px; width: 92%;}
 .ttlinfo .ttlinfo-main img{ max-width: 60%;}
 .ttlinfo .ttlinfo-main h2{ font-size: 2.5em;}
 .ttlinfo .ttlinfo-main h3{ font-size: 1.5em;}

 /* 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;}

 .gotop{ right: 20px; bottom: 275px;}

}

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