/* 頁籤ul */
#tab>ul {
    overflow: hidden;
    margin: 0;
    padding: 10px 20px 0 0px;
}
  #tab>ul>li{
    list-style-type: none;

  }
  #tab>ul>li>a{
    text-decoration: none;
    font-size: 13px;
    color: #333;
    float: left;
    padding: 10px;
    margin-left: 5px;
  }

  /*頁籤div內容*/
  #tab>div {
    clear:both;
    padding:0 15px;
    height:0;
    overflow:hidden;
    visibility:hidden;
    -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -ms-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out;
  }

  /* span:target */
  #tab-1:target,
  #tab-2:target,
  #tab-3:target,
  #tab-4:target{
    border: solid 1px red;
  }

  /*第一筆的底色*/
  span:target ~ #tab > ul li:first-child a {
     background:#1caa5d;
  }
  span:target ~ #tab > div:first-of-type {
    visibility:hidden;
    height:0;
    padding:0 15px;
  }

  /*頁籤變換&第一筆*/
  span ~ #tab > ul li:first-child a,
  #tab-1:target ~ #tab > ul li a[href$="#tab-1"],
  #tab-2:target ~ #tab > ul li a[href$="#tab-2"],
  #tab-3:target ~ #tab > ul li a[href$="#tab-3"],
  #tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
    background: #fff;
  }

  /*頁籤內容顯示&第一筆*/
  span ~ #tab > div:first-of-type,
  #tab-1:target ~ #tab > div.tab-content-1,
  #tab-2:target ~ #tab > div.tab-content-2,
  #tab-3:target ~ #tab > div.tab-content-3,
  #tab-4:target ~ #tab > div.tab-content-4 {
    visibility: visible;
    height: 200px;
    background: #f6f6f6;
    width: 60%;
  }


#tab>ul>li>a {
    float: left;
    margin-left: -8px;
    border: 1px solid transparent;
    color: #fff;
    padding: 0px 25px 11px 32px;
    margin-right: 0px;
    line-height: 2;
    text-decoration: none;
    font-size: 20px;
    border-bottom: 0px none;
    transform-origin: left center 0;
    z-index: -1;
    display: inline-block;
    background: url(../images/TAB-img1.svg) no-repeat;
    font-family: 微軟正黑體;
}

span ~ #tab > ul li:first-child a, #tab-1:target ~ #tab > ul li a[href$="#tab-1"], #tab-2:target ~ #tab > ul li a[href$="#tab-2"], #tab-3:target ~ #tab > ul li a[href$="#tab-3"], #tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
    background: url(../images/TAB-img.svg) no-repeat;
    z-index: 1;
    position: relative;
}


span:target ~ #tab > ul li:first-child a {
    background: url(../images/TAB-img1.svg) no-repeat;
}

.tab2-span {
    display: none;
}