@charset "UTF-8";
/* 메인 페이지 스타일 */
.mainArea {
    padding-bottom: 2rem;
}
.mainArea .mainAccountCardArea,
.mainArea .mainCardArea {
    margin-bottom: 2.4rem;
}
.mainArea .large_text_icon_linkBanner,
.mainArea .etc_linkBanner,
.mainArea .swiperBanner,
.mainArea .right_iconMid_linkBanner,
.mainArea .fullBg_LinkBanner,
.mainArea .etcRightImgBannerArea {
    margin-top: 2.4rem;
}
.mainArea.easyMode .newsNoticeArea {
    margin-top: 2.4rem;
}

.ci_sample {
    background-image: url(/image/common/ci_logo_sample.svg);
}

.mainAccountLinkArea {
    width: 100%;
    margin-top: 2.4rem;
}
.mainAccountLinkArea .mainAccountLink {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: 1.6rem 4rem 1.4rem 2.3rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.2rem;
    color: var(--gray10);
    border: 1px solid var(--gray4);
    border-radius: 0.6rem;
}
.mainAccountLinkArea .mainAccountLink .ic16 {
    position: absolute;
    right: 2rem;
    top: calc(50% - 0.8rem);
}
.mainAccountLinkArea .mainAccountLink span {
    color: var(--jb-blue);
    display: inline-block;
    vertical-align: baseline;
    font-weight: 700;
}

