@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');
*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; }

body{
    background:url(img/bg.png) #ffe5df;
    background-size: 3%;
    margin: 0 0;
    background-position: center;
    font-size: 1.1em;
    font-weight: 400;
    font-family: "Arial","Noto Sans TC" , sans-serif;
    line-height: 1.8;
    overflow-x: hidden;
    color: #333;
    --f-b: #378afe;
    --f-b2:#6099ff;
    --f-b3:#b2d2ff;
    --f-p: #ff36b9;
    --f-p2: #ff1f8a;
    --f-p3:#b2d2ff;
    --f-p5:#ffbdfa;
    --f-y:#ffe100;
    --b1: #36d0ff;
    --b2: #ffcccc;
  /* #00c9ff */
   
}

 
  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 {padding: 8vh 6vw;letter-spacing: 0.5px;font-size: 1.2em;}
  article a, article a:hover {text-decoration: none;}
  article h3, article h4, article h5, article h6 {margin: 0;padding: 0;}
  article h3 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.35;
    margin: 3vh 0;
  }
  
  #sp {
    background: url(img/sp_bg.jpg)repeat-x;
    background-size: 20%;
    background-position: center;
    text-align: center;
    position: relative;
    margin: auto;
    color: chocolate;
    padding:8vh 8vw;
  }
 
  #sp .sp {
    background-color: rgba(255, 255, 255, 0.92);
    width: 68%;
    border-radius:50%;
    margin: auto;
    margin-left: 2vw;
    margin-bottom: 10vh;
    padding:16vh 8vw 15vh;
  }
  #sp img {
    width:38%;
    position: absolute;
    right: 1vw;
    bottom:0vh;
  }
  #sp .sp p {
    background-color:#d8963f;
    color: #fff;
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    font-weight: 600;
    line-height: 1.2;
    font-size: 1.35em;
    padding-top:38px;
    top:12vh;
    left:12vw;
  }
  #sp h3 {
    font-size:4em;
    line-height: 1.2;
    font-weight:900;
    margin: 0 0 2vh;
     padding: 0;
    -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)));
  }
  #sp h3 span {
    color: #652609;
    font-size: 132%;
    line-height: 1;
  }
  #sp table {
    margin: auto;
    font-size: 1.1em;
    text-align: center;
  }
  #sp table span {
    font-size:2em;
    font-weight: 600;
  }
  #sp table strong {
    font-size: 3em;
    line-height: 1.5;
  }
  #sp table td {
    vertical-align:text-top;
  }
  #sp table td:last-child {
    border-bottom: dashed 1px ;
  }
  #sp table tr:last-child td {
    border-bottom: dashed 0px ;
  }
  #sp table ul {
    text-align: left;
  }
  #sp a, #sp a:hover {
    background:#ff3597;
    color: #fff;
    font-weight: 600;
    border-radius: 1em;
    padding: 2vh 2vw;
    display: block;
    margin-top: 1vh;
    font-size: 1.8em;
}
@media (max-width: 78em){
  #sp {
    background: url(img/sp_bg.jpg)repeat-x;
    background-size:38%;
    background-position: center;
    padding: 8vh 0vw;
    font-size: 1em;
  }
  #sp .sp {
    width:80%;
    margin-left: 1vw;
    margin-bottom: 10vh;
    padding:8vh 0;
  }
  #sp img {
    width:45%;
    position: absolute;
    right: 1vw;
    bottom:0vh;
  }
  #sp .sp p {
    width: 125px;
    height: 125px;
    padding-top:32px;
    top:2vh;
    left:5vw;

  }

}
@media (max-width: 40em){
 article h3 {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.35;
    margin: 3vh 0;
  }
  #sp {
    padding:10vh 5vw 0;
  }
  #sp .sp {
    background: none;
    width:100%;
    margin: auto;
    margin-bottom: 10vh;
    padding:0vh 0;
    border-radius: 0em;
  }
  #sp img {
    width:36%;
    position: absolute;
    right: 8vw;
    top:14vh;
  }
  #sp h3 {
    font-size:3.8em;
    line-height: 1.2;
    text-align: left;
    padding-left: 5vw;
  }

    #sp .sp p {
    width: auto;
    height: auto;
    padding-top:0;
    padding-left: -5vw;
    position: relative;
    text-align: left;
    background:none;
    font-size: 1.2em;
    color: #d8963f;
    top:auto;
    left:auto;

  }
  #sp table {
    margin: auto;
    border-collapse: separate;
    border-spacing:0px;
    background: #fff;
    font-size: 0.95em;
    text-align: center;
    padding:8vh 5vw 0;
    margin-top: -8vh;
    border-radius: 1em;
  }
  #sp table td:first-child {
    width: 32%;
  }
  #sp table span {
    font-size:1.8em;
    font-weight: 600;
  }
  #sp table strong {
    font-size: 2em;
    line-height: 1.5;
  }
    #sp a, #sp a:hover {
    font-size: 1.3em;
    margin-bottom: 5vh;
}
}
#te {
  background:url(img/bg-2.png)#127658;
  background-size: 35%;
  color:#fff;
  text-align: center;
}
#te h3 {
  font-size: 2em;
  font-weight: 600;
  line-height: 1.35;
  margin: 3vh 0;
}
#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 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:30%;
  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 ;
  color: #ffdfd0;
}
#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: 2vh 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 p {
      font-size: 0.8em;
    }
    #te ol li:last-child {
      color: #501729;
  }
}
  #edu {
    background: #ffee8b;
    padding:5vh 5vw;
    text-align:center ;
}
  #edu section {
    background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fffce9 repeat;
    background-size: 1%;
    border-radius: 1em;
    border: rgb(163, 112, 67) 3px dashed;
    padding: 8vh 2vw;
    margin: auto;
    margin-top: -1.5vh;
    letter-spacing: 0.5px;
    position: relative;
  }
  #edu ul li img {
    position: absolute;
    width: 10%;
    left: 3vw;
    top: -2vh;
  }
  #edu ul,#edu ol {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #edu ul {
    font-size: 0.8em;
  }
  #edu ul li {
    position: relative;
    width: 30%;
  }
  #edu ul h4 {
    font-size:1.68em;
    line-height: 1.35;
    color: #1d7b4d;
    margin-bottom: 1vh;
  }
  #edu 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:0.5vh 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:5%;
    left: 8vw;
    top: -1vh;
  }
