#tab{
width:100%;



  }
  /* 頁籤ul */
  #tab>ul{
    overflow: hidden;
    margin: 0;
    padding: 10px 20px 0 20px;

  }
  #tab>ul>li{
    list-style-type: none;
  }
  #tab>ul>li>a{
    text-decoration: none;
    font-size: 18px;
    color: #FFF;
    float: left;
    padding: 10px 20px;
    margin-left: 5px;
	  background:#9dc9e5;
  }

  /*頁籤div內容*/
  #tab>div {
    clear:both;
    padding:0 15px;
    height:0;
    overflow:hidden;
    visibility:hidden;

  }

  /* span:target */
  #tab-1:target,
  #tab-2:target,
  #tab-3:target,
  #tab-4:target{

  }


  /*第一筆的底色*/
  span:target ~ #tab > ul li:first-child a {
    background:#9dc9e5;
  }
  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-color: #36adf8;

	color:#FFFFFF;


  }

  /*頁籤內容顯示&第一筆*/
  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:100%;

  }

.aa{
display:none;
}

@media screen and (min-width:320px) and (max-width:768px){
  #tab>ul{
    padding: 10px 0 0;
  }
  #tab>ul>li{
    float: left;
  }
  #tab>ul>li>a{
    padding: 10px;
  }
  span ~ #tab > div:first-of-type{
    height: auto;
  }
}
@media screen and (max-width:350px){
  #tab>ul>li>a{
    padding: 10px 5px;
  }
}