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

#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:18vh;
  }
  body{
  background: url(../img/bg-skym.png) top center no-repeat;
  background-attachment: fixed;  
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  margin: 0 0;
}
}
  
.logock{
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: solid 1px #ffffffe7;
    color: #099587;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 1.5em;
    position: fixed;
    top: 0;
    left: 0;
    padding:3px 0 1px 2vw;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
    z-index: 99;
    text-align: left;
}
.logock h6{
    margin: 0;
    padding: 0;
}
  @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;} }
  table {border-collapse: collapse;border-spacing: 0;margin: auto; text-align: center;}
  #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;}
    #socail_icon {margin-top: 0; background-color: rgba(54, 50, 0, 0)}
    #socail_icon_box a.w100 img {
        pointer-events: none;
        display: block ;
        position: absolute; 
        z-index: 10; 
        width: 40px; 
        height: 40px; 
        top: 18px!important;
        left: 10%!important;
    }
    #socail_icon_box a.bg_line {
        padding: 0.2em 0.15em 0.2em !important;
    }
    #socail_icon_box {
         height: 6.5vh !important;
    }
}

#talk {
    margin: 3vh 0;
    padding: 5vh 5vw;
}
#talk ul {
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding-bottom:15vh;
    background: url(https://www.easywin.com.tw/AD/114/0206/img/talk.png)no-repeat bottom left;
    background-size:22%;
    color: #0c6252;
}
#talk ul li:nth-child(2) {
    width: 62%;
}
#talk ul li:first-child {
    width: 22%;
    
}
#talk h2 {
    font-size: 1.85em;
    line-height: 1.5;
}
#talk .countySelect, #talk .storeSelect {
    font-size:1.1em;
    color: #666;

}

@media screen and (max-width:65em) {
   #talk ul {
        padding-bottom:18vh;
        background: url(https://www.easywin.com.tw/AD/114/0206/img/talk.png)no-repeat bottom left -3vw;
        background-size:35%;
    }
    #talk ul li:nth-child(2) {
        width: 68%;
    }
    #talk h2 {
        font-size: 2em;
        line-height: 1.5;
    }

}
@media screen and (max-width:40em) {
    #talk ul {
        padding-bottom:6vh;
        background: url(https://www.easywin.com.tw/AD/114/0206/img/talk.png)no-repeat bottom left -5vw;
        background-size:45%;
    }
    #talk ul li:nth-child(2) {
        width: 66%;
    }
    #talk h2 {
        font-size: 1.25em;
        line-height: 1.5;
    }
    #talk h2 {
        font-size:1.35em;
    }
}
    #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: 68%;
  }
}
footer {
  background: #1aa696;
  color: #fff;
  padding: 5vh 5vw;

}
footer ul {
   display: flex;
    display: -webkit-flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
}
footer ul li {
  width: 20%;
  text-align: center;
    font-size: 1.35em;
}
footer ul li a, footer ul li a:hover {
  color: #fff;
}
  @media screen and (max-width: 55em) {
    footer {
  background: #1aa696;
  color: #fff;
  padding: 5vh 1vw 8vh;

}
    footer ul li {
  width: 32%;
  text-align: center;
    font-size: 1em;
}
  }

  article {font-size:1.15em; padding: 8vh 8vw;letter-spacing: 0.5px;}
  article a, article a:hover {text-decoration: none;}
  h1, h2,h3,h4, h5, h6, ol,ul {margin: 0;padding: 0;}
  table ol,table ul {padding: 0 0 0 22px;}

article h2 {
   font-size: 1.8em;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}
/* article h2 img {
   width:125px;
    margin-left: -5.8vw;
    padding-right: 1vw;
    }

article h2 span {
  font-family: "Teko", "Noto Sans TC", "Arial", sans-serif;
  font-size: 2em;
  line-height: 1.3;
  font-weight: 300;
  color: #ff981b;
  display: block;
}
article h2 span::before{
    content: '＼';
    font-size:35%;
    padding: 1vw;
}
article h2 span::after{
    content: '／';
    font-size:35%;
    padding: 1vw;
}
  article h2 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.35;
    margin: 3vh 0;
  } */
  article table {
  width: 100%;
}
article table td {
  border-bottom: solid 1px;
  padding: 1.5vh 1vw;
}
article table tr:last-child td {
  border-bottom: solid 0px;

}
article table tr td:first-child {
  border-right: solid 1px;
  text-align: center;

}
article table th {
  text-align: center;
  width: 20%;
}

