@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
@import url('https://fonts.googleapis.com/css?family=Baloo');
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Mukta+Vaani:700|Staatliches');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; }

body{
  background: url(img/bg-sky.png) top center no-repeat;;
  background-size:100%;
  background-attachment: fixed;  
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 0;
  background-position: center;
  font-size: 1.1em;
  line-height: 1.8;
  font-weight: 400;
  overflow-x: hidden;
  font-family: "Arial","Noto Sans TC" , sans-serif;
  color: #333;
   
}
@media (max-width: 40em){
  body{
  background: url(img/bg-skym.png) top center no-repeat;
  background-attachment: fixed;  
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 0;
}

 }
  table {border-collapse: collapse;border-spacing: 0;margin: auto; text-align: center;}
  
  @media (max-width:55em) {.br_d {display: none;}}
  @media (min-width:55em) {.br_s {display: none;}}
  @media (min-width: 768px) and (max-width: 991px) {.hidden-sm {display: none;}}
  @media (min-width: 992px) and (max-width: 1199px) {.hidden-md {display: none;}}
  @media (min-width: 1200px) {.hidden-lg {display: none !important;}}
  @media screen and (max-width:38em) {article {padding: 5vh 5vw;} }
   
  article {font-size:1.15em; padding: 8vh 0vw;letter-spacing: 0.5px;}
  article a, article a:hover {text-decoration: none;}
  article h3, article h4, article h5, article h6, article ol,article ul {margin: 0;padding: 0;}
  article table ol,article table ul {padding: 0 0 0 22px;}
  article h3 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.35;
    margin: 3vh 0;
  }

  #sp {
    /* background: url(https://www.easywin.com.tw/ad/114/1218/img/bg.png) top center no-repeat; */
    background-size: 100%;
    background-position: center;
    text-align: center;
    padding: 5vh 0vw ;
    position: relative;
    font-size: 1.1em;
    margin: auto;
    font-family: "Outfit", "Noto Sans TC",sans-serif;
    
  }
 
  #sp .sp{
    width: 100%;
    margin: auto;
    margin-bottom: 10vh;
  }
  #sp img {
    width:32%;
    position: absolute;
    right: 1vw;
    bottom:0vh;
  }
  #sp .sp p{
    background-color:  #5459cd;
    color: #fff;
    display: block;
    border-radius: 1em;
    font-weight: 600;
    line-height: 1.2;
    font-size: 1.15em;
    padding: 2vh 2vw;
  }

  #sp h3{
    font-size:2.8em;
    color:  #fff;
    line-height: 1.2;
    font-weight:900;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(68%, transparent), to(rgba(250, 250, 250, 0.1)));
       text-shadow: 0 0.15em 0px #652609, 0.01em -0.03em 0 #652609, 0.08em 0.005em 0 #652609, 0em 0.08em 0 #652609, 0.05em 0.08em 0 #652609, 0px -0.05em 0 #652609, -0.06em -0.05em 0 #652609, -0.08em 0.08em 0 #652609, -0.09em 0 0 #652609;
  }
  #sp h3 span {
    /* color: #b2d2ff; #ffd312 */
    color: #fede0c;
    font-size: 108%;
    line-height: 1;
       text-shadow: 0 0.15em 0px #652609, 0.01em -0.03em 0 #652609, 0.08em 0.005em 0 #652609, 0em 0.08em 0 #652609, 0.05em 0.08em 0 #652609, 0px -0.05em 0 #652609, -0.06em -0.05em 0 #652609, -0.08em 0.08em 0 #652609, -0.09em 0 0 #652609;
  }
  #sp ul {
    display: flex;
    display: -webkit-flex;
    margin: 0;
    margin-bottom: 5vh;
    align-items: stretch;
    justify-content: space-around;
    list-style: none;
  }
   #sp ul li {
     background-color: #ffffff;
    border: solid 1px #fff;
    width: 48%;
    border-radius: 2em;
      padding: 3vh 2vw 5vh;
   }
  #sp ul span {
  font-weight: 600;
  color:  #5459cd;
  font-size: 130%;
   display: block;
  line-height: 1.5;
  padding: 2vh 0 1vh;
}
#sp ul strong {
  font-size: 2.2em;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
  color: #ffb100;
  border-bottom:solid 8px ;
  padding-bottom: 1vh;
}
#sp ul small{
  font-size: 12px;
 
  
}

  #sp a, #sp a:hover {
    background:#15a305;
    color: #fff;
    font-weight: 600;
    border-radius: 1em;
    padding: 2vh 2vw;
    margin-top: 3vh;
    font-size: 1.8em;
    /* #5459cd */
}
@media (max-width: 40em){
 article h3 {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.35;
    margin: 3vh 0;
  }
   #sp {
    /* background: url(https://www.easywin.com.tw/ad/114/1218/img/bgm.png) top center no-repeat; */
    padding: 8vh 0vw 25vh; 
    font-size: 1.1em;
    
  }
 
  #sp .sp{
    width: 100%;
    margin: auto;
  }
  #sp img {
    width:68%;
    position: absolute;
    right: 8vw;
    bottom:-2vh;
  }
  #sp .sp p{
    line-height: 1.2;
  }

  #sp h3{
    font-size:2.3em;
    color:  #fff;
    line-height: 1.5;
    text-shadow: 0 0.15em 0px #652609, 0.01em -0.03em 0 #652609, 0.08em 0.005em 0 #652609, 0em 0.08em 0 #652609, 0.05em 0.08em 0 #652609, 0px -0.05em 0 #652609, -0.06em -0.05em 0 #652609, -0.08em 0.08em 0 #652609, -0.09em 0 0 #652609;
  }
    #sp h3 span {
      display: block;
      color:#ffed6a;
      font-size: 1.68em;
      text-shadow: 0 0.15em 0px #652609, 0.01em -0.03em 0 #652609, 0.08em 0.005em 0 #652609, 0em 0.08em 0 #652609, 0.05em 0.08em 0 #652609, 0px -0.05em 0 #652609, -0.06em -0.05em 0 #652609, -0.08em 0.08em 0 #652609, -0.09em 0 0 #652609;
    }

  #sp ul {
    flex-wrap: wrap;
  }
   #sp ul li {
     background-color: #ffffff;
    border: solid 1px #fff;
    width: 100%;
    padding: 3vh 3vw 2vh;
    margin-bottom: 2vh;
   }
  #sp ul span {
  font-size: 125%;
 
}
#sp ul strong {
  font-size: 2em;
   margin-bottom: 2vh;
  
}

  #sp a, #sp a:hover {
    background:#15a305;
    color: #fff;
    font-weight: 600;
    border-radius: 1em;
    padding: 2vh 2vw;
    margin-top: 0vh;
    font-size: 1.2em;
    /* #5459cd */
}

}
#te {
    background:#fffcee;
    background-size: 35%;
    color:#333;
    text-align: center;
  }
  #te h3 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.35;
    margin: 3vh 0;
    color: #5459cc;
  }