#edu table caption {font-size: 1.2em;font-weight: 600;line-height: 1.35;padding: 2vh 0;position: relative;}
#edu table caption span {font-size: 1.2em; color:#18b397;}
#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%;
    }
}
@media screen and (max-width:40em){
    #edu { padding:5vh 3vw;   }
    #edu section {
        background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fffce9 repeat;
        background-size:3%;
        padding: 5vh 5vw;
      }
    #edu ul li img {
        position: absolute;
        width:9%;
        left: 3vw;
        top: -2vh;
      }
      #edu ul,#edu ol {
        flex-wrap: wrap;
      }
      #edu ul li {
        position: relative;
        width: 100%;
        margin: 2vh;
        border: solid 1px;
        padding: 2vh 3vw;
      }
      #edu ul h4 {
        font-size:1.28em;
      }
      #edu 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:rgba(255, 212, 184, 0.6);
   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:23%;
         font-size: 75%;
         padding: 3vh 1vw;
         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 5vw;
    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;
    letter-spacing: 0.5px;
    margin-bottom: 3vh;
}

#faq summary {
  font-weight: 600;
  padding:2vh 3vw;
  font-size: 2.2em;
  font-weight: 600;
  line-height: 1.35;
  color: #353232;
}
#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 ol {
  display: flex;
  display: -webkit-flex;
  list-style: none;
  justify-content: space-around;
  align-items: stretch;
  margin-top: 5vh;
  color: #fff;
  line-height: 1.5;
  font-size: 0.9em;
}
#faq ol li {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 1vh 1vw;
}
#faq ol strong {
  color: #ffed6a;
  display: block;
  font-size: 115%;
  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.8vw;
  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;
  letter-spacing: 0.5px;
}
#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 {
  padding:2vh 3vw;
  font-size: 1.8em;
}
#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: 5vh 1vw;
  margin-bottom: 3vh;
  border-radius: 1em;
}
#faq table {
  font-size: 100%;
}
#faq .vs, #faq ol {
  flex-wrap: wrap;
}
#faq ol li {
  width: 23%;
  height: auto;
  margin: 0;
  margin-bottom: 3vh;
  
}
#faq ol li:last-child{
  display:none;
}
#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:2vh 3vw;
  font-size: 1.5em;
}
#faq ol li {
  width: 45%;
  height: auto;
  margin-bottom: 3vh;
}
#faq ol li:last-child{
  display:none;
}
#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 {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: stretch;
  background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fffce9 repeat;
  background-size: 1%;
  padding: 5vh 5vw;
  border-radius: 1em;
  margin-bottom: 3vh;
  
}
#tp table, #th table, #super table {
  text-align: left;
  font-size: 0.9em;
  color: #333;
}
#tp th, #th th, #super th {
  text-align: center;
}
#tp h3, #th h3, #super h3 {
  width: 25%;
  color: #18b397;
  font-size: 2.2em;
  line-height: 1.35;
  font-weight: 600;
}
#tp h3 span, #th h3 span, #super h3 span  {
  text-decoration: none;
  font-size: 0.6em;
  border: solid 3px;
  padding: 0.5vh 1vw;
  border-radius: 1em;
}
#tp thead th, #th thead th, #super thead th {
  background-color: #fff183;
  color: #079c80;
  border-right:solid 1px #079c80 ;

}
#tp tbody th, #th tbody th, #super tbody th {
  color:#18b397 ;
  border-bottom: solid 2px #18b397;
  border-right: solid 2px #18b397;
}
#tp tbody td,
#th tbody td,
#super tbody td {
  border-bottom: solid 2px #18b397;
  border-right: solid 2px #18b397;
  font-size: 92%;
  
}
#tp tbody td:last-child,
#th tbody td:last-child,
#super tbody td:last-child {
  width: 50%;
  text-align: left;
}
.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, 
  #tp h3, #th h3, #super h3 {
    width:100%;

  }
  #tp th, #th th, #super th {
    text-align: center;
    font-size: 92%;
    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;
  
  }
}
#navber {
  position:fixed;
  right:0px;
  top: 5vh;
  font-weight: 400;
  width:35px;
  z-index: 99;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}
