@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/character/character_bg.png");
    background-size: cover;
    background-position: center
}

.wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap
}

.content {
    position: relative;
    width: 50%;
    height: 360px
}

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

.content a .off {
    display: none
}

.content a:hover .on {
    display: none
}

.content a:hover .off {
    display: block
}

.content .on {
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center
}

.content .on.show .img img {
    opacity: 1
}

.content .on.show .text-img {
    bottom: 30px;
    opacity: 1
}

.content .on .img {
    position: relative;
    width: 100%;
    height: 100%
}

.content .on .img img {
    position: absolute;
    right: 20px;
    bottom: 0;
    opacity: 0;
    transition: opacity .7s ease-in
}

.content .on .text-img {
    position: absolute;
    left: 30px;
    bottom: 10px;
    width: 100px;
    height: 60px;
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all .7s ease-in
}

.content .off {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px 30px;
    background-color: #966c00
}

.content .off .text-img {
    width: 100px;
    height: 60px;
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat
}

.content .off .text {
    word-break: keep-all;
    margin-top: 10px;
    color: #fff
}

.content .off .text h5 {
    font-family: "Noto Sans", "Nanum Myeongjo", sans-serif;
    font-weight: 400;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px
}

.content.sword .on {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/sword_bg.png")
}

.content.sword .img img {
    width: 70%;
    transition-delay: .2s
}

.content.sword .text-img {
    transition-delay: 0s;
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/sword_text.png")
}

.content.fist .on {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/fist_bg.png")
}

.content.fist .img img {
    width: 60%;
    transition-delay: .3s
}

.content.fist .text-img {
    transition-delay: .3s;
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/fist_text.png")
}

.content.kumdo .on {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/kumdo_bg.png")
}

.content.kumdo .img img {
    width: 60%;
    transition-delay: .4s
}

.content.kumdo .text-img {
    transition-delay: .4s;
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/kumdo_text.png")
}

.content.spear .on {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/spear_bg.png")
}

.content.spear .img img {
    width: 60%;
    transition-delay: .5s
}

.content.spear .text-img {
    transition-delay: .5s;
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/spear_text.png")
}

.content.bow .on {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/bow_bg.png")
}

.content.bow .img img {
    width: 60%;
    transition-delay: .6s
}

.content.bow .text-img {
    transition-delay: .6s;
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/bow_text.png")
}

.content.dart .on {
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/dart_bg.png")
}

.content.dart .img img {
    width: 60%;
    transition-delay: .7s
}

.content.dart .text-img {
    transition-delay: .7s;
    background-image: url("https://resources.mookhonclassic.com/byWeb/images_guide/character/dart_text.png")
}

@media(max-width: 1220px) {
    .content {
        width: 100%
    }

    .img img {
        width: auto !important;
        height: 90%
    }
}

@media(max-width: 767px) {
    .content {
        height: 250px
    }

    .off {
        padding: 30px !important
    }
}