* {
	box-sizing: border-box;
}

body{
    margin:0;
    font-family: 微軟正黑體, Microsoft JhengHei, Arial, helvetica, sans-serif, Apple LiGothic Medium;
}

img {
    max-width: 100%;
	height: auto;
	border:0;
}

.redline {
	width: 100%;
	height: 10px;
	background-color: #B50034;
}

.wrapper{
    width:100%;
    max-width:1280px;
    height:auto;
    margin:0 auto;
}

nav{
    margin:5px 10px;
}

main{
    display:block;
    margin:20px;
}

h3{
    margin:15px 0;
    font-size:28px;
    color: #B50034;
}

ul, ul li{
    margin:0;
    padding:0;
    list-style: none;
}

ul li{
    display: inline-block;
    margin:0 2px 3px 0;
    padding:5px 8px;
    border-radius: 5px;
    background-color: gray;
    color:#ffffff;
    cursor: pointer;
}

ul li.active{
    background-color: #B50034;
}

.column{
    display: flex;
    flex-wrap: wrap;
    /*align-content: stretch;*/
    margin-top:10px;
}

.column a{
    width:32.3333%;
    height:100px;
    margin:5px 0.5%;
    padding:15px 20px;
    border:1px solid #c9c9c9;
    border-radius: 0.5em;
    text-decoration: none;
    color:black;
}

.column a:hover{
    background-color:#B50034;
    border:0px;
    color:#ffffff;
}

.column:nth-of-type(2),.column:nth-of-type(3),.column:nth-of-type(4),.column:nth-of-type(5){
    display:none;
}



@media (max-width: 480px) {
    .column a{
        width:100%;
        height:80px;
    }
    
    ul li{
        width:100%;
        margin:3px 0px;
        text-align: center;
    }

}