@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; }
html, body { max-width: 100%; overflow-x: hidden; }
p, li, td, th, a, span {
  overflow-wrap: anywhere;
  word-break: break-word;
}
::selection { background-color: #f1f1f1;}
body {
    background: url(../img/bg.jpg) no-repeat center bottom;
    background-size: cover; 
    background-attachment: fixed; 
    margin: 0;
    font-size: 1.1em;
    line-height: 1.8;
    font-weight: 400;
    overflow-x: hidden;
    font-family: "Arial","Noto Sans TC" , sans-serif;

}

table {border-collapse: collapse;border-spacing: 0;margin: auto;}
h1,h2,h3,h4,h5,h6,p,ul,ol {margin: 0;padding: 0;}
 a {text-decoration: none;}
  @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;} }

  @media screen and (max-width:40em) {
    body {
    background: url(../img/bgm.jpg) repeat center top;
    background-size:100%;
    background-attachment: fixed; 
}
    article {
        font-size: 0.95em;
    } 
}
   
  article {
    background: rgba(242, 242, 242,1.0) url(../img/bg_3.png);
    background-size:1%;
    padding:8vh 8vw ;
    letter-spacing: 0.5px;

}
  article h2 {
    font-size:1.8em;
    font-weight:200;
    line-height: 1.35;

  }
  article h2 span {
    font-size: 155%;
  }
  article h2 span::before{
        content: '／';
        font-size: 15px;
        padding:0 1vw;
    }

  article h3 {
    color: #19643b;
  }
  article h2 .splogo {
    width:100px;
  }
  @media screen and (max-width:40em) {
    article {
        font-size: 0.92em;
    }
    article h2 {
        font-size:1.5em;
        font-weight:300;
    
      }
      article h2 span {
        color: #afcaff;
        display: block;
        font-weight:600;
        font-size: 135%;
      } 
      article h2 span::after{
        content: '／';
        font-size: 15px;
        padding:0 1vw;
       
    }

}
article { scroll-margin-top: 80px; }
@media (max-width: 40em){article { scroll-margin-top: 20px; }}

