@charset "utf-8";

/*////////////// 반응형은 챕터별로 바로 하단에 배치 //////////////*/

/* 비주얼  */
#visual {
    position: relative;
    justify-content: space-between;
    align-items: flex-end;
}

#visual:before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: url(../../images/bzent/main/main_bg_02.png) top center no-repeat;
    left: -150px;
    bottom: 100px;
    z-index: -1;
}

#visual::after {
    content: "";
    position: absolute;
    width: 448px;
    height: 448px;
    background: url(../../images/bzent/main/main_bg_01.png) top center no-repeat;
    right: -200px;
    bottom: 100px;
    z-index: -1;
}

@media screen and (max-width: 1440px) {
    #visual:before {
        width: 450px;
        bottom: 150px;
    }

    #visual::after {
        width: 600px;
        right: -250px;
        bottom: 550px;
    }
}

@media screen and (max-width: 640px) {
    #visual:before {
        background-size: 70%;
    }

    #visual::after {
        background-size: 60%;
    }
}

@media screen and (max-width: 400px) {
    #visual:before {
        background-size: 50%;
        left: -400px;
        height: 300px;
        bottom: 150px;
    }

    #visual::after {
        background-size: 40%;
        right: -660px;
        height: 400px;
        bottom: 150px;
    }
}

/* 비주얼 - 상단 (슬로건) */
.visual_top {
    width: 100%;
    display: flex;
    justify-content: center;
}

.visual_slogan {
    color: #000;
    text-align: center;
    font-family: "GmarketSans";
    font-size: 3.4375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 145.9%;
    /* 5.01531rem */
    letter-spacing: -0.17188rem;
    /* 240902
    padding-top: 1em;
    */
    padding-top: 0.5em;
    width: 100%;
}

.visual_slogan span {
    display: block;
    color: #001F6F;
    text-align: center;
    font-family: "GmarketSans";
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 145.9%;
    /* 2.73563rem */
    letter-spacing: -0.09375rem;
}

