@media (min-width:768px){
    .special{
      padding-top: 1.5rem !important;
      padding-bottom: 2.5rem !important;
    }
  }

  @media (max-width: 768px) {
      .video-container-wrapper {
          padding: 0 15px; 
      }


      .video-container {
          position: relative;
          width: 100%;   
          padding-bottom: 56.25%; 
          height: 0;
          overflow: hidden;
      }


      .video-container iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; 
      }
    }

    
    h3[id],
    h2[id] {
      scroll-margin-top: 95px;
    }

#mobile-menu{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:#fff;z-index:2000;overflow-y:auto;
  display:none; 
}
#mobile-menu ul li{
  padding:.25rem 0;
 
}

#menu-button{display:none}
html.overflow-hidden,body.overflow-hidden{overflow:hidden;}

.menu-button.act{
  margin-top: 30px;
  position:relative;
  width:28px;    
  height:22px;
  cursor:pointer;
  color:#333;      
}

/* 兩條斜線 */
.menu-button.act::before,
.menu-button.act::after{
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  background:currentColor;      
}

/* 右斜／左斜 */
.menu-button.act::before{transform:rotate(45deg);}
.menu-button.act::after{transform:rotate(-45deg);}


@media (max-width: 768px){
    .logo-desktop{
      display:none
    }
}


#mobile-menu{
  position:fixed;
  inset:0;
  overflow-y:auto;
  background:#fff;
  padding-bottom:20px;
  height:-webkit-fill-available;      /* iOS */
  box-sizing:border-box;
  z-index:1021;                       /* 高於 menu-button */
}

.mobile-menu-list-area{
  padding:1rem;
  background:#FFF8E4;
}
.mobile-menu-list-area .main-color{color:#666ba9;} 
.mobile-menu-list li{
  position:relative;
  padding-left:1.5rem;
}

@media (max-width:1260px){
  .under-menu{display:none!important;}
   #menu-button{display:block}
}