#navber p {
  margin: 0;
  padding: 0;
  color: #000;
}
#navber ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 1vh;
  border-radius:0 5px 5px 0 ;
  background:#685e79;
  box-shadow: 1px 2px 6px rgba(51, 48, 48, 0.5);
  
}
#navber ul li{
  padding: 1.5vh 0.3vw;
  border-bottom: dashed 1px;
}
#navber ul li:last-child {
  border-bottom: dashed 0px;

}
#navber ul li:hover {
  opacity: 0.6;
}
@media screen and (max-width: 55em) {
  #navber {
    position:fixed;
    background:rgba(247, 243, 243, 0.85);
    left:auto;
    top: 0;
    width:100%;
    font-size: 15px;
    color: #685e79;
    line-height: 1.3;
    padding: 0;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items:stretch;
   
  }
  #navber ul {
    width: 100%;
    margin-top: 0vh;
    border-radius:0 ;
    box-shadow: 0px 0px 0px rgba(51, 48, 48, 0.5);
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
background:rgba(148, 135, 170, 0.9);

    
  }
  #navber ul li{
    padding: 0 2vw;
    border-bottom: dashed 0px;
    border-left: dashed 1px;
    text-align: center;

  }
  #navber ul li:first-child {
    border-left: dashed 0px;
  }
   #navber p {
    width: 25%;
    padding: 1.5vh 0;
  }
  #navber ul li, #navber p {
    width: 22%;
  }
}
#gotop {
  width:3.8em;
  height:3.8em;
  text-align: center;
  border:1px solid #ddd;
  position: fixed;
  right: 10px;
  bottom: 10vh;
  border-radius:50%;
  padding:6px 0px;
  font-size:0.9em;
  background: rgba(0,0,0,0.7);
  border: 1px;
  color: white;
  cursor: pointer;
  z-index: 300;
  
  }
  
  @media screen and (max-width:46em){
    #gotop {
    font-size:13px;
    padding-top: 5px;
    bottom:65px;
    }
  }
  .swiper {
    width: 100%;
  }
  
  .swiper-slide {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  
  #ads {
    width: 80%;
    padding: 5vh 0vw;
    margin:5vh auto;
    letter-spacing: 1px;
    text-align: center;
    font-weight: 400;
    border-bottom: solid 1px;
    border-top: solid 1px;
    /* background-color: #efe8ff; */
  }
  
  .ads,.superbox_sale {
  
    width:40%;
    border-radius: 1em;
    padding: 5vh 0vw;  
    text-align: center;
    display: inline-block;
  
  }
  .superbox_sale{
    width:52%;
  }
  .ads:hover,.superbox_sale:hover {
    cursor: pointer;
  }
  
   .superbox_sale img {
    width: 48%;
    height:auto;
    background-color: rgb(255, 240, 240);
    border:solid #2a2921 1px;
  
  } 
  #ads p {
    vertical-align: top;
    font-size: 1.35em;
    margin: 0;
    padding: 0;
  }
  #ads p span {
    font-weight: 600;
    background-color: #f00;
    color: #fff;
    padding: 1vh 1vw;
  
  }
  #ads p ins {
    font-size: 60%;
   
  }
  #ads h3 {
    /* color: #622f15; */
    font-size: 1.5em;
    line-height: 1.3;
    margin: 0;
  }
  #ads h4{
    text-align: center;
  }
  #ads h4 span {
    color: #1dcd00;
    font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
    font-weight: 800;
    font-size: 2em;
  }
  #ads nav{
    margin: 3vh 0vw 10vh 0vw;
    font-size: 1.2em;
    font-weight: 600;
  }
  #ads nav a:hover,#ads nav a{
    padding: 2vh 1.5vw;
    margin: 0 1vw;
    background-color: #1dcd00;
    color: #fff;
    border-radius: 3em;
  }
  #ads nav a:hover{
    opacity: 0.6;
  }
  @media screen and (max-width: 55em) {
  
  #ads h2 {  font-size: 1.25em; }
  #ads h2 span{  font-size: 1.8em;}
  #ads p {
    vertical-align: top;
    font-size: 1.1em;
    
  }
  #ads {
    width: 90%;
    background-color:#ffd5c0;
    padding: 5vh 0vw;
    text-align: center;
    letter-spacing: 0;
    color: #000;
  }
  #ads nav{
    font-size: 1.2em;
  }
  #ads nav a:hover,#ads nav a{
    padding: 2vh 3vw;
    line-height: 3;
    color: #fff;
    border-radius: 3em;
  }
  .ads,.superbox_sale {
    margin:0vh 1vw;
    width:95%;
    border-radius: 1em;
    padding:1vh 2vw;  
  
  }
   .superbox_sale img {
    width: 80%;
    height:auto;
  } 
  }
   