header {
  /* linear-gradient(-180deg,#fffaef 1%, rgba(255, 255, 255, 0) 55%), */
    background:   url("../img/h1.png")no-repeat right 12vw bottom -5vh;
    background-size:38%;
   line-height: 1.2;
   letter-spacing: 1px;
   position: relative;
     padding: 12vh 8vw 20vh;
   
}
header h1 {
     font-size: clamp(2.8rem, 8vw, 6.5em);
    line-height: 1.2;
    font-weight: 900;
    position: relative;
    padding-left: 1vw;
    z-index: 99;
    color: #fff;
     text-shadow:  0.04em 0.04em 0 #ffae92,0.02em 0.02em 0 #ffbdbd,
                  0.03em 0.03em 0 #ffbdbd,
                  0.04em 0.04em 0 #ffbdbd,
                  0.05em 0.05em 0 #ffbdbd,
                  0.06em 0.06em 0 #ffbdbd,
                  0.02em 0.02em 0 #ffbdbd,
                  0.01em 0.01em 0 #ffbdbd,
                  0.08em 0.08em 0 #ffbdbd,
                  -0.03em -0.03em 0 #ffbdbd,
                  -0.02em -0.02em 0 #ffbdbd,
                  -0.01em -0.01em 0 #ffbdbd; 
    
}
header h1 span {
    font-size:0.3em;
    display: block;
    padding: 1vh 2vw;
    font-weight: 800;
    color:#ffdc91; 
    filter: drop-shadow(0em 0em 0px  #fffaf8);
       text-shadow:  0.04em 0.04em 0 #aa6524,0.02em 0.02em 0 #ffbdbd,
                  0.03em 0.03em 0 #ffbdbd,
                  0.04em 0.04em 0 #ffbdbd,
                  0.05em 0.05em 0 #ffbdbd,
                  0.06em 0.06em 0 #ffbdbd,
                  0.02em 0.02em 0 #ffbdbd,
                  0.01em 0.01em 0 #ffbdbd,
                  -0.03em -0.03em 0 #ffbdbd,
                  -0.02em -0.02em 0 #ffbdbd,
                  -0.01em -0.01em 0 #ffbdbd; 
}
header h1 span small {
    font-size: 18px;
}

header nav {
    width: 120px;
    position: fixed; 
    font-size: 0.9em;
    top:15vh;
    right: 0;
    background: #fed365;
    color: rgb(48, 45, 45);
    text-align: center;
    border-radius: 1em;
    padding: 1vh 1vw;
    z-index: 99;
  }
  header nav a,header nav a:hover {
    color: #000;
  }
  header nav a{
    padding: 1vh 0vw;
    width: 100%;
    border-bottom: dotted 1px;
    display: block;
    cursor: pointer;
  }
  header nav a:last-child {
    border-bottom:dotted 0px;
  }
  header nav a::before{
    content: "\f0da";
    font-family: 'Font Awesome 5 Free';
      font-weight: 900;
    padding-right: 0.2vw;
  
  }
  header ul {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.2vw;   
    margin-top: 3vh;
    align-items: start;
    justify-content: space-around;
    width: 80%;
}
header ul li {
  background: #ffc033;
  border: double 2px #fff ;
  border-radius: 50%;
  width:135px;
  height:135px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;      
  justify-content: center;   
  text-align: center;       
  padding:10px 6px;            
  box-sizing: border-box;   
  font-size:16px;
  line-height: 1.3;
  color: #fff;
}

header ul li strong {
   font-size: 115%;
   font-weight: 600;
   color: #574312;
}
@media screen and (max-width:72em) {
      header ul {width:100%;}
  }
@media screen and (max-width:65em) {
    header h1 {font-size:5.5em;}
     

header {
    background:  linear-gradient(180deg, #fff 15%, #fff 5%, rgba(255, 255, 255, 0) 100%), url("../img/h1.png")no-repeat right 12vw bottom;
    background-size:42%;
   line-height: 1.2;
   letter-spacing: 1px;
   position: relative;
     padding: 8vh 5vw 35vh;
   

    }
  }
  @media screen and (max-width: 40em) {
    header h1 {font-size:3.8em;    
    }
    header nav {
        width: 100vw;
        position: fixed; 
        top:auto;
        right: 0;
        bottom: 6.5vh;
        border-radius: 0em;
        display: flex;
        flex-wrap: wrap;
        z-index: 99;
      }

      header nav a{
        width:25%;
        border-bottom: dotted 0px;
        border-right: dotted 1px;
        display: block;
        cursor: pointer;
      }
      header nav a:last-child {
        border-right:dotted 0px;
      }

    header ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0vw;   
    align-items: start;
    justify-content: left;
}

header ul li {
  background: none;
  width: 100%;
  height:auto;
  padding:3px 0px;            
  font-size:14px;
  line-height: 1.3;
  color: #000;
  text-align: left;
    justify-content: left;
    border: 0;
}
.hero-tag{display: none;}
    header ul strong {
        display: block;
        margin-right: 2vw;
        width:38%;
        border-right: 2px solid;
        color: #ff8851;
    }
}

.exam-intro{
  background: #ffbdbd;
  border: 3px solid rgba(255,220,145,0.45);
  border-radius: 1.25em;
  padding: 2.2vh 2vw;
  margin: 1vh 0 2vh;
}
.exam-title{
  margin: 0 0 1vh;
  font-size: 1.2em;
  color: #fff;
  font-weight: 700;
}
.exam-cards{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}
.exam-cards li{
  
  background: #fff;
  border-radius: 1em;
  padding: 12px 14px;
  border: 1px solid #ffdc91;
}
.exam-cards strong{
  display:block;
  color: #6b2a10;
  font-weight: 800;
  margin-bottom: 6px;
}
.exam-cards p{ margin:0; color:#333; line-height:1.6; }

@media (max-width:40em){
  .exam-title{ color:#fff; font-size: 1.05em; }
  .exam-cards{ grid-template-columns: 1fr; }
  .exam-cards li {
        border-left: 5px solid #ff9e00; /* 加入側邊裝飾線 */
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  }
}
#exam {
  margin-top: -3vh;
  width: 100%;
  padding: 0vh 6vw;
  position: relative;
  border-radius: 0;
  background: rgba(255, 254, 235, 0.2) url(../img/top_bg.png);
 /* background:  linear-gradient(180deg, rgba(247, 214, 116, 0.8) 3%, #fff1c6 25%, #fff 45%, rgba(255, 255, 255, 0.624) 100%);  */

}
#exam section {
  padding: 2vh 1vw;
  background:rgba(255, 235, 235, 0.96) url(../img/bg-px.png);
  background-size: 0.6%;
  border:solid 3px #ffb5a3b5;
  border-radius: 2em;
}
#exam .flex {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	justify-content:space-between;
  padding: 2vh 0;
	
}
#exam table span {
    font-size:90%;
    color: #f00;
    text-decoration: underline;
}
#exam  small {
	line-height: 1.5;
	letter-spacing: 0;
}
#exam ol kbd {
	font-family:"Noto Sans TC" , sans-serif;
	font-size:85%;
	font-weight: 900;
	color: #3b3d4a;
}
#exam ul {
    list-style: none;
}
#exam ul h4 {margin-top: 3vh;}
#exam table {
    width: 100%;
    text-align: center;
    border: 1px solid #6b6a6a;
    background: #fff;
}

#exam .flex table {
  width:55%;
	margin: 0;
	border: #ffdc91 solid 1px;
  background-color: #fff;
  text-align: left;
}
#exam  table {
    margin: 0;
	border: #ffdc91 solid 1px;
}
#exam table ol {
  text-align: left;
}
#exam ol {list-style:trad-chinese-informal;padding:0 0 0 42px;}
#exam ol li {margin: 2vh 0;}
#exam mark {background-color:  #ffdc91;}
#exam ol ol {list-style-type:decimal;}
#exam ol ol ol {list-style-type:disc;padding:0;}
#exam table ol li,#exam table ol ol li,#exam table ol ol ol li,#exam ol ol li,#exam ol ol ol li,#exam ol ul li,#exam ul ol li {margin:0;}
#exam table strong {color: #ff8900;}
#exam table td,#exam table th {
	border: 1px solid #ffdc91;
	border-top-width: 0;
	border-left-width: 0;
    padding: 8px;
}
#exam table th {
    background-color:#fff0d0;
    text-align: center;
}
#exam  table td:first-child{
	width:25% ;
	text-align: center;
	background-color:#fff0d0;
} 
#exam table td:nth-child(2){
  text-align: center;
}

