@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:#ffc341 url(https://www.easywin.com.tw/ad/109/1022/img/bg.png);
  background-position: top center;
  /* background-size: 100%; */
  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:0;letter-spacing: 0.5px; margin-top: 5vh;}
  article h3 {
    font-size:2.8em;
    font-weight:900;
    line-height: 1.35;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0.2em 5px rgba(160, 50, 0, 0.87), 0.1em -0.03em 0 rgba(80, 35, 15, 0.871), 0.05em 0.005em 0 rgba(80, 35, 15, 0.871), 0em 0.08em 0 rgba(80, 35, 15, 0.871), 0.05em 0.08em 0 rgba(80, 35, 15, 0.871), 0px -0.03em 0 rgba(80, 35, 15, 0.871), -0.03em -0.03em 0 rgba(80, 35, 15, 0.871), -0.03em 0.08em 0 rgba(80, 35, 15, 0.871), -0.03em 0 0 rgba(80, 35, 15, 0.871);
  }
  @media screen and (max-width: 55em) {
    article {padding: 2vh 0vw;letter-spacing: 0.2px;}
    article h3 {
       font-size:2.2em;
     }
    } 

  #sale {
    text-align: center;
    padding: 8vh 0vw;
    color:   #ac5a13;
  }
  #sale img {
    width:80px;
    padding: 0 1vw;
  }
 
  #sale h4 {
    font-size: 2em;
  }
  #sale ol {
    font-weight: 500;
    font-size:1.35em;
    text-align: left;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    text-align: center;
    margin: 0;
    padding: 0;
}

  #sale p {
    font-weight: 600;
    color: #fff;
    font-size: 1.35em;
    margin: 2vh 0;
  }
  #sale p span {
    background: #000;
    padding: 1.5vh 3vw;
    border-radius: 1em;
  }
  #sale ol li { 
    background-color: #fff;
    border: solid  #dc9618 1px;
    border-radius: 1em;
    list-style: none;
    width: 32%;
    padding:3vh 0vw;
    margin: 0;
  } 
  #sale ol li:first-child {
    border-left: dashed 0px ;
  }
  #sale ol strong {
    color:rgb(255, 85, 0) ; 
    font-size: 2.2em;
    font-family: "Baloo";
    line-height: 1.2;
    font-weight: 600;
  }
  #sale a,#sale a:hover {
    color: #29bf00;
    font-family: "baloo","Noto Sans TC" , sans-serif;
    font-size: 2em;
  }
  @media screen and (max-width: 80em) {
    #sale {
      padding: 5vh 1vw; 
    }

  }
  @media screen and (max-width: 55em) {
      #sale img {
        width:60px;
      }

    #sale ol {font-weight: 400; font-size:1.15em;flex-wrap: wrap;}
    #sale h4, #sale ol strong{font-size: 1.45em;}
    #sale ol li { 
        width: 100%;
        padding:1vh 1vw;
        margin: 1vh 0;
      } 
      #sale ol li:last-child(1) {
        border-bottom: dashed 0px ;
      }
      #sale ol strong {
        font-size: 2.5em;
        line-height: 1.35;
      }
      #sale p {font-size: 1em;}
      #sale a,#sale a:hover {
        font-size: 1.3em;
      }
  }
 

  #leam {
    text-align: center;
    font-size: 1em;
  }
  #leam table {
    /* border: solid 1px #dc9618; */
    border-collapse: separate;
    border-spacing:0 2vh;
    width: 100%;
    margin-bottom:8vh;
  }
  #leam caption {padding: 1vh;}
  #leam table tr td {
    border-bottom: solid 1px #dc9618 ;
    background-color: #fff;
    padding: 2vh 1vw;
  }
  #leam table td:first-child {
    color:#ffe100;
    font-weight: 600;
    font-size: 1.1em;
    background-color:#390b3ae3;
    border-radius: 1em 0 0 1em;
    text-shadow: 0 0.2em 0px #6825ba, 0.1em -0.03em 0 #6825ba, 0.08em 0.005em 0 #6825ba, 0em 0.08em 0 #6825ba, 0.05em 0.08em 0 #6825ba, 0px -0.05em 0 #6825ba, -0.06em -0.05em 0 #6825ba, -0.08em 0.08em 0 #6825ba, -0.09em 0 0 #6825ba;

  }
  #leam table td:nth-child(2){
    color:#6e3fa7;
    font-size: 120%;
    font-weight:600;
  }
  #leam table tr:nth-child(2n) td {
    background-color: #fffdee;
  }
  #leam table tr:nth-child(2n) td:first-child {background-color:rgba(152, 75, 13, 0.78)}
  #leam table td:last-child {border-radius: 0 1em 1em 0;}
  #leam ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  #leam ul li {
    background: #fff url(https://www.easywin.com.tw/ad/113/1022/img/leam1.png)no-repeat;
    background-size: 32%;
    background-position: bottom -1vh right;
    border-radius: 1em ;
    border:solid 1px #dc9618;
    width: 31%;
    padding:2vh 2vw;
    margin: 1vh ;
  }
