#adContainer {
    position: fixed;
    top: 60%; /* 起初在頁面頂部之外 */
    right: 0;
    width: 30%;
    height: 22%;
    /* background-color: #ccc; */
    padding: 10px;
    transition: top 0.5s; /* 加上過渡效果，使滑動看起來更順暢 */
}
#adContainer22222 {
    position: fixed;
    top: 26%; /* 起初在頁面頂部之外 */
    left: 0;
    width: 16%;
    height: 30%;
    /* background-color: #ccc; */
    padding: 10px;
    transition: top 0.5s; /* 加上過渡效果，使滑動看起來更順暢 */
    
}
/* 在螢幕寬度小於 768px 時，調整廣告容器的樣式 */
/* @media screen and (max-width: 768px) {
    #adContainer {
        width: 70%; 
        top: 400px; 
    }
} */

@media screen and (max-width: 768px) {
    #adContainer {
        display: block;
        width: 90%;
        height: 60%;
        position: relative;
    }
    .container23{
        display: none;

    }
    .small-image7 {
        width: 100%; /* 變寬一點 */
        height: 156%; /* 變短一點 */
        border-radius: 20px;
    }

    #adContainer22222 {
        display: block;
        width: 90%;
        height: 60%;
        position: relative;
    }
}




.small-image6 {
    width: 100%; /* 變寬一點 */
    height: 156%; /* 變短一點 */
    border-radius: 20px;

    /* max-width: 100%; */
    /* height: auto; */
}



#myBtn ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#myBtn li {
    display: inline-block; /* 将列表项显示为行内块元素，以便它们水平排列 */
    margin-right: 10px; /* 可选：添加一些右边距隔开列表项 */
}

.small-image7 {
    width: 100%; /* 變寬一點 */
    height: 156%; /* 變短一點 */
    border-radius: 20px;
}


.small-image8{
    border-radius: 20px
}


#adContainer {
    opacity: 0;
    transform: translateY(20%);
    transition: opacity 2s, transform 2s;
}

#adContainer.reveal {
    opacity: 1;
    transform: translateY(0);
}

#adContainer22222 {
    opacity: 0;
    transform: translateY(20%);
    transition: opacity 2s, transform 2s;
}

#adContainer22222.reveal {
    opacity: 1;
    transform: translateY(0);
}


.nav-bar22 {
    background-color: rgba(227, 218, 218, 0.5); /* 50% opacity */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    height: auto;
    /* width: 40%; Adjust width as needed */
}

.nav-bar22 a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #000;
}

.nav-bar22.collapsed a:not(:first-child) {
    display: none;
}

.nav-bar22 a:first-child {
    cursor: pointer;
}
.nav-bar22 a:hover {
    background-color: #ddd;
    color: black;
}
.share-icons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .share-icons a, .native-share {
    font-size: 24px;
    text-decoration: none;
    color: #444;
    transition: transform 0.2s ease, color 0.3s;
  }

  .share-icons a:hover, .native-share:hover {
    transform: scale(1.1);
    color: #000;
  }

  .native-share {
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .share-label {
    font-weight: bold;
    font-size: 16px;
  }

  .title-share-wrapper {
    display: flex;
    align-items: center; /* 垂直置中 */
    justify-content: space-between; /* 左右兩邊對齊 */
    flex-wrap: wrap; /* 若螢幕太小可換行 */
    gap: 10px; /* 元素之間的距離 */
  }
  
  .share-icons {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .share-label {
    margin-right: -5px;
  }