#exam details {
   
    border-bottom: #c58134 1px dashed;
    padding: 3vh 2vw;
    text-align: left;

}
#exam details:last-child {
   border-bottom: #ffe7e8 0px solid;
}
#exam summary {
    position: relative;
    cursor: pointer;
    font-size: 1.35em;
     color:  #585858;
    font-weight: 500;
    letter-spacing: 0.5px;
}
#exam summary span {
  padding-right: 0.5vw;
  color:#c58134;
  font-size: 80%;
}

#exam details summary::after {
    content:"+ more";
    font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
    font-size: 1.2em;
    position: absolute;
    right: 1vw;
    color: #e7bd3e ;

}
#exam details[open] summary::after {
    content:"-close";
    font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
    font-size: 1.2em;
    position: absolute;
    right: 1vw;

}
#exam details[open] {
  border-radius: 1em;
  background:#fff;
  background-size: 100%; 
  padding-bottom: 5vh;
  border-bottom: #a8a8a8 1px dashed;
  margin-bottom: 2vh;
}
#exam details[open] summary {
  margin-bottom:1vh;
  border-radius: 0.5em 0.5em 0 0;
  border-bottom: solid 1px #ece9e9;
  padding-bottom: 2vh;
  color:#622106;
  font-weight: 600;
}
#exam details p span {
    font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
    font-size: 1.5em;
    line-height: 1.35;
    color: #ecd9a1;
    display: block;
}
#exam details p span::after {
    content: ':';
    padding: 0 1vw;
}
#exam details p small {
    font-size: 15px;
}

#exam h4,#exam strong {
    color: #c58134;
}
#exam summary:hover {
    color: #ffd365;
    transition: 0.3s;
}
@media screen and (max-width: 40em) {
#exam {
  width: 100%;
  margin-top: -3vh;
  margin-bottom: 0vh;
  font-size: 90%;
  padding: 0vh 2vw;

}
#exam .flex {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	justify-content:space-between;
  padding: 2vh 0;
	
}
#exam table span {
    font-size:90%;
    color: #f00;
    text-decoration: underline;
}
#exam .flex ol {
	width:100%;
}
#exam .flex table {
  width:100%;
}

#exam .flex table td:first-child{
	width:20% ;
	text-align: center;
	background-color: #ffe7e8;
} 
#exam summary {
    font-size: 1em;
}
#exam details {
   
    border-bottom: #ffdc91 1px dashed;

}
}
#logock{
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: solid 1px rgba(255, 255, 255, 0.9);
    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:999;
}
#logock .line {
  position: fixed;
  font-weight: 600;
  right:1vw;
  top: 1vh;
   font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
   font-size: 0.68em;
   line-height: 1.1;
   text-align: center;
   letter-spacing: 0;
   color: #1db139;
  
}
#logock .line span {
  font-size: 135%;
  line-height: 1.1;
}
#logock .line::after {
  content: '\f061';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding: 0 1vw;
}
/* 購物車 */
.cart{
  text-align: center;
  font-size: 1.5em;
  margin-top: 5vh;
  font-weight: 600;
  
}
.cart a {
  margin: 1vw;
}
.cart a span {
  padding: 2vh 2vw;
  background:linear-gradient(145deg, #f9db81 35%, #fff1c6 65%,  #fff 100%);
  border:double 2px #ffb078;
  border-radius: 0.5em;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}
.cart a:nth-child(2) span{ 
  background:#2ec802;
  text-shadow: 1px 1px 2px rgba(10, 61, 23, 0.3);
}
.cart a span:hover, .cart a {color: #fff;  transform: translateY(-2px);}
.cart a:first-child span:hover, .cart a:first-child {color: #ac5b14;}
.cart a:first-child span::before {
  content: '\f07a';
   font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding: 8px ;
 
  }
  /* .cart a:nth-child(2) span::before {
  content: '\f590';
   font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding: 8px ;
  
  } */
   @media (max-width: 55em){
    .cart {
    margin-top:0vh;
    font-weight: 600;
    }
    .cart a {
      margin: 3vh 0.5vw;
    }
    .cart a span {
      display: block;
    }
   }
#faq {
    text-align:center ;
    position: relative;
    font-size: 1.1em;
}

#faq section {
  position: relative;
}
#faq details {
  background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #f8f8f8 repeat;
    background-size: 1%;
    border-bottom:#03c 3px dashed;
    border-left:#03c 12px solid;
    padding: 3vh 8vw;
    margin: auto;
    text-align: left;
}