@media screen and (max-width: 55em) {
    article {
    padding: 5vh 5vw;
    /* padding: 5vh 20vw 5vh 5vw; */

  }
}


 header {
    background: url("../img/teacher.png")no-repeat bottom right 5vw;
    background-size: 35%;
   color: #fff;
   line-height: 1.2;
   letter-spacing: 1px;
   padding: 8vh 8vw 20vh;
 }
 header a,header a:hover {
    padding: 2vh 2vw;
    background-color: #18b397;
    color: #fff;
    border-radius: 2em;
 }
header section{
      position: relative;
      display: flex;
      display: -webkit-flex;
      align-items: flex-start;
      justify-content: space-between;
      text-align: left;
   
}
 header div {
    width: 50%;
  }
header h1 {
    font-family: "hiragino-mincho-pron", sans-serif;
    font-weight: 600;
    font-size:6.8em;
    line-height: 1;
    position: relative;
    z-index: 99;
    filter: drop-shadow(0.03em 0.03em 0px  #0b7142);
     text-shadow:  0.04em 0.04em 0 #5a971a,0.02em 0.02em 0 #0b7142,
                  0.03em 0.03em 0 #0b7142,
                  0.04em 0.04em 0 #0b7142,
                  0.05em 0.05em 0 #0b7142,
                  0.06em 0.06em 0 #0b7142,
                  0.02em 0.02em 0 #0b7142,
                  0.01em 0.01em 0 #0b7142,
                  0.08em 0.08em 0 #0b7142,
                  -0.03em -0.03em 0 #0b7142,
                  -0.02em -0.02em 0 #0b7142,
                  -0.01em -0.01em 0 #0b7142; 

}
header h1 strong {
    font-size:128%;
    line-height: 1.2 ;
    display: block;
    /* background-color: #0b7142; */
    filter: drop-shadow(0.03em 0.03em 0px  #0b7142);
     text-shadow:  0.04em 0.04em 0 #5a971a,0.02em 0.02em 0 #0b7142,
                  0.03em 0.03em 0 #0b7142,
                  0.04em 0.04em 0 #0b7142,
                  0.05em 0.05em 0 #0b7142,
                  0.06em 0.06em 0 #0b7142,
                  0.02em 0.02em 0 #0b7142,
                  0.01em 0.01em 0 #0b7142,
                  0.08em 0.08em 0 #0b7142,
                  -0.03em -0.03em 0 #0b7142,
                  -0.02em -0.02em 0 #0b7142,
                  -0.01em -0.01em 0 #0b7142; 
}

h1 span {
    display: block;
    font-size:0.35em;
      text-shadow:  0.04em 0.04em 0 #5a971a,0.02em 0.02em 0 #0b7142,
                  0.03em 0.03em 0 #0b7142,
                  0.04em 0.04em 0 #0b7142,
                  0.05em 0.05em 0 #0b7142,
                  0.06em 0.06em 0 #0b7142,
                  0.02em 0.02em 0 #0b7142,
                  0.01em 0.01em 0 #0b7142,
                  0.08em 0.08em 0 #0b7142,
                  -0.03em -0.03em 0 #0b7142,
                  -0.02em -0.02em 0 #0b7142,
                  -0.01em -0.01em 0 #0b7142; 
    
}
header .mv {
    background:rgba(255, 255, 255,0.65);
    border: solid 2px #333;
    padding:2vh 1vw;
    list-style: none;
    width:48%;
    position: relative;
       text-align: center;

  }
  .swiper {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9; /* 現代瀏覽器支援 */
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, -6vh) !important;
    width: 100%;
}
header ul {
   margin: auto;
   margin-top: 5vh;
   padding: 0;
   list-style: none;
   font-size: 1.15em;
   color: #333;
}
header ul li {
    margin: 3vh 0;
}
header ul span {
    background:#ffdc33;
    color: #0b7142;
    font-weight: 600;
    border-radius: 1em;
    padding: 8px 12px;
    margin-right: 1vw;
}
@media screen and (max-width:85em) {header ul {font-size: 1em;}}
@media screen and (max-width:75em) {
    header {padding: 8vh 12vw 32vh;}
    header h1 {
    font-size:8.2em;
    filter: drop-shadow(0.03em 0.03em 0px  #0b7142);
     text-shadow:  0.04em 0.04em 0 #5a971a,0.02em 0.02em 0 #0b7142,
                  0.03em 0.03em 0 #0b7142,
                  0.04em 0.04em 0 #0b7142,
                  0.05em 0.05em 0 #0b7142,
                  0.06em 0.06em 0 #0b7142,
                  0.02em 0.02em 0 #0b7142,
                  0.01em 0.01em 0 #0b7142,
                  0.08em 0.08em 0 #0b7142,
                  -0.03em -0.03em 0 #0b7142,
                  -0.02em -0.02em 0 #0b7142,
                  -0.01em -0.01em 0 #0b7142; 

}
header h1 strong {
    font-size:128%;
    line-height: 1.2 ;
    display: block;
    /* background-color: #0b7142; */
    filter: drop-shadow(0.03em 0.03em 0px  #0b7142);
     text-shadow:  0.04em 0.04em 0 #5a971a,0.02em 0.02em 0 #0b7142,
                  0.03em 0.03em 0 #0b7142,
                  0.04em 0.04em 0 #0b7142,
                  0.05em 0.05em 0 #0b7142,
                  0.06em 0.06em 0 #0b7142,
                  0.02em 0.02em 0 #0b7142,
                  0.01em 0.01em 0 #0b7142,
                  0.08em 0.08em 0 #0b7142,
                  -0.03em -0.03em 0 #0b7142,
                  -0.02em -0.02em 0 #0b7142,
                  -0.01em -0.01em 0 #0b7142; 
}

header ul {
    font-size: 1.1em; 
    text-align: left;
    background: rgba(255, 255, 255, 0.557);
    border:solid 1px #fff;
    border-radius: 1em;
    padding: 5vh 5vw;
    margin: -3vh auto 3vh;

}
header .mv { width:100%;}
header div {width: 100%; margin: auto;text-align: center;}
header section {flex-wrap: wrap;}
}

@media screen and (max-width:65em) {
    header {padding: 15vh 6vw 32vh;}
    header h1 {
    font-size:6em;
    filter: drop-shadow(0.03em 0.03em 0px  #0b7142);
     text-shadow:  0.04em 0.04em 0 #5a971a,0.02em 0.02em 0 #0b7142,
                  0.03em 0.03em 0 #0b7142,
                  0.04em 0.04em 0 #0b7142,
                  0.05em 0.05em 0 #0b7142,
                  0.06em 0.06em 0 #0b7142,
                  0.02em 0.02em 0 #0b7142,
                  0.01em 0.01em 0 #0b7142,
                  0.08em 0.08em 0 #0b7142,
                  -0.03em -0.03em 0 #0b7142,
                  -0.02em -0.02em 0 #0b7142,
                  -0.01em -0.01em 0 #0b7142; 

}
header h1 strong {
    font-size:118%;
    line-height: 1.2 ;
    display: block;
    /* background-color: #0b7142; */
    filter: drop-shadow(0.03em 0.03em 0px  #0b7142);
     text-shadow:  0.04em 0.04em 0 #5a971a,0.02em 0.02em 0 #0b7142,
                  0.03em 0.03em 0 #0b7142,
                  0.04em 0.04em 0 #0b7142,
                  0.05em 0.05em 0 #0b7142,
                  0.06em 0.06em 0 #0b7142,
                  0.02em 0.02em 0 #0b7142,
                  0.01em 0.01em 0 #0b7142,
                  0.08em 0.08em 0 #0b7142,
                  -0.03em -0.03em 0 #0b7142,
                  -0.02em -0.02em 0 #0b7142,
                  -0.01em -0.01em 0 #0b7142; 
}

header ul {font-size: 1em;}}

  @media screen and (max-width: 40em) {
header {
    background: url("../img/teacher.png")no-repeat bottom right 5vw;
    background-size: 55%;
   color: #fff;
   line-height: 1.2;
   letter-spacing: 1px;
   padding: 8vh 3vw 30vh;
   
}
header section{
      position: relative;
      display: flex;
      display: -webkit-flex;
      align-items: flex-start;
      justify-content: space-between;
}
header h1 {
    font-size:4.2em;
    filter: drop-shadow(0.03em 0.03em 0px  #0b7142);
     text-shadow:  0.04em 0.04em 0 #5a971a,0.02em 0.02em 0 #0b7142,
                  0.03em 0.03em 0 #0b7142,
                  0.04em 0.04em 0 #0b7142,
                  0.05em 0.05em 0 #0b7142,
                  0.06em 0.06em 0 #0b7142,
                  0.02em 0.02em 0 #0b7142,
                  0.01em 0.01em 0 #0b7142,
                  0.08em 0.08em 0 #0b7142,
                  -0.03em -0.03em 0 #0b7142,
                  -0.02em -0.02em 0 #0b7142,
                  -0.01em -0.01em 0 #0b7142; 

}
header ul {
    font-size: 0.88em; 
    text-align: left;
    background: rgba(255, 255, 255, 0);
    border:solid 0px #fff;
    border-radius: 2em;
    padding: 3.5vh 0vw 3vh;
    margin: 0vh auto 0vh;

}
  
h1 span {
    text-align: left;
    padding-left: 5vw;
}
}

#te {
    background: rgba(255, 255, 255, 0.451);
    background-size: 5%;
    color:#333;
    text-align: center;
  }
  #te h2 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.35;
    margin: 3vh 0;
    color: #5459cc;
  }
#te h2 strong {font-size:128%;}
#te h2 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 h2 {font-size: 1.35em;}
    #te h2 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: rgba(139, 255, 218, 0.431);
    text-align:center ;
    font-size: 1.1em;
    font-family: "Outfit", "Noto Sans TC",sans-serif;
}
 #edu .con {
    width: 38px;
    position: absolute;
    bottom: 3vh;
    right: 2vw;
    width: 38px;
 }
 #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;
      position: relative;
  }
  
 #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 details[open] .con {
        display: none;
      }
  #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 h2  {
    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 h2  {
        font-size: 1.2em;
    }

    
}
  /* .content {
    width: 82%;

  }
  .opsp-main .adimg {
    width: 100%;
    max-width: 100%;
  } */
  #good {
    background: url(https://www.easywin.com.tw/data/public/img/w-dot.png), #ffffff73;
    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 h2 {
    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 h2 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 h2 {
         font-size:1.2em;
       }
       #exam h2 span {
         color: #fff;
         font-size: 168%;
       }
  }