#sptp{
    background: url(img/sp_bg.jpg)repeat-x;
    background-size: 20%;
    background-position: center;
    text-align: center;
    padding: 8vh 6vw;
    position: relative;
    font-size: 1.1em;
    margin: auto;
    color: chocolate;
  }
 
#sptp .sp{
    background-color: rgba(255, 255, 255, 0.92);
    width: 80%;
    border-radius: 5em;
    height: auto;
    margin: auto;
    margin-left: 2vw;
    margin-bottom: 10vh;
    padding:8vh 2vw;
  }
#sptp img {
    width:32%;
    position: absolute;
    right: 1vw;
    bottom:0vh;
    z-index: 99;
  }
#sptp .sp p{
    background-color:#d8963f;
    color: #fff;
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    font-weight: 600;
    line-height: 1.2;
    font-size: 1.35em;
    padding-top:38px;
    top:3vh;
    left:6vw;
  }
#sptp h3 {
    font-size:3.8em;
    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)));
  }
#sptp h3 span {
    color: #652609;
    font-size: 132%;
    line-height: 1;
  }


#sptp table {
  margin: 3vh auto;
  font-size: 1.05em;
  text-align: center;
}
#sptp table span {
  font-weight: 600;
  color: #670c18;
}
#sptp table strong {
  font-size: 1.8em;
  line-height: 1.5;
  letter-spacing: 0;
}

