/*banner================================================================*/
.carousel {
    position:relative ;
     /*top: 120px;
    left: 0;*/
    /*position: relative;
    top: 0;
    left: 0;
    width: 100%;*/
    /*height:300px;*/
    height:auto;  
    max-width:1200px;
    max-height :300px;      
     background-color:#ffffff;
     margin:0 auto;
     padding:0;
     overflow :hidden ;
}
@media (max-width: 540px) {
  .carousel {   
      position: relative;
    top: 0 !important;
}
}
.carousel img {
     width: 100%;  
     max-width:1200px;
     height:auto;  
     max-height :300px;  
}
.carousel-caption {
    position: absolute;
    top: 18%;
    left: 8em;
    /*height: 100%;*/   
    z-index: 10;
    /*padding: 0;*/
    color: #fff;   
      text-align :center!important  ;
    display: flex;
    align-items: center;
    justify-content: center;
    width:80%;
}
 .carousel-caption h3 {   
        font-size: 36px;
        text-align :center!important  ;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
        font-family: "微軟正黑體", "新細名體", "標楷體";
    }   
 .carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  /*background-color: rgba(0, 0, 0, 0);*/
  filter: alpha(opacity=50);
  opacity: .5;
}
.carousel-control.left {
  background-image:none !important ;   
}
.carousel-control.right {
  background-image:none!important ;   
}
.carousel-control:hover,
.carousel-control:focus {
  color: #fff;
  text-decoration: none;
  filter: alpha(opacity=100);
  outline: 0;
  opacity: .9;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 1);
  border: none;
  border-radius: 0px;
}

@media (max-width: 1280px) {
  .carousel-caption h3 {     
        font-size: 30px;      
    } 
}
@media (max-width: 767px) { 
    .carousel-caption {  
    top: 18%;
    left: 5em;      
}
     .carousel-caption h3 {
        font-size: 24px;
    }
}
@media (max-width: 640px) { 
      .carousel-caption {  
    top: 18%;
    left: 3.5em;      
}     
}
@media (max-width: 540px) { 
      .carousel-caption h3 {
        font-size: 20px;
    }
}
@media(max-width:480px) { 
         .carousel-caption {  
    top: 18%;
    left: 3em;      
}   
    .carousel-caption h3 {
        font-size: 20px;
    }
   
}
@media(max-width:360px) {
    .carousel-caption h3 {
        font-size: 1em;
    }    
}
@media(max-width:320px) {
    .carousel-caption h3 {
        font-size: 14px;
    }    
}