#faq summary {
    position: relative;
    
}
#faq details summary::marker {
    font-size: 0;
}
#faq details summary::after {
    content:"+ more";
    font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
    position: absolute;
    right: -2vw;
    color:#03c;
}
#faq details[open] summary::after {
    content:"-close";
    font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
    position: absolute;
    right: -2vw;

}
#faq details[open] {
  border:dashed 5px#03c;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.68);
  background-size: 100%;
  margin: 3vh 0;
  padding-bottom: 5vh;
}
#faq details[open] summary {
  margin-bottom:1vh;
  border-radius: 0.5em 0.5em 0 0;
  border-bottom: solid 1px #d6f7b4;
  padding-bottom: 1vh;
  color:  #ff8851;
  font-weight: 600;
}
#faq details p span {
    font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
    font-size: 1.5em;
    line-height: 1.35;
    color: #ffb5a2;
    display: block;

}
#faq details p span::after {
    content: ':';
    padding: 0 1vw;
}
#faq details p small {
    font-size: 15px;
}
#faq summary h5 span {
    font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
    position: absolute;
    background-color: #ffaf8a;
    border-radius: 50%;
    font-size: 1.5em;
    color: #fff;
    padding: 0 12px;
    left: -3.8vw;
    top:2vh;
}
#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#03c, 0.01em -0.03em 0#03c, 0.08em 0.005em 0#03c, 0em 0.08em 0#03c, 0.05em 0.08em 0#03c, 0px -0.05em 0#03c, -0.06em -0.05em 0#03c, -0.08em 0.08em 0#03c, -0.09em 0 0#03c;
    -moz-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
    -ms-transform:rotate(-2deg);
   transform:rotate(-2deg);
  }
  #faq h6 span {
    font-size: 0.35em;
    text-shadow:
    0 0.15em 0px#03c, 
    0.01em -0.03em 0#03c, 
    0.08em 0.005em 0#03c, 
    0em 0.08em 0#03c, 
    0.05em 0.08em 0#03c, 
    0px -0.05em 0#03c,
     -0.06em -0.05em 0#03c,
     -0.08em 0.08em 0#03c,
     -0.09em 0 0#03c;
}
#faq mark {
    background-color: #fffae2;
}
#faq p ins {
    color: #ffaf8a;
    font-weight: 600;
}
#faq em {
    font-size: 90%;
    line-height: 1.35;
    color: #999;
}
#faq ol{
    padding: 0 0 0 21px;

}
@media screen and (max-width:65em) {
    #faq {
        padding:5vh 2vw;
    }

    #faq details {
      background: url(https://www.easywin.com.tw/ad/113/0308/img/bg_3.png)  #fffce9 repeat;
        background-size: 2%;
        padding: 3vh 6vw;
    }

    #faq details p span {
        font-size: 1.35em;
        line-height: 1.35;
        color: #ffb5a2;
        display: block;
    
    }
    #faq summary h5 span {
        font-family: "Baloo", "Noto Sans TC", "Arial", sans-serif;
        position: absolute;
        background-color:#03c;
        border-radius: 50%;
        font-size: 1.5em;
        color: #fff;
        padding: 0 10px;
        left: -3.8vw;
        top:-1vh;
    }
    #faq h6{
        font-size:4.5em;
        text-shadow: 0 0.15em 0px#03c, 0.01em -0.03em 0#03c, 0.08em 0.005em 0#03c, 0em 0.08em 0#03c, 0.05em 0.08em 0#03c, 0px -0.05em 0#03c, -0.06em -0.05em 0#03c, -0.08em 0.08em 0#03c, -0.09em 0 0#03c;
        -moz-transform:rotate(-2deg);
        -webkit-transform:rotate(-2deg);
        -o-transform:rotate(-2deg);
        -ms-transform:rotate(-2deg);
       transform:rotate(-2deg);
      }
      #faq h6 span {
        font-size: 0.4em;
        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;
    }

}


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

}

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

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

.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: 18vh;
  width: 108px;
  height: 108px;
  
}
    .shop strong {
  color: #ffdd00;
  font-weight:900;
  font-size:1.8em;
  line-height: 0.8;
  display: block;
  animation: shineText 1.8s infinite ease-in-out;
}
}


#good {
   background:#ffbf5f url(../img/top_bg.png);
   padding: 5vh 5vw;
   text-align: center;
  }
  #good ul {
    margin: 0;
    padding: 0;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    
    
  }
 #good ul li {
    width: 48%;
    margin: 2vh 0;
    display: flex;
    display: -webkit-flex;
    list-style: none;
    justify-content: space-between;
    align-items:flex-start ;
    position: relative;
    text-align: left;
  }
 #good img {
    width: 18%;
    height: auto;
    border-radius:50%;
    border: solid 1px #3f3997;
    box-shadow:5px 8px 0 #ffdedf7d;
      position: absolute;
  right: 3vw;
  top: -2vh;
  background-color: #dff5ff;
  }
 
 #good p {
    width: 100%;
    padding: 3vh 2vw;
    line-height: 1.8;
  }
   #good strong {
     font-weight: 500;
     color:#ffa42e;
   }
 #good span{
    font-size: 1.5em;
    font-weight: 400;
    color:#985a3b;
    padding-bottom: 3vh;
  }
  #good kbd {
    padding: 1vh 1vw;
    background:#ff4542 ;
    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,#good ul li {flex-wrap: wrap;    font-size: 100%;}
 #good ul li {width: 100%; margin: 3vh 0;position: relative;}
 #good strong {
    font-size:1em;
  }
   #good span{
    font-size: 1.25em;
    font-weight: 400;
    color:#6c6ed9;
    padding: 2vh 0 0;
    display: block;
     line-height: 1.35;
    
  }
 #good img { 
  width: 30%;

}
 #good p {
    padding: 3vh 3vw; 
    border-radius: 1em ;
    background-color: #fff;
    border: solid 1px #e9e9e9; 
  }
}

