.wrapper {
    width: 100%;
    max-width: 1920px;
    min-width: 300px;
    margin: clamp(24px, 4vw, 45px) auto;
    text-align: center;
}

.wrapper .logo {
    margin: clamp(28px, 5vw, 50px) auto;
    width: 100%;
}

.wrapper .logo>img {
    display: block;
    width: 30%;
    margin: 0 auto;
    max-width: 300px;
}

.wrapper .logo>img.logotext {
    display: block;
    margin: clamp(28px, 5vw, 50px) auto clamp(36px, 6vw, 70px);
    width: 40%;
    max-width: 640px;
}

.wrapper .logo>div {
    text-align: center;
    border-bottom: 1px solid gray;
    margin-bottom: clamp(48px, 8vw, 100px);
    font-size: 20px;
    padding: 0 30px clamp(48px, 8vw, 100px);
}


















.mainBtn {
    position: relative;
    /* width: fit-content; */
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}

.mainBtn-card {
    position: relative;
    display: block;
    width: calc(100% / 2);
    box-sizing: border-box;
    border-radius: 20px;
}

body.banner-resource-detail .wrapper {
    max-width: 1200px;
    margin-top: 32px;
}

body.banner-resource-detail .wrapper .logo {
    margin: 0 auto 34px;
}

body.banner-resource-detail .wrapper .logo>img:first-child {
    width: 216px;
    max-width: 216px;
}

body.banner-resource-detail .wrapper .logo>img.logotext {
    width: min(520px, 72%);
    margin: 32px auto 46px;
}

body.banner-resource-detail .wrapper .logo>div {
    margin-bottom: 64px;
    padding-bottom: 54px;
}


.mainBtn-card>img {
    width: 100%;
    display: block;
}

.mainBtn-card__title {
    position: absolute;
    top: 5.2%;
    left: 5.2%;
    z-index: 2;
    min-width: 86px;
    padding: 3px 12px 4px 8px;
    border-radius: 6px;
    background: rgba(224, 224, 224, .96);
    box-shadow: 0 0 12px 8px rgba(224, 224, 224, .92);
    color: #414141;
    font-family: "NanumSquare", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.04em;
    text-align: left;
}

