@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: #ffffff;
  background-size: 5%;
  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;
}
#sale {
    /* background: url(img/h_bg2.png) top center no-repeat;
    background-size: 100%; */
    text-align: center;
}
#sale .s {
  width: 100%;
  padding: 2vh 2vw 2vh;
  background: #fff url(https://www.cek.com.tw/event/halfyear/images/course-pic.jpg) no-repeat;
  background-size: 20%;
  background-position: left 0vw bottom;
  border-radius: 1em;
  margin-bottom: 1vh;

}

#sale .s strong {
  border-bottom:3px solid;
  color:#ff0000;
  line-height: 1.5;
}
#sale .s h4{
  font-weight: 800;
  font-size: 1.5em;
  line-height: 2;
}
#sale .s h4 span {
  color: #3971ff;
}
#sale .s kbd {
  padding: 1.5vh 1.5vw;
  background-color: #3971ff;
  color: #fff;
  border-radius: 1em;
  
}
#sale time {
  font-size:3.5em;
  letter-spacing: 2px;
  font-weight: 200;
  line-height: 1.5;
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;

}
#sale time span {
  padding:3px 5px;
  border-radius: 50%;
  color: #fff;
  background-color: #3971ff;
  font-size: 0.3em;
}
#sale h3 {
  font-family: "Outfit", "Noto Sans TC",sans-serif;
  font-size: 2.5em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0.2em 2px rgba(255, 255, 255, 0.17), 0.1em 0.05em 1px #3971ff, 0.1em -0.03em 0 #3971ff, 0.05em 0.005em 0 #3971ff, 0em 0.08em 0 #3971ff, 0.05em 0.08em 0 #3971ff, 0px -0.03em 0 #3971ff, -0.03em -0.03em 0 #3971ff, -0.03em 0.08em 0 #3971ff, -0.03em 0 0 #3971ff;
}
#sale h4 {
  font-weight: 300;
  font-size:1.2em;
  line-height: 1.5;
  margin-bottom: 2vh;

}
#sale h4 span {
  font-size: 150%;
}
#sale h4 span::before {
  content: '＼';
  font-size: 80%;
  padding:1vw;
}
#sale h4 span::after {
  content: '／';
  font-size: 80%;
  padding:1vw;
}
#sale a, #sale a:hover {
  font-family: "baloo", "Noto Sans TC", sans-serif;
  font-size:1.8em;
  line-height: 1.5;
  background-color:#dff3ff;
    color:#140d60;
    padding: 2vh 1vw 2vh 4vw;
    text-decoration: none;
    border: #392eb7 dotted 3px;
    border-radius: 2em;
    font-weight: 600;
}
#sale>section {
  padding: 2vh 0vw 1vh ;
}
  
  #sale>section div {
    padding: 2vh 2vw 8vh ;
    position: relative;
    margin: 2vh auto;
  }
  #sale>section .sale{
    border: solid 2px #ffe0e0;
    background: #fff;
    margin: auto;
  }
  #sale>section .super{
    padding: 2vh 0vw 0vh ;
  }
  #sale .super{
    margin: 12vh auto 0;
  }
  #sale .sale ul {
    display:flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 1vh 0;
    align-items: stretch;
    justify-content: space-between;
  }
  #sale .sale ul li {
    width: 30%;
    margin: 1vh 0vw;
    padding: 3vh 0.2vw;
    border: dashed 1px #ffcccc;
    
  }
  #sale .sale ul h6 {
    margin-bottom: 1vh;
    
    font-size: 1em;
    background:#ffe5e5 url(img/px.png);
    padding: 1vh 1vw;
    text-align:center;
  }

  #sale .sale span {color: #ff2929; }
  #sale .super span {color: #0a6d35;}
  #sale .super h4 span {font-weight:800;font-size: 2em;}
  #sale>section div strong {
    font-family: "Outfit", "Noto Sans TC",sans-serif;
    font-size: 2.2em;
  }
  #sale h5 {
    background:  #ff2929 url(img/px.png);
    border:solid 8px #fff;
    color:#fff;
    font-size: 1.8em;
    font-weight: 500;
    padding: 1vh 1vw;
    text-align: center;
    width: 100%;
    top: -5vh;
    left: -1vw;
  }
  #sale .super h5 {
    background: #3971ff url(img/px.png);
    border:solid 8px #fff;
  }
  #sale div img {
    width: 68px;
    padding: 5vh 0 0 1vw ;
    margin-bottom: -5vh;
  }

  #sale .super ul {
    font-family: "Outfit", "Noto Sans TC",sans-serif;
    display: flex;
    display: -webkit-flex;
    list-style: none;
    align-items: stretch;
    justify-content: space-between;
  }
  #sale .super ul li {
    
    width:32%;
    text-align: center;
    font-size: 1.1em;
    padding:2 vh;
    padding-bottom: 18vh;
    border: solid 2px #c1ddff;
    border-radius: 1em;

  }
  #sale .super ul li h6 {
    color: #0a6d35;
    margin: 2vh 0;
    font-size:1.5em;
    font-weight: 600;
    text-align:center;
  }

  #sale .super ul li:first-child {
    background:  #fff3ea  url(img/book1.png) no-repeat bottom center;
    background-size: 38%;
   
  }
  #sale .super ul li:nth-child(3) {
    background: #fff0f0  url(img/book2.png) no-repeat bottom center;
    background-size: 38%;
   
  }
  #sale .super ul li:nth-child(2) {
    background:#eff6ff url(img/book3.png) no-repeat bottom center;
    background-size: 38%;
   
  }

  #sale .nst ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    justify-content: space-around;
  }
  #sale .nst ul li {
    position: relative;
    background: #fff;
    border:#26bc00 solid 5px;
    padding: 3vh 2vw;
    margin: 1vh 1vw;
    
  }
  #sale .nst ul li img {
    position: absolute;
    bottom: -3vh;
    right: -2vw;
    width: 35%;
  }
  #sale .nst h6{
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 2vh;
    padding-bottom: 2vh;
    border-bottom: dashed 1px  #26bc00;
  }
  #sale .nst h6 span {
    background-color: #26bc00;
    color: #fff;
    padding: 8px;
    border-radius: 1em;
  }
  @media (max-width:65em){
    article {
      font-size: 1em;
  }
  
  #sale {
      /* background: url(img/h_bg.png) top center no-repeat;
      background-size: 100%; */
      text-align: center;
      padding-top: 5vh;
  }
  #sale .s {
    padding: 3vh 5vw 18vh;
    background: #fff url(https://www.cek.com.tw/event/halfyear/images/course-pic.jpg) no-repeat;
    background-size: 45%;
    background-position:center bottom;
    border-radius: 1em;
    margin-bottom:0vh;
    border: solid 1px #ddd;

}