.mainAccountCardArea {
    width: calc(100% + 4rem);
    padding-top: 2.4rem;
    margin-left: -2rem;
    overflow: hidden;
}
.mainAccountCardArea .swiper {
    overflow: initial;
}
.mainAccountCardArea .item {
    width: calc(100% - 4rem);
}
.mainAccountCardArea .mainAccountCard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 25.2rem;
    padding: 3.2rem 0rem 0 0rem;
    background-color: var(--jb-blue);
    border-radius: 0.6rem;
}
.easyMode .mainAccountCardArea .mainAccountCard {
    background-color: var(--white);
    border: 1px solid var(--gray4);
}
.mainAccountCardArea .mainAccountCard .ub_teachingBubble {
    left: 0;
    top: -2rem;
    transform: translate(0);
}
.mainAccountCardArea .mainAccountCard .accountInfo {
    position: relative;
    padding: 0 2.4rem;
}
.mainAccountCardArea .mainAccountCard .accountInfo .accountNameCopy {
    display: block;
    text-align: left;
    padding-right: 1.6rem;
    background: url(/image/common/ic_line_12_copy.svg) no-repeat right top 0.3rem/1.2rem auto;
    font-size: 0;
}
.easyMode .mainAccountCardArea .mainAccountCard .accountInfo .accountNameCopy {
    background: url(/image/common/ic_line_12_copy_black.svg) no-repeat right top 0.3rem/1.2rem auto;
}
.mainAccountCardArea .mainAccountCard .accountInfo .accountNameCopy span {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.2rem;
    color: var(--blue2);
}
.easyMode .mainAccountCardArea .mainAccountCard .accountInfo .accountNameCopy span {
    color: var(--gray10);
}
.mainAccountCardArea .mainAccountCard .accountInfo .accountNameCopy .subject {
    position: relative;
    padding-right: 0.9rem;
}
.mainAccountCardArea .mainAccountCard .accountInfo .accountNameCopy .subject::before {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    display: block;
    width: 1px;
    height: 1rem;
    background-color: var(--blue2);
}
.easyMode .mainAccountCardArea .mainAccountCard .accountInfo .accountNameCopy .subject::before {
    background-color: var(--gray6);
}
.mainAccountCardArea .mainAccountCard .accountInfo .accountName {
    position: relative;
    font-size: 0;
    padding-left: 5.2rem;
    padding-right: 2.2rem;
}
.mainAccountCardArea .mainAccountCard .accountInfo .accountName .ciArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 4rem;
    height: 4rem;
    background-color: var(--blue6);
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
}
.mainAccountCardArea .mainAccountCard .accountInfo .accountName .ic24 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.mainAccountCardArea .mainAccountCard .accountInfo .accountName > span {
    display: block;
    font-family: "HGGGothicssi";
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--white);
    line-height: 2.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.easyMode .mainAccountCardArea .mainAccountCard .accountInfo .accountName > span {
    color: var(--gray10);
}
.mainAccountCardArea .mainAccountCard .bankBalance {
    margin-top: 2rem;
    padding: 0 2.4rem;
}
.easyMode .mainAccountCardArea .mainAccountCard .bankBalance {
    text-align: center;
}
.mainAccountCardArea .mainAccountCard .bankBalance p {
    font-size: 0;
}
.mainAccountCardArea .mainAccountCard .bankBalance p .price {
    display: inline-block;
    font-size: 3rem;
    font-weight: 500;
    line-height: 4rem;
    color: var(--white);
    vertical-align: middle;
    letter-spacing: 0;
    margin-right: 0.2rem;
}
.easyMode .mainAccountCardArea .mainAccountCard .bankBalance p .price {
    color: var(--gray10);
}
.mainAccountCardArea .mainAccountCard .bankBalance p .unit {
    display: inline-block;
    font-size: 2rem;
    font-weight: 500;
    line-height: 4rem;
    color: var(--white);
    vertical-align: middle;
    letter-spacing: 0;
}
.easyMode .mainAccountCardArea .mainAccountCard .bankBalance p .unit {
    color: var(--gray10);
}
.mainAccountCardArea .mainAccountCard .bankBalance p .cmp_badge {
    margin-left: 0.8rem;
}
.easyMode .mainAccountCardArea .mainAccountCard .bankBalance p .cmp_badge {
    background-color: var(--gray3);
    border-color: transparent;
}
.easyMode .mainAccountCardArea .mainAccountCard .bankBalance p .cmp_badge .base {
    color: var(--gray8);
}
.mainAccountCardArea .mainAccountCard .bankBalance .priceBtn {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.8rem;
    margin-top: -0.3rem;
}
.easyMode .mainAccountCardArea .mainAccountCard .bankBalance .priceBtn {
    color: var(--gray10);
}
.mainAccountCardArea .mainAccountCard .bankBalance .priceRefresh::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(/image/common/ic_line_12_refresh.svg) no-repeat center center/2rem auto;
}
.easyMode .mainAccountCardArea .mainAccountCard .bankBalance .priceRefresh::before {
    background: url(/image/common/ic_line_12_refresh_gray.svg) no-repeat center center/2rem auto;
}
.mainAccountCardArea .mainAccountCard .bankBalance .priceRefresh.on::before {
    animation: rotate360 1s forwards;
}
.mainAccountCardArea .mainAccountCard .etcBanner {
    margin: 0.8rem 0 0rem 0;
    padding: 0 2.4rem;
}
.mainAccountCardArea .mainAccountCard .etcBanner .etcBtn {
    padding: 1.1rem 1.2rem 0.9rem 1.2rem;
    background-color: #0154cd;
    border-radius: 0.6rem;
    width: 100%;
    font-size: 0;
}
.easyMode .mainAccountCardArea .mainAccountCard .etcBanner .etcBtn {
    background-color: var(--gray2);
}
.mainAccountCardArea .mainAccountCard .etcBanner .etcBtn > span {
    display: inline-block;
    max-width: calc(100% - 2rem);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2rem;
    color: var(--blue2);
    vertical-align: middle;
    margin-right: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.easyMode .mainAccountCardArea .mainAccountCard .etcBanner .etcBtn > span {
    color: var(--gray8);
}
.easyMode .mainAccountCardArea .mainAccountCard .etcBanner .etcBtn .ic_line_16_forwardarrow_white {
    background-image: url(/image/common/ic_arrow_16_gray.svg);
}
.mainAccountCardArea .mainAccountCard .etcBanner .etcAccInfo {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0.7rem 1rem 1.2rem;
    background-color: #0154cd;
    border-radius: 0.6rem;
}
.easyMode .mainAccountCardArea .mainAccountCard .etcBanner .etcAccInfo {
    background-color: var(--gray2);
}
.mainAccountCardArea .mainAccountCard .etcBanner .etcAccInfo .title {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 2rem;
    color: var(--blue3);
}
.easyMode .mainAccountCardArea .mainAccountCard .etcBanner .etcAccInfo .title {
    color: var(--gray8);
}
.mainAccountCardArea .mainAccountCard .etcBanner .etcAccInfo .total {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 2rem;
    color: var(--blue2);
    padding-right: 2.4rem;
    background: url(/image/common/ic_arrow_16.svg) no-repeat top 0.1rem right/1.6rem auto;
}
.easyMode .mainAccountCardArea .mainAccountCard .etcBanner .etcAccInfo .total {
    color: var(--gray8);
    background: url(/image/common/ic_arrow_16_gray.svg) no-repeat top 0.1rem right/1.6rem auto;
}
.mainAccountCardArea .mainAccountCard .controlBtn {
    width: 100%;
    margin-top: auto;
    display: flex;
    overflow: hidden;
}
.mainAccountCardArea .mainAccountCard .controlBtn > button {
    position: relative;
    padding: 2rem 1rem;
    flex: 1;
    height: 6.2rem;
}
.mainAccountCardArea .mainAccountCard .controlBtn > button::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.8rem);
    left: -1px;
    display: block;
    width: 1px;
    height: 1.6rem;
    background-color: var(--white);
}
.easyMode .mainAccountCardArea .mainAccountCard .controlBtn > button::before {
    background-color: var(--gray6);
}
.mainAccountCardArea .mainAccountCard .controlBtn > button .base {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 500;
    color: var(--white);
}
.easyMode .mainAccountCardArea .mainAccountCard .controlBtn > button .base {
    color: var(--jb-blue);
}
.mainAccountCardArea .mainAccountCard .cardInfoMore {
    position: absolute;
    right: 2.4rem;
    top: 0;
    z-index: 1;
}
.easyMode .mainAccountCardArea .mainAccountCard .cardInfoMore {
    background-image: url(/image/common/ic_line_24_more_black.svg);
}