.mainBtn-card__action {
    position: absolute;
    right: 5.8%;
    bottom: 4.8%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: linear-gradient(145deg, #245e8e 0%, #123f68 48%, #092741 100%);
    box-shadow:
        0 12px 25px rgba(8, 35, 57, .3),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -5px 12px rgba(3, 21, 35, .22);
    color: #fff;
    text-decoration: none;
    isolation: isolate;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.mainBtn-card__action::before {
    position: absolute;
    inset: 5px;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: inherit;
    content: '';
}

.mainBtn-card__action-label {
    margin: 0 0 5px;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: .18em;
    opacity: .78;
}

.mainBtn-card__action-arrow {
    position: relative;
    display: block;
    width: 27px;
    height: 4px;
    border-radius: 3px;
    background: currentColor;
    transition: transform .22s ease;
}

.mainBtn-card__action-arrow::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 12px;
    border-top: 4px solid currentColor;
    border-right: 4px solid currentColor;
    content: '';
    transform: translateY(-50%) rotate(45deg);
}

.mainBtn-card__action:hover,
.mainBtn-card__action:focus-visible {
    border-color: rgba(255, 255, 255, .85);
    background: linear-gradient(145deg, #2e78ad 0%, #16527f 48%, #0a3151 100%);
    box-shadow:
        0 16px 30px rgba(8, 35, 57, .4),
        0 0 0 7px rgba(31, 105, 157, .13),
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 0 -5px 12px rgba(3, 21, 35, .18);
    outline: none;
    transform: translateY(-3px) scale(1.04);
}

.mainBtn-card__action:hover .mainBtn-card__action-arrow,
.mainBtn-card__action:focus-visible .mainBtn-card__action-arrow {
    transform: translateX(3px);
}

a:focus-visible {
    outline: 4px solid #1557c0;
    outline-offset: 4px;
    border-radius: 4px;
}











.page1Btn {
    position: relative;
    margin: 0 auto;
}

.page1Btn>div.contents {
    border-bottom: 1px solid gray;
    padding: 0 10px clamp(48px, 7vw, 110px);
    margin: 0 0 clamp(48px, 7vw, 110px);
    position: relative;
}

.page1Btn>div.contents:last-child {
    border: none;
}

.page1Btn>div.contents>.txt {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.page1Btn>div.contents>.txt>img {
    width: 60%;
    margin-bottom: 50px;
}

.page1Btn>div.contents>.inner {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.page1Btn>div.contents>.inner>div {
    position: relative;
}

.page1Btn>div.contents>.inner>div a {
    display: block;
    /* background: rgba(0, 0, 0, .3); */
    box-sizing: border-box;
    padding: 0 5px;
    margin: 0 5px;
}

.page1Btn>div.contents>.inner>div a>img {
    display: block;
    width: 100%;
}

.page1Btn>div.contents>.inner>div a.btn {
    margin-top: 10px;
}

.page1Btn>div.contents>.inner>div a.btn>img {
    width: 70%;
    margin: 0 auto;
}



.page1Btn>div.contents.c1>.inner>div {
    width: calc(100% / 5);
}

.page1Btn>div.contents.c1>.inner {
    align-items: flex-start;
}

.banner-legacy-preview {
    position: relative;
    margin: 0 10px;
    padding: 0;
    overflow: hidden;
}

.banner-legacy-preview>img {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
}

.banner-crop-a { aspect-ratio: 360 / 977; }
.banner-crop-b { aspect-ratio: 741 / 221; }
.banner-crop-c { aspect-ratio: 743 / 474; }
.banner-crop-d { aspect-ratio: 744 / 222; }
.banner-crop-e { aspect-ratio: 1054 / 641; }
.banner-crop-level { aspect-ratio: 431 / 610; }
.banner-crop-term { aspect-ratio: 477 / 674; }
.banner-crop-native { aspect-ratio: 558 / 766; }
.banner-crop-background { aspect-ratio: 427 / 321; }
.banner-crop-script { aspect-ratio: 1098 / 612; }
.banner-crop-tg { aspect-ratio: 1094 / 755; }

.banner-crop-a>img,
.banner-crop-level>img,
.banner-crop-term>img,
.banner-crop-background>img {
    bottom: 0;
}

.banner-crop-b>img,
.banner-crop-c>img,
.banner-crop-d>img,
.banner-crop-e>img,
.banner-crop-native>img,
.banner-crop-script>img,
.banner-crop-tg>img {
    top: 0;
}

.page1Btn>div.contents.c2>.inner>div {
    width: calc(100% / 1)
}

.page1Btn>div.contents.c3>.inner>div {
    width: calc(100% / 1)
}

.page1Btn>div.contents.c4>.inner>div {
    width: calc(100% / 1)
}

.page1Btn>div.contents.c5>.inner>div {
    width: calc(100% / 1)
}





.page1Btn>div.contents.c2>.inner>div a.btn,
.page1Btn>div.contents.c3>.inner>div a.btn,
.page1Btn>div.contents.c4>.inner>div a.btn,
.page1Btn>div.contents.c5>.inner>div a.btn {
    width: 30%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
}

.page1Btn>div.contents.c5>.inner>div a.btn {
    bottom: -25px;
}

.page1Btn>div.contents.c2>.inner>div,
.page1Btn>div.contents.c3>.inner>div,
.page1Btn>div.contents.c4>.inner>div,
.page1Btn>div.contents.c5>.inner>div {
    margin-bottom: 30px;
}






































.page2Btn {
    position: relative;
    margin: 0 auto;
}

.page2Btn>div.contents {
    border-bottom: 1px solid gray;
    padding: 0 10px clamp(48px, 7vw, 110px);
    margin: 0 0 clamp(48px, 7vw, 110px);
    position: relative;
}

.page2Btn>div.contents:last-child {
    border: none;
}

.page2Btn>div.contents>.txt {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.page2Btn>div.contents>.txt>img {
    width: 60%;
    margin-bottom: 50px;
}

.page2Btn>div.contents>.inner {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.page2Btn>div.contents>.inner>div {
    position: relative;
}

.page2Btn>div.contents>.inner>div a {
    display: block;
    /* background: rgba(0, 0, 0, .3); */
    box-sizing: border-box;
    padding: 0 5px;
    margin: 0 5px;
}

.page2Btn>div.contents>.inner>div a>img {
    display: block;
    width: 100%;
}

.page2Btn>div.contents>.inner>div a.btn {
    margin-top: 10px;
    outline: none;
}

.page2Btn>div.contents>.inner>div a.btn>img {
    width: 70%;
    margin: 0 auto;
}



.page2Btn>div.contents.c1>.inner>div {
    width: calc(100% / 3)
}

.page2Btn>div.contents.c2>.inner>div {
    width: calc(100% / 2)
}

.page2Btn>div.contents.c3>.inner>div {
    width: calc(100% / 3)
}

.page2Btn>div.contents.c4>.inner>div {
    width: calc((100% / 3) - 40px);
    margin: 0 20px 40px;
}

.page2Btn>div.contents.c5>.inner>div {
    width: calc((100% / 3));
    margin-bottom: 40px;
}

.page2Btn>div.contents.c6>.inner>div {
    width: calc((100% / 2));
    margin-bottom: 80px;
}





.page2Btn>div.contents.c2>.inner>div a.btn,
.page2Btn>div.contents.c3>.inner>div a.btn {
    width: 65%;
    float: right;
    margin-right: 0;
}

.page2Btn>div.contents.c3>.inner>div a.btn {
    width: 90%;
}

.page2Btn>div.contents.c2>.inner>div a.btn>img,
.page2Btn>div.contents.c3>.inner>div a.btn>img {
    margin-right: 10px;
}

.page2Btn>div.contents.c4>.inner>div a.btn {
    position: absolute;
    bottom: -10px;
    right: -23px;
    width: 60%;
}

.page2Btn>div.contents.c5>.inner>div a.btn {
    text-align: right;
}

.page2Btn>div.contents.c5>.inner>div a.btn img {
    width: 45%;
    display: inline-block;
}

.page2Btn>div.contents.c6>.inner>div a.btn img {
    width: 35%;
}

.page2Btn>div.contents.c7>.inner>div a.btn {
    text-align: right;
}

.page2Btn>div.contents.c7>.inner>div a.btn img {
    width: 20%;
    display: inline-block;
    transform: translateY(-50px);
}






.page2Btn>div.contents.c8>.inner>div a.btn {
    text-align: right;
}

.page2Btn>div.contents.c8>.inner>div a.btn img {
    width: 20%;
    display: inline-block;
    transform: translateY(-50px);
}

@media (max-width: 600px) {
    .wrapper .logo>img {
        width: 46%;
    }

    .wrapper .logo>img.logotext,
    .page1Btn>div.contents>.txt>img,
    .page2Btn>div.contents>.txt>img {
        width: 78%;
    }

    .wrapper .logo>div {
        font-size: 16px;
        line-height: 1.6;
        padding-inline: 18px;
    }

    .mainBtn {
        flex-direction: column;
        gap: 12px;
    }

    .mainBtn-card {
        width: 100%;
    }

    .page1Btn>div.contents.c1>.inner>div,
    .page2Btn>div.contents.c1>.inner>div,
    .page2Btn>div.contents.c3>.inner>div,
    .page2Btn>div.contents.c4>.inner>div,
    .page2Btn>div.contents.c5>.inner>div,
    .page2Btn>div.contents.c6>.inner>div {
        width: 50%;
        margin-inline: 0;
    }

    .page2Btn>div.contents.c4>.inner>div {
        margin-bottom: 40px;
    }

    .page2Btn>div.contents.c4>.inner>div a.btn {
        right: 0;
    }

    .page2Btn>div.contents.c6>.inner>div {
        margin-bottom: 48px;
    }
}

@media (max-width: 380px) {
    .page2Btn>div.contents.c4>.inner>div,
    .page2Btn>div.contents.c5>.inner>div {
        width: 100%;
    }
}