#faq {
    /* background: #ffee8b; */
    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 h2 {
   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  h2 kbd {
   background-color:#003beb;
   color: #fff;
   padding: 1vh 0.5vw ;
   margin-right: 0.5vw;
   font-size: 48%;
   border-radius: 15px;
}
#pow h2 kbd {
   background-color: #ffe100;
   color: #003beb;
}
#faq h2 small {
   font-size: 65%;
}
#faq h2 span {
   font-size: 180%;
   line-height:0.8;
   text-decoration-line: underline;
}
#faq h2 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 h2 {
   font-size:2.5em;
   
}

#faq h2 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 h2 {
   font-size:2em;
   
}
#faq h2 img {
   position: absolute;
   top:3vh;
   left: 6vw;
   width:32px;
   height: auto;
}
#faq h2 kbd {
  padding: 1vh 2vw;
}
#bank,#pow {
  width: 95%;
  font-size: 0.9em;
  margin: auto;
  margin-bottom: 10vh;
}
}

.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 {
  /* 當一般區塊就好 */
  margin: 0 auto;
}

  #teacher h2  {
  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 h2 img{
  width: 12%;
}
#teacher figure {
  position: relative;
  margin: 1vh 0;
  padding: 0;
}
#teacher figure  img {
  width:36%;
  margin-left: 1.5vw;
  border-radius: 50%;
}
#teacher figure p {
  position: absolute;
  top:-1vh;
  right: 5vw;
  line-height: 1.5;
  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:url(https://www.easywin.com.tw/data/public/img/w-dot.png),rgba(249, 248, 255, 0.659);
  background-size: 30%;
  padding: 5vh 2vw 5vh 5vw;
  list-style: disc;
  border-radius: 2em;
  margin-top: 1vh;
  font-size: 92%;
  color: #333;
}
#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: 0.5em;
}


 /* 外框容器：整個 slider 區 */