.mainAccountCardMore {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 24.8rem;
    padding: 2rem;
    background-color: var(--white);
    border-radius: 0.6rem;
    border: 1px dashed var(--blue4);
}
.mainAccountCardMore > div {
    display: inline-block;
    width: 12.3rem;
    text-align: center;
    margin: 0 0.6rem;
}
.mainAccountCardMore .mainAccountControl {
    font-size: 0;
}
.mainAccountCardMore .mainAccountControl .base {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--blue6);
    line-height: 2.2rem;
    margin-top: 1.2rem;
}

.mainCardArea {
    width: calc(100% + 4rem);
    margin-top: 2.4rem;
    margin-left: -2rem;
}
.mainCardArea .item {
    width: calc(100% - 4rem);
}
.mainCardArea .mainCard {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 29.6rem;
    padding: 3.2rem 0rem 0 0rem;
    background-color: var(--jb-blue);
    border-radius: 0.6rem;
    /*         .resultBar {
        width: 100%;
        padding: 0 2.4rem;
        margin-top: 3.9rem;
        .barCover {
            position: relative;
            width: 100%;
            border-radius: 0.2rem;
            height: 0.4rem;
            background-color: #0154cd;
            .bar {
                width: 0;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 0.2rem;
                background-color: var(--white);
                transition: width 1.3s ease-in-out;
                &::after {
                    content: "";
                    position: absolute;
                    left: 100%;
                    margin-left: -0.9rem;
                    top: -0.6rem;
                    width: 1.6rem;
                    height: 1.6rem;
                    border-radius: 50%;
                    background-color: var(--white);
                    opacity: 0.3;
                }
                &.speed1 {
                    transition: width 1s ease-in-out;
                }
                &.speed2 {
                    transition: width 1.5s ease-in-out;
                }
                .point {
                    position: absolute;
                    top: -2.2rem;
                    left: calc(100% - 4.8rem);
                    width: 9.4rem;
                    height: 2.4rem;
                    padding: 0rem;
                    border-radius: 4rem;
                    background-color: var(--blue7);
                    font-size: 1.1rem;
                    font-weight: 500;
                    line-height: 2.6rem;
                    display: inline-block;
                    color: var(--white);
                    text-align: center;
                    opacity: 0;
                    transition: opacity 1s;
                    transition-delay: 0.2s;
                    &::before {
                        content: "";
                        position: absolute;
                        top: calc(100% - 0.1rem);
                        left: calc(50% - 0.5rem);
                        display: block;
                        width: 1rem;
                        height: 0.6rem;
                        background: url(/image/common/icon_barCoverArrow.svg) no-repeat center center/100% auto;
                    }
                    &.on {
                        opacity: 1;
                        top: -4.2rem;
                    }
                    &.left {
                        left: calc(100% - 1.8rem);
                        &::before {
                            left: 1.2rem;
                        }
                    }
                    &.right {
                        left: calc(100% - 7.8rem);
                        &::before {
                            right: 1.2rem;
                            left: auto;
                        }
                    }
                }
            }
        }
        .unitGroup {
            width: 100%;
            margin-top: 0.4rem;
            display: flex;
            justify-content: space-between;
            > span {
                display: inline-block;
                font-size: 1rem;
                font-weight: 400;
                line-height: 2rem;
                color: var(--white);
                width: 3rem;
                &:nth-of-type(2) {
                    text-align: center;
                }
                &:last-of-type {
                    text-align: right;
                }
            }
        }
    } */
}
.easyMode .mainCardArea .mainCard {
    background-color: var(--white);
    border: 1px solid var(--gray4);
}
.mainCardArea .mainCard .cardInfo {
    position: relative;
    width: 100%;
    font-size: 0;
    padding: 0 2.4rem;
}
.mainCardArea .mainCard .cardInfo .cardImg {
    position: absolute;
    width: auto;
    height: 4rem;
    top: 0.2rem;
    left: 2.4rem;
}
.mainCardArea .mainCard .cardInfo .cardImg.wType {
    width: 4rem;
    margin-top: 0.7rem;
    top: 0;
}
.mainCardArea .mainCard .cardInfo .cardImg.wType > img {
    height: auto;
    max-height: auto;
    width: 100%;
    margin-left: 0;
}
.mainCardArea .mainCard .cardInfo .cardImg > img {
    height: 100%;
    max-height: 100%;
    margin-left: 0.7rem;
}
.mainCardArea .mainCard .cardInfo .cardName {
    padding-left: 5.2rem;
    font-family: "HGGGothicssi";
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--white);
    line-height: 2.2rem;
    vertical-align: middle;
}
.easyMode .mainCardArea .mainCard .cardInfo .cardName {
    color: var(--gray10);
}
.mainCardArea .mainCard .cardInfo .cardNumber {
    padding-left: 5.2rem;
    font-size: 0;
}
.mainCardArea .mainCard .cardInfo .cardNumber span {
    display: inline-block;
    font-size: 1.4rem;
    line-height: 2.2rem;
    font-weight: 400;
    color: var(--blue2);
}
.easyMode .mainCardArea .mainCard .cardInfo .cardNumber span {
    color: var(--gray10);
}
.mainCardArea .mainCard .cardInfo .cardNumber .subject {
    position: relative;
    padding-right: 0.9rem;
}
.mainCardArea .mainCard .cardInfo .cardNumber .subject::before {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    display: block;
    width: 1px;
    height: 1rem;
    background-color: var(--blue2);
}
.easyMode .mainCardArea .mainCard .cardInfo .cardNumber .subject::before {
    background-color: var(--gray6);
}
.mainCardArea .mainCard .bankBalance {
    padding: 0 2.4rem;
    margin-top: 2.4rem;
}
.easyMode .mainCardArea .mainCard .bankBalance {
    text-align: center;
}
.mainCardArea .mainCard .bankBalance p {
    font-size: 0;
    margin-top: 0.4rem;
}
.mainCardArea .mainCard .bankBalance p .cmp_badge {
    margin-left: 0.8rem;
}
.easyMode .mainCardArea .mainCard .bankBalance p .cmp_badge {
    background-color: var(--gray3);
    border-color: transparent;
}
.easyMode .mainCardArea .mainCard .bankBalance p .cmp_badge .base {
    color: var(--gray8);
}
.mainCardArea .mainCard .bankBalance p .price {
    display: inline-block;
    font-size: 3rem;
    font-weight: 500;
    line-height: 4rem;
    color: var(--white);
    vertical-align: middle;
    letter-spacing: 0;
}
.easyMode .mainCardArea .mainCard .bankBalance p .price {
    color: var(--gray10);
}
.mainCardArea .mainCard .bankBalance p .unit {
    display: inline-block;
    font-size: 2rem;
    font-weight: 500;
    line-height: 4rem;
    color: var(--white);
    vertical-align: middle;
    margin-left: 0.2rem;
    letter-spacing: 0;
}
.easyMode .mainCardArea .mainCard .bankBalance p .unit {
    color: var(--gray10);
}
.mainCardArea .mainCard .bankBalance .priceBtn {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.8rem;
    margin-top: -0.3rem;
}
.easyMode .mainCardArea .mainCard .bankBalance .priceBtn {
    color: var(--gray10);
}
.mainCardArea .mainCard .bankBalance .priceRefresh::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(/image/common/ic_line_12_refresh.svg) no-repeat center center/2rem auto;
}
.easyMode .mainCardArea .mainCard .bankBalance .priceRefresh::before {
    background: url(/image/common/ic_line_12_refresh_gray.svg) no-repeat center center/2rem auto;
}
.mainCardArea .mainCard .bankBalance .priceRefresh.on::before {
    animation: rotate360 1s forwards;
}
.mainCardArea .mainCard .controlBtn {
    width: 100%;
    margin-top: auto;
    display: flex;
    overflow: hidden;
}
.mainCardArea .mainCard .controlBtn > button {
    position: relative;
    padding: 2rem 1rem;
    flex: 1;
    height: 6.2rem;
}
.mainCardArea .mainCard .controlBtn > button::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.8rem);
    left: -1px;
    display: block;
    width: 1px;
    height: 1.6rem;
    background-color: var(--white);
}
.easyMode .mainCardArea .mainCard .controlBtn > button::before {
    background-color: var(--gray6);
}
.mainCardArea .mainCard .controlBtn > button > .base {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 500;
    color: var(--white);
}
.easyMode .mainCardArea .mainCard .controlBtn > button > .base {
    color: var(--jb-blue);
}
.mainCardArea .mainCard .etcBanner {
    padding: 0 2.4rem;
    margin-top: 2rem;
}
.mainCardArea .mainCard .etcBanner .etcAccInfo {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0.7rem 1rem 1.2rem;
    background-color: #0154cd;
    border-radius: 0.6rem;
}
.easyMode .mainCardArea .mainCard .etcBanner .etcAccInfo {
    background-color: var(--gray2);
}
.mainCardArea .mainCard .etcBanner .etcAccInfo .title {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 2rem;
    color: var(--blue3);
}
.easyMode .mainCardArea .mainCard .etcBanner .etcAccInfo .title {
    color: var(--gray8);
}
.easyMode .mainCardArea .mainCard .etcBanner .etcAccInfo .ic_line_16_forwardarrow_white {
    background: url(/image/common/ic_arrow_16_gray.svg) no-repeat top 0.1rem right/1.6rem auto;
}
.mainCardArea .mainCard .etcBanner .etcAccInfo .total {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 2rem;
    color: var(--blue2);
    padding-right: 2.4rem;
    background: url(/image/common/ic_arrow_16.svg) no-repeat top 0.1rem right/1.6rem auto;
}
.easyMode .mainCardArea .mainCard .etcBanner .etcAccInfo .total {
    color: var(--gray8);
    background: url(/image/common/ic_arrow_16_gray.svg) no-repeat top 0.1rem right/1.6rem auto;
}
.mainCardArea .mainAccountCardMore {
    height: 29.6rem;
}
.mainCardArea .cardInfoMore {
    position: absolute;
    right: 2.4rem;
    top: 0rem;
    z-index: 1;
}
.easyMode .mainCardArea .cardInfoMore {
    background-image: url(/image/common/ic_line_24_more_black.svg);
}

