@import"https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";
@import"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css";

.bg {
    position: relative;
    width: 100%;
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/category/category_bg.png");
    background-size: cover;
    background-position: center
}

.wrap {
    display: flex;
    flex-wrap: wrap;
}

.content {
    position: relative;
    width: 50%;
    height: 320px;
    overflow: hidden;
    margin-bottom: 20px
}

.content a {
    width: 100%;
    height: 100%;
    display: block
}

.content.w-33 {
    width: 33.3%;
    height: 246px
}

.content .pd-r {
    width: 100%;
    height: 100%;
    padding-right: 10px
}

.content .pd-l {
    width: 100%;
    height: 100%;
    padding-left: 10px
}

.content .title {
    position: absolute;
    left: 24px;
    bottom: 24px;
    color: #fff
}

.content .title h2 {
    font-family: "Noto Sans", "Nanum Myeongjo", sans-serif;
    font-weight: 400;
    margin-bottom: 4px
}

.content .img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center
}

.content .img.maze {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/category/maze.png")
}

.content .img.towerOfHonor {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/category/towerOfHonor.png")
}

.content .img.reputation {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/category/reputation.png")
}

.content .img.pet {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/category/pet.png")
}

.content .img.wings {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/category/wings.png")
}

.content .img.itemCollection {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/category/itemCollection.png")
}

.content .img.fortressBattle {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/category/fortressBattle.png")
}

.content .img.guildTournament {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/category/guildTournament.png")
}

.content .img.siegeWarfare {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/category/siegeWarfare.png")
}

@media(max-width: 1220px) {
    .content {
        width: 100% !important;
        height: 240px !important
    }

    .content .pd-r,
    .content .pd-l {
        padding: 0
    }
}