#sale .s strong {
    border-bottom:3px solid;
    color: #ff3f8d;
    font-size: 2.6em;
}
#sale .s h4{
    font-weight: 800;
    font-size: 1.2em;
    line-height: 1.5;
}
#sale .s kbd {
    padding: 1vh 1vw;
    color: #fff;
    display: block;
    font-size: 1.2em;
    
}
  #sale time {
    font-size:2.5em;
    letter-spacing: 1px;
    font-weight: 300;
    line-height: 1.5;
    font-family: "Outfit", sans-serif;
  
  }
  #sale time span {
    font-size: 0.3em;
  }
  #sale h3 {
    font-size: 2.5em;
    line-height: 1.3;
  }
  #sale h4 {
    font-size:1.1em;
  }
  #sale a, #sale a:hover {
    font-size: 2em;
  }
  #sale>section {
    padding: 8vh 5vw 1vh ;
  }
    
    #sale>section div {
      padding: 6vh 5vw 6vh ;
      text-align: center;
    }
    #sale>section .sale{
      width: 100%;
    }
    #sale>section .super{
      width: 100%;
      padding: 8vh 0vw 0vh ;
    }
    #sale .super{
      margin: 8vh auto 0;
    }

    #sale .sale ul li {
      width: 100%;
      margin: 1vh 0vw;
      padding: 3vh 1vw;
      border: dashed 1px #ffcccc;
      
    }
    #sale .sale ul h6 {
      margin:auto;
      width: 100%;
      font-size: 1em;
    }
    #sale>section div strong {
      font-size: 1.8em;
    }
    #sale h5 {
      font-size: 1.5em;
      width: 88%;
      top: -5vh;
      left: -2vw;
    }
    #sale div img {
      width: 38px;
    }

    #sale .super ul {
      flex-wrap: wrap;
    }
    #sale .super ul li {
      width: 100%;
      text-align: center;
      padding: 6vh 3vw;
      margin-bottom: 2vh;
      font-size: 1.1em;
      padding-bottom: 18vh;
      border: solid 2px #c1ddff;
      border-radius: 1em;
  
    }
    #sale .super ul li h6 {
      margin: 0vh 0;
      font-size:1.5em;
      font-weight: 500;
    }
    #sale .super ul li:first-child {
      background: #fff url(img/book1.png) no-repeat bottom center;
      background-size: 25%; 
    }
    #sale .super ul li:nth-child(2) {
      background: #fff url(img/book2.png) no-repeat bottom center;
      background-size:25%;
    }
    #sale .nst {
      background: url(img/h_bg.png) top center no-repeat;
      background-size: 100%;
      text-align: center;
    }
    #sale .nst ul {
      flex-wrap: wrap;
    }
    #sale .nst ul li {
      width: 68%;
      border:#26bc00 solid 1px;
      margin: 1vh 1vw;
      background-color: #fff;
      font-size: 90%;
      
    }
    #sale .nst ul li img {
      position: absolute;
      bottom: -8vh;
      right: -5vw;
      width: 35%;
    }
    #sale .nst h6{
      font-size: 1em;
      font-weight: 600;
      margin-bottom: 2vh;
      padding-bottom: 2vh;
      border-bottom: dashed 1px  #26bc00;
    }
    #sale .nst h6 span {
      background-color: #26bc00;
      color: #fff;
      padding: 8px;
      border-radius: 1em;
    }
  }
  @media (max-width:40em){
  #sale .super ul li:first-child {
    background: #fff url(img/book1.png) no-repeat bottom center;
    background-size: 35%; 
  }
  #sale .super ul li:nth-child(2) {
    background: #fff url(img/book3.png) no-repeat bottom center;
    background-size:35%;
  }
  #sale .super ul li:nth-child(3) {
    background: #fff url(img/book2.png) no-repeat bottom center;
    background-size:35%;
  }
  #sale .nst ul li {
    width: 80%;
    
  }
}
  
  #st {
    text-align: center;
    background: #ffffff  top center no-repeat;
    background-size: 100%;
    text-align: center;
  }
  #st p {
    color: #333;
    background-color: #fff;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.8;
    padding:5vh 2vw;
    text-align: left;
    margin-top: -1vh;
  }

  #st h3 {
    font-size: 2em;
    line-height: 1.2;
    margin-bottom: 3vh;
  }