.quick_icon_scroll_linkBanner {
    margin-top: 0.8rem;
    width: 100%;
    font-size: 0;
}
.quick_icon_scroll_linkBanner .quickBtn {
    width: 25%;
    padding: 0 0.8rem;
    text-align: center;
    margin-top: 2.4rem;
}
.quick_icon_scroll_linkBanner .quickBtn img {
    display: inline-block;
    width: 3.2rem;
    height: 3.2rem;
}
.quick_icon_scroll_linkBanner .quickBtn .base {
    display: block;
    font-size: 1.3rem;
    line-height: 2rem;
    color: var(--gray10);
    margin-top: 0.8rem;
}
@media (max-width: 350px) {
    .quick_icon_scroll_linkBanner .quickBtn {
        width: 33.333%;
    }
}
.quick_icon_scroll_linkBanner .innerCont.yScroll {
    width: calc(100% + 2rem);
}
.quick_icon_scroll_linkBanner .innerCont.yScroll .quickBtn {
    min-width: 6.4rem;
    width: auto;
    padding: 1rem 0;
    margin-right: 1.6rem;
    margin-top: 0;
}
.quick_icon_scroll_linkBanner .innerCont.yScroll .quickBtn > img {
    display: none;
}
.quick_icon_scroll_linkBanner .innerCont.yScroll .quickBtn .base {
    margin-top: 0;
    font-weight: 500;
}
.quick_icon_scroll_linkBanner.topFix .innerCont {
    position: fixed;
    left: 0;
    top: -10rem;
    z-index: 3;
    background-color: var(--white);
    margin-top: 0;
    animation: topFix 0.5s forwards;
    padding: 0 2rem;
}

