/* 容器定位 */
.dropdown {
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
  /*margin-left: 200px;*/ /* 調整下拉選單的位置 */
  /* left: 380px; 調整下拉選單的位置 */
  border: 0px solid #ccc; /* 邊框 */
  border-radius: 4px; /* 圓角 */
}

/* 按鈕樣式 */
.dropdown-btn {
  background-color: white;
  border: 0px solid #ccc;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

/* 下拉選單基礎樣式（預設隱藏） */
.dropdown-menu {
  display: none; 
  position: absolute;
  top: 100%; /* 剛好在按鈕下方 */
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 150px;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
  z-index: 1000;
}

/* 選項樣式 */
.dropdown-menu li a {
  color: #333;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
}

/* 懸停與選中狀態 */
.dropdown-menu li a:hover {
  background-color: #f1f1f1;
}
.dropdown-menu li a.active {
  color: #00aeef; /* 圖片中的藍色字體 */
}

/* 當選單被加上 .show 類別時顯示 */
.dropdown-menu.show {
  display: block;
}







@media (min-width: 4000px) {}

@media (min-width: 3001px) and (max-width: 3999px) {}

@media (min-width: 3000px) {}

@media (min-width: 1801px) and (max-width: 2999px) {
  /*.dropdown-btn{
    margin-left: 100%;
  }*/
}

@media (min-width: 1800px) {}

@media (min-width: 1501px) and (max-width: 1799px) {}

@media (min-width: 1500px) {}

@media (min-width: 1401px) and (max-width: 1499px) {
  .dropdown-btn{
    width: 150px;
    /*margin-left: 10%;*/
    font-size: 16px;
  }
}

@media (min-width: 1400px) {
  .dropdown-btn{
    width: 150px;
    /*margin-left: 20%;*/
    font-size: 16px;
  }
}

@media (min-width: 1201px) and (max-width: 1399px) {
  .dropdown-btn{
    width: 150px;
  }
}

@media (min-width: 1200px) {
  .dropdown-btn{
    width: 150px;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .dropdown-btn{
    width: 150px;
  }
}


@media (min-width: 1024px) {
  .dropdown-btn{
    width: 150px;
  }
}

@media (min-width: 981px) and (max-width: 1023px) {
  .dropdown-btn{
    width: 120px;
  }
}

@media (max-width: 980px) {
  .dropdown-btn{
    width: 120px;
  }
}

@media (min-width: 881px) and (max-width: 979px) {
  .dropdown-btn{
    width: 120px;
  }
}

@media (max-width: 880px) {
  .dropdown-btn{
    width: 120px;
  }
}

@media (min-width: 781px) and (max-width: 879px) {
  .dropdown-btn{
    width: 120px;
  }
}

@media (max-width: 780px) {
  .dropdown-btn{
    width: 120px;
  }
}

@media (min-width: 681px) and (max-width: 779px) {
  .dropdown-btn{
    width: 120px;
  }
}

@media (max-width: 680px) {
  .dropdown-btn{
    width: 120px;
  }
}

@media (min-width: 603px) and (max-width: 679px) {
  /*.dropdown{
    margin-left: 20%;
  }*/
  .dropdown-btn{
    width: 120px;
  }
}

@media (max-width: 602px) {
  .dropdown-btn{
    width: 120px;
  }
}

@media (min-width: 551px) and (max-width: 601px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (max-width: 550px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (min-width: 531px) and (max-width: 549px){
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (max-width: 530px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (min-width: 482px) and (max-width: 529px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (max-width: 481px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (min-width: 451px) and (max-width: 480px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (max-width: 450px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (min-width: 401px) and (max-width: 449px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}


@media (min-width: 401px) and (max-width: 449px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (max-width: 400px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (min-width: 371px) and (max-width: 399px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (max-width: 370px) {
  .dropdown-btn{
    margin-left: 5%;
    width: 120px;
  }
}

@media (min-width: 321px) and (max-width: 369px) {
  .dropdown-btn{
    margin-left: 15%;
    width: 120px;
    font-size: 13px;
  }
}
@media (max-width: 320px) {
  .dropdown-btn{
    margin-left: 15%;
    width: 120px;
    font-size: 13px;
  }
}

@media (min-width: 301px) and (max-width: 319px) {
  .dropdown-btn{
    margin-left: 50px;
    width: 90px;
    font-size: 11px;
  }
}

@media (max-width: 300px) {
  .dropdown-btn{
    margin-left: 50px;
    width: 90px;
    font-size: 11px;
  }
}