@media screen and (min-width: 0px) {
    html {
        overflow: auto;
    }

    body {
        overflow-x: hidden;
    }

    h2 {
        position: relative;
        bottom: 0px;
    }

    dd,
    dt {
        font-size: 14px;
    }

    .back-link {
        padding: 0% 20px;
        position: relative;
        padding-top: 100px;
        z-index: 100;   
    }
    .back-link a {
        text-decoration: none;
        background-color: rgb(243, 243, 243);
        padding: 1% 5%;
        border-radius: 20px;
        transition: all 0s;
    }

    section.main{
        padding: 0% 0% 0% 0% ;
        margin-top: 40px;
        position: relative;
        bottom: 50px;
    }

    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        padding: 0% 20px;
        padding-bottom: 20px;
    }


    .content .content-img {
        height: 600px;
        /* max-width: 100%; */
    }

    .content .comment {
        margin-top: 0px;
        padding: 30px;
        width: 100%;
        background-color: rgb(243, 243, 243);
        border-radius: 30px;
    }

    .content .basic-data,.introduction {
        border-top: 1px solid rgb(122, 122, 122);
        padding: 10px 0px;

    }

    .content .basic-data dl {
        display: flex;
    }

    .content .basic-data dt::after {
        content: "：";
        padding-left: 20px;
    }

    .content .introduction dt::before {
        content: ">> ";
    }

    .content .introduction dd {
        padding-left: 40px;
    }

    .content .introduction dd a {
        text-decoration: none;
        background-color: rgb(211, 211, 211);
        padding: 1% 5%;
        border-radius: 20px;
        transition: all 0s;
    }

    .images {
        padding: 0% 20px;
    }

    .images .imgs-content {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .images .imgs-content img {
        /* height: 400px; */
        max-width: 100%;
        border-radius: 20px;
    }

}

@media screen and (min-width: 1000px) {
    h2 {
        position: relative;
        bottom: 0px;
    }

    dd,
    dt {
        font-size: 16px;
    }

    .back-link {
        padding: 0% 15%;
        position: relative;
        padding-top: 80px;
        z-index: 100;
    }

    .back-link a {
        text-decoration: none;
        background-color: rgb(243, 243, 243);
        padding: 0.5% 1%;
        border-radius: 20px;
        transition: all 0.2s;
    }

    .back-link a:hover {
        background-color: rgb(211, 211, 211);
    }

    section.main {
        padding: 1% 0% 0% 0%;
        position: relative;
        bottom: 50px;
    }

    .content {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        padding: 0% 15%;
        padding-bottom: 20px;
    }


    .content .content-img {
        height: 800px;
    }

    .content .comment {
        margin-top: 100px;
        padding: 30px;
        width: 50%;
        background-color: rgb(243, 243, 243);
        border-radius: 30px;
    }

    .content .basic-data,
    .introduction {
        border-top: 1px solid rgb(122, 122, 122);
        padding: 10px 0px;

    }

    .content .basic-data dl {
        display: flex;
    }

    .content .basic-data dt::after {
        content: "：";
        padding-left: 20px;
    }

    .content .introduction dt::before {
        content: ">> ";
    }

    .content .introduction dd {
        padding-left: 40px;
    }

    .content .introduction dd a {
        text-decoration: none;
        background-color: rgb(211, 211, 211);
        padding: 1% 2%;
        border-radius: 20px;
        transition: all 0.2s;
    }

    .content .introduction dd a:hover {
        background-color: rgb(173, 173, 173);
    }

    .images {
        padding: 0% 15%;
    }

    .images .imgs-content {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .images .imgs-content img {
        height: 400px;
        transition: all 0.5s ease-out;
        border-radius: 20px;
    }

    .images .imgs-content img:hover {
        transform: scale(2, 2);
        border-radius: 0px;
    }

}