@charset "big5";
/* CSS Document */
body{margin:0;}

#containter{margin:0 auto; padding-top:35px; width:980px;}
#top img{display:block;}
#top-mobile{display:none;}
#top-mobile img{display:block; width:100%;}

h2{margin:0; padding:3px 0; font-size:24px; letter-spacing:2px; text-align:center;}
h2,h2 a{color:#FFFFFF; text-decoration:none;}
h2 a:hover,h2 a:active{color:#FF0000; text-decoration:underline;}
.section ul{margin:3px 0 15px; padding:0; list-style:none; border-top-style:solid; border-top-width:2px; border-left-style:dotted; border-left-width:1px;}
.section li{margin:3px 0 2px; padding:0;}
.group,#bottom{clear:both;}
.section{padding:10px 10px 0 0; padding-left:3px; float:left; width:180px;}
.section b,.section b a,.section li,.section li a{font-size:13px; text-decoration:none;}
.section b,.section b a{color:#000000;}
.section li a{color:#333333;}
.section i{margin:0 3px;}

#group-1 h2{background-color:#66aaff;}
#group-2 h2{background-color:#33cc99;}
#group-3 h2{background-color:#ff9966;}
#group-4 h2{background-color:#ff99ff;}

#group-1 ul{border-color:#66aaff;}
#group-2 ul{border-color:#33cc99;}
#group-3 ul{border-color:#ff9966;}
#group-4 ul{border-color:#ff99ff;}

#group-1 i{color:#66aaff;}
#group-2 i{color:#33cc99;}
#group-3 i{color:#ff9966;}
#group-4 i{color:#ff99ff;}

#group-1 .section a:hover,#group-1 .section a:active{color:#3366ff;}
#group-2 .section a:hover,#group-2 .section a:active{color:#009966;}
#group-3 .section a:hover,#group-3 .section a:active{color:#ff6600;}
#group-4 .section a:hover,#group-4 .section a:active{color:#cc33cc;}

@media only screen and (max-width: 768px) {
  #containter{width:100%;}
  #top{display:none;}
  #top-mobile{display:block;}
  .section{margin:0 auto; float:none; width:90%;}
  .section b,.section b a,.section li,.section li a{font-size:18px;}
}