#te h3 strong {font-size:128%;}
#te h3 span {
        padding: 1vh 1vw;
        border-radius: 3em;
        font-weight: 600;
        text-shadow:0 0 0;
        line-height: 2;
      }
#te h4 {
   font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
   font-weight: 600;
   font-size:2em;
   line-height: 1.35;
   color: #353232;
   margin: 3vh 0;
   text-align: center;
   font-weight: 800;
}
#te ol {
    list-style: none;
    margin: 5vh 0 0 0;
    padding: 0;
    font-weight: 500;
    font-size:1.05em;
    line-height: 1.6;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    color:#501729;
  }
  #te ol li {
    position: relative;
    list-style: none;
    width:31.5%;
    padding:3vh 0 ;
    margin: 1vh auto;
    background-color: #fff;
    border: saddlebrown solid 1px;
    border-radius: 1em;

  } 
  #te ol li:last-child {
    width: 100%;
    background: none;
    margin-top: 3vh;
    padding: 0 ;
  }
  #te ol strong {
    font-size: 3em;
    font-family: "Baloo";
    color: #ff3911; 
    line-height: 1.2;
  }

  #te ol h5 {
    position: absolute;
    color: #fff;
    top:-2vh;
    left:8vw;
    font-size: 0.9em;
    -moz-transform:rotate(-2deg);
     -webkit-transform:rotate(-2deg);
     -o-transform:rotate(-2deg);
     -ms-transform:rotate(-2deg);
    transform:rotate(-2deg);
    text-shadow: 0 0.2em 0px #d8963f, 0.1em -0.03em 0 #d8963f, 0.08em 0.005em 0 #d8963f, 0em 0.08em 0 #d8963f, 0.05em 0.08em 0 #d8963f, 0px -0.05em 0 #d8963f, -0.06em -0.05em 0 #d8963f, -0.08em 0.08em 0 #d8963f, -0.09em 0 0 #d8963f;
  }
  #te ol kbd {
    padding: 1vh 0.5vw;
    color: #fff;
    font-size: 95%;
    background-color: #ff3911;
    border-radius: 1em ;

  }
  #te a,#te a:hover {
    color: #29bf00;
    font-family: "baloo","Noto Sans TC" , sans-serif;
    font-size: 2.8em;
    line-height: 1.2;
  }

  @media screen and (max-width: 55em) {
    #te {
        padding: 5vh 5vw; 
        letter-spacing: 0;
      }
    #te h3 {font-size: 1.35em;}
    #te h3 strong {font-size:128%;}
    #te ol {
        font-size:1em;
        margin: 0;
        background: #fff;
        border-radius: 1em;
      }
      #te ol li,#te ol li:last-child {
        width:100%;
        padding:2vh 0 ;
        margin: 1vh 0;
        border: 0px;
        border-bottom: dashed 1px #ddd;
      } 
      #te ol li:last-child {
        border-bottom: dashed 0px #ddd;
      }
      #te ol strong { font-size: 3em; }
      #te ol h5 {
        top:-2vh;
        left:8vw;
        font-size: 0.9em;
      }
      #te a,#te a:hover {
        font-size:2.5em;
      }
      #te ol h5 {
        left:12vw;
      }    
      #te ol li:last-child {
        color: #501729;
    }
      #te ol kbd {
    padding: 1vh 2vw;
    margin: 0 1vw;

  }
  }
  #edu {
    background: #ffee8b;
    padding:5vh 1vw;
    text-align:center ;
    font-size: 1.1em;
    font-family: "Outfit", "Noto Sans TC",sans-serif;
}
 #edu details {
    background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fffce9 repeat;
      background-size: 1%;
      border-radius: 1em;
      border: #bd5800 3px dashed;
      padding: 2vh 2vw;
      margin: auto;
      margin-bottom: 3vh;
      letter-spacing: 0.5px;
  }
  
 #edu summary {
        font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
       font-weight: 600;
       font-size: 1.5em;
       line-height: 2.2;
       color:#ffab0e;
       margin: 3vh 0;
       text-align: center;
       font-weight: 800;
   }
   #edu summary span {
       font-size: 180%;
       line-height:0.8;
       color:#1e7a49;
    }
 #edu details[open] {
    padding: 3vh 1vw;
    margin-bottom: 3vh;
    border:#5d2e06 dashed 5px;
    border-radius: 1em;
    background: url(https://www.easywin.com.tw/ad/113/0308/img/bk.png) #108b66;
    background-size: 100%;
  }
   #edu details[open] summary {
    margin-bottom: 0.5em;
    border-radius: 0.5em 0.5em 0 0;
    color: #fff;
    border-bottom: solid 1px ;

  }
     #edu details[open] summary span {
      color:#ffe32d;

     }
  #edu section {
    /* background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fffce9 repeat; */
    background-size: 1%;
    border-radius: 0.2em;
    /* border: rgb(163, 112, 67) 3px dashed; */
    padding: 0vh 1vw;
    margin: auto;
    margin-top: 2vh;
    letter-spacing: 0.5px;
    position: relative;
  }
  #edu .good img {
    position: absolute;
    width: 10%;
    left: 3vw;
    top: -2vh;
  }
  #edu .good {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #edu .good  {
    font-size: 0.8em;
  }
  #edu .good li {
    position: relative;
    width: 30%;
  }
  #edu .good h4 {
    font-size:1.68em;
    line-height: 1.35;
    color: #1d7b4d;
    margin-bottom: 1vh;
  }
  #edu .good ol {
    font-weight: 500;
    font-size:1.35em;
    display: flex;
}