#st h4{
    color:#0a6d35;
    text-shadow: 0 0.2em 2px rgba(255, 255, 255, 0.17), 0.1em 0.05em 1px #fff, 0.1em -0.03em 0 #fff, 0.05em 0.005em 0 #fff, 0em 0.08em 0 #fff, 0.05em 0.08em 0 #fff, 0px -0.03em 0 #fff, -0.03em -0.03em 0 #fff, -0.03em 0.08em 0 #fff, -0.03em 0 0 #fff;
  }
  #st ul h5 {
    position: absolute;
    font-size: 1.1em;
    bottom: -1vh;
    left: 2vw;
  }
  #st>section {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #st>section div  {
     width: 50%;
     margin: 0;
     background-color: #fff;

  }
  #st>section div:first-child,
  #st>section div:nth-child(4),
  #st>section div:nth-child(5) {
     border: solid 5px #ff2929;
     color: #ff2929;
  }
  #st>section div:nth-child(2),
  #st>section div:nth-child(3),
  #st>section div:nth-child(6) {
     border: solid 5px #0a6d35;
     color:#0a6d35;
     
  }
 
  #st ul {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    list-style: none;
    position: relative;
    
  }

  #st ul li {
    width: 45%;
    
  }
  #st ul li:nth-child(2) {
    width: 60%;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.5;
  }
  #st ul li:nth-child(2) span {
    font-size: 1.8em;
    font-family:"Noto Sans TC" , sans-serif;
  }
  #st ul img {
    width: 100%;
    padding-top: 2vh;
  }
  #st>section div:first-child ul:first-child ,
  #st>section div:nth-child(4) ul:first-child,
  #st>section div:nth-child(5) ul:first-child {
    background: url(img/st_r.png) no-repeat bottom center;
    background-size: cover;
  }

  #st>section div:nth-child(2) ul:first-child ,
  #st>section div:nth-child(3) ul:first-child,
  #st>section div:nth-child(6) ul:first-child {
    background: url(img/st_b.png) no-repeat bottom center;
    background-size: cover;
  }
  #st>section div:first-child p,
  #st>section div:nth-child(4) p,
  #st>section div:nth-child(5) p {
    border-top: 5px solid  #ff2929;
  }

  #st>section div:nth-child(2) p,
  #st>section div:nth-child(3) p,
  #st>section div:nth-child(6) p {
    border-top: 5px solid #0a6d35;
  }
  #st>section div:first-child h5,
  #st>section div:nth-child(4) h5,
  #st>section div:nth-child(5) h5 {
    color: #fff;
    text-shadow: 0 0.2em 2px rgba(255, 255, 255, 0.17), 0.1em 0.05em 1px #ff2929, 0.1em -0.03em 0 #ff1f8a, 0.05em 0.005em 0 #ff2929, 0em 0.08em 0 #ff2929, 0.05em 0.08em 0 #ff2929, 0px -0.03em 0 #ff2929, -0.03em -0.03em 0 #ff2929, -0.03em 0.08em 0 #ff2929, -0.03em 0 0 #ff2929;
  }

  #st>section div:nth-child(2) h5,
  #st>section div:nth-child(3) h5,
  #st>section div:nth-child(6) h5 {
    color: #fff;
    text-shadow: 0 0.2em 2px rgba(255, 255, 255, 0.17), 0.1em 0.05em 1px #0a6d35, 0.1em -0.03em 0 #0a6d35, 0.05em 0.005em 0 #0a6d35, 0em 0.08em 0 #0a6d35, 0.05em 0.08em 0 #009dff, 0px -0.03em 0 #009dff, -0.03em -0.03em 0 #009dff, -0.03em 0.08em 0 #009dff, -0.03em 0 0 #009dff;
    
  }
