/*-------------main---------------------------------------------*/

.main{
    width: 65%;
    padding: 150px 0;
    margin: 0 auto;
    display: flex;
}

.leftcontents{
    width: 25%;
    margin-right: 5%;
}

.rightcontents{
    width: 70%;
}

img{
    width: 100%;
}

.title{
    font-family: Helvetica;
    font-size: 17px;
    font-weight: bold;
    margin-top: 10px;
}

.subtitle{
    font-family: Helvetica;
    font-size: 13px;
    letter-spacing: 0.05em;
    font-weight: lighter;
    margin-top: 9px;
}

.concept{
    margin-top: 30px;
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.7;
    font-family: Helvetica;
    font-weight: lighter;
    text-align: justify;
}

@media screen and (max-width: 1024px){
    .main{
        width: 80%;
        padding: 100px 0;
        margin: 0 auto;
        display:block
    }

    .leftcontents{
        width: 100%;
        margin-bottom: 30px;
    }

    .title{
        text-align: center;
    }

    .subtitle{
        text-align: center;
    }
    
    .rightcontents{
        width: 100%;
    }
}

@media screen and (max-width: 599px){
    .main{
        width: 90%;
        padding: 100px 0;
        margin: 0 auto;
        display:block
    }

    .leftcontents{
        width: 100%;
        margin-bottom: 30px;
    }

    .title{
        text-align: center;
        font-size: 15px;
    }

    .subtitle{
        text-align: center;
        font-size: 11px;
    }
    
    .rightcontents{
        width: 100%;
    }
    
    .concept{
        margin: 40px 0;
        font-size: 11px;
        line-height: 1.8;
    }
}