*{margin:0;padding: 0;}
ul,li{text-decoration: none;list-style-type: none;}
/* font-family: 'Noto Sans TC', sans-serif; 中文*/

html{height: 100%;}

body{
  background-image: url('./images/index_bg.jpg');
  background-position: center;
  background-size: 100% 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;  
  min-height: 100%;
  position: relative;
  font-family: 'Noto Sans TC', sans-serif;
}


/* ====================================================header */
header{box-shadow: 0 4px 4px #c6ba9b;position: fixed;left: 0;top: 0;width: 100%; z-index: 9;}


.bg-ka{background-color: #e2ddd0;}
.navbar-brand img{height:25%;width: 25%;}
.navbar-brand{margin-right: 0;text-align: left;}


.navbar-collapse{justify-content: space-evenly;}
.navbar-nav .nav-link {font-size: 18px;}
.nav-item{margin: 0 .5rem;}

.dropdown-menu{background-color: #e7e1d4;}
.dropdown-item:hover{
  background-color:#534741;
  color: white;
}


/* .search_control{border-radius: 50px;border: unset;}
.search_control ::-webkit-input-placeholder{font-size: 13px;} */

.header_icon img {
 margin: .5rem;
  width: 35px;
  cursor: pointer;
}

/* .search_control {
  position: absolute;
  top: 70px;
  right: 170px;
  border-radius: 50px;
  background-color: rgba(51, 51, 51, 0.144);
  display: ;
} */



/* ====================================================header */












/* ====================================================main */
main{
  /* background-color: rgba(68, 46, 128, 0.123); */
 min-height: 100%;
 padding-bottom: 100px;
 padding-top:100px;
 
}

.container .top-slider img{margin: auto auto;padding-top: 110px;}

/* ====================================================main */
aside{
background: rgba(255, 255, 255, 0.3);
width: 20%;
float: left;
min-height: 500px;
height:765px;
}


ul,
li {
  list-style: none;
}

#navL {
  display: inline;
  text-align: center;
}

#navL a{color: #534741;}
#navL h6 {
  cursor: pointer;
}

#navL ul {
  display: none;
  padding: 0;margin: 0;
}

#navL ul li {
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}

#navL ul li a:hover {
 background-color:#534741;
 color: white;
}

@media(max-width:500px){
  .navbar-collapse{text-align: center;}
}














.content{
  background-color: #e2ddd088;
  width: 76%;
  float:left;
  margin:0 2%;
  min-height: 500px;
  border-radius: 10px;
}

.content h4{margin: 10px ;
background-image: url('./images/h2-bg.png');
background-repeat: no-repeat;
background-position: center;
text-align: center;}

.content figure{
  background-color: rgba(255, 255, 255, 0.3);
  /* 寬度要四個 所以是 */
  /* margin要跟width配合 所以要扣 */
  width: 23%;     
  margin:1% ;
  /* 都輸入完了之後他會一直往下掉 所以要加float*/
  float: left;
}

  
.content figure  img{ 
  width:100%;
  height: auto;
  border-radius: 10px;
  /* box-shadow: -2px -2px 2px rgba(51, 51, 51, 0.836); /*陰影放左上角 讓他感覺是浮雕*/
  transition: 0.5s;/*轉場過程要放在原圖*/
}   

.content figure img:hover{transform: scale(1.1);box-shadow: 2px 2px 8px #534741 ;}
@media(max-width:500px){
  .content figure img:hover{transform: none;}
  .content figure a{color:none;text-decoration: none;}
  .content{margin: 0 0;}
  .content figure{width: 42%;margin:4% ;}

}


.content figure a{color:#534741;text-decoration: none;}
.content figure p{padding: 10px;margin: 2px 0;text-align: center;}

.page{clear: both;text-align:right;;}
.page a{color:#534741;text-decoration: none;font-weight: bold;}
.page li{display:inline;margin: 0 1rem;} 
.page i{margin-right: 1rem;}

/* nav下拉式改hover */

@media(min-width:1000px){

.dropdown-menu li:hover .sub-menu {visibility: visible;}
.dropdown:hover .dropdown-menu {display: block;}

}



.bottom{max-width: 800px;clear: both;text-align: center;margin:0 auto;}
.bottom h2{
  background-image: url('./images/h2-bg.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  text-align: center;
  font-size: 20px;
  padding-top: 20px;
}




.recommed-slider{clear:both ;padding:30px;margin:0 auto;}
.recommed-slider figure img{width: 100%;display: block;}
.recommed-slider figure{
  margin: 0 1rem;
  overflow: hidden;
  position: relative;
 text-align: center;
}



.recommed-slider figcaption{
  background-color:  #534741;
  background-position: center;
  color: white;
  position: absolute; 
  bottom:0;width: 100%;height: 0;
  box-sizing: border-box;
  line-height: 2rem;
  padding-top: 10px;
  
}


.recommed-slider figure  figcaption{
  opacity: 0;
  transition: 2s;
}

.recommed-slider  figure:hover figcaption{
  opacity: 1;
  height:50%;
  transition: 2s;
}





.information h2{
  background-image: url('./images/h2-bg.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  text-align: center;
  font-size: 20px;
  
}



.information{max-width: 1000px;margin: 0 auto;min-height: 100px;clear: both;padding-top: 20px;}
.information p{padding-top: 20px;padding-bottom: 20px;letter-spacing: 0.1em;  line-height: 1.5; text-align: justify;padding-left: 100px;}   
.row img{display:block;float: left;height: 100px;}
.row{text-align: center;}


@media(max-width:768px){
  aside{display: none;}
  .content{width: 100%;}
  .recommed-slider  figure:hover figcaption{
    opacity: unset;
    height:0;
    transition: 0;
  }
  .recommed-slider figcaption{
    background-color: transparent;

    color: unset;
    
    
  }


}

@media(max-width:500px){
  #bbbb{text-align: center;}
}


/* ====================================================footer */
footer{
  
  background-image: url('./images/enjoyyor.png');
  height: 10vh;
  background-position:center;
  background-repeat: no-repeat;
  background-size:  50vh;
  background-color: #e2ddd0;
  position: absolute;
  width: 100%;left: 0;bottom: 0;
  box-shadow: 0 -3px 4px #c6ba9b;
  z-index: 8;
}





/* ====================================================footer */