@media screen and (min-width: 2000px) {

    .header nav a {
        font-size: 18x;
        padding: 0 5px;
    }

    .wrap {
        width: 75%;
    }

    .about .wrap .item {
        width: auto;
    }

    .about>h2 {
        width: 100%;
    }

    .about>p {
        width: auto;
    }

    .pro2>h2 {
        width: auto;
    }

    .pro2>p {
        width: auto;
    }

}


@media only screen and (max-width: 1280px) {
    .header nav a {
        font-size: 14px;
        padding: 0 5px;
    }

    .wrap {
        width: auto;
    }

    .about .wrap .item {
        width: auto;
    }

    .about>h2 {
        width: 100%;
    }

    .about>p {
        width: auto;
    }

    .pro2>h2 {
        width: auto;
    }

    .pro2>p {
        width: auto;
    }

}


@media screen and (min-width: 950px) {
    .menu-btn {
        display: none;
        /* 隱藏漢堡菜單 */

    }

    .sidenav {
        display: none;
        /* 隱藏側邊導航 */
    }

    .pro2 .wrap .item h3 {
        margin-top: -26px;
    }

}


@media screen and (max-width: 950px) {
    .header nav {
        display: none;
    }

    .menu-btn {
        display: flex;
        /* 顯示漢堡菜單 */
    }

    .sidenav {
        display: block;
        /* 顯示側邊導航 */

    }
}

@media only screen and (min-width: 716px) and (max-width: 980px) {
    .pro2 .wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .pro2 .wrap .item {
        width: calc(41% - 1px);
        /* 減去間隙的一半 */
        margin: 5px;
        /* 提供間隙 */
    }

    .pro2 .wrap .item img {
        max-width: 100%;
        /* 確保圖片不會超過項目寬度 */
        height: auto;
    }
}


@media only screen and (max-width: 715px) {
    .header nav {
        display: none;
    }

    .about .wrap {
        display: block;
    }

    .about .wrap .item {
        max-width: 100%;
        margin: 0 auto;
    }

    .about .wrap .item {
        margin-bottom: 30px;
    }

    .about>h2 {
        text-align: center;
        width: 95%;
        font-size: 20px;
        line-height: 1.5;
        margin: auto;
    }

    .about>p {
        padding: 0;
        margin-bottom: 40px;
        font-size: 15px;
    }

    .about {
        width: 95%;
        margin: auto;
        padding: 10px 0 60px;
    }

    .about .wrap .item h3 {
        font-size: 20px;
    }

    .about .wrap .item p {
        font-size: 15px;
    }

    .pro {
        background-color: rgb(150, 158, 190);
    }

    .pro .wrap {
        display: block;
    }

    .pro .wrap .item {
        width: 100%;
    }

    .pro .txt {
        display: flex;
        padding: 5px 20px 15px 20px;
        max-width: 85%;
        margin: auto;
    }

    .pro .wrap h3 {
        padding: 2px;
    }

    .pro .wrap h3 {
        font-size: 20px;
    }

    .pro .wrap p {
        font-size: 15px;
    }

    .pro2 .wrap {
        display: block;
    }

    .pro2 h2 {
        font-size: 20px;
        font-weight: bolder;
    }

    .pro2 p {
        font-size: 15px;
    }


    .pro2 .wrap .item {
        width: 85%;
        margin-left: auto;
    }

    .pro2 .wrap .item p {
        font-size: 14px;
    }

    .pro2 .wrap .item h3 {
        padding: 0;
    }

    .footer-info p {
        font-size: 11px;
    }

    .footer_logo {
        margin-right: 12px;
        margin-top: 5px;
    }

}

@media (max-width: 1175px) {
    .navigation ,
    div#theme-selector, div#theme-selector .theme-option {
      display: none;  /* 隱藏元素 */
    }
  }
  
  @media (max-width: 1600px) {

    .image-container {
      display: none;  /* 隱藏元素 */
    }
  }