#leam ul li:nth-child(2){
  background: #fff url(https://www.easywin.com.tw/ad/113/1022/img/leam2.png) no-repeat bottom -2vh right;background-size: 32%;
}
#leam ul li:nth-child(3){
  background: #fff url(https://www.easywin.com.tw/ad/113/1022/img/leam3.png) no-repeat bottom -2vh right;background-size: 32%;
}
#leam ul li:nth-child(4){
  background: #fff url(https://www.easywin.com.tw/ad/113/1022/img/leam4.png) no-repeat bottom -2vh right;background-size: 32%;
}
#leam ul li:nth-child(5){
  background: #fff url(https://www.easywin.com.tw/ad/113/1022/img/leam5.png) no-repeat bottom -2vh right;background-size: 32%;
}
#leam ul li:nth-child(6){
  background: #fff url(https://www.easywin.com.tw/ad/113/1022/img/leam6.png) no-repeat bottom -2vh right;background-size: 32%;
}
#leam ul li:nth-child(7){
  background: #fff url(https://www.easywin.com.tw/ad/113/1022/img/leam7.png) no-repeat bottom right 2vw;background-size: 32%;
}
#leam ul li:nth-child(8){
  background: #fff url(https://www.easywin.com.tw/ad/113/1022/img/leam8.png) no-repeat bottom right 2vw;background-size: 32%;
}
#leam ul li:nth-child(9){
  background: #fff url(https://www.easywin.com.tw/ad/113/1022/img/leam9.png) no-repeat bottom -2vh right;background-size: 32%;
}
#leam ul li:nth-child(10){
  background: #fff url(https://www.easywin.com.tw/ad/113/1022/img/leam10.png) no-repeat bottom -1vh right;background-size: 32%;
}
  #leam ul li span {
    font-size: 3em;
    font-weight: 200;
    display: block;
    line-height: 1.3;
    font-family: "Noto Sans TC" , sans-serif;
    color:  #f2cc84;
  }
  #leam ul li strong {
    font-size: 1.5em;
    font-weight: 600;
    display: block;
    color:#6e3fa7;
  }
  @media screen and (max-width: 80em) {
    #leam ul li {
      width: 30%;
    }
  }
  @media screen and (max-width: 55em) {
    #leam table tr td {
      padding: 2vh 1.5vw;
    }
    #leam table td:first-child {
      width: 25%;
      font-size: 1em;
  
    }
    #leam table td:nth-child(2){
      width: 30%;
      font-size: 108%;
    }

    #leam table td:last-child {
      text-align: left;
      
    }
    #leam ul li strong {
      font-size: 1.2em;
    }

    #leam ul li {
      width: 48%;
      padding:0vh 2vw 8vh;
      margin: 1vh 0;
    }
  }

  
  #op {
    font-size:1.2em;
    text-align: center;
    font-weight: 600;
  }

  #op>section {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    margin: 1vh 0vw;
  }
  
  #op>section div {
    width: 100%;
    border: solid 1px  #f2cc84;;
    padding: 3vh 2vw 8vh;
    background: #fff;
    border-radius: 2em;
    
  }
  #op h3 {
    color: #fff;
  }
  #op>section div h3 {
    font-weight: 300;
    color: #000;
    text-shadow: 0 0 0;
    font-size:2em;
  }
  #op h3 span {
    font-weight: 600;
    color:#464cbc;
  }
  #op h3 span:nth-child(2) {
    color:  #787eff;
  }
  #op h3 span.r {
    color: #36d0ff;
  }
  #op h3 kbd {
    background-color: var(--f-b);
    color: #fff;
    padding: 1vh 0.5vw;
    margin-right: 0.5vw;
    font-size: 48%;
    border-radius: 15px;
  }
  #op table {
    width: 100%;
    margin-top: 3vh;
    table-layout: fixed;


  }
  #op td {
    padding:1.5vh 1vw;
    border-bottom: dashed 1px #c3c3c3;
  }

  #op table del {
    font-size: 68%;
    padding-left: 1vw;
    font-weight: 400;
    color: #817c7c;

  }
  #op table del::before {content: '('; }
  #op table del::after {content: ')';}

  #op table span {
     color: var(--f-p2);
     font-family: "Mukta","Noto Sans TC" , sans-serif;
      font-size: 180%;
      line-height: 0.8;
      font-weight: 700;
  }
  #op table small {
    font-size:58%;
    color: #7b7b7b;
  }
  #op table ul {
    font-size: 16px;
    font-weight: 400;
    text-align: left;
  }
  #op img {
    width:125px;
    margin-left: -5.8vw;
    padding-right: 1vw;
  }
  #op div img {
    width:65px;
    margin-left: -3.8vw;
    padding-right: 1vw;
  }

  @media (max-width:55em) {
  #op {font-size:1em;}
  #op>section {
    flex-wrap: wrap;
  }
  #op>section div {
    width:100%;
    margin-bottom: 2vh;
  }
  #op td {
    padding:1.5vh 2vw;
    border-bottom: dashed 1px #c3c3c3;
  }

  #op table del {
    font-size: 80%;
    padding-left: 0vw;
    display: block;
  }

  #op table span {
      font-size: 165%;
      line-height: 0.8;
  }
  #op table small {
    font-size:80%;
  }

  #op img {
    width:65px;
    margin-left: -12vw;
    padding-right: 1vw;
  }
  #op div img {
    width: 35px;
    margin-left: -8vw;
  }
  }

  #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%;
    font-size: 1em;
     display: flex;
    display: -webkit-flex;
    list-style: none;
    justify-content: space-between;
    align-items:flex-start ;
    font-family: "Noto Sans TC" , sans-serif;
  }
 #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;
    font-size: 1.1em;
    line-height: 1.8;
    color:#363638;
  }
 #good strong {
    font-size: 1.25em;
    color:#062372;
  }
  #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;
        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;
  
}
  }