*, *::before, *::after {
    box-sizing: border-box;
}
html {
    box-sizing: border-box;
}

.container {
    padding: 0 15px;
    margin: 0 auto;
    max-width: 1100px;
}

.table{
    border: 2px solid #000;
    border-collapse: collapse;
    margin: 0 auto;
}


.table1{
    width: 75%;
}

.td{
    border: 2px solid #000;
    text-align: center;
    height: 50px;
}

.td5-6{
    height: 200px;
}

.table2{
    width: 90%;
}

.td1-2{
    width: 40%;
}

.td3{
    width: 60%;
}

.td4{
    width: 28%;
    height: 50px;
}

.table-daughter{
    width: 80%;
}

.td-daughter{
    width: 33%;
}

.td3-6{
    height: 200px;
}

.table3 {
    width: 500px;
    height: 500px;
    border: 10px solid #000;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 20px auto;
}

.td-m {
    border: 6px solid #000;
    padding: 0;
    color: transparent;
}

.bg-red { background-color: #ff0000; }
.bg-blue { background-color: #0000ff; }
.bg-yellow { background-color: #ffd700; }
.bg-black { background-color: #000; }

.col-1 { width: 10%; }
.col-2 { width: 12%; }
.col-3 { width: 28%; }
.col-4 { width: 15%; }
.col-5 { width: 15%; }
.col-6 { width: 15%; }
.col-7 { width: 5%; }

.tr-1 { height: 12%; }
.tr-2 { height: 20%; }
.tr-3 { height: 25%; }
.tr-4 { height: 10%; }
.tr-5 { height: 15%; }
.tr-6 { height: 10%; }
.tr-7 { height: 8%; }

.header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #000;
    padding: 10px 0;
    margin-bottom: 20px;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-link {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 18px;
    padding: 5px 10px;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #ff0000;
}