@keyframes topFix {
    from {
        top: -10rem;
    }
    to {
        top: 5.2rem;
    }
}
@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* .voteArea {
    width: 100%;
    font-size: 0;
    padding: 0 2.4rem;
    margin-top: 2.9rem;
    margin-bottom: 0.3rem;
    .item {
        display: inline-block;
        vertical-align: middle;
        width: calc(50% - 1rem);
        text-align: center;
        .voteBtn {
            position: relative;
            display: inline-block;
            font-size: 0;
            text-align: center;
            width: 8.8rem;
            > img {
                margin-top: -1.1rem;
            }
            .subject {
                position: relative;
                display: inline-block;
                width: auto;
                padding: 0.3rem 0.5rem 0.2rem 0.5rem;
                height: 2.4rem;
                background-color: var(--blue7);
                border-radius: 0.6rem;
                font-size: 1.2rem;
                font-weight: 500;
                line-height: 2rem;
                color: var(--white);
                z-index: 1;
            }
            .name {
                display: inline-block;
                font-size: 1.3rem;
                font-weight: 500;
                line-height: 2rem;

                color: var(--gray10);
                margin-top: 0.8rem;
            }
        }
    }
    .verse {
        display: inline-block;
        vertical-align: middle;
        width: 2rem;
        font-size: 1.6rem;
        line-height: 2.4rem;

        font-weight: 700;
        color: var(--gray10);
    }
} */
.feedMoreArea {
    width: 100%;
    margin-top: 3.2rem;
    text-align: center;
}
.feedMoreArea > p {
    font-size: 1.4rem;
    line-height: 2.2rem;
    font-weight: 500;
    color: var(--gray7);
    margin-bottom: 0.8rem;
}
.feedMoreArea .feedMoreBtn {
    display: block;
    text-align: center;
    width: 100%;
}
.feedMoreArea .feedMoreBtn .base {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.4rem;
    line-height: 2.2rem;
    font-weight: bold;
    color: var(--blue6);
    margin-right: 0.4rem;
}