#edu .op {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items:stretch;
    flex-wrap: wrap;
}
#edu .op table {
    width:48%;
    text-align: center;
    background-color:#fff;
    border:solid 2px #1d7b4d;
    font-size: 0.8em;
    margin-top: 0;
    margin-bottom: 5vh;

}
#edu table td,#edu table th {
    padding:1vh 1vw;
    border:solid  1px ;
    background-color: #fff;
    text-align: left;
}
#edu table th {
    background-color:#18b397 ;
    width: 25%;
    color: #fff;
    border:solid 1px;
    text-align: center;
}
#edu table img {
    width:9%;
    padding:0 1vw;
  }
#edu table caption {font-size: 1.3em;font-weight: 600;line-height: 1.35;padding: 1vh 0;position: relative;color: #fff;}
#edu table caption span {font-size: 1.25em; color:#ffde4b;padding: 0 1vw;}
#edu table:nth-child(2n) {border: solid 2px #ffb77e}
#edu table td{ border: solid 1px #18b397;}
#edu table:nth-child(2n) td {border: solid 1px #ffb77e}
#edu table:nth-child(2n) th {background-color:#ffb77e;}
#edu table tr:nth-child(2n) td {background-color:#f8f8f8;}
#edu h3  {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.35;
    color: #353232;
    margin-top: 3vh;
}

