@charset "UTF-8";

main {
    width: 100%;
    margin: 12rem 0 9rem 0rem;
}

.title {
    color: #242424;
    font-size: 3rem;
    font-weight: 400
}

.thinks {
    width: 80%;
    display: flex;
    list-style: none;
    justify-content: center;
    margin: 6rem 3rem 0 6rem
}

.word {
    width: 15%;
    flex-grow: 1;
    padding-right: 3rem;
    margin-left: 10%
}

.word-ex {
    color: #7D7D7D;
    font-size: 1.25rem;
    font-weight: 700;
}

.word-concept p {
    color: #111;
    width: 20rem;
    font-size: 4rem;
    font-weight: 700
}

.img {
    display: flex;
    justify-content: center
}

.img-work {
    width: 50%;
    margin-left: 10%
}

.thinks {
    margin-bottom: 10rem
}

.ex {
    margin-bottom: 1.5rem;
}

.ex-title {
    margin-top: 7rem;
    margin-bottom: 10rem;
    color: #3E3E3E;
    font-size: 2rem;
    font-weight: 600;
    margin-left: 11%
}

.ex-concept,
.ex-detail {
    color: #3E3E3E;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 150%;
    /* 2.25rem */
    margin-left: 10%
}

.ex-concept {
    margin-bottom: 1.5rem
}

@media (max-width: 768px) {
    .thinks {
        display: flex;
        flex-direction: column;
        margin: 6rem 5% 0 11%;
    }

    .word {
        display: flex;
        margin-bottom: 4rem
    }

    .word-ex {
        text-align: justify;
        margin-right: 10rem;
        margin-left: 100%;
        writing-mode: vertical-rl
    }

    .word-concept {
        display: flex;
        flex-direction: column
    }

    .img-work {
        margin: initial;
        width: 33.9375rem
    }
}
@media (max-width: 768px){
    .title {
        margin-left: 9rem
    }
}
@media (max-width: 430px) {
    .title {
        margin-left: 5rem
    }
    .About {
        margin: initial
    }

    .thinks {
        right: auto
    }

    .ex-title,
    .ex-concept,
    .ex-detail {
        margin-left: 5%;
        margin-right: 5%
    }
}
@media (max-width: 320px){
    .title {
        margin-left: 5rem;
    }
    .word {
        margin-left: -5%;
    }
}
@media (min-width: 1024px){
    .title {
        margin-left: 10rem
    }
}
@media (min-width: 1400px) {
    .title {
        padding: 2rem;
    }


main {
    margin: 10rem
}

.ex-title {
    margin-left: 4%
}

.ex-concept,
.ex-detail {
    font-size: 2rem;
    width: 108rem;
    margin-left: 5%
}
}
@media (min-width: 1500px) {
    main {
        margin: 10rem 0 9rem 19rem
    }
    .title{
        font-size: 4.5rem
    }
    .ex-title {
        margin-left: 10%;
        font-size: 3rem;
    }

    .ex-concept,
    .ex-detail {
        margin-left: 10%
    }

}