.homeMode_Setting {
    width: 100%;
    font-size: 0;
    display: flex;
    border-radius: 0.6rem;
    border: 1px solid var(--gray4);
    background-color: var(--white);
    height: 5.2rem;
    margin-top: 4.8rem;
}
.homeMode_Setting .item {
    height: 100%;
    position: relative;
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.homeMode_Setting .item::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 1px;
    height: 100%;
    background-color: var(--gray2);
}
.homeMode_Setting .item:last-of-type::before {
    display: none;
}
.homeMode_Setting .item .optionBtn {
    display: flex;
}
.homeMode_Setting .item .optionBtn img {
    display: inline-block;
}
.homeMode_Setting .item .optionBtn .name {
    display: block;
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: var(--gray8);
    font-weight: 500;
    margin-top: 0.3rem;
}
.homeMode_Setting .item .optionBtn.on .name {
    color: var(--blue6);
}
.homeMode_Setting .item .optionBtn.normalFont .ic24 {
    background-image: url(/image/common/ic_sld_24_textcontrol.svg);
}
.homeMode_Setting .item .optionBtn.normalFont.on .ic24 {
    background-image: url(/image/common/ic_sld_24_textcontrol_blue.svg);
}
.homeMode_Setting .item .optionBtn.bigFont .ic24 {
    background-image: url(/image/common/ic_sld_24_textcontrol_bigfont.svg);
}
.homeMode_Setting .item .optionBtn.bigFont.on .ic24 {
    background-image: url(/image/common/ic_sld_24_textcontrol_bigfont_blue.svg);
}
.homeMode_Setting .item .optionBtn.homeSetting .ic24 {
    background-image: url(/image/common/ic_sld_24_homesetting.svg);
}