@media screen and (max-width:65em){
    #edu .op table {
        width:50%;
    }
    #edu summary {
       font-size: 1.2em;
       line-height: 2.2;
       margin: 1vh 0;
   }
      #edu summary span {
        font-size:150%;
      }
      #edu details {
        background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fffce9 repeat;
          background-size: 3%;
          padding: 2vh 5vw;
      }
      
      #edu details[open] {
        padding: 2vh 1vw;
        margin-bottom: 3vh;
        border-radius: 1em;
      }
}
@media screen and (max-width:40em){
    #edu { padding:5vh 3vw;   }
    #edu section {
        padding: 5vh 2vw;
      }
    #edu ul li img {
        position: absolute;
        width:9%;
        left: 3vw;
        top: -2vh;
      }
      #edu .good{
        flex-wrap: wrap;
      }
      #edu .good li {
        position: relative;
        width: 100%;
        margin: 2vh;
        border: solid 1px;
        padding: 2vh 3vw;
      }
      #edu .good h4 {
        font-size:1.28em;
      }
      #edu .good ol {
        font-size:1.25em;
    }

    #edu .op table {
        width:100%;
    }
    #edu h3  {
        font-size: 1.2em;
    }
    
}
  /* .content {
    width: 82%;

  }
  .opsp-main .adimg {
    width: 100%;
    max-width: 100%;
  } */
  #good {
    margin: 3vh 0;
    border-radius: 3em;
  }
  #good ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    display: -webkit-flex;
    align-items: center;
    list-style: none;
  }
 #good ul li {
    width: 50%;
     display: flex;
    display: -webkit-flex;
    list-style: none;
    justify-content: space-between;
    align-items:flex-start ;
  }
 #good img {
    width: 18%;
    height: auto;
    border-radius:50%;
    border: solid 1px #3f3997;
    box-shadow: 5px 8px 0 #e8d4d5;
  }
 
 #good p {
    width: 80%;
    padding: 3vh 2vw;
    line-height: 1.8;
    font-size: 0.95em;
  }
 #good strong {
    font-size: 1.25em;
    color:#067243;
  }
  #good kbd {
    padding: 1vh 1vw;
    background:#ff8f8d ;
    color: #fff;
    font-weight: 600;
    font-size: 1.2em;
    border-radius: 1em;
  }

  @media (min-width: 50em) {#good .br {display: none;}}

  @media (max-width: 50em){
    
    #good {
        margin: 1vh 0;
        padding: 5vh 1vw;
        border-radius: 0em;
        font-size: 0.9em;
        background-color:rgba(255, 243, 243, 0.0);
      }
 #good ul {flex-wrap: wrap;}
 #good ul li {width: 100%;font-size: 1em; margin: 1vh 0;}
 #good strong {
    font-size:1em;
  }
 #good img { width: 20%;}
 #good p {
    padding: 3vh 3vw; 
    border-radius: 1em ;
    background-color: #fff;
    border: solid 1px #e9e9e9; 
  }
}
#exam {
   background-color:rgb(255,216,190);
   margin: auto;
   text-align: center;
}
#exam a, #exam a:hover {
    background:#5459cd;
    color: #fff;
    font-weight: 600;
    border-radius: 0.5em;
    padding: 2vh 2vw;
    display: block;
    margin: auto;
    margin-top: 2vh;
    width:68%;
  }
  #exam ul, #exam ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    display: -webkit-flex;
    align-items: self-start;
    justify-content: space-around;
    position: relative;
    color: saddlebrown;
  
  }
  #exam ul li {
    width:52%;
    background-color:#ffecd5;
    border:solid 2px saddlebrown;
    padding: 5vh 0;
    font-size: 1.58em;
    line-height: 1.35;
    text-align: center;

  }
  #exam ul p {
    font-size: 0.6em;
    margin: 2vh 0;
  }
  #exam ul h5 {
    background-color:#d8963f;
    color: #fff;
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    font-weight: 600;
    line-height: 1.2;
    font-size: 0.8em;
    padding-top:38px;
    top:-5vh;
    left: 0vw;
  }
  #exam ul i { padding: 0 1vw;}
  #exam ul strong { font-size: 1.25em;}
  #exam ul li:first-child img {
    width:45%;
    border-radius: 1em;
    background-color: #fff;
    padding:1vh 1vw;
  }
  #exam ul li:nth-child(2) {
    width: 42%;
    margin: 3vh 0 0 -8vw;
    background-color: #fff;
  }
  #exam ul li:nth-child(2) img {
    width: 12%;
    position: absolute;
    right: 5vw;
    top: 1vh;
  } 
  #exam ul h4 {
     color:#d8963f;
     font-size: 95%;
     margin-top: 1vh;
  }
  #exam ol {
    margin: 5vh 0;
    align-items: stretch;
  }
  #exam ol li {
    width:18%;
    font-size: 95%;
    background-color: #fff;
    border-radius: 1em;
    position: relative;
    padding: 3vh 0vw;
  }
  #exam ol li:first-child {
    background-color:#1d7b4d;
    color: #fff;
  }
  #exam ol li img {
    width: 65px;
  }
  #exam ol li:first-child img {
    position: absolute;
    top: -12vh;
    left: 1vw;
  }
  #exam ol li:last-child img {
    position: absolute;
    bottom: -8vh;
    right: 3vw;
  }

  #exam h6 {
    position: absolute;
    color: #fff;
    top:-2vh;
    left:2vw;
    font-size: 0.9em;
    -moz-transform:rotate(-2deg);
     -webkit-transform:rotate(-2deg);
     -o-transform:rotate(-2deg);
     -ms-transform:rotate(-2deg);
    transform:rotate(-2deg);
    text-shadow: 0 0.2em 0px #d8963f, 0.1em -0.03em 0 #d8963f, 0.08em 0.005em 0 #d8963f, 0em 0.08em 0 #d8963f, 0.05em 0.08em 0 #d8963f, 0px -0.05em 0 #d8963f, -0.06em -0.05em 0 #d8963f, -0.08em 0.08em 0 #d8963f, -0.09em 0 0 #d8963f;
  }
  #exam h3 {
    font-size:2em;
    font-weight:600;
    line-height: 1.2;
    color: #fff;
    margin: 3vh 0;
    text-shadow: 0 0.2em 0px #d8963f, 0.1em -0.03em 0 #d8963f, 0.08em 0.005em 0 #d8963f, 0em 0.08em 0 #d8963f, 0.05em 0.08em 0 #d8963f, 0px -0.05em 0 #d8963f, -0.06em -0.05em 0 #d8963f, -0.08em 0.08em 0 #d8963f, -0.09em 0 0 #d8963f;
    
  }
  #exam h3 span {
    color: #fff;
    font-size: 168%;
    line-height:1.3;
    text-shadow: 0 0.15em 0px #652609, 0.01em -0.03em 0 #652609, 0.08em 0.005em 0 #652609, 0em 0.08em 0 #652609, 0.05em 0.08em 0 #652609, 0px -0.05em 0 #652609, -0.06em -0.05em 0 #652609, -0.08em 0.08em 0 #652609, -0.09em 0 0 #652609;
  }
  @media screen and (max-width:65em) {
    #exam ul li:first-child img {width:68%;}
    #exam ul li:nth-child(2) img {
        width: 18%;
        right: -2vw;
        top: -5vh;
      } 
      #exam ol li:first-child img {
        position: absolute;
        top: -12vh;
        left:2vw;
      }
      #exam ul h4 {
        color:#d8963f;
        font-size: 80%;
        margin-top: 1vh;
     }
     #exam ul li,
     #exam ul li:first-child,
     #exam ul li:nth-child(2)  {
        width: 50%;
         padding:0vh 2vw;
         margin: 0;
         background: none;
         border:0px;
         position: relative;
       }
       #exam ul h5 {
        width: 100px;
        height: 100px;
        font-size: 0.6em;
        padding-top:28px;
        top:-5vh;
        left: 2vw;
      }
      #exam ul li:nth-child(2) img {
        width:22%;
        position: absolute;
        right: 2vw;
        top: -6vh;
      }
  }
  @media screen and (max-width:45em){
       #exam {
        padding: 6vh 5vw;
    }
       #exam ul, #exam ol {
        flex-wrap: wrap;
    }
    
       #exam ul li,
       #exam ul li:first-child,
       #exam ul li:nth-child(2)  {
         width:100%;
         padding: 5vh 0;
         margin: auto;
       }
       #exam ul p {
         font-size: 0.5em;
       }
       #exam ul h5 {
         width: 100px;
         height: 100px;
         font-size: 0.6em;
         padding-top:28px;
         top:2vh;
         left: -2vw;
       }
       #exam ul i { padding: 0 1vw;}
       #exam ul strong { font-size: 0.8em;line-height: 1.2;}
       #exam ul li:first-child img {width:80%;}
       #exam ul li:nth-child(2) img {
         width: 22%;
         right: -2vw;
         top: auto;
         bottom: -3vh;
       } 
       #exam ul li:nth-child(2){
        background: #fff;
        padding: 5vh 5vw;
        border: darkgoldenrod 3px dotted;
       }
       #exam a, #exam a:hover {
        width:80%;
      }
       #exam ul h4 {
          color:#d8963f;
          font-size: 80%;
          margin-top: 1vh;
       }
       #exam ol {
         margin: 0;
       }
       #exam ol li {
         width:42%;
         font-size: 75%;
         padding: 3vh 1vw;
         margin-bottom: 1vh;
         color: #5459cd;
         border: solid 1px #e9e9e9;
       }
       #exam ol li:first-child {
        border: solid 0px #e9e9e9;
         background:none;
         color: #5459cd;
         border-radius: 0;
         width: 100%;
         margin-bottom: 0vh;
         font-size: 1em;
         line-height: 1.2;
       }
       #exam ol li img {
         width: 55px;
       }
       #exam ol li:first-child img {
         position: absolute;
         top: -6vh;
         left: 1vw;
       }
       #exam ol li:last-child img {
         position: absolute;
         bottom: -8vh;
         right: 0vw;
       }
       #exam h6 {
         position: absolute;
         color: #fff;
         top:-2vh;
         left:2vw;
       }
       #exam h3 {
         font-size:1.2em;
       }
       #exam h3 span {
         color: #fff;
         font-size: 168%;
       }
  }

