@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');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=UoqMunThenKhung&family=Yusei+Magic&family=Zen+Kurenaido&display=swap');  
*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; }
::selection{background: #ffc690;}

body {  
  margin: 0 0; 
  /* background: #ffcece url(img/px2.png);*/
   background: url(img/px.png); 
  margin: 0 0;
  font-size: 1.1em;
  line-height: 1.8;
  font-weight: 400;
  overflow-x: hidden;
  font-family: "Arial","Noto Sans TC" , sans-serif;
  color: #333;
  --f-b: #767bcf;
  --f-b2:#313478;
  --f-b3: #a9aceb;
  --f-p: #ff36b9;
  --f-p2: #ff1f8a;
  --f-p3:#b2d2ff;
  --f-p5:#ffbdfa;
  --f-y:#ffe100;
  --b1: #36d0ff;
  --b2: #ffcccc;
  --color-link-hover: #fff;
  --color-title: #fff;
  /* #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: 2vh 0vw;letter-spacing: 0.5px;}
  article h3,article h4,article h5, article h6,article p,article ul,article ol {padding: 0; margin: 0;}

article {
    font-size: 1em;
    letter-spacing: 1px;
    padding: 8vh 0;
}
article h3 {
  font-size: 1.5em;
  line-height: 1.35;
  padding-bottom: 3vh;
}
article h3 span {
  font-family: "Teko", "Noto Sans TC", "Arial", sans-serif;
  font-size: 1.5em;
  line-height: 1.2;
  font-weight: 900;
  display: block;
}
article h3 span::before{
    content: '＼';
    font-size:35%;
    padding: 1vw;
}
article h3 span::after{
   content: '／';
   font-size:35%;
   padding: 1vw;
}
@media screen and (max-width: 40em) {
    article h3 {
  font-size: 1.5em;
  line-height: 1.8;
  padding-bottom: 1vh;
  font-weight: 300;
  color: #874a0e;
  text-align: center;
}
  article h3 span {
    font-size: 1.2em;
    text-align: center;
  }
}
#sp {
    text-align: center;
    border-bottom: solid 2px #bb8585;
    color: #3e3a3a;
        padding: 3vh 0;

}

#sp a {
    background-color: #a9aceb;
    color: #363975;
    font-size: 2.2em;
    font-weight: 600;
    padding:3vh 2vw;
    border: solid 2px;
    border-radius:2em;
    text-decoration: none;
}
#sp .sp a i {
    font-size: 68%;
}

@media screen and (max-width: 55em) {

#sp h3 {
    font-size: 1.6em;
    padding: 1vh 0;
}

#sp a {
    background-color: #a9aceb;
    color: #363975;
    font-size: 1.8em;
    font-weight: 600;
    padding:3vh 3vw;
    border: solid 2px;
    border-radius:2em;
    text-decoration: none;
  
}
}
#cer {
        padding: 2vh 0;
        text-align: center;
}
#cer h5{
    color: #1aa696;
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size:1.2em;
    text-align: left;
    line-height: 1.2;
    padding: 0 0 0 2vw;
}
#cer h4 {
    color: #333;
    font-size: 1.3em;
}
#cer h4 i {
    color:  #ffbd8b;
    padding-left: 1vw;
}
#cer h5 span {
    color:  #ffb276;
    font-size:3em;
    line-height: 1.2;
    font-family: "Arial","Noto Sans TC" , sans-serif;
    font-weight: 900;
    text-align: right;
    display: block;
}
#cer .ads {
    border:#ebf5ff solid 1px;
    padding: 2vh 2vw;
      background:#ffe1c091 url(https://www.easywin.com.tw/AD/114/0206/img/talk.png)no-repeat top left 5vw;
    background-size:22%;
     text-align: right;
}
@media screen and (max-width:40em) {
    #cer h5{
    font-size:1.5em;
    padding: 0;
    text-align: left;
}
#cer h4 {
    color: #333;
    font-size: 1.2em;
}

#cer h5 span {
    font-size: 2em;
    font-family: "Arial","Noto Sans TC" , sans-serif;
    display: block;
    text-align: right;
}
#cer .ads {
    border:#b8ddff solid 1px;
    padding:1vh 5vw 8vh 5vw;
      background: #ebf5ff url(https://www.easywin.com.tw/AD/114/0206/img/talk.png)no-repeat bottom -6vh left -1vw;
    background-size:42%;
     text-align: right;
}
}

 .ytplayer {
    width: 468px;
    height:320px;
    border: solid 1px #ffb276;
  }
  
#teacher h3 img{
   width:300px;
   
}

#teacher {
   background: #ffe1e1 url(img/px2.png);
   background-size: 2%;
    margin: 0;
    text-align: center;
}
#teacher>section {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    align-items:stretch;
    justify-content: space-between;
}
#teacher>section div {
    width: 49%;
    text-align: left;
    padding: 2vw 0vw;
     position: relative;
    margin-bottom:1vh;


}
#teacher figure {
    display: flex;
    display: -webkit-flex; 
    align-items:flex-end;
    position: relative;
    padding: 0;
    margin: 0;
    
}
#teacher  figcaption {
  padding: 5vh 1vw;
  border-radius: 1em;
  background-color: #fff;
  width: 100%;
}
#teacher>section figure img {
    width: 28%;
    height: auto;
    position: absolute;
    right: 1vw;
    top: -6vh;
}

#teacher strong {
  font-family: "UoqMunThenKhung", serif;
    font-size:1.8em;
    color: #5a4b99;
    line-height: 1.2;
    padding-right: 0.2vw;
    font-weight: 300;

}
#teacher ins {
    padding: 0 1vw;
}
#teacher ul {
    padding: 0 0 0 22px;
    list-style: disc;
    
}
#teacher figcaption  span {
    font-size: 1em;
    font-weight: 400;
    color: #5a4b99;
    border-bottom: solid 1px #ffd8e0;
    display: block;
    padding-bottom: 1vh;
    margin-bottom: 2vh;
}
#teacher i {
  font-size:300%;
  color: #f00;
}
#teacher a,#teacher a:hover {
  color: #666;
  text-align: right;
}

@media screen and (max-width: 55em) {
    #teacher {
        padding: 5vh 3vw;
    }

#teacher>section div {
    width: 100%;

}
#teacher h3 img{
   width:150px;
   
}

#teacher  figcaption {
  padding: 5vh 3vw;
  width: 100%;
}
#teacher>section figure img {
    width:28%;
    height: auto;
     position: absolute;
    left: -1vw;
    top: -3vh;
}
#teacher figcaption p {
  padding-left:30%;
}
#teacher strong {
  font-family: "UoqMunThenKhung", serif;
    font-size:1.8em;
    color: #5a4b99;
    line-height: 1.2;
    font-weight: 300;

}

#teacher figcaption  span {
    font-size: 1em;
}
#teacher i {
  font-size:200%;
  color: #f00;
}

}

  #leam {
    background:#4c4276;
    text-align: center;
    padding: 8vh 2vw;
  }
  #leam p ,#leam h5 {
    font-size: 1.2em;
  }
  #leam p {
    color: #fff;
    padding-bottom: 3vh;
  }
  
  #leam h3,#leam h4 {
    color: #fff;
    font-size: 2em;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 1vh;
    padding-bottom: 2vh;
    text-align: center;
  }
  #leam h4 {
    margin-bottom: 3vh;
  }
  #leam h4 span{
    border-radius: 15px;
    padding:0.8vh 1vw;
    margin-bottom: 0px;
    font-size:108%;
    background-color: #ff7b9f;
  }
  #leam h4 span:nth-last-child(3){background-color: #ff355e;}
  #leam h4 span:nth-last-child(2){background-color: #1ed3ab;}
  #leam h4 span:nth-last-child(1){background-color: #b89dec;}
  #leam>section {
    display: flex;
    display: -webkit-flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #leam table {
    width: 50%;
    background-color: #fff;
    border:solid 3px #fff;
    table-layout: fixed;
    color: #6c6391;
    margin-bottom: 5vh;
    line-height: 1.5;
  }
  #leam table caption {
    color: #fff;
    font-size: 1.25em;
    padding: 1vh 1vw;
  }
  #leam table:nth-child(2) {
    background-color: #fff2ea;
  }
  #leam table td ,#leam table th{
    padding: 8px 6px;
    border: solid 1px #6c6391;
    border-top-width: 0px ;
    border-right-width: 0px;
  }
  #leam table ul {
    padding: 2vh 0 3vh 3vw;
    margin: 0;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    list-style: disc;
  }
  #leam table ul li {
    width: 45%;
    text-align: left;
  }
  #hot {
    color: #fff;
  }
  #hot dl {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

  }
  #hot dt{
    width:10%;
    font-size: 1.25em;
    margin:2vh 2vw 3vh;
   
  }
  #hot dt h5 {
    width: 100px;
    height: 100px;
    font-size: 1em;
    font-weight: 200;
    padding-top:26px;
    margin: 0;
    text-align: center;
    border: solid 1px;
    border-radius: 50%
  }
  #hot dd{ 
    width: 80%;
    text-align: left;
    padding:  0 2vw 3vh 0;
    margin: 0;
    font-size: 92%;
    border-bottom: dashed 1px #ddde;
  }
  #hot dd span {
    color: #ffe100;
  }
  @media screen and (max-width: 55em) {

    #leam {
      background:#4c4276;
      text-align: center;
      padding: 5vh 5vw;
    }
    #leam h3 {
      font-size: 1.5em;
    }
    #leam h4 {
      font-size: 1.25em;
    }
    #leam h4 span{
      border-radius: 15px;
      font-size:100%;
      padding: 1vh 3vw;
    }
    #leam table {
      width: 100%;
      margin-bottom: 3vh;
    }
    #leam table caption {
      color: #fff;
      font-size: 1.15em;
      padding: 1vh 1vw;
    }

    #leam table td ,#leam table th{
      padding: 8px 2px;
      font-size: 0.95em;
    }
    #leam table ul {
      padding: 2vh 0 3vh 8vw;
      margin: 0;
    }
    #leam table ul li {
      width:100%;
      text-align: left;
    }
    #hot dl {
      display: flex;
      display: -webkit-flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
  
    }
    #hot dt{
      width:30%;
      font-size: 1.25em;
      margin:2vh 2vw 3vh;
     
    }
    #hot dt h5 {
      width: 100px;
      height: 100px;
      font-size: 1em;
      font-weight: 200;
      padding-top:26px;
      margin: 0;
      text-align: center;
  
      border: solid 1px;
      border-radius: 50%
    }
    #hot dd{ 
      width: 65%;
      padding:  3vh 2vw 3vh;
      font-size: 100%;
    }
  }
  #faq {
    background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #ffee8b repeat;
    background-size: 1%;
    padding:5vh 1vw;
    text-align:center ;
    position: relative;
}

#faq details {
    background: #fff url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png);
    background-size: 1%;
    border-radius: 1em;
    border: #bd5800 3px dashed;
    padding: 1vh 2vw;
    margin: auto;
    margin-bottom: 2vh;
    letter-spacing: 0.5px;
    text-align: left;
    
}

#faq summary {
     font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
    font-weight: 500;
    font-size: 1.1em;
    line-height:2;
    color: #353232;
    margin: 3vh 0;
 
}
#faq summary span {
    font-size: 125%;
    line-height:0.8;
 }
#faq details[open] {
  padding: 3vh 3vw 5vh;
  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:  #ffee8b;
}

#faq ul, #faq ol {
  margin: 0;
  padding: 0 0 0 22px;
 
}
#faq ul {
  list-style: disc;
}

#faq h6{
  font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
  position: absolute;
  top:-8vh;
  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);
}
@media (max-width:65em) {
  #faq {
    padding:3vh 1vw;
}
#faq summary {
    font-size: 1.5em;
 }
#faq summary span {
   font-size: 120%;
   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%;
}

#faq details[open] {
  padding:3vh 5vw;
  margin-bottom: 3vh;
  border-radius: 1em;
}
#faq h6{
  font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
  top:-6vh;
  left:8vw;
  font-size:4em;
}
}
@media (max-width:40em) {
  #faq {
    padding:5vh 3vw;
}
#faq summary {
  padding:0vh 5vw;
  font-size: 1.25em;
}

#faq h6{
  font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
  top:-2vh;
  left:8vw;
  font-size:4em;
}
}
#student>section {
  padding: 5vh 0vw;
  text-align: left;
  position: relative;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:center; 
}
#student>section ul {
  background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fff repeat;
  background-size: 2%;
  border:#f3c49a dashed 3px;
  width: 48%;
  padding: 5vh 0vw;
  margin: 3vh 0.5vw 0 0;
  border-radius: 2em;
  transform:  rotate(-2deg);
  list-style-type: none;
   position: relative;
}
#student>section ul:first-child {
  transform:  rotate(1deg);
  margin-top: -8vh;
}
#student>section ul:nth-child(2n) {
  transform:  rotate(2deg);
  margin-top: -8vh;
}
#student>section ul:nth-child(4) {
  transform:  rotate(3deg);
  margin-top: 2vh;
}
#student>section ul img {
  width: 9%;
  margin-right: 2vw;
  border-radius: 50%;
  background-color: #ffeeee;
  margin-top:2vh;
}

#student h5 {
  color:  #7e65e0;
  font-family: "Noto Sans TC" , sans-serif;
  font-weight: 400;
  font-size: 1.25em;
  line-height: 1.25;
  text-align: right;
}
#student strong {
  color: #7e65e0;
  font-size: 108%;
  font-weight: 400;

}
#student h6 {
  position: absolute;
  top: -2vh;
  transform:  rotate(-2deg);

}
#student h6 span {
  background:#7e65e0e1 ;
  font-size: 1.8em;
  padding: 1vh 1vw;
  color: #fff;
}

#student ul li {
  padding: 2vh 2vw;

}
#student ul li:first-child {
  color:#c59468 ;
  border-bottom: #f3c49a dashed 3px;
 
}
#student ul li::first-letter {
    font-size: 200%;
    color:  #7e65e0;
    line-height: 1.5;
  }

@media screen and (max-width:75em) {
  #student>section {
    padding: 5vh 3vw;
    text-align: left;
    position: relative;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items:center; 
  }
  #student>section ul {
    background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fff repeat;
    background-size: 1%;
    border:#f3c49a dashed 3px;
    width: 100%;
    padding: 0vh 2vw 3vh;
    margin: 2vh 0vw 0 0;
    border-radius: 1em;
    transform:  rotate(0deg);
    list-style-type: none;
     position: relative;
  }
  #student>section ul:first-child {
    transform:  rotate(0deg);
    margin-top: 0vh;
  }
  #student>section ul:nth-child(2n) {
    transform:  rotate(0deg);
    margin-top: 0vh;
  }
  #student>section ul:nth-child(4) {
    transform:  rotate(0deg);
    margin-top: 0vh;
  }
  #student>section ul img {
    width: 9%;
    margin-right: 2vw;
    border-radius: 50%;
    background-color: #ffeeee;
    margin-top:2vh;
  }
  
  #student h5 {
    color:  #7e65e0;
    font-family: "Noto Sans TC" , sans-serif;
    font-weight: 400;
    font-size: 1.15em;
    line-height: 1.25;
    text-align: right;
  }
  #student strong {
    color: #7e65e0;
    font-size: 108%;
    font-weight: 400;
  
  }
  #student h6 {
    right: 12vw;
    top: -1vh;
    transform:  rotate(2deg);
  
  }
  #student h6 span {
    background:#7e65e0e1 ;
    font-size: 1.6em;
    padding: 1vh 3vw;
    color: #fff;
  }
  
  #student ul li:first-child {
    border-bottom: #f3c49a dashed 3px;
  }
  #student ul li::first-letter {
      font-size: 200%;
      color:  #7e65e0;
      line-height: 1.5;
    }
}

#sale {
  margin:auto;
  text-align: center;
  z-index: 10;
  position: relative;
  background: #f8d6cc;
  
}

#sale h4 {
  font-size: 1.5em;
}
#sale ul {
  padding:0;
  margin: 0;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  list-style: none;
  align-items: stretch;
  font-size: 1.3em;
  line-height: 1.5;
  color:#873c26;
  font-weight: 500;
}
#sale ul li {
  width:31%;
  margin:2vh 1vw;
  padding: 5vh 1vw ;
  border-radius:1em;
  background-color: #fff;

}
#sale ul span {
  color: #ff5b29;
}
#sale ul li small {
  display: block;
}
#sale ul strong {
  font-weight: 600;
  font-size: 155%;
}
@media screen and (max-width: 55em) {
  #sale {
    padding: 1vh 5vw;
  }
  #sale ul span {
    font-size: 108%;
  }
  #sale ul {
    background-color: #fff;
    flex-wrap: wrap;
    font-size: 1.1em;
    line-height: 1.5;
    border: solid 2px #bb8585;
  }
  #sale ul li {
    width:100%;
    margin:0;
    padding: 3vh 1vw ;
    border-bottom: dashed 2px  #f8d6cc;
    border-radius: 0;   
  }
}