@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/categories/maze/maze_bg.png");
    background-size: cover;
    background-position: center
}

.title {
    text-align: center;
    margin-bottom: 40px;
    word-break: keep-all
}

.title h4 {
    font-family: "Noto Sans", "Nanum Myeongjo", sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    margin-bottom: 4px
}

.title h2 {
    font-weight: bold;
    font-size: 48px;
    color: #ffb800;
    margin-bottom: 35px
}

.title h3 {
    font-family: "Noto Sans", "Nanum Myeongjo", sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: #ffb800
}

.slider {
    position: relative;
    width: 100%;
    height: 640px;
    margin-bottom: 35px
}

.slider .slide_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.slider .slide_wrapper .slide {
    position: absolute;
    display: flex;
    height: 100%;
    left: 0;
    top: 0;
    transform: translateX(0);
    transition: transform 1s ease
}

.slider .slide_wrapper .slide .img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #3c3c3c
}

.slider .slide_wrapper .slide.maze {
    width: 200%
}

.slider .slide_wrapper .slide.maze .slide_1 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/maze/slide_1.jpg")
}

.slider .slide_wrapper .slide.maze .slide_2 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/maze/slide_2.jpg")
}

.slider .slide_wrapper .slide.tower {
    width: 300%
}

.slider .slide_wrapper .slide.tower .slide_1 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/towerOfHonor/slide_1.jpg")
}

.slider .slide_wrapper .slide.tower .slide_2 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/towerOfHonor/slide_2.jpg")
}

.slider .slide_wrapper .slide.tower .slide_3 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/towerOfHonor/slide_3.jpg")
}

.slider .slide_wrapper .slide.reputation {
    width: 400%
}

.slider .slide_wrapper .slide.reputation .slide_1 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/reputation/slide_1.jpg")
}

.slider .slide_wrapper .slide.reputation .slide_2 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/reputation/slide_2.jpg")
}

.slider .slide_wrapper .slide.reputation .slide_3 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/reputation/slide_3.jpg")
}

.slider .slide_wrapper .slide.reputation .slide_4 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/reputation/slide_4.jpg")
}

.slider .slide_wrapper .slide.pet {
    width: 2400%
}

.slider .slide_wrapper .slide.pet .img {
    background-size: contain;
    background-repeat: no-repeat
}

.slider .slide_wrapper .slide.pet .slide_1 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_1.webp")
}

.slider .slide_wrapper .slide.pet .slide_2 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_2.webp")
}

.slider .slide_wrapper .slide.pet .slide_3 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_3.webp")
}

.slider .slide_wrapper .slide.pet .slide_4 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_4.webp")
}

.slider .slide_wrapper .slide.pet .slide_5 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_5.webp")
}

.slider .slide_wrapper .slide.pet .slide_6 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_6.webp")
}

.slider .slide_wrapper .slide.pet .slide_7 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_7.webp")
}

.slider .slide_wrapper .slide.pet .slide_8 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_8.webp")
}

.slider .slide_wrapper .slide.pet .slide_9 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_9.webp")
}

.slider .slide_wrapper .slide.pet .slide_10 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_10.webp")
}

.slider .slide_wrapper .slide.pet .slide_11 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_11.webp")
}

.slider .slide_wrapper .slide.pet .slide_12 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_12.webp")
}

.slider .slide_wrapper .slide.pet .slide_13 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_13.webp")
}

.slider .slide_wrapper .slide.pet .slide_14 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_14.webp")
}

.slider .slide_wrapper .slide.pet .slide_15 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_15.webp")
}

.slider .slide_wrapper .slide.pet .slide_16 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_16.webp")
}

.slider .slide_wrapper .slide.pet .slide_17 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_17.webp")
}

.slider .slide_wrapper .slide.pet .slide_18 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_18.webp")
}

.slider .slide_wrapper .slide.pet .slide_19 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_19.webp")
}

.slider .slide_wrapper .slide.pet .slide_20 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_20.webp")
}

.slider .slide_wrapper .slide.pet .slide_21 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_21.webp")
}

.slider .slide_wrapper .slide.pet .slide_22 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_22.webp")
}

.slider .slide_wrapper .slide.pet .slide_23 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_23.webp")
}

.slider .slide_wrapper .slide.pet .slide_24 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/pet/slide_24.webp")
}

.slider .slide_wrapper .slide.wings {
    width: 400%
}

.slider .slide_wrapper .slide.wings .slide_1 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/wings/slide_1.png")
}

.slider .slide_wrapper .slide.wings .slide_2 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/wings/slide_2.png")
}

.slider .slide_wrapper .slide.wings .slide_3 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/wings/slide_3.png")
}

.slider .slide_wrapper .slide.wings .slide_4 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/wings/slide_4.png")
}

.slider .slide_wrapper .slide.itemCollection {
    width: 200%
}

.slider .slide_wrapper .slide.itemCollection .slide_1 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/itemCollection/slide_1.png")
}

.slider .slide_wrapper .slide.itemCollection .slide_2 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/itemCollection/slide_2.png")
}

.slider .slide_wrapper .slide.fortressBattle {
    width: 100%
}

.slider .slide_wrapper .slide.fortressBattle .slide_1 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/fortressBattle/slide_1.jpg")
}

.slider .slide_wrapper .slide.guildTournament {
    width: 200%
}

.slider .slide_wrapper .slide.guildTournament .slide_1 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/guildTournament/slide_1.jpg")
}

.slider .slide_wrapper .slide.guildTournament .slide_2 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/guildTournament/slide_2.jpg")
}

.slider .slide_wrapper .slide.siegeWarfare {
    width: 100%
}

.slider .slide_wrapper .slide.siegeWarfare .slide_1 {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/categories/siegeWarfare/slide_1.webp")
}

.slider .left_arrow,
.slider .right_arrow {
    position: absolute;
    top: 50%;
    width: 96px;
    height: 96px;
    cursor: pointer
}

.slider .left_arrow {
    left: 0;
    transform: translate(-50%, -50%)
}

.slider .right_arrow {
    right: 0;
    transform: translate(50%, -50%)
}

.text {
    color: #fff;
    word-break: keep-all
}

.text h5 {
    font-family: "Noto Sans", "Nanum Myeongjo", sans-serif;
    font-weight: 400;
    font-size: 28px;
    margin-bottom: 40px;
    line-height: 40px
}

.text p {
    font-size: 18px;
    line-height: 28px
}

@media(max-width: 1220px) {
    .text {
        text-align: center
    }
}

@media(max-width: 767px) {
    .slider {
        height: 320px
    }
}