@font-face {
    font-family: 'OneStoreMobilePop';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

.off_content {
    position: relative;
    justify-items: center;
}

.off_container {
    position: relative;
    display: grid;
    align-items: center;
    padding: 1rem;
}

@media (min-width:1025px) {

    .off_container {
        width: 84vw;
        height: 50rem;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 2fr 1fr;
        border: 4px solid #3c668f;
        border-radius: 1rem;
        margin-bottom: 8rem;
        justify-items: center;
    }

    .off_left {
        grid-template-areas: 
        "img text"
        "img small";
    }

    .off_right {
        grid-template-areas: 
        "text img"
        "small img";
    }

    .off_image {
        width: 30rem;
        aspect-ratio: 3 / 4;
        grid-area: img;
    }

    .off_image > img {
        height: 100%;
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    }

    .off_text {
        width: 85%;
        grid-area: text;
    }

    .off_text > h2 {
        font-family: 'OnestoreMobilePop', sans-serif;
        color: #81a9cc;
        font-size: 2.8rem;
        margin-bottom: 1.8rem;
    }

    .off_text > ul {
        margin-top: 1.4rem;
        padding-left: 1.2rem;
    }

    .off_text > ul li {
        font-family: 'Pretandard', sans-serif;
        font-weight: 400;
        list-style: disc;
        line-height: 180%;
        font-size: 1.4rem;
    }

    .off_small {
        width: 90%;
        display: flex;
        padding: 1rem;
        position: relative;
        justify-content: space-around
    }

    .small_thumb {
        width: 7rem;
        height: 8.8rem;
        grid-area: small;
        overflow: hidden;
        cursor: pointer;
    }

    .small_thumb img {
        width:  100%;
        filter: brightness(60%);
    }

    .small_thumb img:hover {
        filter: brightness(100%);
    }
}

/*태블릿*/
@media (max-width:1024px) {

    .off_container {
        width: 80vw;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 43vh 20vh 18vh;    
        border: 4px solid #3c668f;
        border-radius: 1rem;
        margin-bottom: 8rem;
        justify-items: center;
    }
    
    .off_left,.off_right {
        grid-template-areas: 
        "img"
        "text"
        "small";
    }

    .off_image {
        width: 26rem;
        aspect-ratio: 3 / 4;
        grid-area: img;
    }

    .off_image > img {
        height: 100%;
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    }

    .off_text {
        width: 80%;
        grid-area: text;
    }

    .off_text > h2 {
        font-family: 'OnestoreMobilePop', sans-serif;
        color: #81a9cc;
        font-size: 2.8rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    .off_text > ul {
        margin-top: 1rem;
        padding-left: 1.2rem;
    }

    .off_text > ul li {
        font-family: 'Pretandard', sans-serif;
        font-weight: 400;
        list-style: disc;
        line-height: 160%;
        font-size: 1.4rem;
    }

    .off_small {
        width: 90%;
        display: flex;
        padding: 0.5rem;
        position: relative;
        justify-content: space-around;
    }

    .small_thumb {
        list-style: none;
        width: 8rem;
        height: 9.6rem;
        grid-area: small;
        overflow: hidden;
    }

    .small_thumb img {
        width:  100%;
        object-fit: contain;
        filter: brightness(60%);
    }

    .small_thumb img:active {
        filter: brightness(100%);
    }
}

/*모바일*/
@media (max-width:768px) {

    .off_container {
        width: 80vw;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 36vh 14vh 14vh;    
        border: 4px solid #3c668f;
        border-radius: 1rem;
        margin-bottom: 4rem;
        justify-items: center;
    }
    
    .off_left,.off_right {
        grid-template-areas: 
        "img"
        "text"
        "small";
    }

    .off_image {
        width: 12rem;
        aspect-ratio: 3 / 4;
        grid-area: img;
    }

    .off_image > img {
        height: 100%;
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    }

    .off_text {
        width: 80%;
        grid-area: text;
    }

    .off_text > h2 {
        font-family: 'OnestoreMobilePop', sans-serif;
        color: #81a9cc;
        font-size: 1rem;
        margin-bottom: 0.6rem;
        text-align: center;
    }

    .off_text > ul {
        margin-top: 0.6rem;
        padding-left: 1.2rem;
    }

    .off_text > ul li {
        font-family: 'Pretandard', sans-serif;
        font-weight: 400;
        list-style: disc;
        line-height: 160%;
        font-size: 0.7rem;
    }

    .off_small {
        width: 90%;
        display: flex;
        padding: 0.5rem;
        position: relative;
        justify-content: space-around;
    }

    .small_thumb {
        list-style: none;
        width: 2.8rem;
        height: 3.5rem;
        grid-area: small;
        overflow: hidden;
    }

    .small_thumb img {
        width:  100%;
        object-fit: contain;
        filter: brightness(60%);
    }

    .small_thumb img:active {
        filter: brightness(100%);
    }
}