body {
  background-image: url(Image/marblebg.jpg);
  background-blend-mode: multiply;
}

.banner {
  display: flex;
  width: 100%;
  height: 80vh;
  background-image: url(/Image/locationbanner.jpg);
  background-size: cover;
  object-fit: contain;
  background-position-x: right;
  background-position-y: bottom;
}

.locacontent {
  background-color: #f5f6f3;
  margin: 30px;

  box-shadow: 0 0 10px rgb(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  height: fit-content;
}

.top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.top h2 {
  font-size: clamp(40px, 3.5vw, 50px);
  font-weight: normal;
}

.top h1 {
  font-size: clamp(20px, 1.5vw, 25px);
  font-weight: bold;
}

/*mid*/
.mid {
  display: flex;
  /*height: clamp(500px, 45vw, 1050px);*/
  margin-left: 30px;
  flex-direction: column;
}

.midtop {
  flex-basis: 70%;
  display: flex;
}

.midbottom {
  flex-basis: 30%;
  display: flex;
  align-items: center;
}

.midleft {
  flex-basis: 70%;
  display: flex;
  margin-top: 30px;
}

.midright {
  flex-basis: 30%;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-right: 30px;
}

.map {
  width: 100%;
  height: auto;
  overflow: hidden;

}

.map img {
  width: 100%;
  height: auto;
  object-fit: contain;
}


.address {
  display: flex;
  align-items: center;
}

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

.googlemap>* {
  margin: 0;
  /* 清除元素的預設邊距 */
  padding: 0;
  /* 清除元素的預設填充 */
}

.dropdown-wrapper {
  background-color: antiquewhite;
  /*width: clamp(100px,8vw,130px);*/
  width: 100%;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dropdown-title {
  font-size: clamp(15px, 1.25vw, 25px);
}

/* 隱藏下拉選單的內容 */
.dropdown-content {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  width: 100%;
  transition: max-height 0.3s ease-in-out;
}

/* 開啟下拉選單時顯示內容 */
.show {
  display: block;
  max-height: 500px;
  /* 設定合適的最大高度，這裡使用 500px 當做範例 */
  opacity: 1;
}

/* 箭頭的樣式 */
.arr {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0;
  border-color: #000 transparent transparent;
  font-size: clamp(15px, 2.5vw, 30px);
  margin-left: 5px;
  transition: transform 0.3s ease-out;
}

/* 展開時箭頭向上 */
.up {
  transform: rotate(180deg);
}

.lis {
  display: flex;
  align-items: center;
  padding: 10px;
  border: #000;
  font-size: clamp(15px, 2.5vw, 20px);
  font-weight: bold;
  background-color: #ffffff;
  cursor: pointer;

}


.hover {
  display: flex;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 25px;
  font-weight: bold;
  background-color: rgb(204, 204, 204);
}

.selfcar {
  display: flex;
  margin-left: 30px;
  margin-right: 30px;
  flex-direction: column;
}




.carlist {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.detail span:not(:first-child) {
  padding-left: 25px;
}

.detail span {
  position: relative;
  font-size: clamp(20px, 1.2vw, 25px);
  display: flex;

}

.detail span:not(:first-child):before {
  content: "➔";
  position: absolute;
  left: 0;

}

.list {
  align-items: center;
  display: flex;
}

.list span {
  position: relative;
  font-size: clamp(15px, 1.5vw, 25px);
  display: flex;
  font-weight: bold;
}

.icon {
  width: 30px;
  height: 30px;
  background-size: cover;
}

.i1 {
  background-image: url(Image/boiler.png);
}

.arrow {
  background-image: url(Image/arrow.png);
}

.department {
  background-image: url(Image/department.png);
}

.cinema {
  background-image: url(Image/cinema.png);
}

.book {
  background-image: url(Image/book.png);
}

.phone {
  background-image: url(Image/phone.png);
}

.park {
  background-image: url(Image/park.png);
}

.gmap {
  background-image: url(Image/gmap.png);
  margin-left: 20px;
}

.adrs {
  background-image: url(Image/address.png);
}

.airplane {
  background-image: url(Image/airplane.png);
}
.bus{
  background-image: url(Image/bus.png);
}
.metro{
  background-image: url(Image/metro.png);
}
.train{
  background-image: url(Image/train.png);
}
.fast{
  background-image: url(Image/fast.png);
}


.detail {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: centers;
}

.back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 40px;
  background-color: rgb(70, 57, 40);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 9999;
}

.back-to-top-btn span {
  /* 調整按鈕內文字與圖示的間距 */
  margin-right: 5px;
}

.back-to-top-btn:hover {
  background-color: antiquewhite;
  color: #000;
}


.sideloc{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*six box*/
.sixbox{
  display: flex;
  height: clamp(417px,33.3vw,500px);
  width: clamp(1000px,80vw,1200px);
  flex-direction: column;
  margin-bottom: 30px;
}
.sixtop{
  flex-basis: 50%;
  display: flex;
}
.sixbottom{
  flex-basis: 50%;
  display: flex;
}

.one {
  flex-basis: 33.33%;
  background-color: #000  ;
  background-image: url(Image/ckdps.jpg);
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.one h1 {
  color: transparent;
  position: absolute;
  z-index: 1;
  transition: color 0.3s;
}
.one:hover h1 {
  color: white;
}
.one::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.one:hover::before {
  opacity: 1;
}

/*two*/
.two {
  flex-basis: 33.33%;
  background-color: #000  ;
  background-image: url(Image/bcdps.jpg);
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.two h1 {
  color: transparent;
  position: absolute;
  z-index: 1;
  transition: color 0.3s;
}
.two:hover h1 {
  color: white;
}
.two::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.two:hover::before {
  opacity: 1;
}

/*three*/
.three {
  flex-basis: 33.33%;
  background-color: #000  ;
  background-image: url(https://travel.tycg.gov.tw/content/images/shops/62935/1024x768_shops-image-ru0un4ohq0uiuj9tzxpmiw.jpg);
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.three h1 {
  color: transparent;
  position: absolute;
  z-index: 1;
  transition: color 0.3s;
}
.three:hover h1 {
  color: white;
}
.three::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.three:hover::before {
  opacity: 1;
}

/*four*/
.four {
  flex-basis: 33.33%;
  background-color: #000  ;
  background-image: url(https://travel.tycg.gov.tw/content/images/attractions/72223/1024x768_attractions-image-nzdlmwrypucpjta2raabya.jpg);
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.four h1 {
  color: transparent;
  position: absolute;
  z-index: 1;
  transition: color 0.3s;
}
.four:hover h1 {
  color: white;
}
.four::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.four:hover::before {
  opacity: 1;
}

/*five*/
.five {
  flex-basis: 33.33%;
  background-color: #000  ;
  background-image: url(Image/nmpark.jpg);
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.five h1 {
  color: transparent;
  position: absolute;
  z-index: 1;
  transition: color 0.3s;
}
.five:hover h1 {
  color: white;
}
.five::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.five:hover::before {
  opacity: 1;
}


/*six*/
.six {
  flex-basis: 33.33%;
  background-color: #000  ;
  background-image: url(https://travel.tycg.gov.tw/content/images/attractions/60021/1024x768_attractions-image-b-v0vfxhzkg7tk7sf0iaeg.jpg);
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.six h1 {
  color: transparent;
  position: absolute;
  z-index: 1;
  transition: color 0.3s;
}
.six:hover h1 {
  color: white;
}
.six::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.six:hover::before {
  opacity: 1;
}

.one, .two, .three, .four, .five, .six {
  border: 3px solid antiquewhite;
  text-align: center;

}

.imgsource{
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
}


@media (max-width:1150px){
  .banner{
    height: 70vh;
  }
  .top h1{
    font-size: 26px;
  }
  .top h2{
    font-size: 45px;
  }
  .address h1{
    font-size: 28px;
  }
  .selfcar h1{
    font-size: 28px;
  }
  .selfcar h2{
    font-size: 20px;
  }
  .selfcar span{
    font-size: 18px;
  }
  .sideloc h1{
    font-size: 28px;
  }


  /**/
  .locacontent{
    padding: 20px;
  }
  .mid{
    flex-direction: column-reverse;
    margin-left: 0px;
  }
  .midright{
    margin-right: 0px;
    width: 80%;
  }
  .midleft{
    justify-content: center;
  }
  .midtop{
    flex-direction: column;
    align-items: center;
  }
  .midbottom{
    justify-content: center;
  }
  .map{
    width: 90%;
    display: flex;
    justify-content: center;
  }
  .one,.two,.three,.four,.five,.six{
    width: 500px;
    max-width: 500px;
  }
  .one::before,.two::before,.three::before
  ,.four::before,.five::before,.six::before{
    opacity: 1;
  }
  .one h1,.two h1,.three h1,.four h1,.five h1,.six h1{
    color: #f5f6f3;
  }
  .sixbox{
    width: auto;
    height: 2100px;
  }
  .sixtop{
    flex-direction: column;
    align-items: center;
  }
  .sixbottom{
    flex-direction: column;
    align-items: center;
    
  }
}


@media (max-width:900px){
  .banner{
    height: 65vh;
  }
  .top h1{
    font-size: 24px;
  }
  .top h2{
    font-size: 40px;
  }
  .address h1{
    font-size: 24px;
  }
  .selfcar h1{
    font-size: 24px;
  }
  .selfcar h2{
    font-size: 20px;
  }
  .selfcar span{
    font-size: 16px;
  }
  .sideloc h1{
    font-size: 24px;
  }
  .sixbox{
    height: 1600x;
  }
  .one,.two,.three,.four,.five,.six{
    width: 450px;
  }
}

@media (max-width:750px){
  .locacontent{
    padding: 0px;
  }
  .banner{
    height:55vh;
  }
  .top h1{
    font-size: 20px;
  }
  .top h2{
    font-size: 30px;
  }
  .address h1{
    font-size: 20px;
  }
  .midbottom h2{
    font-size: 20px;
  }
  .selfcar h1{
    font-size: 20px;
  }
  .selfcar h2{
    font-size: 20px;
  }
  .selfcar span{
    font-size: 16px;
  }
  .sideloc h1{
    font-size: 20px;
  }
  .sixbox{
    height: 1400px;
  }
  .one,.two,.three,.four,.five,.six{
    width: 350px;
  }
  .imgsource{
    margin-right: 20px;
  }
}

@media (max-width:600px){
  .locacontent{
    margin: 5px;
  }
  .banner{
    height:45vh;
  }
  .top h1{
    font-size: 16px;
  }
  .top h2{
    font-size: 25px;
  }
  .address h1{
    font-size: 18px;
  }
  .midbottom h2{
    font-size: 18px;
  }
  .selfcar h1{
    font-size: 18px;
  }
  .selfcar h2{
    font-size: 18px;
  }
  .selfcar span{
    font-size: 16px;
  }
  .sideloc h1{
    font-size: 18px;
  }
  .sixbox{
    height: 1400px;
  }
  .one,.two,.three,.four,.five,.six{
    width: 350px;
  }
}

@media (max-width:470px){
  .locacontent{
    margin: 5px;
  }
  .banner{
    height:35vh;
  }
  .top h1{
    font-size: 14px;
  }
  .top h2{
    font-size: 20px;
  }
  .address h1{
    font-size: 16px;
  }
  .midbottom h2{
    font-size: 16px;
  }
  .selfcar h1{
    font-size: 16px;
  }
  .selfcar h2{
    font-size: 16px;
  }
  .selfcar span{
    font-size: 16px;
  }
  .sideloc h1{
    font-size: 16px;
  }
  .sixbox{
    height: 1200px;
  }
  .one,.two,.three,.four,.five,.six{
    width: 300px;
  }
  .imgsource h3{
    font-size: 16px;
  }
}

@media (max-width:400px){
  .locacontent{
    margin: 5px;
  }
  .banner{
    height:30vh;
  }
  .top h1{
    font-size: 12px;
  }
  .top h2{
    font-size: 18px;
  }
  .address h1{
    font-size: 15px;
  }
  .midbottom h2{
    font-size: 15px;
  }
  .selfcar h1{
    font-size: 15px;
  }
  .selfcar h2{
    font-size: 15px;
  }
  .selfcar span{
    font-size: 15px;
  }
  .sideloc h1{
    font-size: 15px;
  }
  .sixbox{
    height: 1000px;
  }
  .one,.two,.three,.four,.five,.six{
    width: 250px;
  }
}