#faq {
    background: #ffee8b;
    padding:5vh 1vw;
    text-align:center ;
}
#faq section {
  position: relative;
}
#faq details {
  background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fffce9 repeat;
    background-size: 1%;
    border-radius: 1em;
    border: #bd5800 3px dashed;
    padding: 5vh 2vw;
    margin: auto;
    margin-bottom: 3vh;
    letter-spacing: 0.5px;
    font-size: 0.9em;
}

#faq summary {
     font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
    font-weight: 600;
    font-size: 2em;
    line-height:2;
    color: #353232;
    margin: 3vh 0;
    text-align: center;
    font-weight: 800;
}
#faq summary span {
    font-size: 180%;
    line-height:0.8;
 }
#faq details[open] {
  padding: 8vh 1vw;
  margin-bottom: 3vh;
  border:#5d2e06 dashed 5px;
  border-radius: 1em;
  background: url(https://www.easywin.com.tw/ad/113/0308/img/bk.png) #108b66;
  background-size: 100%;
  color: #fff;
}
#faq details[open] summary {
  margin-bottom: 0.5em;
  border-radius: 0.5em 0.5em 0 0;
  color: #fff;
}
#faq .vs {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 5vh;
}
#faq ul, #faq ol {
  margin: 0;
  padding: 0 0 0 22px;
 
}
#faq ul {
  list-style: disc;
}
#faq .one{
  display: flex;
  display: -webkit-flex;
  list-style: none;
  justify-content: space-around;
  align-items: stretch;
  margin-top: 5vh;
  color: #fff;
  line-height: 1.5;
}
#faq .one li {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 1vh 1vw;
}
#faq ol strong {
  color: #ffed6a;
  display: block;
  font-size: 122%;
  font-weight: 600;
}
#faq ol mark {
  font-size: 2em;
  font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
  padding: 0 5px;
  background: none;
}
#faq h6{
  font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
  position: absolute;
  top:-6vh;
  left:5vw;
  font-size:6em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0.15em 0px #0c6252, 0.01em -0.03em 0 #0c6252, 0.08em 0.005em 0 #0c6252, 0em 0.08em 0 #0c6252, 0.05em 0.08em 0 #0c6252, 0px -0.05em 0 #0c6252, -0.06em -0.05em 0 #0c6252, -0.08em 0.08em 0 #0c6252, -0.09em 0 0 #0c6252;
  -moz-transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
  -o-transform:rotate(-2deg);
  -ms-transform:rotate(-2deg);
 transform:rotate(-2deg);
}