#teacher .teacher-slider {
  position: relative;
  overflow: hidden;
  margin-top: 2vh;
}

/* 內部軌道：真正在移動的那一條 */
#teacher .teacher-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* 每張 figure 當一個 slide。桌機一次看到 2 張 → 50% */
#teacher .teacher-track figure {
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 0 0.5vw;
}

/* 左右箭頭 */
#teacher .teacher-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(96, 74, 136, 0.85);
  color: #fff;
  width: 1.5em;
  height:1.5em;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.6em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#teacher .teacher-nav.prev {
  left: 0.5rem;
}
#teacher .teacher-nav.next {
  right: 0.5rem;
}
#teacher .teacher-nav:hover {
  background: #5459cd;
}

/* RWD 調整 */
@media screen and (max-width: 66em){

  #teacher img {
    width:50%;
    padding-left: 2vw;
  }
  #teacher h2  {
    font-size: 1.5em;
  }
  #teacher h2 img{
    width: 22%;
  }
  #teacher figure p {
    top:-3vh;
    right: 0vw;
    width:50%;
    font-size: 90%;
  }
  #teacher figure p strong {
    font-size: 2em;
  }
}

/* 手機版：一次只顯示 1 張 → 寬度 100% */
@media screen and (max-width:45em){
    #teacher .teacher-nav {
  display: none;
}


  #teacher img {
    width:55%;
    padding-left: 2vw;
  }
  #teacher figure p {
    top:-1vh;
    right: 0vw;
    width:50%;
    font-size: 90%;
  }

  /* Slide 寬度改成 100%（手機只看一個） */
  #teacher .teacher-track figure {
    flex: 0 0 100%;
    padding: 0 3vw;
  }

  #teacher figure p strong {
    font-size: 2.2em;
  }
  #teacher ul {
  padding: 3vh 2vw 3vh 8vw;
  list-style: disc;
  border-radius: 2em;
  margin-top:1vh;
  font-size: 90%;
  color: #333;
}
}

.shop {
  position: fixed;
  top: 8vh;
  right: 1vw;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: double 8px ;
  background-color: #f74c22;
  padding: 20px 10px;
  color: #fff;
  font-size:1.35em;
  text-align: center;
  line-height: 1.2;
  font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
  z-index: 99;

}

.shop span {
  font-size: 16px;
}
.shop small{
  font-size: 60%;
    display: block;

}
/* 只閃 strong 裡面的大字（7） */
.shop strong {
  color: #ffdd00;
  font-weight:900;
  font-size: 2.2em;
  line-height: 0.8;
  display: block;
  animation: shineText 1.8s infinite ease-in-out;
}

/* 只閃 strong 內的 span（折起） */
.shop strong span {
  animation: shineText 1.8s infinite ease-in-out;
}

/* ✨ 黃 ⇄ 白 的閃爍動畫 */
@keyframes shineText {
  0%   { color: #ffdd00; filter: brightness(100%); }
  50%  { color: #ffffff; filter: brightness(130%); }
  100% { color: #ffdd00; filter: brightness(100%); }
}
@media screen and (max-width:45em){
.shop {
  position: fixed;
  top: auto;
  right: 1vw;
  bottom: 8vh;
  width: 108px;
  height: 108px;
}
    
}