@charset "utf-8";
*{ 
    margin: 0; padding: 0; list-style: none; text-decoration: none; 
    box-sizing: border-box;
    font-family: "Inter";
}

@media screen and (min-width:1279px){
    #header{ 
        display: flex; justify-content: space-between; width: 100%; height: 100px; background: #000; 
        position: fixed; left: 0; top: 0;
    }
    h1{ margin-left: 100px; }
    h1 img{ width: 58px; height: 58px; }
    #header div{ 
        width: 120px; display: flex; justify-content: space-between;
        margin-right: 100px;
    }
    #header a:first-child img{ width: 60px; height: 60px; margin-top: 20px; }
    #header a:last-child img{ width: 42px; height: 42px; margin-top: 29px; }
    
    
    /* main 공통 */
    h2{ display: none; }
    /* main_background */
    .main_background{ 
        border: 1px solid; width: 100%; height: 1100px; transition: all 0.3s ease;
        background: url(../img/bg1.png) no-repeat center top/cover;
    }
    /* profile */
    .profile{ 
        background: url(../img/bg2.jpg) no-repeat center center/cover; 
        width: 100%; height: 350px;
    }
    .profile p{ 
        text-align: center; padding-top: 146px;
        font-size: 32px;
        font-family: "Amethysta", serif;
        font-weight: 400;
        font-style: normal;
        color: #374A31;
    }
    .about{ 
        width: 100%; height: 1000px; transition: all 0.3s ease;
        display: flex;
    }
    .about>div:nth-of-type(1){ 
        width: 100%;
        background: url(../img/bg3.png) no-repeat center center/auto 100%;
    }
    .about>div:last-child{ 
        width: 100%;
        background: #000;
    }
    .about>div p{ 
        color: #fff; 
        text-align: center; font-size: 20px; font-weight: bold; line-height: 150%; letter-spacing: -0.05em;
        padding-top: 300px;
    }
    /* work */
    .works{ background: #000; padding-top: 10px; }
    .works>a{ 
        display: block; margin: 100px auto; 
        border: 0;
        font-family: "Diphylleia", serif;
        font-weight: 400;
        font-style: normal;
        text-decoration-line: underline;
        text-decoration-color: #fff;
        font-size: 28px;
        background: #000;
        color: #fff;
        text-align: center;
    }
    .works>div{ width: 1200px; margin: 0 auto; transition: all 0.3s ease; }
    .works>div>div{ 
        height: 8000px;
    }
    .img_flex{ display: flex; justify-content: space-between; }
    .img_1{ 
        width: 550px; height: 778px;
        background: url(../img/img1.png) no-repeat center top/cover;
    }
    .img_3{
        width: 550px; height: 778px; margin-top: 118px;
        background: url(../img/img3.png) no-repeat center top/cover;
    }
    .img_5{
        width: 550px; height: 728px; margin-top: 255px;
        background: url(../img/img5.png) no-repeat center top/cover;
    }
    .img_7{
        width: 550px; height: 778px; margin-top: 233px;
        background: url(../img/img7.png) no-repeat center top/cover;
    }
    .img_9{
        width: 550px; height: 419px; margin-top: 275px;
        background: url(../img/img9.png) no-repeat center top/cover;
    }
    .img_11{
        width: 550px; height: 338px; margin-top: 372px;
        background: url(../img/img11.png) no-repeat center top/cover;
    }
    .img_13{
        width: 550px; height: 715px; margin-top: 293px;
        background: url(../img/img13.png) no-repeat center top/cover;
    }
    .img_15{
        width: 550px; height: 772px; margin-top: 143px;
        background: url(../img/img15.png) no-repeat center top/cover;
    }
    .img_17{
        width: 550px; height: 396px; margin-top: 233px;
        background: url(../img/img17.png) no-repeat center top/cover;
    }
    .img_2{
        width: 550px; height: 726px; margin-top: 287px;
        background: url(../img/img2.png) no-repeat center top/cover;
    }
    .img_4{
        width: 550px; height: 778px; margin-top: 272px;
        background: url(../img/img4.png) no-repeat center top/cover;
    }
    .img_6{
        width: 550px; height: 389px; margin-top: 294px;
        background: url(../img/img6.png) no-repeat center top/cover;
    }
    .img_8{
        width: 550px; height: 778px; margin-top: 377px;
        background: url(../img/img8.png) no-repeat center top/cover;
    }
    .img_10{
        width: 550px; height: 733px; margin-top: 269px;
        background: url(../img/img10.png) no-repeat center top/cover;
    }
    .img_12{
        width: 550px; height: 406px; margin-top: 269px;
        background: url(../img/img12.png) no-repeat center top/cover;
    }
    .img_14{
        width: 550px; height: 444px; margin-top: 281px;
        background: url(../img/img14.png) no-repeat center top/cover;
    }
    .img_16{
        width: 550px; height: 778px; margin-top: 281px;
        background: url(../img/img16.png) no-repeat center top/cover;
    }
}