#faq .one h5 {
  writing-mode: vertical-lr;
  position: absolute;
  top:2vh;
  left:-2.5vw;
  font-size: 0.9em;
  line-height: 1.2;
  -moz-transform:rotate(-2deg);
   -webkit-transform:rotate(-2deg);
   -o-transform:rotate(-2deg);
   -ms-transform:rotate(-2deg);
  transform:rotate(-2deg);
  color: #075d36;
  text-align: left;
  text-indent: -0.8em;
}
#faq .one h5 span {
  writing-mode:horizontal-tb;
  text-indent: 0.2em;
}
#faq h3 {
   font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
   font-weight: 600;
   font-size:2em;
   line-height: 1.35;
   color: #353232;
   margin: 3vh 0;
   text-align: center;
   font-weight: 800;
}
#faq  h3 kbd {
   background-color:#003beb;
   color: #fff;
   padding: 1vh 0.5vw ;
   margin-right: 0.5vw;
   font-size: 48%;
   border-radius: 15px;
}
#pow h3 kbd {
   background-color: #ffe100;
   color: #003beb;
}
#faq h3 small {
   font-size: 65%;
}
#faq h3 span {
   font-size: 180%;
   line-height:0.8;
   text-decoration-line: underline;
}
#faq h3 img {
   position: absolute;
   top:3vh;
   left:3vw;
   width:42px;
   height: auto;
}
#faq p {
   padding: 2vh 0;
   color: #6c757d;
   
}
#faq table {
  width: 100%;
  font-size: 92%;
  border: 1px solid #fff;
}
#faq th,
#faq td {
   border: 1px solid #fff;
   padding:1vh 1vw;
   border-top-width: 0;
   border-left-width: 0;
   text-align: center;
}
#faq th {
   font-weight: 600;
   width:20%;
}
#faq td:last-child {
 border-right-width: 0;
}
#faq td:nth-child(2) {
 text-align: left;
}
#faq th:last-child,
#faq td:last-child {
   border-right-width: 0;
}
#faq tr:last-child th,
#faq tr:last-child td {
   border-bottom: 0px;
}
#faq table strong {
  color: #ffed6a;
  letter-spacing: 1px;
}
#bank,#pow {
  width: 49.5%;
  letter-spacing: 0.5px;
  position: relative;
}
#pow th, #pow td{
   border: 1px solid #fffbdb;
   border-top-width: 0;
   border-left-width: 0;
}