#teacher{
    text-align: center;
}
article h2 img{
   width:200px
}
#teacher .two {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: stretch;
  margin: auto;
  width: 100%;
      margin-top: 1vh;
    margin-bottom: 1vh;
}
#teacher .two li {
  list-style: none;
  text-align: left;
  margin-bottom: 3vh;
  width: 22%;
  

}
#teacher .two strong {
  background-color: #ff9e00;
  border-radius: 1em;
  padding: 0.5vh 1vw;
  margin-right: 1vw;
  font-size: 1.2em;
  color: #fff; 
    text-align: center;
}
#teacher .two span {
  color: #ff9e00;
}
#teacher ul{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    list-style: none;
    margin-top: 5vh;
}
#teacher ul li  {
   border: solid 1px #ffc53f;
   border-radius: 1em;
   margin: 1vh 0;
   color: #3d3636;
   width:32%;
   position: relative;
}
#teacher ul li img {
    width:55%;
    margin: auto;
    margin-top: -5vh;
    text-align: center;
}
#teacher ul li p{
    background-color:rgb(255 184 50);
    color: #fff;
    margin-top: -5vh;
    padding: 6vh 3vw;
 
}
#teacher ul li p strong,
#teacher ul li p span,
#teacher ul li p em{
    display: block;
}
#teacher ul li p strong {
    font-size: 2em;
}
#teacher ul li p em {
    padding-top: 2vh;
    color: #874a0e;
    
}

@media screen and (max-width: 55em) {
    article h2 img{
   width:180px
}
  #teacher .two {
    flex-wrap: wrap;
    width: 100%;
}
#teacher .two li {
  width: 45%;
  margin: 2vh 0;
}
#teacher .two strong {
  padding: 0.5vh 2.5vw;
  font-size: 1.1em;
}

#teacher ul li img {
    width: 25%;
    position: absolute;
    bottom: 0;
    left: -5vw;
}
    #teacher ul li p strong {
    font-size: 1.5em;
}
#teacher ul li p{
    background-color: orange;
    color: #fff;
      padding: 3vh 3vw 3vh 12vw;
    margin-left:20vw;
    font-size: 85%;
    margin-top:0vh;
}
#teacher ul li  {
   border: solid 1px #ffc53f;
   border-radius: 1em;
   margin: 1vh 0;
   color: #3d3636;
   width: 100%;
   position: relative;
}
}
@media screen and (max-width: 40em) {

#teacher ul li img {
    width: 35%;
    position: absolute;
    bottom: 0;
    left: -5vw;
}
}
#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;
}
}

#leam {
    background: #fffdfd;
}
#leam table {
    width: 100%;
    margin:8vh auto 5vh;
    text-align: center;
    font-family: "Mukta", "Noto Sans TC", "Arial", sans-serif;
     table-layout: fixed;
} 
#leam table caption {
      color: #8b3713;
      font-size: 2em;
      font-weight: 600;
        line-height: 1.3;
      
}
#leam table td,#leam table th {
    padding: 1vh 1vw;
    font-size: 1.2em;
    position: relative;
  
}
#leam table th {
  color: #ffc53f;
  font-weight: 600;
}
#leam table td:first-child {
    width: 35%;
}
#leam table tr { 
    border-bottom: solid 1px #ffc53f;
}
#leam table strong{
    font-size: 2em;
    font-weight: 800;
    color:  #ffbd23;
    line-height: 1;
}
#leam table h6 {
  position: absolute;
  top: -1vh;
  left: 0;
  font-size: 0.8em;
  background: #fb2e1c;
  border-radius: 1em;
  padding:3px 8px;
  font-weight: 600;
  color: #fff;
   -moz-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
    -ms-transform:rotate(-2deg);
   transform:rotate(-2deg);
}
#leam time {
  font-size: 0.8em;
  line-height: 3;
  padding:3px 8px;
  margin-left: 0.5vw;
  background: #ffbd23;
  border-radius: 1em;
   color: #fff;
}
#leam ul {
    margin: 0;
    margin-bottom: 5vh;
    padding: 0;
    display: flex;
    display: -webkit-flex;
    justify-content:space-between;
    align-items: stretch;
    list-style: none;
}
#leam ul li {
    background-color: #eeeaeaa2;
    width: 32%;
    border: solid 1px #d6f7b4; 
    border-radius: 2em;
    padding:  3vh 3vw;
    color:#afcaff;
}
#leam ul li strong {
    font-size: 1.65em;
    font-weight: 600;
    padding: 1vw;
    color:#afcaff;
    
}
#leam ul li mark {
    background-color:#dfa84e;
    border-radius: 1em;
    color: #fff;
    font-weight: 600;
    display: block;
    padding: 3px 8px;
}
#leam ul h6 {
    font-weight: 600;
    font-size: 1em;
    color:#afcaff;
    padding: 1vh 1vw;
    
}
#leam ul p {
    text-align: left;
    color: #000;
    font-size: 98%;
}
#leam ul p i {
    color: #fed365;
    padding-right: 0.5vw;
}
#leam ul img {
    width:68px;
    height:68px;
    border-radius: 50%;
    border: solid 1px #d6f7b400;
    background-color: blanchedalmond;

}