@media screen and (min-width:501px) and (max-width:1279px){
    #header{ 
        display: flex; justify-content: space-between; width: 100%; height: 100px; background: #000; 
        position: fixed; left: 0; top: 0;
    }
    h1{ margin-left: 100px; }
    h1 img{ width: 58px; height: 58px; }
    #header div{ 
        width: 120px; display: flex; justify-content: space-between;
        margin-right: 100px;
    }
    #header a:first-child img{ width: 60px; height: 60px; margin-top: 20px; }
    #header a:last-child img{ width: 42px; height: 42px; margin-top: 29px; }
    
    /* main 공통 */
    h2{ display: none; }
    /* main_background */
    .main_background{ 
        border: 1px solid; width: 100%; height: 1100px; transition: all 0.3s ease;
        background: url(../img/bg1.png) no-repeat center top/cover;
    }
    /* profile */
    .profile{ 
        background: url(../img/bg2.jpg) no-repeat center center/cover; 
        width: 100%; height: 350px;
    }
    .profile p{ 
        text-align: center; padding-top: 145px;
        font-size: 32px;
        font-family: "Amethysta", serif;
        font-weight: 400;
        font-style: normal;
        color: #374A31;
    }
    .about{ 
        width: 100%; height: 1000px; transition: all 0.3s ease;
        display: flex;
    }
    .about>div:nth-of-type(1){ 
        width: 100%;
        background: url(../img/bg3.png) no-repeat center center/auto 100%;
    }
    .about>div:last-child{ 
        width: 100%;
        background: #000;
    }
    .about>div p{ 
        color: #fff; 
        text-align: center; font-size: 20px; font-weight: bold; line-height: 150%; letter-spacing: -0.05em;
        padding-top: 300px;
    }
    /* work */
    .works{ background: #000; padding-top: 138px; }
    .works>div{ width: 1200px; margin: 0 auto; transition: all 0.3s ease; }
    .works>div>div{ 
        height: 8000px;
    }
    .img_flex{ display: flex; justify-content: space-between; }
    .img_1{ 
        width: 550px; height: 778px;
        background: url(../img/img1.png) no-repeat center top/cover;
    }
    .img_3{
        width: 550px; height: 778px; margin-top: 118px;
        background: url(../img/img3.png) no-repeat center top/cover;
    }
    .img_5{
        width: 550px; height: 728px; margin-top: 255px;
        background: url(../img/img5.png) no-repeat center top/cover;
    }
    .img_7{
        width: 550px; height: 778px; margin-top: 233px;
        background: url(../img/img7.png) no-repeat center top/cover;
    }
    .img_9{
        width: 550px; height: 419px; margin-top: 275px;
        background: url(../img/img9.png) no-repeat center top/cover;
    }
    .img_11{
        width: 550px; height: 338px; margin-top: 372px;
        background: url(../img/img11.png) no-repeat center top/cover;
    }
    .img_13{
        width: 550px; height: 715px; margin-top: 293px;
        background: url(../img/img13.png) no-repeat center top/cover;
    }
    .img_15{
        width: 550px; height: 772px; margin-top: 143px;
        background: url(../img/img15.png) no-repeat center top/cover;
    }
    .img_17{
        width: 550px; height: 396px; margin-top: 233px;
        background: url(../img/img17.png) no-repeat center top/cover;
    }
    .img_2{
        width: 550px; height: 726px; margin-top: 287px;
        background: url(../img/img2.png) no-repeat center top/cover;
    }
    .img_4{
        width: 550px; height: 778px; margin-top: 272px;
        background: url(../img/img4.png) no-repeat center top/cover;
    }
    .img_6{
        width: 550px; height: 389px; margin-top: 294px;
        background: url(../img/img6.png) no-repeat center top/cover;
    }
    .img_8{
        width: 550px; height: 778px; margin-top: 377px;
        background: url(../img/img8.png) no-repeat center top/cover;
    }
    .img_10{
        width: 550px; height: 733px; margin-top: 269px;
        background: url(../img/img10.png) no-repeat center top/cover;
    }
    .img_12{
        width: 550px; height: 406px; margin-top: 269px;
        background: url(../img/img12.png) no-repeat center top/cover;
    }
    .img_14{
        width: 550px; height: 444px; margin-top: 281px;
        background: url(../img/img14.png) no-repeat center top/cover;
    }
    .img_16{
        width: 550px; height: 778px; margin-top: 281px;
        background: url(../img/img16.png) no-repeat center top/cover;
    }
}