@media (max-width:65em) {
  #faq {
    padding:5vh 1vw;
}
#faq summary {
    font-size: 1.5em;
 }
#faq summary span {
   font-size: 150%;
   line-height:0.8;
}
#faq details {
  background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fffce9 repeat;
    background-size: 3%;
    padding: 5vh 5vw;
}

#faq details[open] {
  padding: 0vh 1vw;
  margin-bottom: 3vh;
  border-radius: 1em;
}
#faq table {
  font-size: 100%;
}
#faq .vs, #faq ol {
  flex-wrap: wrap;
}
#faq .one li {
  width: 23%;
  height: auto;
  margin: 0;
  margin-bottom: 3vh;
  
}

#faq ol strong {
  font-size: 105%;
}
#faq h6{
  font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
  top:-8vh;
  left:8vw;
  font-size:4em;
}
#faq .one h5 {
  top:-1vh;
  left:-1vw;
  font-size: 0.8em;
  line-height: 1.2;
  text-indent: -0.8em;
}
#faq .one h5 span {
  text-indent: 0.1em;
}
#faq h3 {
   font-size:2.5em;
   
}

#faq h3 kbd {
  padding: 1vh 2vw;
}
#bank,#pow {
  width: 95%;
  font-size: 0.9em;
  margin: auto;
  margin-bottom: 10vh;
}
#faq th,
#faq td {
   border: 1px solid #fff;
   padding:1vh 2vw;
}
}
@media (max-width:40em) {
  #faq {
    padding:5vh 3vw;
}
#faq summary {
  padding:1vh 3vw;
  font-size: 1.5em;
}
#faq .one li {
  width: 45%;
  height: auto;
  margin-bottom: 3vh;
}
#faq ol strong {
  font-size: 105%;
}
#faq h6{
  font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
  top:-8vh;
  left:8vw;
  font-size:4em;
}
#faq .one h5 {
  top:1vh;
  left:-5vw;
  font-size: 0.8em;
  line-height: 1.2;
  text-indent: -0.8em;
}
#faq .one h5 span {
  text-indent: 0.1em;
}
#faq h3 {
   font-size:2em;
   
}
#faq h3 img {
   position: absolute;
   top:3vh;
   left: 6vw;
   width:32px;
   height: auto;
}
#faq h3 kbd {
  padding: 1vh 2vw;
}
#bank,#pow {
  width: 95%;
  font-size: 0.9em;
  margin: auto;
  margin-bottom: 10vh;
}
}
.reday {
  background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fffce9 repeat;
  background-size: 1%; 

  padding: 5vh 1vw;
  border-radius: 1em;
  margin-bottom: 3vh;
  color: #333;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  
}
#tp .reday img {
    width: 38px;
}
#tp table, #th table{
  text-align: left;
  width: 100%;
  margin-bottom: 5vh;
}
#tp th, #th th {
  text-align: center;
}
#tp ul{
    list-style: none;
    width: 30%;
}
#tp .reday div {
    width: 68%;
}
#tp caption, #th caption {
    font-size: 1.5em;
}

#tp thead th, #th thead th {
  background-color:#ffee8b;
  color: #079c80;
  border-right:solid 1px #079c80 ;

}
#tp tbody th, #th tbody th {
  border-bottom: solid 2px;
  border-right: solid 2px;
}
#tp tbody td,
#th tbody td,
#super tbody td {
  border-bottom: solid 2px;
  border-right: solid 2px;
  
}
#tp tbody td:last-child,
#th tbody td:last-child,
#super tbody td:last-child {
  width: 50%;
  text-align: left;
}
 /* #tp tbody tr:nth-child(2n) td:last-child,
#th tbody tr:nth-child(2n) td:last-child,
#super tbody tr:nth-child(2n) td:last-child,
#tp tbody tr:nth-child(2n) th,
#th tbody tr:nth-child(2n) th,
#super tbody tr:nth-child(2n) th {
  background:rgba(255, 215, 210, 0.3);
} 
#tp tbody th:first-child {
  background-color: #fff;
} */
.reday table span {
  padding: 8px;
  background:#ffe100;
  border-radius: 1em;
  font-size: 90%;
} 
#faq .reday  strong {
  font-size: 1.8em;
  color: #18b397;

}
#super small {
  font-size: 65%;
  color: #18b397;
}
#faq h4 {
  font-size: 1.2em;
}
#faq h4 img {
  width:26px;
  padding: 0 5px;
}
@media (max-width:45em) {
  .reday {
    flex-wrap: wrap;
    padding: 5vh 0px;
  }
  #tp table, #th table, #super table{
    font-size: 0.8em;
  }
  #tp table, #th table, #super table, 
  #tp h3, #th h3, #super h3 {
    width:100%;

  }
  #tp th, #th th, #super th {
    text-align: center;
    padding: 1vh 0.2vw;
  }
  #tp h3, #th h3, #super h3 {
    font-size:1.5em;
  }
  #tp h3 span, #th h3 span, #super h3 span  {
    font-size: 0.8em;
  }

  #tp tbody td:last-child,
  #th tbody td:last-child,
  #super tbody td:last-child {
    width: 50%;
    text-align: left;
  
  } 
  #faq .reday  strong {
    font-size: 1.5em;
  
  }