@media screen and (max-width:65em) {
    #leam table caption {font-size: 1.5em;}
    #leam table strong{font-size: 1.25em;}
    #leam ul li strong {font-size: 1.35em;}
    #leam table td,#leam table th {
        padding: 2vh 0.5vw;
        font-size: 1em;
    }
    #leam  ul {
    flex-wrap: wrap;
    margin: auto;
    margin-bottom: 5vh;
  }
#leam ul li {
    background-color: #eeeaeaa2;
    width: 100%;
    margin-bottom: 2vh;
}
}

#sale {
    text-align: center;
  }

#sale 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;
  }
  #sale ol li {
    position: relative;
    list-style: none;
    width:30.5%;
    padding:3vh 0 ;
    margin: 1vh auto;
    background-color: #fff;
    border: saddlebrown solid 1px;
    border-radius: 1em;

  } 
  #sale ol li:last-child {
    width: 100%;
    background: none;
    margin-top: 3vh;
    padding: 0 ;
  }
  #sale ol strong {
    font-size: 3em;
    font-family: "Mukta";
    color: #ff3911; 
    line-height: 1.2;
  }
  
  #sale a,#sale 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) {
    #sale {
        padding: 5vh 5vw; 
        letter-spacing: 0;
      }
    #sale ol {
        font-size:1em;
        margin: 0;
        background: #fff;
        border-radius: 1em;
      }
      #sale ol li,#sale ol li:last-child {
        width:100%;
        padding:2vh 0 ;
        margin: 2vh 0;
        border: 0px;
        border-bottom: dashed 1px #ddd;
      } 
      #sale ol li:last-child {
        border-bottom: dashed 0px #ddd;
      }
      #sale ol strong { font-size: 3em; }
 
      #sale a,#sale a:hover {
        font-size:2.5em;
      }
  
      #sale ol li:last-child {
        color: #501729;
    }
  }
#pht_class {
  text-align: center;
}


#pht_class ul {
  list-style: none;
  padding: 0;
  margin: auto;
  display: flex;
  display: -webkit-flex;
  font-size: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
#pht_class ul strong {
  display: block;
  font-size:1.5em;
  line-height: 1.6;
  color:#855022;
  padding: 1vh 0;

}
#pht_class ul li {
  width:22%;
  border-radius: 2em;
  margin: 1vh 0.2vw;
  text-align: center;
  padding: 3vh 1vw;
}
#pht_class ul li img {
  width: 100%;
  border:solid 1px #ffe1e1;
  border-radius: 50%;
}

@media screen and (max-width: 40em) {
  
#pht_class {
  padding: 5vh 2vw;
}
#pht_class ul {
  list-style: none;
  padding: 0;
  margin: auto;
  display: flex;
  display: -webkit-flex;
  font-size: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
#pht_class ul strong {
  display: block;
  font-size:1.5em;
  line-height: 1.2;
  color:#ff9970;
  padding: 1vh 0;

}
#pht_class ul li {
  width:46%;
  font-size: 95%;

}
#pht_class ul li img {
  width: 100%;
  border:solid 1px #f3f3f3;
}

#pht_class ul i {
  font-size: 2.2em;
  color: #ffffff;
  display: block;
  padding-bottom: 1vh;
}
}

  #sp {
    text-align: center;
    padding: 5vh 0vw ;
  }
 
  #sp .sp{
    width: 100%;
    margin: auto;
  }

  #sp ul {
    display: flex;
    display: -webkit-flex;
    margin: 0;
    margin-bottom: 5vh;
    align-items: stretch;
    justify-content: space-around;
    list-style: none;
  }
   #sp ul li {
    width: 48%;
    border-radius: 2em;
      padding: 2vh 0vw 3vh;
   }
  #sp ul span {
  font-weight: 600;
  color:  #5459cd;
  font-size: 130%;
   display: block;
  line-height: 1.5;
  padding: 2vh 0 1vh;
}
#sp ul strong {
  font-size: 2.2em;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
  color: #ffb100;
  border-bottom:solid 8px ;
  padding-bottom: 1vh;
}
#sp ul small{
  font-size: 12px;
 
  
}

  #sp a, #sp a:hover {
    background:#15a305;
    color: #fff;
    font-weight: 600;
    border-radius: 1em;
    padding: 2vh 2vw;
    margin-top: 3vh;
    font-size: 1.8em;
    /* #5459cd */
}
@media (max-width: 40em){
  #sp .sp{
    width: 100%;
    margin: auto;
  }
  #sp ul {
    flex-wrap: wrap;
  }
   #sp ul li {
    width: 100%;
    padding: 3vh 3vw 2vh;
    margin-bottom: 2vh;
   }
  #sp ul span {
  font-size: 125%;
 
}
#sp ul strong {
  font-size: 2em;
   margin-bottom: 2vh;
  
}


}


