main {
    width: var(--all-width);
    margin: 30px auto 0;
}

main h3 {
    padding: 15px 0;
    font-size: 26px;
    border-top: 1px solid #66666650;
    border-bottom: 1px solid #66666650;
    margin-bottom: 15px;
}

.list {
    margin-bottom: 15px;
}

.big-box {
    display: flex;
    flex-wrap: wrap;
}

#one {
    padding-bottom: 5%;
}

.one-lef {
    width: 43%;
    position: sticky;
    top: var(--header-heigth);
    margin-bottom: auto;
}

.one-rig {
    flex: 1;
}

.one-img {
    width: 75%;
    position: relative;
    margin: 0 auto;
}

.one-lef-txt {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.name {
    width: 100%;
    font-style: oblique;
    font-size: 22px;
    font-family: "";
    font-weight: 700;
    margin-bottom: 15px;
}

.one-lef-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    font-size: 14px;
    font-family: "";
}

.name:hover {
    text-decoration: underline;
}

.one-img::before {
    content: '';
    padding-top: 100%;
    display: block;
    position: relative;
}

.one-rig-box {
    padding: 15px 0;
    border-bottom: 1px solid #66666650;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.one-rig-lef {
    flex: 1;
    padding-right: 2%;
}

.one-rig-img {
    position: relative;
    width: 40%;
}

.one-rig-txt {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    font-family: '';
    font-weight: 100;
}

.one-rig-img::before {
    content: '';
    display: block;
    padding-top: 50%;
    position: relative;
}

.two-img {
    position: relative;
}

.two-img::before {
    content: '';
    display: block;
    padding-top: 56.25%;
}

.text {
    width: 100%;
    font-size: 24px;
    font-weight: 700;
}

.text:hover {
    text-decoration: underline;
}

.big-box[data-type=three] {
    width: 100%;
    overflow-x: auto;
    display: block;
    position: relative;
}

.big-box[data-type=three]>ul {
    padding-right: 0px;
    padding-left: 0px;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 30px;
}

.big-box[data-type=three]>ul li {
    width: 25%;
    flex: 0 0 auto;
    margin: 0 1%;
}

.big-box[data-type=three]>ul li:nth-child(1) {
    margin-left: 0;
}

.three-img {
    position: relative;
}

.three-img::before {
    content: '';
    display: block;
    padding-top: 60%;
    position: relative;
}

.three-txt .text {
    font-size: 16px;
    font-weight: 500;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    font-family: '';
    font-weight: 100;
}

@media (min-width:800px) {
    .two-box {
        width: calc((100% - 6%)/4);
        margin-right: 2%;
        margin-bottom: 2%;
    }

    .two-box:nth-of-type(4n) {
        margin-right: 0;
    }

}

@media (max-width:799px) {
    .big-box {
        flex-direction: column;
    }

    .one-rig {
        display: flex;
        flex-wrap: wrap;
        gap: 15px 10px;
    }

    .one-rig-box {
        width: calc((100% - 10px) / 2);
        flex-direction: column-reverse;
    }

    .one-rig-img {
        width: 100%;
    }

    .name {
        font-size: 15px;
    }

    .type {
        font-size: 13px;
    }

    .one-rig-txt {
        font-size: 12px;
    }

    .one-lef {
        position: relative;
        width: 100%;
        top: 0;
        margin-top: 0;
        margin-bottom: 20px;
    }

    main h3 {
        border-top: 0;
    }

    .text {
        font-size: 16px;
        font-weight: 550;
    }

    .big-box[data-type=two] {
        width: 100%;
        flex-direction: row;
    }

    .two-box {
        width: calc((100% - 1%) /2);
        margin-right: 1%;
        margin-bottom: 2%;
    }

    .two-box:nth-of-type(2n) {
        margin-right: 0;
    }

    .big-box[data-type=three]>ul li {
        width: 75%;
        margin: 0 2%;
    }

    .three-txt .text {
        font-size: 13px;
    }
}