#tp ul,
#tp .reday div {
    width: 100%;
}
}
#te p {
    font-size: 1.2em;
    font-weight: 800;
}

@media (max-width:45em) {
    #te p {
        font-size: 1em;
    }
}

.carousel {
  margin: 0 auto;
  padding: 20px 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
}

.card {
  width: 500px;
  color: #494a4f;
  border-radius: 25px;
  padding:3vh 1vw;
  /* font-size: xx-large; */
  justify-content: center;
  align-items: center;
  
  & span {
      color: #6136b2;
      display: block;
      font-size: 1.1em;
      font-weight: 300;
      padding-left: 1vw;
    }
}  
.carousel {
  /* ... */
  > * {
    flex: 0 0 100%;
  }
}

/* 更好地組織卡片。 */
.group {
  display: flex;
  gap: 2vw;
  /* 向右添加填充以在最後一張卡片和第一張卡片之間創建間隙。 */
  padding-right:2vw;
}

.group {
  will-change: transform; /* 我們應該對瀏覽器友好——讓它知道我們將要動畫化。 */
  animation: scrolling 20s linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.carousel {
  &:hover .group {
    animation-play-state: paused;
  }
}
@media (max-width:55em){
  .carousel {
      background-color: #fff;
    }
    .group {
      display: flex;
      gap: 5px;
      padding-right:5px;
    }

  
    .card {
      padding:3vh 1.3vw;
      font-size: 0.9em;
      
      & span {
          font-size:1em;
      }
  
    .carousel {
      /* ... */
      > * {
        flex: 0 0 100%;
      }
    }
  }}

  #teacher {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;

  }
  
  #teacher h3  {
    font-size: 2.2em;
    color: #5459cd;
    line-height: 1.2;
    font-weight: 900;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(68%, transparent), to(rgba(250, 250, 250, 0.1)));
    text-align: center;
    width: 100%;
   }
  #teacher h3 img{
    width: 12%;
  }
  #teacher figure {
    width: 48%;
    position: relative;
    margin: 1vh 0;
    padding: 0;
  }
  #teacher img {
    width:42%;
    padding-left: 1vw;
    
  }
  #teacher figure p {
      position: absolute;
      top:1.5vh;
      right: 5vw;
      line-height: 1.65;
      color:#604a88;
      width:45%;  

  }
#teacher figure p strong {
    font-size: 2.5em;
    display: block ;
    
    
}
#teacher figure p strong small {
    font-size: 52%;
    margin-left: 1vw;
}
#teacher ul {
   /* background-color:#ffd9b5;  #3e2e5b*/
   background:url(https://www.easywin.com.tw/data/public/img/w-dot.png),#604a88;
   background-size: 30%;
   padding: 5vh 2vw 5vh 5vw;
   list-style: disc;
   border-radius: 2em;
   margin-top: -3vh;
   font-size: 92%;
   color: #e8d4d5; 
}
#teacher ul li:first-child {
    list-style: none;
    margin-bottom: 2vh;
}
#teacher ul li:first-child span {
    background-color:#ffe28a;
    color: #3e2e5b;
    padding: 1vh 1vw;
    border-radius: 1em;
}

  @media screen and (max-width: 66em){
  #teacher img {
    width:50%;
    padding-left: 2vw;
    
  }
 #teacher h3  {
    font-size: 1.5em;
   }
  #teacher h3 img{
    width: 22%;
  }
    #teacher figure p {
      top:-3vh;
      right: 0vw;
      width:50%;
      font-size: 90%;

  }
    #teacher figure p strong {
    font-size: 2em;
    display: block ;
    
    
}
  }
    @media screen and (max-width:45em){
  #teacher img {
    width:55%;
    padding-left: 2vw;
    
  }
    #teacher figure p {
      top:-1vh;
      right: 0vw;
      width:50%;
      font-size: 90%;

  }
    #teacher figure {
    width: 100%;
    margin: 1vh 0;
  }
  
#teacher ul {
   /* background-color:#ffd9b5;  #3e2e5b*/
   background:url(https://www.easywin.com.tw/data/public/img/w-dot.png),#604a88;
   background-size:50%;
   padding: 1vh 2vw 5vh 8vw;
   list-style: disc;
   border-radius: 2em;
   margin-top: -5vh;
   font-size: 92%;
   color: #e8d4d5; 
}
  #teacher figure p strong {
    font-size: 2.2em;
    display: block ;
    
    
}
  }