#btn-honor{
    color: #efeee4;
    background-color: #2e4565;
}

.student_honor{
    width: 82vw;
    margin-left: 9vw;
    margin-right: 9vw;
    margin-top: 3.125vw;
    margin-bottom: 7.864vw;
    flex-direction: column;
    display: flex;
    align-items: flex-start;
}

.honor_block{
    width: 82vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 3.125vw;
}

.honor_block_title{
    width: 82vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.more_btn{
    width: 2.084vw;
    height: 2.084vw;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    transition: 0.3s ease-out;
    cursor: pointer;
}

.more_btn_hover{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#more_white{
    transition: 0.3s ease-in;
}

.more_btn:hover{
    width: 5.5vw;
}

.more_btn:hover #more_white{
    display: none;
}

.more_icon{
    width: 2.084vw;
    height: 2.084vw;
}

.more_btn_text{
    line-height: 0.06;
    letter-spacing: 0.140625vw;
    text-align: left;
    color: #2e4565;
    margin-left: 0.52083vw;
}

.mobile-button{
    display: none;
}

.arrow{
    width: 10px;
    height: 10px;
    border-top: solid 3.5px #2e4565;
    border-right: solid 3.5px #2e4565;
    transform: rotate(45deg);
}

input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

label {
	cursor: pointer;
	width: 10px;
	height: 10px;
	background: none;
    border-top: solid 3.5px #2e4565;
    border-right: solid 3.5px #2e4565;
	display: block;
	position: relative;
    transform: rotate(45deg);
}

label:after {
	content: '';
	position: absolute;
	transition: 0.3s;
}

input:checked + label {
    transform: rotate(135deg);
}

/*.arrow:focus{
    border-top: solid 3.5px red;
    border-right: solid 3.5px red;
}*/

/******************************/
/* table style */

ul.table{
    width: 82vw;
    display: block;
    border: 0;
    border-collapse: collapse;
    margin: 3.125vw 0;
}

.thead{
    width: 82vw;
    display: table-header-group;
}

.tbody{
    width: 82vw;
    display: table-row-group;
}

.thead-tr{
    display: table-row;
    border-bottom: solid 1px #647386;
}

.tr{
    display: none;
}

.thead li, .tr li {
    display: table-cell;
    padding: 20px 30px 20px 0;
}

.shown{
    display: table-row;
    transition: display 0.3s ease-in;
    border-bottom: solid 1px #647386;
}

.tr li{
    color: #2e4565; 
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.14583vw;
    font-weight: 500;
    letter-spacing: 0.140625vw;  
}

.fontstyle-thead {
    color: #2e4565;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.9375vw;
    font-weight: 500;
    letter-spacing: 0.140625vw;
}

.align-left{
    text-align: left;
}

.tdata-group1{
    width: 15vw;
}

.tdata-group2{
    width: 65vw;
}

@media (max-width: 960px) {
    .honor_block{
        margin-top: 10vw;
    }

    .web-button{
        display: none;
    }

    .mobile-button{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .thead li, .tr li{
        padding: 20px 30px 20px 0;
    }
}

@media (max-width: 640px){
    .thead li, .tr li{
        padding: 20px 18px 20px 0;
    }
}

@media (max-width: 480px){
    .thead li, .tr li{
        padding: 20px 20px 20px 0;
    }

    .tr li{
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: 0.5vw;  
    }

    .thead-tr{
        font-size: 16px;
    }

    .tdata-group1{
        width: 20vw;
    }

    .tdata-group2{
        width: 60vw;
    }
}