#soc {
    padding: 8vw 12vh;
    text-align: center;
    background-color:rgba(255, 233, 192, 0.941);
}
#soc .one{
  display: flex;
  display: -webkit-flex;
  list-style: none;
  justify-content: space-around;
  align-items: stretch;
  margin-top: 2vh;
  line-height: 1.5;
}
#soc .one li {
  position: relative;
  margin: 1vh 0vw;

}
#soc ol strong {
  color:#138b59;
  display: block;
  font-size: 122%;
  font-weight: 600;
}
#soc  ol time {
  font-family: "Mukta", "Noto Sans TC", "Arial", sans-serif;
  font-size: 1.15em;
  line-height: 3;
  padding: 0.5vh 1vw ;
  background: #138b59;
  border-radius: 1em;
   color: #fff;
}
#soc ul{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    list-style: none;
}
#soc  ul li  {
   border: solid 1px #ffc53f;
   background-color: #fff;
   border-radius: 1em;
   margin: 1vh 0;
   color: #3d3636;
   width: 31%;
   position: relative;
   padding: 3vh 3vw;
}
#soc  ul li strong {
   display: block;
   font-size: 1.35em;
   font-weight: 300;
   line-height: 1.35;
   color: #ff903c;
   padding-bottom: 3vh;
}
@media (max-width:55em) {

 #soc ol {
  flex-wrap: wrap;
}

#soc ol strong {
  font-size: 105%;
}
#soc  ul li  {
   width: 32%;
}
#soc  ul li strong {
   display: block;
   font-size: 1.25em;
   font-weight: 300;
   line-height: 1.35;
   color: #ff903c;
   padding-bottom: 3vh;
}
}
@media (max-width:40em) {

#soc .one li {
  width: 19%;
  height: auto;
  margin-bottom: 3vh;
  font-size: 80%;
}
#soc .one li:last-child{
  display:none;
}
#soc ol strong {
  font-size: 105%;
}
#soc  ul li  {
   width: 100%;
}
}

#qua {
  
    text-align: center;
    margin-top: 5vh;
}
#qua q {
    display: block;
    color: #2158ff;
    padding: 3vh 0;
    font-style: italic;
}
#qua ol {
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    justify-content: flex-end;
    list-style: none;
    margin-top: 3vh;
}
#qua ol li {
    border: #ecf7e0 solid 2px;
    border-radius: 1em;
    background-color: #fff;
    padding: 3vh 1vw;
    margin: 1vh 1vw;
    width: 23%;
}
#qua h3 { 
    margin-bottom: 3vh;
}
#qua h3 strong {
    padding-bottom: 2vh;
    border-bottom: 3px solid;
    font-weight: 600;
    position: relative;
}
#qua h3 strong::before {
    content: '\f00c';
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    left: -3vw;
}

#qua p {
    margin: 2vh 0;
}
#qua span::before {
    content: '／';
    font-size: 15px;
    padding:0 1vw;
}
@media screen and (max-width:80em) {
    #qua ol li {
        width:28%;
        margin: 1vh 0.5vw;
    }
}
@media screen and (max-width:60em) {
    #qua ol li {
        width:32%;
    }
    #qua {
        text-align: center;
        margin-bottom: 20vh;
    }
}

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

    #qua {
        text-align: center;
        margin-bottom: 5vh;
    }
    #qua h3 strong::before {
        content: '\f00c';
        font-weight: 900;
        font-family: 'Font Awesome 5 Free';
        position: absolute;
        left:-8vw;
    }
    #qua span::before {
        content: '／';
        font-size: 15px;
        padding:0 2vw;
    }
    #qua h3 { 
        margin-bottom: 3vh;
    }
    #qua ol {
        flex-wrap: wrap;
    }
    #qua ol li {
        width: 100%;
    }

}
#list {
    padding:8vh 5vw 10vh;
    text-align: center;
    font-weight: 600;
    color: #533506;
   background: #fffcfc  url(../img/bg_3.png);
   background-size: 1%;

}
#list ul {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1vw;  
    align-items: start;
    justify-content: space-around;
    font-family:"Noto Sans TC" , sans-serif;
    list-style-type: none;
    border-radius: 3em;
    margin-top: 3vh;
    font-size:1.5em;
     line-height:1.5;


}
#list ul kbd {
      background-color:#ff4542;
  padding: 6px;
  color:#ffffff;
  /* color:#ff9d9d; */
  font-weight: 500;
  margin-right: 8px;
  border-radius: 2em;
  font-size: 95%;
 
}
/* #list ul li:nth-child(2n) kbd {
      background-color:rgb(255, 102, 0);
} */
#list ul img{
  width:0%;
  height: auto;
  margin-bottom: 3px;
}
.list-photos{
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap:1vw;
  margin: 24px 0 16px;
}
.list-photos figure{
  margin:0;
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  border:3px solid #ffe0a9;
}
.list-photos img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius: 6;
}
@media (max-width:75em){
    #list ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1vw;  


}

}
@media (max-width:60em){
    #list ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1vw;  
    margin-top: 3vh;
    font-size:1.5em;


}
}
@media (max-width:40em){
  .list-photos{
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding-bottom:8px;
  }
  .list-photos figure{
    min-width: 60%;
  }
  #list ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1vw;  
    margin-top: 3vh;
    font-size:1em;


}
}