#sptp table td {
  padding: 1.5vh 2vw;
  border-left: dashed 1px ;
  border-bottom: dashed 1px ;
}
#sptp table td:first-child {
  border-left: dashed 0px;
  position: relative;
}
#sptp table tr:last-child td {
  border-bottom: dashed 0px ;
}
#sptp table ul {
  text-align: left;
}
#sptp table h6 {
  color: #670c18;
  font-size: 0.68em;
  position:absolute;
  top: 3vh;
  left:-2vw;
}
#sptp a, #sptp a:hover {
  color:#d8963f;;
  font-weight: 600;
  border-radius: 1em;
  padding: 2vh 2vw;
  display: block;
  margin-top: 2vh;
  font-size: 1.8em;
}
@media (max-width: 78em){
#sptp{
    background: url(img/sp_bg.jpg)repeat-x;
    background-size:38%;
    background-position: center;
    padding: 8vh 0vw;
    font-size: 1em;
  }
#sptp .sp {
    width:80%;
    margin-left: 1vw;
    margin-bottom: 10vh;
    padding:8vh 0;
  }
#sptp img{
    width:45%;
    position: absolute;
    right: 1vw;
    bottom:0vh;
  
  }

  #sptp .sp p {
    display: none;
  }

}
@media (max-width: 40em){

#sptp {
    padding:12vh 3vw 6vh;
  }
#sptp .sp {
    background: none;
    width:100%;
    margin: auto;
    margin-bottom: 10vh;
    padding:0vh 0 ;
    border-radius: 0em;
  }
  
  #sptp img {
    width:32%;
    position: absolute;
    right: 0vw;
    top:8vh;
  }

  #sptp h3{
    font-size:2.2em;
    line-height: 1.2;
    text-align: left;
    padding-left: 5vw;
  }
 #sptp table{
    margin: auto;
    border-collapse: separate;
    border-spacing:0px;
    background: #fff;
    font-size: 0.95em;
    text-align: center;
    padding:8vh 5vw 0;
    margin-top: -8vh;
    border-radius: 1em;
  }
  #sptp table{
    padding:8vh 5vw 4vh;
  }
  #sptp table td:first-child{
    width: 32%;
  }
  
  #sptp table span {
    font-size:1em;
    font-weight: 600;
  }
  #sptp table strong {
    font-size: 1.2em;
    line-height: 1.5;
  }
  #sptp a, #sptp a:hover {
    font-size: 1.3em;
    margin-bottom: 5vh;
}

}
#teac {
  padding:2vh 8vw;
  display: flex;
  display:-webkit-flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-wrap: wrap;
}
#teac img {
  width: 33%;
  height: auto;
}
@media (max-width:65em) {
  #teac img {
    width: 48%;
    height: auto;
  }
}
@media (max-width:40em) {
  #teac {
    padding:2vh 5vw;
  }
  #teac img {
    width: 50%;
    height: auto;
  }
}
#socail_icon {
  padding: 0;
}
#socail_icon_box a {
  background-color: #1f8bd9;
}
#socail_icon a::before {
  content:none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    padding-right: 0;
}
@media screen and (max-width: 575px) {
  #socail_icon_box {
 
      height: 8vh;
  }
  #socail_icon_box a.bg_line {
    padding: 0.5em 0.1em 0.4em;
}
}
.carousel {
    margin: 0 auto;
    padding: 20px 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
  }

  .card {
    width: 500px;
    color: #494a4f;
    border-radius: 25px;
    padding:3vh 0.5vw;
    /* 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: 1vw;
    /* 向右添加填充以在最後一張卡片和第一張卡片之間創建間隙。 */
    padding-right:1vw;
  }
  
  .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%;
        }
      }
    }}