.newsNoticeArea {
    width: 100%;
    margin-top: 4.8rem;
}
.newsNoticeArea .newsNoticeBtn {
    position: relative;
    width: 100%;
    border-radius: 0.6rem;
    border: 1px solid var(--gray4);
    padding: 1.6rem 4.4rem 1.6rem 6.4rem;
    background: url(/image/common/ic_vsl_32_notice.svg) no-repeat left 2.4rem top 2.3rem/3.2rem auto;
    text-align: left;
}
.newsNoticeArea .newsNoticeBtn::before {
    content: "";
    position: absolute;
    right: 2rem;
    top: calc(50% - 0.8rem);
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background: url(/image/common/ic_arrow_16_gray.svg) no-repeat center center/100% auto;
}
.newsNoticeArea .newsNoticeBtn .subject {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.2rem;
    color: var(--gray8);
    margin-bottom: 0.4rem;
}
.newsNoticeArea .newsNoticeBtn .title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2.2rem;
    color: var(--gray10);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.advertisementBannerArea {
    width: 100%;
    margin-top: 2.4rem;
}
.advertisementBannerArea.noData {
    padding: 0 2rem;
}

/* .titleLinkArea {
    display: block;
    width: 100%;
    margin-top: 2.4rem;
    .titleLink {
        display: block;
        > span {
            display: inline-block;
            font-family: "HGGGothicssi";
            font-size: 2.2rem;
            line-height: 3rem;
            font-weight: 800;
            color: var(--gray10);
        }
        &::after {
            content: "";
            display: inline-block;
            width: 1.6rem;
            height: 1.6rem;
            background: url(/image/common/ic_arrow_16_gray.svg) no-repeat center center/1.6rem auto;
            vertical-align: -0.1rem;
        }
    }
} */
/* s: 쉬운홈 */
.easyQuickMenu_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.easyQuickMenu_item {
    margin-top: 0.8rem;
}
.easyQuickMenu_item:nth-child(-n+2) {
    margin-top: 0;
}
.easyQuickMenu_item:nth-child(odd) {
    margin-right: 0.4rem;
}
.easyQuickMenu_item:nth-child(even) {
    margin-left: 0.4rem;
}
.easyQuickMenu_link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--gray4);
    border-radius: 0.6rem;
    padding: 1.6rem 2rem 1.2rem;
}
.easyQuickMenu_txt {
    margin-top: 0.8rem;
}

.easyHomeSetting {
    margin-top: 1.6rem;
}

/* e: 쉬운홈 */
.swSetting .pageTitleArea {
    margin-bottom: 3.2rem;
}
.swSetting .cmp_tabs_fix_tab {
    margin-left: -2rem;
    margin-right: -2rem;
}
.swSetting [data-js=tab__con] {
    padding-top: 2.4rem;
}
.swSetting .bottom_txt {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.2rem;
    margin: 2.4rem 0 3.2rem;
}
.swSetting .bottom_txt::before {
    content: "";
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background: url("/image/common/ic_sld_12_increase_grey.svg") no-repeat;
    background-size: cover;
    margin-right: 0.4rem;
    margin-bottom: -0.2rem;
}
.swSetting .other_area {
    padding-top: 3.2rem;
    margin-bottom: -2rem !important;
    padding-bottom: 7rem !important;
}
.swSetting .other_area_titArea {
    margin-bottom: 2.4rem;
}
.swSetting .other_area_titArea .other_area_tit {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gray10);
    margin-bottom: 0.8rem;
}
.swSetting .swSetNone_tabInner .errcmCon {
    margin-top: 9.8rem;
}

/* 이체 안내 바텀시트*/
.transferInfo {
    text-align: center;
}
.transferInfo_account {
    margin-top: 0.4rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.2rem;
    color: var(--informative);
}
.transferInfo_txt {
    margin-top: 0.8rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.2rem;
}

/* //이체 안내 바텀시트*/