body {
    margin: 0px;
    padding: 0px;
    border: none;
    text-align: center;
    width: 100vw -15px;
    height: 100vh;
}


.flex {
    display: flex;
    height: 100%;
    width: 80%;
    margin: 0px auto;
    padding: 0px;
    flex-direction: column;
    border: none;    
    box-sizing: border-box;
}
.index{
    position: fixed;
    width:100%;
    left:0%;
    bottom:0;
    z-index: 999;
    margin: 0px;
    padding: 0px;
    border: none;
}

@keyframes swing{
    15%{transform: translateY(5px);}
    40%{transform: translateY(-5px);}
    60%{transform: translateY(2px);}
    85%{transform: translateY(-2px);}
    100%{transform: translateY(0px);}
}

.index>#Btn {
  float: right;
  width: 8%;
  height: auto;
  margin: -4em 20px 10px 0px;
  transition: 0.5s;
  /* opacity: 0.3; */
}

.index>#Btn:hover {
    animation: swing 1s 1;
  }

.index>#DDW {
    width: 100%;
    height: auto; 
    margin: 0px 0px -10px 0px;
  }
.index>#DDW>img{
    display:block;
    
  }

.index > #UP {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.index > #UP > img {
  display: block;
  width: 100%;
  height: auto;
}



.item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0px;
    box-sizing: border-box;
}

.hdimg,
img {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    border: none;
}

.img,
img {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    border: none;
}

#P03{   
    z-index: 100;
}
#P04{
    z-index: 100;
}

#P05{
    z-index: 100;
}

.google{
    display: flex;
    justify-content:center; 
    align-items: center;    
    position:absolute;
    width:60vw;
    height: 50vh;
}


.list {
    display: flex;
    height: auto;
    width: 100%;
    flex-wrap: wrap;
    background-color: #0000;
    margin-top: -5px;
    
}

.itemBtn {
    width: 18%;
    height: auto;
    float: left;
    padding: 5px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;    
}
.itemBtn>a{
    width: 100%;
    height: 100%;
}

.itemBtn:hover{
    transition: .2s;
    transform: scale(0.95);}

.item.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
}

.item.video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.item.map {
  position: relative;
  padding-bottom: 56.25%; /* 或其他比例 */
  height: 0;
  overflow: hidden;
}
.item.map iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.itemBtn2 {
    width: 60%;
    height: auto;
    float: left;
    padding: 10px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;    
}
.itemBtn2>a{
    width: 100%;
    height: 100%;
}

.itemBtn2:hover{
    transition: .2s;
    transform: scale(0.95);}

/*如果螢幕寬度為 768px 以下，就套用 css 設定*/
@media screen and (max-width:768px) { 
    .flex {
        display: flex;
        height: 100%;
        width: 100%;
        margin: 0px auto;
        padding: 0px;
        flex-direction: column;
        box-sizing: border-box;
    }
  }