@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* {margin: 0;padding: 0;box-sizing: border-box;}
html {font-size: 10px; scroll-behavior: smooth;}
body {
    font-family: 'Noto Sans KR', sans-serif;
}


@media (max-width: 1440px) {

    #container .list .item {
        width: calc(33.3333% - 10px);
        margin-bottom: 50px;
    }
}
@media (max-width: 1260px) {
    header {
        position: fixed;
        height: 6rem;
        width: 100%;
        z-index: 100;
        background-color: #F0F0F3;
    }
    #container .list {
        justify-content: space-between;
    }
    #container .list .item {
        width: calc(50% - 10px);
    }
    #container .list .item a img {
        height: 300px;
    }
} 


@media (max-width: 770px) {
    header {
        height: 6rem;
    }
    header nav {
        padding: 0rem 2rem;
    }
    header .btn .box {
        width: 28px;
        height: 3px;
    }
    header .btn.on .box {
        height: 4px;
    }
    header .btn .box:nth-of-type(1) {transform: translateY(-10px);}
    header .btn .box:nth-of-type(2) {transform: translateY(-2px);}
    header .btn .box:nth-of-type(3) {transform: translateY(6px);}
    header nav h1 {
        width: 80px;
        height: 40px;
    }
    header nav .gnb ul {
        width: 100%;
        margin: 0 auto;
        align-items: center;
        padding-left: 0;
    }
    #container .title {
        height: 500px;
    }
    #container .list .item a img {
        height: 250px;
    }
    #container .list .item {
        width: calc(50% - 5px);
        margin-bottom: 50px;
    }
    #container .list .item .desc h3 {
        font-size: 16px;
    }
    #container .list .item .desc p {
        font-size: 12px;
        color: #707070;
    }
    footer {
        padding: 0 10px;
    }
    footer p {
        flex-direction: column;
        line-height: 24px;
    }
    footer p span {
        display: none;
    }
    footer p br {
        display: block;
    }
    
    
}

@media (max-width: 640px) {
    header nav .gnb li a {
        width: 360px;
        height: 80px;
        margin: 0 auto;
        font-size: 40px;
        line-height: 80px;
        border-radius: 30px;
    }
    #container .title {
        height: 400px;
    }
    #container .list {
        justify-content: center;
    }
    #container .list .item {
        width: 100%;
        margin-bottom: 50px;
    }
    #container .title h2 {
        font-size: 60px;
    }
}

@media (max-width: 480px) {
    header nav .gnb li a {
        width: 300px;
    }
    #container .title h2 {
        font-size: 40px;
        line-height: 48px;
    }
}