/*******************************************************
 * 슬라이더 너비 미디어쿼리
 */
@media screen and (max-width: 1360px) {
    .slider {
        height: 450px;
    }
}
@media screen and (max-width: 1200px) {
    .slider {
        height: 400px;
    }
}
@media screen and (max-width: 1080px) {
    .slider {
        height: 350px;
    }
}
@media screen and (max-width: 950px) {
    .slider {
        height: 300px;
    }
}

/*******************************************************
 * 미디어쿼리
 */

@media screen and (max-width: 1080px) {
    .slider-navi {
        font-size: 1rem;
        line-height: 25px;
        height: 25px;
        bottom: 15%;
    }
    .slider-navi > span {
        width: 25px;
        height: 25px;
    }
    .menus > li {
        padding: 20px 10%;
    }
    .notice {
        margin-top: 180px;
    }
}
@media screen and (max-width: 950px) {
    .menus > li {
        padding: 15px 10%;
    }
    .menus > li > img {
        width: 70px;
        height: 70px;
    }
    .notice {
        margin-top: 170px;
    }
}

/*******************************************************
 * 배너
 */
.bn {
    grid: "franchise ytb story"
            "store ytb story" / 2fr 1fr 1fr;
}
.bn-franchise::after {
    top: calc(50% - 33px);
    right: 7%;
    width: 66px;
    height: 66px;
}
.bn-store::after {
    top: calc(50% - 33px);
    right: 7%;
    width: 66px;
    height: 66px;
}
.bn-franchise > li:nth-of-type(2),
.bn-store > li:nth-of-type(2) {
    font-size: 0.9rem;
}
.bn > ul:nth-of-type(1),
.bn > ul:nth-of-type(2) {
    padding: 4% 7%;
    padding-right: calc(7% + 76px);
}
.bn > ul:nth-of-type(3),
.bn > ul:nth-of-type(4) {
    padding: 8% 15%;
}
.bn > ul > li:nth-child(1) {
    font-size: 1.5rem;
}
.bn-ytb > li:nth-of-type(2) > iframe {
    height: 114px;
}
.bn-ytb > li:nth-of-type(1)::after,
.bn-story > li:nth-of-type(1)::after {
    font-size: 1.5rem;
}
.bn-ytb > li:nth-of-type(3),
.bn-story > li:nth-of-type(2) {
    font-size: 0.9rem;
}
.bn-story > li {
    left: 15%;
    right: 15%;
}
.bn-story > li:nth-of-type(1) {
    top: 25px;
}
.bn-story > li:nth-of-type(2) {
    top: 65px;
    line-height: 1.5rem;
}

@media screen and (max-width: 1150px) {
    
    .bn > ul > li:nth-child(1) {
        font-size: 1.2rem;
    }
    .bn-ytb > li:nth-of-type(1)::after,
    .bn-story > li:nth-of-type(1)::after {
        font-size: 1.2rem;
    }
}
@media screen and (max-width: 1000px) {
    .bn {
        grid: "franchise ytb story"
                "store ytb story" / 1.5fr 0.8fr 0.8fr;
        gap: 10px;
    }
    .bn-franchise > li:nth-of-type(2),
    .bn-store > li:nth-of-type(2) {
        font-size: 0.8rem;
    }
    .bn > ul:nth-of-type(3),
    .bn > ul:nth-of-type(4) {
        padding: 8% 10%;
    }
    .bn-ytb > li:nth-of-type(2) > iframe {
        height: 100px;
    }
    .bn-ytb > li:nth-of-type(3),
    .bn-story > li:nth-of-type(2) {
        font-size: 0.8rem;
    }
    .bn-story > li {
        left: 10%;
        right: 10%;
    }
}
@media screen and (max-width: 840px) {
    .bn > ul > li:nth-child(1) {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    .bn > ul:nth-of-type(1),
    .bn > ul:nth-of-type(2) {
        padding: 5% 7%;
        padding-right: calc(7% + 56px);
    }
    .bn-ytb > li:nth-of-type(1)::after,
    .bn-story > li:nth-of-type(1)::after {
        font-size: 1rem;
    }
    .bn-franchise::after {
        top: calc(50% - 23px);
        right: 7%;
        width: 46px;
        height: 46px;
    }
    .bn-store::after {
        top: calc(50% - 23px);
        right: 7%;
        width: 46px;
        height: 46px;
    }
}