@media (max-width:65em){

  #st p {
    font-size: 0.9em;
    padding:3vh 5vw;
  }
  #st h3 {
    font-size: 1.65em;
    line-height:1.68;
  }
  #st h4 {
    color: #009dff;
  }
  #st ul h5 {
    position: absolute;
    font-size: 1.15em;
    line-height: 1.2;
    bottom: -1vh;
    left: 3vw;
  }

  #st>section div  {
     width: 100%;
     margin: 0;
     background-color: #fff;

  }
  #st>section div:first-child,
  #st>section div:nth-child(3),
  #st>section div:nth-child(5) {
     border: solid 5px #ff2929;
     color: #ff2929;
  }
  #st>section div:nth-child(2),
  #st>section div:nth-child(4),
  #st>section div:nth-child(6) {
     border: solid 5px #009dff;
     color:#009dff;
     
  }

  #st ul li {
    width: 40%;
  }
  #st ul li:nth-child(2) {
    width: 60%;
    font-size: 1em;
    margin-top: -5vh;
  }
  #st ul li:nth-child(2) span {
    font-size: 1.5em;
    font-family:"Noto Sans TC" , sans-serif;
  }
  #st ul img {
    width: 100%;
    padding-top: 2vh;
  }
  #st>section div:first-child ul:first-child ,
  #st>section div:nth-child(3) ul:first-child,
  #st>section div:nth-child(5) ul:first-child {
    background: url(img/st_r.png) no-repeat bottom center;
    background-size: cover;
  }

  #st>section div:nth-child(2) ul:first-child ,
  #st>section div:nth-child(4) ul:first-child,
  #st>section div:nth-child(6) ul:first-child {
    background: url(img/st_b.png) no-repeat bottom center;
    background-size: cover;
  }
  #st>section div:first-child p,
  #st>section div:nth-child(3) p,
  #st>section div:nth-child(5) p {
    border-top: 5px solid  #ff2929;
  }

  #st>section div:nth-child(2) p,
  #st>section div:nth-child(4) p,
  #st>section div:nth-child(6) p {
    border-top: 5px solid #009dff;
  }
  #st>section div:first-child h5,
  #st>section div:nth-child(3) h5,
  #st>section div:nth-child(5) h5 {
    color: #fff;
    text-shadow: 0 0.2em 2px rgba(255, 255, 255, 0.17), 0.1em 0.05em 1px #ff2929, 0.1em -0.03em 0 #ff1f8a, 0.05em 0.005em 0 #ff2929, 0em 0.08em 0 #ff2929, 0.05em 0.08em 0 #ff2929, 0px -0.03em 0 #ff2929, -0.03em -0.03em 0 #ff2929, -0.03em 0.08em 0 #ff2929, -0.03em 0 0 #ff2929;
  }

  #st>section div:nth-child(2) h5,
  #st>section div:nth-child(4) h5,
  #st>section div:nth-child(6) h5 {
    color: #fff;
    text-shadow: 0 0.2em 2px rgba(255, 255, 255, 0.17), 0.1em 0.05em 1px #009dff, 0.1em -0.03em 0 #009dff, 0.05em 0.005em 0 #009dff, 0em 0.08em 0 #009dff, 0.05em 0.08em 0 #009dff, 0px -0.03em 0 #009dff, -0.03em -0.03em 0 #009dff, -0.03em 0.08em 0 #009dff, -0.03em 0 0 #009dff;
    
  }
}
#double {
 
  padding: 5vh 5vw;
  text-align: center;
  position: relative; 
  height:100vh;
  overflow-x: hidden;
}
#double h3 {
  font-weight:800;
  font-size:2.8em;
  line-height: 1.5;
  color:#0081ff;
  text-shadow: -1px -1px 0px #fff, 1px -1px 0px #fff, -2px 0px 0px #fff, -1px 1px 0px #fff, 0px 3px 0px #fff, 0px -3px 0px #fff, 2px 2px 0px #fff, -2px -2px 0px #fff, 3px 0px 0px #fff, -3px 0px 0px #fff;

}
#double h4 {
  font-size: 1.68em;
  padding-bottom: 2vh;
  color:#ff8b37;
}

