/*main color #00182E*/
/*font-size: calc(0.25vw + 13px)*/

/*여기까지 공통 사항*/
.article {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#aboutimg {
    overflow: hidden;
    float: left;
    max-width: 400px;
    flex-grow: 1;
}

#abouttext {
    float: left;
    max-width: 800px;
    font-size: calc(0.4vw + 9px);
    padding-left: 40px;
    flex-grow: 3;
}

/*여기서부터 라이센스*/
#licensebody {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
}
/* Style the side navigation */
.sidenav {
    float: left;
    width: 250px;
    display: inline-block;
    background-color: #111;
}

    /* Side navigation links */
    .sidenav > div {
        color: white;
        padding: 30px 16px;
        text-decoration: none;
        display: block;
        cursor: pointer;
    }

    /* Change color on hover */
    .sidenav div:hover {
        background-color: #ddd;
        color: black;
    }

/* Style the content */
.licensecontent {
    flex: 2;
    margin-left: 50px;
    padding-left: 20px;
    display: none;
    flex-wrap: wrap;
}

.lcactive {
    display: flex;
}

.licenseimg {
    max-width: 100%;
    height: auto;
}

/*pc 화면이 기본*/
@media all and (max-width: 768px) {
    #abouttext {
        padding: 0 8vw;
        text-align: center;
        font-size: calc(0.3vw + 10px);
    }

    .sidenav {
        width: 100%;
        min-width: 150px;
    }

        .sidenav > div {
            font-size: calc(0.25vw + 11px);
            text-align: center;
            color: white;
            padding: 10px;
            text-decoration: none;
            display: block;
        }

    .licensecontent {
        margin-left: 0;
        padding-left: 0;
    }

    #aboutimg {
        margin-bottom: 15px;
    }

    .licensetext, .licenseimg {
        margin: 0 auto;
    }
}