body {
      font-family: Microsoft JhengHei,Helvetica, Heiti TC, Segoe UI, "微軟正黑體", 新細明體, 細明體;
      line-height:1.8; color:#666; background-color:#F1F1F2
}
    .navbar-brand { font-size:1rem}
    i.fab { font-size:3rem}
    .navbar-dark .navbar-nav .nav-link {color: rgba(241,170,66,.68);}   
    .navbar-dark .navbar-nav .nav-link:hover {color: rgba(255,185,80,1);}   
    
    @media(min-width:1200px){
    .dropdown { padding-right:0.5rem}
    }
    @media(min-width:992px) and (max-width:1200px){
    .navbar-brand, .nav-link { font-size:0.9rem} 
    }     
    .jumbotron {
        background-color:transparent;
        border-radius: 0;
        /*border-bottom: 5px solid #c3996b;*/
    } 
    @media(max-width:768px) {
    .jumbotron  { padding-top:60px }  
    } 
    @-webkit-keyframes pulse {
      from {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
      }
      50% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(1, 1, 1);
      }
      to {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
      }
    }
    @keyframes pulse {
      from {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
      }
      50% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(1, 1, 1);
      }
      to {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
      }
    }
    .pulse {
        -webkit-animation-name: pulse;
        animation-name: pulse;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both; 
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;      
    }     

    #BothSideLine { margin:3rem auto; padding:0; list-style-type:none;}
    #BothSideLine li span{ background: #f1aa42;; padding:0.3rem 1.5rem 0.5rem 1.5rem; color:#fff; border:1px solid #f1aa42; font-size:1.65rem; line-height:1.0; letter-spacing:1px}
    #BothSideLine li{float: left; height: 2em; width: 100%;}
    #BothSideLine .list1{border-bottom: 5px solid #f1aa42;width: 100%; margin-bottom: -1rem;}
    #BothSideLine .list2{display: block; width: 100%; text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.5)}
    
    .box-shadow168 { box-shadow: 3px 3px 16px rgba(168,168,168,0.68)}
    .bg-gold { background-color:#f1aa42}
    .bg-darkbrown { background-color:#40220f}
    .navbar-dark {background-color: #40220f!important;}
    .bg-black { background-color:#111}
    .br { clear:both}
    .no_link > a {
      display: inline-block;  /* For IE11/ MS Edge bug */
      pointer-events: none;
      text-decoration: none;
    } 
    .no_wrap { white-space:nowrap}
    a[disabled] {pointer-events: none;   }
    
  
        
    .tip-line           { position:relative; border-bottom:1px solid #f1aa42; width:100%; height:2.5rem; margin:0 0 2rem 0; padding-top:1rem; } 
    .tip-line:before    { position:absolute; background-color:#f1f1f2; content:url('images/tip.png'); margin:0 0 0 0; padding-right:1rem}
    .tip-line .tip     { position:absolute; background-color:#f1f1f2; color:#b17f45; line-height:1.0; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); font-size:1.5rem; letter-spacing:1px; margin:0 0 0 2rem; padding:0.4rem 1rem 0.5rem 0.5rem}
    .tip-content, .tip-content .newslist { padding-left:2.5rem; padding-right:2rem }

    .card-body .tip-line:before    { background-color:#fff}/*bg-white*/
    .card-body .tip-line .tip     { background-color:#fff}/*bg-white*/



    .newsContent { line-height:2.0; color:#666}
    .newslist { list-style:none}
    .newslist li::before {
            content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
            color: #666; /* Change the color */
            font-weight: bold; /* If you want it to be bold */
            display: inline-block; /* Needed to add space between the bullet and the text */ 
            width: 1rem; /* Also needed for space (tweak if needed) */
            margin-left: -1rem; /* Also needed for space (tweak if needed) */
    }
    .newslist li {  padding-bottom:0.6rem; line-height:1.4}
    .newslist li a { color:#666; font-size:1rem}
    .newslist li a:hover { color:#000; text-decoration:none}
    .newslist .date { color:#f1aa42; font-size:small;  padding-bottom:1rem }
    @media screen and (max-width: 768px){     
    .newslist li   { margin-left:-2rem;}
    .newslist li a { color:#666; font-size:1rem}
    }      
    
    footer { background-color:#fff; font-size:0.8rem; color:#888; margin-top:5rem}
/*--sponsor--*/
#tb { margin:0 -2.5rem 1.5rem -2.5rem}
#tb li {
 list-style-type:none;
 width:215px;
 height:auto;
 text-align:center;
 vertical-align:middle;
 padding:0.5rem 0;
 margin:1rem 0;  
 float:left;
 background-color:Transparent;
  border:dotted 1px #fff
}
#tb li:hover {background-color:#f9f9f9;border:dotted 1px #eee}    

/*--number-circle-list--*/
.number-circle-list {
  list-style: none;
  padding-left: 1.35rem;
  counter-reset: circle-counter;  
}
.number-circle-list-item {
  counter-increment: circle-counter;
  margin-bottom: 0.25rem;
  text-indent : -1.5rem;
}
.number-circle-list-item:before {
  content: counter(circle-counter);
  background-color: #e1e1e1;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  display: inline-block;
  font-size: 0.65rem;
  line-height: 1.5;
  color: black;
  text-align: center; padding-left:1.4rem;
  margin-right: 0.1rem; 
  position: relative;
  top: -3px;
}
.number-circle-list-item:last-child {
  margin-bottom: 0;
}
.number-circle-list-item .number-circle-list-item {
  margin-left: 0.25rem;
}
@media(max-width:768px) {
.number-circle-list  { padding-left: 3rem;}
}