/* ---------------------------------------
    메인 - 메인배너
--------------------------------------- */
.main .main-banner {
    height: 440px;
}
.main-banner .inner-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.main-banner .main-banner-bg {
    height: 100%;
}
.main-banner .title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 25px;
}
.main-banner .title-area .date {
    font-size: 33px;
    font-weight: 800;
}
.main-banner .title-area .title {
    font-size: 90px;
    font-weight: 800;
}

/* ---------------------------------------
    봄.ver 일러스트 이미지 별 커스텀
--------------------------------------- */
/* 봄 - 배너 */
.spring .main-banner {
    background: url("/webzine/images/main_banner/main_banner_spring.jpg") center 50% no-repeat;
}
.spring .main .main-banner .title-area {
    color: #fff;
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.34);
}
/* ---------------------------------------
    여름.ver 일러스트 이미지 별 커스텀
--------------------------------------- */
/* 여름 - 배너 */
.summer .main-banner {
    background: url("/webzine/images/main_banner/main_banner_summer.jpg") center bottom no-repeat;
}
.summer .main .main-banner .title-area {
    color: #ffa251;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 43%);
}
.summer #header .header-area .gnb ul li a {
    color: #fff;
    text-shadow: 1px 1px 1px #00000052;
}
.summer #header .header-area .left-area .select-box {
    background-color: #ffffff61;
}
.summer #header .header-area .gnb ul li:hover {
    text-decoration-color: #fff;
}
/* ---------------------------------------
    가을.ver 일러스트 이미지 별 커스텀
--------------------------------------- */
/* 가을 - 배너 */
.autumn .main-banner {
    background: url("/webzine/images/main_banner/main_banner_autumn.jpg") center 50% no-repeat;
}
.autumn .main .main-banner .title-area {
    color: #9d703b;
}
/* 가을 - 헤더 */
.autumn #header .header-area .gnb ul li a {
    color: #fff;
}
.autumn #header .header-area .left-area,
.autumn #header .header-area .left-area a {
    color: #fff;
}
.autumn #header .header-area .left-area .select-box {
    border: 2px solid #fff;
    color: #fff;
    background: url(/webzine/images/chevron-down_w.svg) 94% center no-repeat;
}
.autumn #header .header-area .gnb ul li:hover {
    text-decoration-color: #fff;
}

/* ---------------------------------------
    겨울.ver 일러스트 이미지 별 커스텀
--------------------------------------- */
/* 겨울 - 배너 */
.winter .main-banner {
    background: url("/webzine/images/main_banner/main_banner_winter.jpg") center 100% no-repeat;
}
.winter .main .main-banner .title-area {
    color: #df0707;
    text-shadow: 0px 0px 3px rgb(255 255 255 / 34%);
}
.winter .sub .main-banner {
    background-position: 50% 100%;
    height: 320px;
}
.winter #header .header-area .gnb ul li a {
    color: #ff0000;
    text-shadow: 1px 1px 1px rgb(255 255 255 / 34%);
}
.winter #header .header-area .left-area .select-box {
    background-color: #ffffff61;
}
.winter #header .header-area .gnb ul li:hover {
    text-decoration-color: #df0707;
}
/* ---------------------------------------
    서브 배너
--------------------------------------- */
.sub .main-banner {
    background-position: 50% 30%;
    height: 320px;
}
/*.sub .main-banner .main-banner-bg {*/
/*    background-color: rgba(51, 51, 51, 0.4);*/
/*}*/

/*반응형*/
@media screen and (max-width: 960px) {
    .main .main-banner {
        height: 270px;
    }
    .main .main-banner .title-area .title {
        font-size: 40px;
    }
    .main .main-banner .title-area .date {
        font-size: 25px;
    }
}

@media screen and (max-width: 560px) {
    .main .main-banner {
        height: 240px;
    }
    .main .main-banner .title-area .title {
        font-size: 34px;
    }
    .main .main-banner .title-area .date {
        font-size: 20px;
    }
    .sub .main-banner {
        height: 200px;
        background-position: 50% 50%;
    }

    /*겨울*/
    .winter .sub .main-banner {
        background-position: 13% 65%;
    }
}