@media screen and (max-width: 1200px) {
    .visual_top {
        flex-direction: column;
    }

    .visual_slogan {
        width: 70%;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .visual_slogan {
        width: 90%;
        font-size: 3.2rem;
        line-height: 1.3;
    }

    .visual_slogan span {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 425px) {
    .visual_slogan {
        width: 100%;
        font-size: 2.5rem;
    }

    .visual_slogan span {
        font-size: 1.25rem;
    }
}

/*  비주얼 - 하단 (배너/로그인) */
.visual_cnt {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
}

.visual_cnt:before {
    content: "";
    position: absolute;
    width: 155%;
    height: 265px;
    bottom: -60px;
    left: -600px;
    border-radius: 0rem 20.0625rem 5.25rem 0rem;
    background: linear-gradient(90deg, rgba(222, 231, 239, 0.70)0%, rgba(238, 242, 249, 0.70)100%);
    z-index: -1;
}

/* 비주얼 - 하단 (배너) */
.visual_banner_wrap {
    width: 70%;
}

/* 페이지네이션 */
.visual_banner_wrap .swiper-pagination {
    text-align: left !important;
    position: relative !important;
}

.visual_banner_wrap .swiper-pagination-bullet-active {
    background-color: #00265F !important;
}

/* 배너 이미지 */
.visual_banner {
    width: 100%;
    height: 279px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 3px 4px 27px 0px rgba(33, 69, 139, 0.12);
}

.visual_banner .swiper {
    height: 100%;
}

.visual_banner .swiper-slide a {
    display: block;
    width: 100%;
    /* height: 100%; */
    /* 240919 */
    height: 100%;
    text-align: center;
    align-content: center;
}

.visual_banner .swiper-slide a img {
    /* 240919
    width: 100%;
    */
}

/* 페이징 */
.banner_tit_wrap {
    /* 241111
    background-color: #34343491;
    */
    background-color: #000e24;
    padding: 6px 20px 6px 26px;
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    z-index: 99;
    color: #fff;
}

.banner_ctrl {
    gap: 10px;
}

@media screen and (max-width: 1200px) {
    .visual_banner {
        height: auto;
    }

    .visual_banner .swiper-slide img {
        max-width: 100% !important;
        max-height: 100% !important;
    }
}

@media screen and (max-width: 1100px) {
    .visual_banner {
        border-radius: 30px;
    }
}

@media screen and (max-width: 768px) {
    .visual_cnt:before {
        width: 180%;
    }

    .banner_tit_wrap {
        padding: 4px 8px 4px 12px;
    }

    .banner_ctrl {
        gap: 5px;
    }
}

@media screen and (max-width: 580px) {
    .visual_cnt:before {
        width: 200%;
        height: 240px;
        bottom: -30px;
    }

    .visual_banner {
        padding-bottom: 30px;
        border-radius: 20px;
    }

    .banner_tit_wrap {
        width: 100%;
        background-color: #00265F;
    }

    .banner_ctrl {
        gap: 5px;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 500px) {
    .visual_cnt:before {
        width: 240%;
    }
}

@media screen and (max-width: 380px) {
    .visual_cnt:before {
        width: 270%;
    }
}


/* 비주얼 하단 - 로그인 */
.login_wrap {
    width: 27%;
    height: 279px;
    border-radius: 1.875rem;
    border: 3px #FFF;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 3px 4px 27px 0px rgba(33, 69, 139, 0.12);
    backdrop-filter: blur(9px);
    padding: 2.5em 2em;
    box-sizing: border-box;
}

.login_inner .login_tit h2 {
    color: #00265F;
    text-align: center;
    font-family: "GmarketSans";
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 140.993%;
    /* 2.64363rem */
    letter-spacing: -0.00938rem;
    margin-bottom: 5px;
}

.login_inner .login_bottom {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    position: relative;
}

/* 비주얼 하단 - 로그인 > 아이디/비밀번호 찾기 버튼 */
.login_inner .login_bottom .login_left .idpwSearch {
    margin-bottom: 5px;
}

.login_inner .login_bottom .login_left .idpwSearch a {
    color: #6E6D75;
    font-family: "GmarketSans";
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 142.9%;
    /* 1.25038rem */
    letter-spacing: -0.04375rem;
    vertical-align: bottom;
    transition: all 0.3s;
}

.login_inner .login_bottom .login_left .idpwSearch:hover a {
    color: #000e24;
}

/* 비주얼 하단 - 로그인 > 로그인/회원가입 버튼 */
.login_inner .login_bottom .login_left .login_btnSet {
    display: flex;
    flex-direction: column;
    gap: 0.5em 0;
}

.login_inner .login_bottom .login_left .login_btnSet button {
    text-align: center;
    font-family: "GmarketSans";
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.04375rem;
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    color: #fff;
    border: 1px solid #00265F;
    background: #00265F;
    width: 100%;
}

.login_inner .login_bottom .login_left .login_btnSet button.btn_signup:hover,
.login_inner .login_bottom .login_left .login_btnSet button.btn_login:hover {
    border: 1px solid #000e24;
    background: #000e24;
}

/* 비주얼 하단 - 로그인 > 자물쇠 이미지 */
.login_inner .login_bottom .login_right {
    width: 170px;
    height: 170px;
    background: url(../../images/bzent/main/ico_lock.png) center center no-repeat;
    position: absolute;
    right: -30px;
    top: -17px;
}


@media screen and (max-width: 1440px) {
    .visual_cnt {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 비주얼 하단 - 로그인 */
    .login_wrap {
        width: 60%;
        height: auto;
        order: 1;
        margin-bottom: 30px;
        margin-top: 50px;
        border: 3px #FFF;
        background: #FFF;
        box-shadow: 3px 4px 27px 0px rgba(55, 56, 57, 0.24);
        backdrop-filter: blur(9.852630615234375px);
        padding: 2.5em 2em;
    }

    .login_inner .login_tit h2 {
        text-align: left;
    }

    .login_inner .login_bottom .login_left .login_btnSet {
        flex-direction: row;
        gap: 10px;
    }

    .login_inner .login_bottom .login_left .login_btnSet button {
        width: 200px;
    }

    .login_inner .login_bottom .login_right {
        top: -70px;
        right: -30px;
    }

    .visual_banner_wrap {
        width: 100%;
        order: 2;
    }
}

@media screen and (max-width: 1200px) {

    /* 비주얼 하단 - 로그인 */
    .login_wrap {
        width: 70%;
    }
}

@media screen and (max-width: 960px) {

    /* 비주얼 하단 - 로그인 */
    .login_wrap {
        width: 80%;
    }
}

@media screen and (max-width: 860px) {

    /* 비주얼 하단 - 로그인 */
    .login_wrap {
        width: 60%;
    }

    .login_inner .login_tit h2 {
        text-align: center;
    }

    .login_inner .login_bottom .login_left .login_btnSet {
        flex-direction: column;
    }

    .login_inner .login_bottom .login_left .login_btnSet button {
        width: 100%;
    }

    .login_inner .login_bottom .login_right {
        background-size: 90%;
        top: -10px;
        right: -25px;
    }

    .login_inner .login_bottom .login_left .login_btnSet button {
        width: 155px;
    }
}


@media screen and (max-width: 640px) {

    /* 비주얼 하단 - 로그인 */
    .login_wrap {
        width: 100%;
    }

    .login_inner .login_tit h2 {
        text-align: left;
    }

    .login_inner .login_bottom .login_left .login_btnSet {
        flex-direction: row;
        gap: 10px;
    }

    .login_inner .login_bottom .login_left .login_btnSet button {
        width: 160px;
    }

    .login_inner .login_bottom .login_right {
        width: 150px;
        height: 150px;
        background-size: 90%;
        right: -35px;
        top: -50px;
    }
}

@media screen and (max-width: 570px) {

    /* 비주얼 하단 - 로그인 */
    .login_inner .login_tit h2 {
        text-align: center;
    }

    .login_inner .login_bottom .login_left .login_btnSet {
        flex-direction: column;
    }

    .login_inner .login_bottom .login_left .login_btnSet button {
        width: 100%;
    }

    .login_inner .login_bottom .login_right {
        width: 170px;
        height: 170px;
        background-size: 90%;
        top: -10px;
        right: -25px;
    }

    .login_inner .login_bottom .login_left .login_btnSet button {
        width: 180px;
    }
}

@media screen and (max-width: 480px) {

    /* 비주얼 하단 - 로그인 */
    .login_inner .login_bottom .login_right {
        top: -15px;
    }

    .login_inner .login_bottom .login_left .login_btnSet button {
        width: 160px;
    }
}

@media screen and (max-width: 400px) {

    /* 비주얼 하단 - 로그인 */
    .login_inner .login_bottom .login_left .login_btnSet button {
        width: 130px;
    }
}


@media screen and (max-width: 360px) {
    .login_inner .login_bottom .login_right {
        background-size: 80%;
        top: -10px;
        right: -40px;
    }
}

@media screen and (max-width: 340px) {
    .login_wrap {
        padding: 2em 1.5em;
    }

    .login_inner .login_bottom {
        margin-top: 20px;
    }

    .login_inner .login_bottom .login_right {
        background-size: 65%;
        top: -2px;
        right: -50px;
    }

    .login_inner .login_bottom .login_left .login_btnSet button {
        width: 120px;
    }
}


/* 비주얼 하단 - 로그인 후(after_login) 로그인 영역 삭제, 배너 영역 확대 */
.after_login .visual_banner_wrap {
    width: 100%;
}

.after_login .login_wrap {
    display: none;
}

/* 비주얼 하단 - 로그인 후 배너 이미지 변경 */
.visual_banner_swiper .swiper-slide a img.default.on {
    display: none;
}

.visual_banner_swiper .swiper-slide a img.long {
    display: none;
}

.visual_banner_swiper .swiper-slide a img.long.on {
    display: block;
}


/* 콘텐츠 메인 타이틀 */
.cts_tit {
    color: #222222;
    font-weight: 700;
    font-size: 2.25rem;
}

/* cts01 바로가기 */
.direct_wrap {
    margin-top: 120px;
}

.direct_wrap .item {
    width: 31%;
    height: 470px;
    border-radius: 1.875rem 5rem 1.875rem 3.125rem;
    border: 1px solid #D3D9DB;
    background-color: #fff;
    padding: 4em 3em;
    box-sizing: border-box;
    transition: all 0.3s;
}

.direct_wrap .item:hover {
    border: 1px solid #00265F;
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.07);
}

.direct_wrap .item a {
    height: 100%;
}

.direct_wrap .item ul {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

/* 바로가기 - 타이틀 */
.direct_wrap .item ul .direct_tit {
    color: #222;
    text-align: center;
    font-family: "GmarketSans";
    font-size: 1.675rem;
    font-weight: 700;
    letter-spacing: -0.05625rem;
    position: relative;
    z-index: 99;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

/* 바로가기 - 호버 시 형광펜 효과 */
.direct_wrap .item ul .direct_tit:before {
    content: "";
    height: 20px;
    background: #fdff75;
    position: absolute;
    left: 0;
    z-index: -1;
    width: 0;
    transition: all 0.3s;
}

/* 바로가기 - 형광펜 길이 조절 */
.direct_wrap .item:hover .direct_tit:before {
    width: 100%;
}

.direct_wrap .item ul .direct_tit:after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 8px;
    background: #DADADA;
    position: absolute;
    left: -15px;
    top: -5px;
}

.direct_wrap .item:hover .direct_tit:after {
    background: #00265F;
}

/* 바로가기 - 설명 텍스트 */
.direct_wrap .item ul .direct_txt {
    height: 30%;
    color: #222;
    text-align: center;
    font-family: "GmarketSans";
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 150%;
    /* 2.25rem */
    letter-spacing: -0.045rem;
    background: #f8f9f9;
    padding: 1.5em 1em;
    border-radius: 20px;
}

.direct_wrap .item:hover .direct_txt {
    background: #f2f5fa;
}

/* 바로가기 - 바로가기 버튼 */
.direct_wrap .item ul .direct_btn {
    width: 200px;
    height: 50px;
    border-radius: 30px;
    border: 1px solid #b6babc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 2em;
    color: #343229;
    font-family: Pretendard;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.6875rem;
    /* 150% */
    transition: all 0.3s;
}

.direct_wrap .item:hover ul .direct_btn {
    border: 1px solid #00265F;
    color: #00265F;
    padding: 0 1.5em 0 2em;
}

@media screen and (max-width: 1434px) {
    .direct_wrap .item:hover .direct_tit:before {
        width: 0;
    }
}

@media screen and (max-width: 1420px) {
    .direct_wrap .item {
        padding: 3.5em 3em;
    }

    .direct_wrap .item ul .direct_tit {
        height: 15%;
    }
}

@media screen and (max-width: 1040px) {
    .direct_wrap .item {
        padding: 3em 2em;
    }
}

@media screen and (max-width: 930px) {
    .direct_wrap>ul {
        gap: 1.5em 0;
    }

    .direct_wrap .item {
        width: 100%;
        padding: 2.5em 4em;
        height: 300px;
    }

    .direct_wrap .item ul .direct_tit {
        height: auto;
    }

    .direct_wrap .item:hover .direct_tit:before {
        width: 100%;
    }

    .direct_wrap .item ul .direct_txt {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 480px) {
    .direct_wrap {
        margin-top: 60px;
    }
}

@media screen and (max-width: 420px) {
    .direct_wrap .item:hover .direct_tit:before {
        width: 0;
    }
}

@media screen and (max-width: 360px) {
    .direct_wrap .item ul .direct_txt {
        /* display: none; */
        padding: 0.5em;
    }

    .direct_wrap .item {
        height: 270px;
        padding: 2.5em;
    }
}

/* cts02 공지사항/FAQ */
.notice_wrap {
    box-sizing: border-box;
    position: relative;
}

.cardSt_inner {
    position: relative;
}

/* 공지사항 탭 타이틀 */
.notice_tit {
    margin-bottom: 1em;
}

.notice_tit_wrap {
    justify-content: flex-end;
    gap: 2em;
}

.notice_tit_wrap li {
    position: relative;
}

.notice_tit_wrap li a {
    color: #808080;
    cursor: pointer;
    font-size: 2.8rem;
    font-weight: 500;
}

.notice_tit_wrap li.on a {
    color: #00265F;
    font-weight: 700;
}

.notice_tit_wrap li:not(li:last-child):after{
    content: '';
    position: absolute;
    width: 1px;
    height: 16px;
    background: #ccc;
    top: 45%;
    right: -16px;
}

@media screen and (max-width: 640px) {
    .notice_tit_wrap li a {
        font-size: 2.2rem;
    }

    .cts_tit {
        font-size: 2.2rem;
    }
}

/* 공지사항 - 타이틀 */
.cardSt .tit_cnt {
    width: 420px;
    height: 435px;
    background: #00265F;
    border-radius: 30px;
    padding: 5em 3.5em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.cardSt .tit_cnt.on {
    display: block;
}

.cardSt .tit_cnt .cts_tit {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 20px;
}

/* 공지사항 - 타이틀 > 목록 전체보기 버튼 */
.cardSt .tit_cnt .list_all_btn a {
    display: block;
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff;
}

.cardSt .tit_cnt .list_all_btn a span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../../images/bzent/main/ico_allList.png) center center no-repeat;
    vertical-align: text-top;
    margin-right: 5px;
}

.cardSt .tit_cnt .list_all_btn a .fa-arrow-right-long {
    display: inline-block;
    margin-left: 5px;
    transition: all 0.3s;
}

.cardSt .tit_cnt .list_all_btn:hover a .fa-arrow-right-long {
    margin-left: 10px;
}

/* 공지사항 - 타이틀 > 페이지네이션 */
.cardSt .swiper-pagination {
    width: 35% !important;
    top: 270px !important;
    left: 3.5em !important;
    background: rgba(255, 255, 255, 0.2);
}

.cardSt .swiper-pagination-progressbar-fill {
    background: #fff !important;
}

/* 공지사항 - 타이틀 > 리스트 컨트롤 버튼 */
.notice_ctrl {
    width: 120px;
}

.notice_ctrl .btn button {
    opacity: 0.5;
}

.notice_ctrl .btn button:hover {
    opacity: 1;
}

/* 공지사항 - 리스트 */
.cardSt .notice_cts {
    position: absolute;
    bottom: 50%;
    left: 280px;
    transform: translateY(58%);
    width: 100vw;
}

.notice_swiper1,
.notice_swiper2,
.notice_swiper3,
.notice_swiper4 {
    height: 435px;
    padding: 80px 0 !important;
    box-sizing: border-box;
}

.notice_swiper1 .swiper-slide,
.notice_swiper2 .swiper-slide,
.notice_swiper3 .swiper-slide, 
.notice_swiper4 .swiper-slide {
    width: 310px;
    transition: all 0.3s !important;
    /* margin-right: 50px; */
}

.notice_swiper1 .swiper-slide:hover,
.notice_swiper2 .swiper-slide:hover,
.notice_swiper3 .swiper-slide:hover,
.notice_swiper4 .swiper-slide:hover {
    bottom: 30px;
}

.notice_swiper1 .swiper-slide:hover .notice_list,
.notice_swiper2 .swiper-slide:hover .notice_list,
.notice_swiper3 .swiper-slide:hover .notice_list,
.notice_swiper4 .swiper-slide:hover .notice_list {
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.15);
}

.notice_list {
    position: relative;
    height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    width: 310px;
    padding: 2.5em;
    box-sizing: border-box;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.07);
}

.notice_list .list_date {
    color: #546476;
    font-family: "GmarketSans";
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.00813rem;
}

.notice_list .list_date span {
    display: block;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.01875rem;
}

.notice_list .list_section {
    width: 85px;
    height: 30px;
    border-radius: 30px;
    border: 1px solid #E03131;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    color: #E03131;
    font-family: "GmarketSans";
    font-size: 1.0625rem;
    font-weight: 500;
    padding-top: 3px;
}

.notice_list .list_tit {
    width: 100%;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #122134;
    font-family: "GmarketSans";
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.6875rem;
    /* 128.571% */
    letter-spacing: -0.03281rem;
}

.notice_list .list_cnt {
    width: 100%;
    color: #656565;
    font-family: Pretendard;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.375rem;
    /* 137.5% */
    letter-spacing: -0.04rem;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media screen and (max-width: 660px) {
    .notice_wrap {
        margin-bottom: 15em;
    }

    /* 공지사항 - 타이틀 */
    .cardSt .tit_cnt {
        width: 100%;
        height: 200px;
        padding: 2em 2.5em;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .cardSt .tit_cnt .tit_top {
        width: 45%;
    }

    .cardSt .swiper-pagination {
        top: 50% !important;
        left: unset !important;
        right: 2.5em !important;
    }

    .cardSt .tit_cnt .notice_ctrl {
        height: 50px;
    }

    /* 공지사항 - 리스트 */
    .cardSt .notice_cts {
        left: 0;
        bottom: -17% !important;
        width: 100%;
    }

    .notice_list {
        width: 100% !important;
        padding: 2em 2.5em;
        height: 240px;
    }

    .notice_swiper1,
    .notice_swiper2,
    .notice_swiper3,
    .notice_swiper4 {
        height: 240px;
        padding: 0 !important;
    }

    .notice_swiper1 .swiper-slide:hover,
    .notice_swiper2 .swiper-slide:hover,
    .notice_swiper3 .swiper-slide:hover,
    .notice_swiper4 .swiper-slide:hover {
        bottom: 0;
    }

    .swiper {
        overflow: visible !important;
    }

    .notice_list .list_cnt {
        height: 60px;
        -webkit-line-clamp: 3;
    }
}

@media screen and (max-width: 640px) {

    /* 공지사항 - 타이틀 */
    .cardSt .tit_cnt .cts_tit {
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 480px) {

    /* 공지사항 - 타이틀 */
    .cardSt .tit_cnt .tit_top {
        width: 55%;
    }

    .cardSt .tit_cnt .list_all_btn a span {
        width: 16px;
        height: 16px;
        background-size: contain;
    }

    .cardSt .tit_cnt .notice_ctrl {
        width: 90px;
    }

    .cardSt .tit_cnt .notice_ctrl button img {
        width: 40px;
        height: 40px;
    }

    /* 공지사항 - 리스트 */
    .cardSt .swiper-pagination {
        top: 44% !important;
    }

    .cardSt .notice_cts {
        bottom: -10% !important;
    }
}

@media screen and (max-width: 360px) {
    .notice_wrap {
        margin-bottom: 12em;
    }

    /* 공지사항 - 타이틀 */
    .cardSt .tit_cnt {
        padding: 1.5em 2em;
    }

    .cardSt .tit_cnt .cts_tit {
        margin-bottom: 0.75rem;
    }

    .cardSt .tit_cnt .list_all_btn a .fa-arrow-right-long {
        display: none;
    }

    .cardSt .swiper-pagination {
        display: none;
    }

    .cardSt .tit_cnt .notice_ctrl {
        width: 70px;
    }

    .cardSt .tit_cnt .notice_ctrl button img {
        width: 30px;
        height: 30px;
    }

    /* 공지사항 - 리스트 */
    .cardSt .notice_cts {
        bottom: 0 !important;
    }

    .notice_list {
        padding: 1.5em 2em;
    }
}

@media screen and (max-width: 300px) {

    /* 공지사항 - 리스트 */
    .cardSt .notice_cts {
        bottom: 10px !important;
    }
}