/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 18 2025 | 05:13:41 */
:root {
    --title-color: var(--pearson-primary-purple-dark);
    --context-color: ##333333ff;
    --light-grey-bg: #F5F5F5;
    --pearson-blue:#512eabff;
    --pearson-blue-hover:#0D004D;
    --pearson-primary-purple-dark:#0d004dff;
    --pearson-primary-purple-light:#c1bfffff;
    --fuchsia: #DF41CF;
    --amber: #FFCE00;
    --turquoise: #56E2E1;
    --green: #9fce62;

    
    --orange: var(--amber) /* #F8AC13*/;
    --black: #000;
    --white:#FFF;
}
body{
    margin:0;
    font-family: "Plus Jakarta Sans", Helvetica, Verdana, sans-serif;
    font-variant-ligatures: none;
}
.promosite.wrapper{
  font-size:18px;
}

  .full-grey-bg{
    background-color: var(--light-grey-bg);
    /*padding: 40px 0;*/
  }
  .last-item{
    padding-bottom: 250px
  }
  .container-bg{
    background-color: #FFF;
    padding: 16px;
  }
  .bg-light-purple{
    background-color: var(--pearson-primary-purple-light);
  }
  .bg-amber{
    background-color: var(--amber);
  }
  .bg-none{
    background: none;
  }
  .promosite .p-container, .promosite .p-container-large{
    max-width:1180px;
    width:96%;
    margin:auto;
    padding: 0 0px;
  }
  .promosite .white-bg{
    background-color: #FFF;;

  }
  .promosite .p-container-large{
    width:100%;
    padding:0px;
    max-width: 1280px;
  }
  .promosite .banner{
    width:100%;
    margin-bottom:16px;
  }
  .promosite .promote-text, .promosite .faq{
    margin:16px 1%;
    color: var(--context-color);
    padding-bottom: 32px;
  }
  .text-center{
    text-align: center;
  }
  .promosite .promote-text h1, .promosite .faq h1{
    color: var(--pearson-primary-purple-dark);
    font-size: 1.5em;
  }
  .promosite .faq h1{
    padding-top: 32px;
  }
 
  .promosite .col-4, .promosite .col-3{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 32px 1%;
  }
  .promosite .col-4, .promosite .col-3{
    grid-template-columns: repeat(3, 1fr);
  }
  
  .promosite .col-4 a, .promosite .col-3 a{
    width: auto;
    display: block;
    text-align: center;
    padding: 12px 16px;
    font-size: 1em;
    margin-bottom: 4px;
  }
  
  .promosite .col-pic-img{
    display: grid;
    grid-template-columns: 200px auto;
    gap: 24px;
    margin: 32px 1%;
  }
  .promosite .col-pic-img.single-column{
    grid-template-columns: auto;
  }
  .promosite .col-pic-img .promote-text{
    margin: 0;
  }
  .promosite .col-pic-img .promote-text h1{
    margin-top: 0;
  }
  .promosite .col-pic-img .book-cover{
    width: 100%;
  }
  .promosite .col-pic-img .book-cover-mobile{
    display: none;
  }
  .fit-width{
    width: 100%;
  }
  .promote-section-title{
    margin:32px 1%;
    font-size: 2em;
    color: var(--title-color);
  }
  .promote-section-title.title-orange, .promote-section-title.title-simple, .promote-section-title.title-amber{
    background-color: var(--pearson-primary-purple-light);
    font-size: 1.2em;
    color: var(--pearson-primary-purple-dark);
    text-align: center;
    padding: 16px 8px;
    margin: 16px 0;
  }
  .promote-section-title.title-simple{
    background: none;
  }
  .promote-section-title.title-amber{
    background-color: var(--amber);
  }
  .video-box-col-2{
    margin:16px 1%;
    grid-template-columns: repeat(2, 1fr);
    display: flex;
    flex-direction: row-reverse;
    gap: 40px;
  }
  .promosite .promote-grey-box{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    flex-grow:1;
    justify-content:space-between;
    margin:16px 1%;
  }
  
  .promosite .promote-grey-box .promote-section-title{
    width: 100%;
  }
  .promosite .promote-grey-box .box{
    background-color: var(--light-grey-bg);
    padding: 24px 40px;
    box-sizing: border-box;
    width:49.5%;
    margin: 8px 0;
    color: var(--context-color);
    font-size: 1em;
  }
  .full-grey-bg .promote-grey-box .box{
    background-color: var(--white);
  }
  .full-grey-bg .promote-grey-box.v2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin:0;
    gap: 16px;
  }
  .full-grey-bg .promote-grey-box.v2 .box{
    background-color: transparent;
    border-bottom: 1px solid var(--pearson-blue);
    padding: 24px 0px;
    margin: 0;
    width: auto;
  }
  .full-grey-bg .promote-grey-box.v2 .box.double-white{
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: var(--white);
    padding: 24px;
    border-bottom: none;
  }
  .promosite .promote-grey-box .box.col-3{
    grid-template-columns: repeat(1, 1fr);
    width: 32.66%;
    padding: 24px 25px;
  }
  .promosite .promote-grey-box .box.full{
    width: 100%;
  }
  .promosite .promote-grey-box .box .box-number{
    font-size: 0.9em;
    margin-bottom: 0.2em;
  }
  .promosite .promote-grey-box .box .box-title{
    color: var(--title-color);
    font-size: 1.3em;
    margin-bottom: 0.8em;
  }
  .promosite .promote-grey-box .box .box-p{
    line-height: 1.5em;
  }
  .promosite .promote-grey-box .box-img-container{
    width:100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    max-width: 350px;
    margin: auto;
  }
  .promosite .promote-grey-box .box .box-img{
    width: 100%;
    margin: 16px auto;
    max-width: 350px;
    display: block;
  }
  .promosite .promote-grey-box.v2 .box .box-title, .video-group .video-item .v-title{
    color: var(--pearson-blue);
    font-size: 1.1em;
  }
  .video-group{
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    background-color: var(--white);
    flex: 0;
  }
  .video-group .video-item{
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .video-group .video-youtube{
    width:330px;
    height:186px;
    margin-top: 8px;
  }


  .cta-button{
    display: inline-block;
    background-color: var(--pearson-blue);
    color: var(--white);
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 40px;
    transition: 0.2s background-color;
    margin-bottom: 16px;
  }
  .cta-button-inline{
    margin-left: 8px;
  }
  .promosite .promote-text h1 .cta-button, .promosite .faq h1 .cta-button{
    font-size: 16px;
    margin: 4px;
    vertical-align: middle;
  }
  .cta-button:hover{
    background-color: var(--pearson-blue-hover);
    color: var(--white);
    text-decoration: none;
  }
  .cta-button:active, .cta-button:focus{
    color: var(--white);
    text-decoration: none;
  }
  .link-list{
    list-style: none;
    padding: 0px;
    margin: 16px 0px;
  }
  .link-list-tick{
    margin-left: 35px;
    position: relative;
    
  }
  .link-list-tick li{
    margin-bottom: 8px;
  }
  .link-list-tick li::before{
    content: "✔️";
    position: absolute;
    left: -30px;
  }
  .link-list .empty{
    padding: 12px;
  }
  .link-list a{
    color: var(--pearson-blue);
    padding: 6px 0px;
    display: inline-block;
    text-decoration: none;
  }
  .link-list a:hover{
    color: var(--pearson-blue-hover);
    text-decoration: underline;
  }
  .link-list span{
    padding: 6px 0;
    display: inline-block;
  }
  .link-list span.remark{
    font-size: 0.8em;
    padding: 0px 0px 0px 8px;
    display: block;
    font-style: italic;
  }
  .link-list span.remark-full{
    font-size: 0.8em;
    font-style: italic;
  }
  .page-end{
    margin-bottom: 300px;
  }
  .promosite .promote-video-area{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    flex-grow:1;
    justify-content:space-between;
    margin:16px 1%;
  }
  .promosite .promote-video-area.v2{
    background-color: var(--light-grey-bg);
    padding: 16px;;
  }
  .promosite .promote-video-area.reverse{
    flex-direction:row-reverse;
  }
  .promosite .promote-video-area .photo{
    box-sizing: border-box;
    width:49.5%;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    justify-content:center;
    flex-grow: 0;
  }
  .promosite .promote-video-area .photo img{
    width: 100%;
    display: block;
  }
  .promosite .promote-video-area .context{
    box-sizing: border-box;
    width:49.5%;
    margin: 16px 0;
    padding: 24px 40px;
    box-sizing: border-box;
  }

  .info-2col{
    display: flex;
    flex-direction: row;
    margin: 16px 1%;
    color: var(--context-color);
    justify-content:space-around;
  }
  .info-2col .info-box{
    display: flex;
    flex-direction: column;
    width: 44%;
    margin: 16px 0;
  }
  .info-2col .info-box .photo img{
    width: 100%;
  }
  .info-2col .info-box .video-thumb{
    width: 100%;
  }
  .info-2col .info-box .video-thumb .thumb-image, .info-2col .info-box .video-thumb .video-youtube{
    height: 225px;
    display: block;
  }
  .info-2col .info-box .video-thumb .video-youtube{
    width: 400px;
  }


  .info-2col .info-box .text .promote-section-title{
    font-size: 1.3em;
    margin: 16px 0;
  }
  .info-2col .info-box .text .cta-group{
    display: inline-block;
  }
  .info-2col .info-box .text .cta-button{
    margin-bottom: 4px;
    padding: 8px 16px;
  }
  
  .promosite .promote-video{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    flex-grow:1;
    justify-content:space-between;
    margin:16px 1%;
  }
  .promosite .promote-video.video-col-1 .p-video-item{
    width:100%;
  }
  .promosite .promote-video.video-col-2 .p-video-item{
    width:49.5%
  }
  .promosite .promote-video .p-video-item iframe{
    margin:auto;
    display:block;
    width:100%;
    height:320px;
  }
  .promosite .promote-video.video-col-1 .p-video-item iframe{
    height:500px;
  }
  .promosite .promote-video.video-col-2 .p-video-item iframe{
    height:320px;
  }
  .promosite .promote-video .p-video-title{
    margin:4px 0px;
    font-size:0.9em;
    color:#666;
  }
  .download-column{
    display:flex;
    width:100%;
  }
  .download-column .d-col{
    width:32.33%;
    margin:16px 0.5%;
  }
  .download-column .d-col .d-thumbnail{
    width:100%;
    margin:4px 0px;
  }
  .download-column .d-col .d-title{
    background-color:#0085B3;
    color:#FFF;
    padding:0px 8px;
    height:38px;
    line-height:38px;
    border-radius:8px;
    font-size:1.1em;
  }
  .download-column .d-col ul{
    padding:0px 4px;
    margin:0px;
  }
  .download-column .d-col ul li{
    list-style:none;
  }
  .download-column .d-col ul li a{
    display:block;
    padding:4px;
    color:#0085B3;
  }
  .faq-group{
    margin-top: 32px;
  }
  .faq-group .faq-item{
    background-color: var(--white);
    padding: 24px;
    border-radius: 24px;
    margin-left: 60px;
    position: relative;
    margin-bottom: 16px;
  }
  .faq-group .faq-item.top::before{
    content: "";
    width: 60px;
    height: 60px;
    background-image: url(https://elect2e-promo.pearson.com.hk/wp-content/uploads/2023/02/202301012_TOP-FAQ3-resized.png);
    left: -60px;
    top: 0px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    
  }
  .faq-group .faq-item .question{
    color: var(--pearson-blue);
  }
  .faq-group .faq-item .question .black{
    color: var(--black);
  }

  .solid-background{
    padding: 60px 16px;
    background-color: var(--pearson-primary-purple-dark);
  }
  .solid-background h2{
    color: var(--pearson-primary-purple-light);
    text-align: center;
    margin: 0;
    margin-bottom: 0.5em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
  }
  .solid-background .check-list-item{
    flex-direction: row;
    display: flex;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    justify-content: space-around;
    color: #FFF;
    margin-top: 2em;
  }
  .solid-background .check-list-item div{
    display: flex;
    flex-direction: column;
    background-image: url(https://express3e-promo.pearson.com.hk/wp-content/uploads/2025/10/tick-icon.png);
    background-position: top center;
    background-size: 60px 60px;
    background-repeat: no-repeat;
    padding-top: 80px;
    max-width: 300px;
    line-height: 1.5em;
  }
  .solid-background .check-list-item div span.small-text{
    font-size: 0.7em;
    margin-top: 4px;
    display: block;

  }
  .full-width-image{
    width: 100%;
    margin: auto;
    display: block;
    max-width: 1080px;
  }
  .tag{
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
    padding: 4px 8px;
    margin: 2px;
    font-weight: bold;
    border-radius: 24px;
    vertical-align: top;
    color: var(--pearson-primary-purple-dark);
    cursor: default;
  }
  .tag-green{
    background-color: var(--green);
  }
  .tag-turquoise{
    background-color: var(--turquoise);
  }
  .tag-amber{
    background-color: var(--amber);
  }
  
  @media only screen and (max-width: 980px) {
    /*
    .promosite .promote-video.video-col-1 .p-video-item{
    }
    .promosite .promote-video.video-col-2 .p-video-item{
    }
    .promosite .promote-video.video-col-1 .p-video-item iframe{
      height:380px;
    }
    .promosite .promote-video.video-col-2 .p-video-item iframe{
      height:240px;
    }
    */
    .info-2col .info-box{
      width:47.5%;
    }
    .promosite .col-4{
      grid-template-columns: repeat(2, 1fr);
    }
    .video-box-col-2{
      flex-direction: column;
    }
    .video-group{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
    .video-group .video-item{
      display: flex;
      flex-direction: column; 
    }
    .video-group .video-item .v-title{
      flex: 1;
    }
    .video-group .video-youtube{
      width:100%;
      height:160px;
      margin-left: auto;
      margin-right: auto;
      justify-self: end;
    }
    .promote-section-title.title-orange, .promote-section-title.title-simple{
      font-size: 1.2em;
    }
    .info-2col .info-box .video-thumb .thumb-image, .info-2col .info-box .video-thumb .video-youtube{
      height: 160px;
    }
    .info-2col .info-box .video-thumb .video-youtube{
      width: 320px;
    }

    .promosite .promote-grey-box .box.col-3{
      padding: 16px;
    }
    
  }
  @media only screen and (max-width: 700px) {
    .promote-section-title{
      font-size: 1.7em;
      margin-bottom: 20px;
    }
    .promosite .promote-grey-box{
      flex-direction:column;
      flex-wrap:nowrap;
      
    }
    .promosite .promote-grey-box .box-img-container{
      aspect-ratio: auto;
      display: flex;
      align-items: center;
    }
    .promosite .promote-grey-box .box, .promosite .promote-grey-box .box.col-3{
      width:100%;
      padding: 24px 16px;
    }
    .promosite .promote-grey-box .box.placeholder{
      display: none;
    }
    .full-grey-bg{
      /*padding: 8px 0;*/
    }
    .full-grey-bg.last-item{
      padding-bottom:250px;
    }
    .promosite .promote-video-area{
      flex-direction:column;
      flex-wrap:nowrap;
      margin: 0 1%;
    }
    .promosite .promote-video-area.reverse{
      flex-direction:column;
    }
    .promosite .promote-video-area.v2{
      margin-top: 16px;
    }
    .promosite .col-pic-img{
      grid-template-columns: auto;
    }
    .promosite .col-pic-img .pic-image{
      display: none;
    }
    .promosite .promote-video-area .photo{
      width:100%;
      margin: 0;
    }
    .promosite .promote-video-area .context{
      box-sizing: border-box;
      width:100%;
      padding: 0px 0;
      margin: 0;
      box-sizing: border-box;
    }
    .promosite .col-pic-img .book-cover-mobile{
      display: block;
      width: 40%;
      margin: auto;
    }
    .promosite .col-4,  .promosite .col-3{
      grid-template-columns: repeat(1, 1fr);
    }
    .promosite .col-4 a, .promosite .col-3 a{
      font-size: 0.9em;
    }
    .info-2col{
      flex-wrap: wrap;
      justify-content: center;
    }
    .info-2col .info-box{
      width:85%;
    }
    
    .info-2col .info-box .video-thumb .thumb-image{
      margin: auto;
      height: auto;
      width: 100%;
    }
    .info-2col .info-box .video-thumb .video-youtube{
      width: 100%;
      height: 230px;
    }

    .video-group{
      grid-template-columns: repeat(1, 1fr);
    }
    .video-group .video-youtube{
      height:200px;
    }
    .faq-group .faq-item{
      margin-left: 30px;
      padding: 16px;
    }
    .faq-group .faq-item.top::before{
      width: 45px;
      height: 45px;
      left: -40px;      
    }
  }
    /*
    .promosite .promote-video.video-col-2 .p-video-item{
      width:100%
    }
  .promosite .promote-video.video-col-1 .p-video-item iframe, .promosite .promote-video.video-col-2 .p-video-item iframe{
      height:350px;
    }
  }
  @media only screen and (max-width: 400px) {
  .promosite .promote-video.video-col-1 .p-video-item iframe, .promosite .promote-video.video-col-2 .p-video-item iframe{
      height:230px;
    }
  }*/