@media screen and (max-width:500px){
    #header{ 
        display: flex; justify-content: space-between; width: 100%; height: 100px; background: #000; 
        position: fixed; left: 0; top: 0;
    }
    h1{ margin-left: 20px; }
    h1 img{ width: 40px; height: 40px; }
    #header div{ 
        width: 120px; display: flex; justify-content: space-between;
        margin-right: 20px;
    }
    #header a:first-child img{ width: 60px; height: 60px; margin-top: 20px; }
    #header a:last-child img{ width: 42px; height: 42px; margin-top: 29px; }
    
    /* main 공통 */
    h2{ display: none; }
    /* main_background */
    #main{ margin-top: 100px; }
    .main_background{ 
        width: 100%; height: 283px;  
        background: url(../img/bg1.png) no-repeat center center/500px auto;
    }
    /* profile */
    .profile{ 
        background: url(../img/bg2.jpg) no-repeat center center/cover; 
        width: 100%; height: 100px;
    }
    .profile p{ 
        text-align: center; padding-top: 37px;
        font-size: 16px;
        font-family: "Amethysta", serif;
        font-weight: 400;
        font-style: normal;
        color: #374A31;
    }
    .about{ 
        width: 100%; transition: all 0.3s ease;
    }
    .about>div:nth-of-type(1){ 
        width: 100%; height: 500px;
        background: url(../img/bg3.png) no-repeat center center/500px auto;
    }
    .about>div:last-child{ 
        width: 100%;
        background: #000;
    }
    .about>div p{ 
        color: #fff; 
        text-align: center; font-size: 16px; font-weight: bold; line-height: 150%; letter-spacing: -0.05em;
        padding-top: 80px;
    }
    /* work */
    .works{ height: 9000px; background: #000; padding-top: 80px; }
    .works>a{ 
        display: block; margin: 50px auto; 
        border: 0;
        font-family: "Diphylleia", serif;
        font-weight: 400;
        font-style: normal;
        text-decoration-line: underline;
        text-decoration-color: #fff;
        font-size: 20px;
        background: #000;
        color: #fff;
        text-align: center;
    }
    .works>div{ width: 340px; margin: 0 auto; padding-top: 80px; }
    .img_1{ 
        height: 476px; 
        background: url(../img/img1.png) no-repeat center top/340px auto;
    }
    .img_2{
        height: 453px; margin-top: 120px;
        background: url(../img/img10.png) no-repeat center top/340px auto;
    }
    .img_3{
        height: 448px; margin-top: 120px;
        background: url(../img/img2.png) no-repeat center top/340px auto;
    }
    .img_4{
        height: 209px; margin-top: 120px;
        background: url(../img/img11.png) no-repeat center top/340px auto;
    }
    .img_5{
        height: 480px; margin-top: 120px;
        background: url(../img/img3.png) no-repeat center top/340px auto;
    }
    .img_6{
        height: 250px; margin-top: 120px;
        background: url(../img/img12.png) no-repeat center top/340px auto;
    }
    .img_7{
        height: 480px; margin-top: 120px;
        background: url(../img/img4.png) no-repeat center top/340px auto;
    }
    .img_8{
        height: 441px; margin-top: 120px;
        background: url(../img/img13.png) no-repeat center top/340px auto;
    }
    .img_9{
        height: 450px; margin-top: 120px;
        background: url(../img/img5.png) no-repeat center top/340px auto;
    }
    .img_10{
        height: 274px; margin-top: 120px;
        background: url(../img/img14.png) no-repeat center top/340px auto;
    }
    .img_11{
        height: 240px; margin-top: 120px;
        background: url(../img/img6.png) no-repeat center top/340px auto;
    }
    .img_12{
        height: 477px; margin-top: 120px;
        background: url(../img/img15.png) no-repeat center top/340px auto;
    }
    .img_13{
        height: 480px; margin-top: 120px;
        background: url(../img/img7.png) no-repeat center top/340px auto;
    }
    .img_14{
        height: 480px; margin-top: 120px;
        background: url(../img/img16.png) no-repeat center top/340px auto;
    }
    .img_15{
        height: 480px; margin-top: 120px;
        background: url(../img/img8.png) no-repeat center top/340px auto;
    }
    .img_16{
        height: 244px; margin-top: 120px;
        background: url(../img/img17.png) no-repeat center top/340px auto;
    }
    .img_17{
        height: 258px; margin-top: 120px;
        background: url(../img/img9.png) no-repeat center top/340px auto;
    }
    
}