#double ul {
  display: flex;
  display: -webkit-flex;
  align-items: stretch;
  justify-content: space-around;
  list-style: none;
 
 

}
#double ul li {
  width: 50%;
  text-align:left;
  position: relative;
  margin-top: 8vh;
}

#double img {
  width:90%;
  position:absolute;
  top: 0;
  right: -3vw;
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  -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)));
  /* background: linear-gradient(45deg, rgba(255, 255, 255, 0.6) 10%, rgba(83, 89, 255, 0.8) 50%, rgba(249, 249, 249, 0.03) 89%, rgba(249, 249, 249, 0) 90%); */
}
#double ul li:last-child img{
  top: 0;
  left:-3vw;
}
#double ul li p {
  z-index: 900;
  position: absolute;
  top: -9vh;
  padding: 2vh 1vw;
  border-radius:1em;
  border: solid 3px;
  background: rgba(3, 146, 255,0.9);
  color: #fff;
  font-size: 1em;
  width: 90%;
  left: -3vw;
}
#double ul li p strong {
  display: block;
  font-size: 1.5em;
}
#double ul li:last-child p {
  background: rgba(255, 139, 55,0.9);
  left: auto;
  right: -3vw;
}
@media (max-width:65em) {
  #double ul li p {
      font-size: 1.1em;
      font-weight: 400;
    }
}
@media (max-width:50em) {
  #double {
      background: #fff url('img/bg.png');
      background-size: 12%;
    }
    #double h3 {
      font-size:3.5em;
      line-height: 1.2;
  
    }
    #double h4 {
      font-size: 2em;
      padding-bottom: 2vh;
    }
  
    #double ul {
      flex-wrap: wrap;
    }
    #double ul li {
      width: 50%;
      margin-top: 0vh;
    }
  
    #double img {
      width:135%;
      position:relative;
      left:-8vw;
      top:-3vh;
      -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

    }
    #double ul li:last-child img{
      top: 0;
      left:-8vw;
    }
    #double ul li p {
      position: relative;
      top: 0;
      padding: 2vh 2vw;
      border-radius:1em;
      border: solid 3px;
      background: rgba(255, 255, 255,0.8);
      color: rgba(3, 146, 255,0.9);
      
      width: 95%;
      left: 0vw;
    }
    #double ul li p strong {
      display: block;
      font-size: 1.25em;
    }
    #double ul li:last-child p {
      background: rgba(255, 255, 255,0.8);
      color:rgba(255, 139, 55,0.9);
      left: auto;
      top: 5vh;
      right:0vw;
      width: 100%;
    }
}
@media (max-width:45em) {
  #double ul li p {
      font-size: 1em;
    }
    #double h3 {
      font-size:2.8em;
      line-height: 1.2;
  
    }
    #double h4 {
      font-size: 1.25em;
      padding-bottom: 2vh;
    }
}
#double-leam {
  text-align: center;
  position: relative;
  padding-top: 5vh;
  height:auto;
}
#double-leam h3 {
  font-weight:800;
  font-size:2.2em;
  line-height: 1.2;
  margin-bottom: 2vh;
  text-shadow: -1px -1px 0px #fff, 1px -1px 0px #fff, -2px 0px 0px #fff, -1px 1px 0px #fff, 0px 3px 0px #fff, 0px -3px 0px #fff, 2px 2px 0px #fff, -2px -2px 0px #fff, 3px 0px 0px #fff, -3px 0px 0px #fff;
}
#double-leam h4 {
  background-color:#0b6b70;
  color: #fff;
  font-size: 1.35em;
  padding: 1vh 1vw;
  margin: 1vh 0;
  text-align: center;

}
#double-leam h5 {
  color: rgba(255, 139, 55,0.9);
  font-size: 1.25em;
  font-family: "Outfit", "Noto Sans TC",sans-serif;
  line-height: 1;
  text-align: left;
  margin-top: -3vh;
  text-shadow: -1px -1px 0px #fff, 1px -1px 0px #fff, -2px 0px 0px #fff, -1px 1px 0px #fff, 0px 3px 0px #fff, 0px -3px 0px #fff, 2px 2px 0px #fff, -2px -2px 0px #fff, 3px 0px 0px #fff, -3px 0px 0px #fff;
}

