/* responsive.css */
@media screen and (min-width:600px) {
    /* 1행 글자 크기, 여백 등 */
    #wrap .intro h1 span {
        display: block;
        text-align: center;
        font-size:1.50rem;
        line-height: 150%;
        }   
    #wrap .info .details {display:block;}
    #wrap .info .details dl {margin:15px 0;}
    #wrap .info .details dl dt {
        font-weight:500;
        font-size:1.25rem;
        padding-bottom:5px;
    }
        #wrap .info .details dl dd {
        font-weight:400;
        font-size:1rem;
        line-height:200%;
    }
    /* 3행 프로젝트 이미지 w100% */
    #wrap .project_wrap .project .title_thum .mockup img { 
        width:100%;
    }
    /* 4행 그래픽 이미지 확대 */
    #wrap .project_wrap .graphic_wrap .graphic_container a {
    width:298px;height:400px;}
}/* 사용자가 보는 기기 너비가 600 보다 크면 */


@media screen and (min-width:840px) {
    #wrap .project_wrap .project .title_thum .mockup {height:400px;}
    #wrap .intro h1 span {
        display: block;
        text-align: center;
        font-size:2.25rem;
        line-height: 150%;
    }
    /* 2행 info -> 1행 2열 레이아웃 구조 변경 */
    #wrap > .info {
        /* height: auto; */
        display: flex;
        gap:50px;
        flex-flow:row nowrap;
        align-items: center;
        justify-content: center
    }   
    #wrap .info .details {display:block;
        background-color: aqua;
        
    }
    #wrap .info .details dl {margin:30px 0;}
    #wrap .info .details dl dt {
        font-weight:500;
        font-size:1.25rem;
        padding-bottom:15px;
    }
        #wrap .info .details dl dd {
        font-weight:400;
        font-size:1rem;
        line-height:250%;
    }
    /* 3행 web -> 1행 2열 레이아웃 구조 변경 */
    #wrap .project_wrap .project {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    justify-content: space-between;
    align-items: center;
    padding:28px 0;}
    #wrap .project_wrap .project .details {
    background-color: turquoise;
    position: absolute;
    bottom: 0;
    padding:28px 30px;
    left: 50%;}
    /* 4행 그래픽 이미지 확대 */
}/* 사용자가 보는 기기 너비가 840 보다 크면 */