#vs {
  text-align: center;
  background: #fff5e3;
  /* background: #fff1e5eb; */
  /* background: #e5eeffeb; */
}
#vs>section{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
 

}
#vs table {
  width: 48%;
  margin: 3vh 0;
  border: solid 1px #ddd;
  background: #fff;
  letter-spacing: 0;
      font-family: "Mukta", "Noto Sans TC", "Arial", sans-serif;

}
#vs table td,
#vs table th {
  border: solid 1px #ddd;
  border-bottom-width:0 ;
  border-right-width: 0;
  padding: 6px 0;
}

#vs table th {
   background-color:#ffa98a;
   color: #fff;
   font-weight: 600;
}
#vs table:nth-child(2) th { background-color:#5464d8; }
#vs table:last-child th { background-color:#5464d8; }
#vs table tr:nth-child(2n-1) td{ background-color: #f4f4f4; }
#vs table td:last-child {
  color: #5464d8;
  font-weight: 800;
  font-size: 108%;
}
#vs nav {
  margin: 5vh 0;
}
#vs a, #vs a:hover {
  font-size: 1.2em;
  font-weight: 600;
  border-radius: 2em;
  padding: 2vh 2vw;
  background-color: #5365d8;
  color: #fff;
  margin: 2vh 1vw;
}

@media (max-width: 55em){

  #vs {
    padding: 5vh 5vw;
  }
  #vs>section{
    flex-wrap: wrap;
   
  
  }
  #vs table {
    width: 100%;
  }
  #vs table td,
  #vs table th {
    padding: 6px 3px;
  }

  #vs nav {
    margin: 5vh 0;
  }
  #vs a, #vs a:hover {
    font-size: 1em;
    font-weight: 600;
    border-radius: 2em;
    padding: 2vh 2vw;
    background-color: #5365d8;
    color: #fff;
    margin: 2vh 1vw;
  }
}
#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;
    }
}
/* down */ 

#ans_down{
  color:#333;
  text-align: center;
  margin: 0 auto;
  background: #ffeac2;
}


@media screen and (max-width:720px){
#ans_down h2{
  font-size: 1.5em;
}
}


@media (max-width: 50em){
#ans_down{
  padding: 5vh 5vw;
}
}

.down{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  color: #333;
  font-size: 1.2em;
  line-height: 1.5;
  text-align: center;
  /*padding: 3px;*/
  border-radius: 3px;
  border-collapse: inherit;
  table-layout: fixed;
  background-color: #fff;
  border:1px solid rgba(255,175,122,0.5);
}
.down th {
    padding:8px 2px;
    text-align: center;
    border-left: 1px solid #fff;
    background-color: #fdb873;color: #fff;
     /*background-color: #4b7ae5;*/
     /*background-color: #fcaa2f;*/
}
.down td{
  padding:8px 3px;
  border-left:1px solid rgba(255,175,122,0.5);
  border-bottom:1px solid rgba(255,175,122,0.5);
}

.down td:nth-child(1):hover{
  background-color: rgba(255, 230, 230,0.3);
  color: #0033cc;
  cursor: pointer;
}
.down td:nth-child(1) {
  text-align: left;
  width: 65%;
}

.number{
  font-size: 12px;
  background-color:#ffab91;
  color: #fff;
  border-radius: 50%;
  padding:2px 6px;
  font-family: "Courier New";
  margin: 0px 10px;
}
.pdf{
  color: #ffab91;
  float: right;
  left: auto;
  padding-right:20px;
  font-size:36px;
  /*line-height:1;*/
}
.pdf_d{
  color: #ccc;
  float: right;
  left: auto;
  padding-right:20px;
  font-size:36px;
  cursor: no-drop;
  /*line-height:1;*/
}
.ans{
  color:#ffab91;
  font-size:36px;
}

.ans_d{
  color:#eee;
  font-size:36px;
  cursor: no-drop;
}
@media (max-width: 50em){

.down{
  width: 100%;
   font-size:1em;
}
.down td:nth-child(1) {
  width: 55%;
}
}
@media screen and (max-width:900px){
.number{
  padding:2px 5px;
  margin: 0px 3px;
}
.pdf{
  padding-right:5px;
  font-size:26px;
  /*line-height:1;*/
}
.ans_d,.pdf_d{
  color:#eee;
  font-size:26px;
}
.ans{
  font-size:26px;
}
}
.custom-select {
  padding: 0;
  border: 1px solid #27e6cc;
  width: 180px;
  margin: 5px auto 25px;
  overflow: hidden;
  font-size: 1.2em;
  /*background: transparent url(../img/top.png) no-repeat 94% 50%;*/
}

.custom-select select {
  padding: 10px 10px;
  cursor: pointer;
  width: 100%;
  color: #81c8ff;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 0.01px;
    text-overflow: '';
}

.custom-select select:focus {
  outline: none;
}
select  {
font-size: 0.7em;
}
@media screen and (max-width: 765px) {
  .custom-select {
  width: 120px!important;
  margin: 5px auto 25px;
  overflow: hidden;
  font-size: 1.1em;
  /*background: transparent url(../img/top.png) no-repeat 94% 50%;*/
}

}