#double-leam h5 span {
  font-size: 180%;
  font-style: italic;
}
#double-leam h6 {
  font-style: italic;
  font-size: 0.95em;
  font-weight: 600;
  text-align: center;
  color:#ffb784;
  position: relative;
  margin-top: 2vh;
}
  #double-leam h6 span::before {
  content: '/';
  color:#ffd9bd;
  font-weight:900;
  padding-right: 1vw;
}
#double-leam h6 span::after {
  content: '/';
  color:#ffd9bd;
  font-weight:900;
  padding-left: 1vw;
} 

#double-leam  p strong {
  color:#0b6b70;
  display: block;
  font-size: 1.12em;
  letter-spacing: 0;
}
#double-leam section {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
#double-leam section>div {
  width: 46%;
  background: #fff;
  border-radius: 1em;
  border: #ffeaea solid 3px;
  font-size: 1.1em;
  padding: 0vh 2vw 8vh; 
  margin: 2vh 1vw;
  text-align: left;
}
@media (max-width:55em) {
  #double-leam {
      background: #fff url('img/bg.png');
      background-size: 8%;
      padding: 3vh 2vw;
      font-size: 1em;
    }
    #double-leam h3 {
      font-size:2.8em;
      line-height: 1.3;
    }
    #double-leam h4 {
      font-size: 1.15em;
    }
    #double-leam h6 {
      font-size: 1.1em;
      line-height: 1.5;
      margin-top: 2vh;
      color: rgb(250, 128, 41);
    }
    #double-leam h6 span {
      font-size: 0.8em;
    }
    #double-leam h6 span::before {
      content: '‘‘';
      padding-right: -5vw;
      font-size:180%;
      line-height: 1;
    }
    #double-leam h6 span::after {
      content: '';
      padding-left: 0vw;
    } 
    #double-leam  p strong {
      font-size: 1.12em;
    }

    #double-leam section>div {
      width: 100%;
      background: #fff;
      border-radius: 1em;
      border: #ffeaea solid 2px;
      font-size: 1em;
      padding: 0vh 5vw 8vh; 
      margin: 2vh 1vw;
      text-align: left;
      font-weight: 400;
    }
}
.carousel {
  margin: 0 auto;
  padding: 30px 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;

}
article .card strong {
  display: block;
  font-size: 92%;
  font-style: italic;
  color: #8c79d5;
  font-weight: 300;
  padding-top: 2vh;
}
article .card {
  width: 100%;
  color: #494a4f;
  border-radius: 25px;
  padding:3vh 0.5vw;
  /* font-size: xx-large; */
  justify-content: center;
  align-items: center;
  font-style: italic;
  
  & span {
      color: #6136b2;
      display: block;
      font-size: 1em;
      font-weight: 300;
      border-left:solid 8px #6136b2;
      padding-left: 1vw;
      
    }

}  

.carousel {
  /* ... */
  > * {
    flex: 0 0 100%;
  }
}

/* 更好地組織卡片。 */
.group {
  display: flex;
  gap: 12px;
  /* 向右添加填充以在最後一張卡片和第一張卡片之間創建間隙。 */
  padding-right:12px;
}

.group {
  will-change: transform; /* 我們應該對瀏覽器友好——讓它知道我們將要動畫化。 */
  animation: scrolling 50s 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;
    }

  
    article .card {
      padding:3vh 1.3vw;
      font-size: 0.9em;
      
      & span {
          font-size:1em;
      }

      &:nth-child(3) {
        display: none;
      }
  
      &:nth-child(4) {
          display: none;
      }
  
    .carousel {
      /* ... */
      > * {
        flex: 0 0 100%;
      }
    }
  }}
  .opsp-main div.adtext .card h4 strong {
    display: block;
    font-size: 92%;
    font-style: italic;
    color: #fff;
    font-weight: 300;
    padding-top: 2vh;
  }