/* ============================== 공통 스타일 정의 (s) ============================== */
#content.submain{padding-top:105px;}
body.noFooter #content{padding-bottom:124px;}
img{max-width:100%;}

/* 팝업(공통) */
.bottom.popCont.typeRenew {padding-top:0px;}
.bottom.popCont.typeRenew .popHead {display:table; min-height:0; padding-top:12px; border-bottom:0;}
.bottom.popCont.typeRenew .popHead h1 {padding:18px 50px 24px 20px; font-size:2.0rem; line-height:1.2; color:rgb(7, 15, 22, .82); text-align:left;}
.bottom.popCont.typeRenew .popInner {height:436px;}
.bottom.popCont.typeRenew .popBody.banner {padding:0;}
.bottom.popCont.typeRenew .popBody.banner .popInner {height:auto;}
.bottom.popCont.typeRenew section {padding-bottom:36px;}
.bottom.popCont.typeRenew section.popSection {padding-bottom:92px;}
.bottom.popCont.typeRenew .btnArea.sticky {padding:36px 20px 18px;}
.bottom.popCont.typeRenew .btnArea.sticky.addBtn {padding:36px 20px 74px;}
.bottom.popCont.typeRenew .addBtnWrap {display:flex; align-items:center; justify-content:space-between; position:relative; padding:16px 20px; margin-bottom:18px; z-index:100;}
.bottom.popCont.typeRenew .addBtnWrap > [class^=btn_] {width:auto; height:auto; margin:0; font-size:1.7rem; font-weight:600; line-height:24px;}
.bottom.popCont.typeRenew .addBtnWrap .btn_days {color:#6d747b;}
.bottom.popCont.typeRenew .addBtnWrap .btn_close {color:#212528;}
.bottom.popCont.typeRenew .titArea {margin:32px 0 12px 0;}
.bottom.popCont.typeRenew .termsWrap {margin-bottom:0;}
.bottom.popCont.typeRenew .termsWrap .subLabel {display:block; margin-top:4px; font-size:1.3rem;}

.adminBottom .popCont.bottom.typeRenew {max-width: 590px; left: 0; right: 0; margin: 0 auto;}

/* 스와이퍼(공통) */
.swiperWrap{position:relative;}
.swiperWrap .swiper-controls{position:absolute;z-index:9;text-align:center;}
.swiperWrap .swiper-pagination{position:static;display:inline-block;}
.swiperWrap .swiper-pagination-bullet{position:relative;width:18px;height:18px;vertical-align:middle;background:none;border-radius:0;opacity:1;border:1px solid rgba(0,0,0,0);box-sizing:border-box;}
.swiperWrap .swiper-pagination-bullet:before{content:'';position:absolute;top:4px;left:4px;width:8px;height:8px;background:rgba(51,51,51,0.3);border:1px solid rgba(62,62,62,0.3);border-radius:100%;box-sizing:border-box;}
.swiperWrap .swiper-pagination-bullet-active:before{background:rgba(39,109,226,1);}
.swiperWrap [class^=swiper-button-]{position:relative;display:inline-block;width:18px;height:18px;vertical-align:middle;overflow:hidden;border:1px solid rgba(0,0,0,0);}
.swiperWrap .swiper-button-stop:before,.swiperWrap .swiper-button-stop:after{content:'';position:absolute;top:4px;left:4px;bottom:4px;width:3px;background-color:rgba(51,51,51,1);}
.swiperWrap .swiper-button-stop:after{left:auto;right:4px;}
.swiperWrap .swiper-button-play{display:none;}
.swiperWrap .swiper-button-play:after{content:'';position:absolute;top:3px;left:6px;width:0;height:0;border-top:5px solid rgba(51,51,51,0);border-bottom:5px solid rgba(51,51,51,0);border-right:6px solid rgba(51,51,51,0);border-left:6px solid rgba(51,51,51,1);}
.swiperWrap .swiper-counter{margin-left:10px;z-index:10;vertical-align:middle;}
.swiperWrap .swiper-counter em{color:#000;}
.swiperWrap[data-theme] .swiper-controls{padding:6px 10px;display:flex;align-items:center;border-radius:50px;min-width:60px;justify-content:space-between;}
.swiperWrap[data-theme] .swiper-controls.al{left:0;right:auto;margin-left:10px;}
.swiperWrap[data-theme] .swiper-controls.vb{top:auto;bottom:0;margin-bottom:10px;}
.swiperWrap[data-theme] .swiper-controls span.swiper-counter{padding:0!important;background:none;color:#333;font-size:11px;line-height:1.8;height:18px;letter-spacing:1px;margin-left:0;}
.swiperWrap[data-theme] .swiper-controls .swiper-counter em{color:inherit;font-weight:900;}
.swiperWrap[data-theme] .swiper-controls button{color:inherit;border:0;}
.swiperWrap[data-theme] .swiper-controls .swiper-button-stop,.swiperWrap[data-theme] .swiper-controls .swiper-button-play{background:url(/dcmw/img/mw/content/icon_swiper_controller_dark.png) no-repeat;background-size:10px auto;}
.swiperWrap[data-theme] .swiper-controls .swiper-button-stop{background-position:center -26px!important;}
.swiperWrap[data-theme] .swiper-controls .swiper-button-play{background-position:center 4px!important;}
.swiperWrap[data-theme] .swiper-controls .swiper-button-stop:before,.swiperWrap[data-theme] .swiper-controls .swiper-button-stop:after,.swiperWrap[data-theme] .swiper-controls .swiper-button-play:after{display:none;}
.swiperWrap[data-theme] .swiper-controls.dark{background-color:rgba(0, 0, 0, 0.55);color:#fff;}
.swiperWrap[data-theme] .swiper-controls.dark .swiper-button-stop,.swiperWrap[data-theme] .swiper-controls.dark .swiper-button-play{background:url(/dcmw/img/mw/content/icon_swiper_controller.png) no-repeat;background-size:10px auto;}
.swiperWrap[data-theme] .swiper-controls.dark span.swiper-counter{color:#fff;}
.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"] span.swiper-counter {display: inline-flex; align-items: center; justify-content: center; min-width: 5.2rem; font-size: 0.95rem;}
.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"] .swiper-controls.al {left: 0; bottom: 0; min-width: 7rem; height: 2rem; margin: 0 0 2rem 2rem; padding: 0 0.8rem;}
.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"] .swiper-controls.al.dark {background: rgba(0, 0, 0, 0.55);}
.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"] .btnPrev,
.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"] .btnNext {position: absolute; bottom: 2rem; left: 6.8rem; width: 0.9rem; height: 2rem; background: url(/dcmw/img/mw/content/icon_swiper_arrow.png) no-repeat; background-size: 2.6rem; background-position: right 0 bottom 0.6rem; z-index: 10;}
.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"] .btnPrev {left: 3rem; background-position: left 0.1rem bottom 0.6rem;}
.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"][data-theme="dark"] .btnNext {background-position: right 0 top 0.6rem;}
.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"][data-theme="dark"] .btnPrev {background-position: left 0.1rem top 0.6rem;}

.mainBottomBnr .swiper-controls {margin-left: 2.3rem !important;}
.mainBottomBnr.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"] .swiper-controls.al {height: 3rem;}
.mainBottomBnr.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"] span.swiper-counter {font-size: 1.1rem;}
.mainBottomBnr.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"] [class^=btn] {bottom: 2.5rem; left: 3.2rem;}
.mainBottomBnr.swiperWrap[data-arrow="true"][data-number="true"][data-pause-position="right"][data-align="left"] .btnNext {left: 7.2rem;}
.mainBottomBnr .swiper-pagination-bullet {display:inline-block; width:6px; height:6px; background-color:rgb(0, 0, 0, 0.2); border:0; border-radius:100%; opacity:inherit;}
.mainBottomBnr .swiper-pagination-bullet-active {width:18px; height:6px; background:#2589f4; border:0; border-radius:5px;}
.mainBottomBnr .swiper-pagination-bullet:before {content:none;}


/* 250813 카드선택 tobe 공통으로 재정의 (s) */
.cardChips {display: flex; flex-wrap:wrap; flex-direction: row; align-items: center;}
.cardChips p {padding: 0 0.8rem; margin:0.2rem 0.4rem 0 0; font-size: 1.2rem; font-weight:600; line-height: 2.0rem; color: #fff; flex-shrink: 0; border-radius: 2rem;}/* 250909 카드선택 뱃지영역 크기, 폰트 수정 */
.cardChips .cardCredit {background: #2b64ce;}/* 신용 */
.cardChips .cardCheck {background: #b65200;}/* 체크 */
.cardChips .cardPersonal {background: #7657b3;}/* 본인 */
.cardChips .cardFamily {background: #047b5b;}/* 가족 */
.cardChips .cardNumber {color: #485048;}/* 번호 */
.cardChips .stateBadge_complete,
.cardChips .stateBadge_ing {min-width:auto; height:1.8rem; line-height:1.6rem;}
.cardChips .stateBadge_complete {color:rgb(37, 137, 244) !important;}/* 신규카드 */
.cardChips .stateBadge_ing {color:#e80163 !important;}/* 기존카드 */
.cardChips .brand {height: 2rem;}
.cardChips .brand img {height: 100%; object-fit: contain;}

.cardSel.newCard {display: flex; flex-direction: row; align-items: center; padding:1.6rem 4.0rem 1.6rem 1.6rem; width: unset; height: unset;}
.cardSel.newCard:before {right: 2.0rem; width: 1.6rem; height: 1.6rem; background: url(../img/mw/content/arrow_16x16_black.png) no-repeat; background-size: contain; transform: rotate(90deg);}
.cardSel.newCard::after {display: none;}
.cardSel.newCard {gap: 1.2rem;}
.cardSel.newCard .label {font-size: 1.6rem; color:rgba(7, 15, 22, 0.82); font-weight: 500; line-height: 4.4rem; padding: 0;}
.cardSel.newCard .cardThumb {flex-shrink: 0; width: 4.4rem; height: 4.4rem;}
.cardSel.newCard .cardThumb img {width: 100%; height: 100%; object-fit: contain; object-position: center center;}
.cardSel.newCard .cardThumb img.horizontal {transform: rotate(90deg);}
.cardSel.newCard .cardName {font-size: 1.6rem; line-height: 2rem; margin-top: 0.6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cardSel.newCard .cardInfo {padding-right: 2.5rem;}
.cardSel.newCard .cardInfo,
.cardSelList .newCard .cardInfo {display: flex; flex-direction: column; width:calc(100% - 3.2rem);}
.cardSelList .newCard .cardInfo {width: calc(100% - 5rem); gap: 0.4rem;}
.cardSelList .newCard .cardThumb {width: 4.8rem; height: 4.8rem; flex-shrink: 0;}
.cardSelList .newCard .cardName {font-size: 1.6rem; color: #212528; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.cardSelList .cardChips p:not(.cardNumber, .cardPersonal, .cardFamily, .stateBadge_complete, .stateBadge_ing) {display: none;}
.cardSelList .cardChips p {color: #fff; font-size: 1rem;}
.cardSelList .cardChips .cardNumber {color: #485048;}

.bottom.popCont .cardSelList .cardSel.newCard {gap: 1.2rem; border: solid 0.1rem rgba(0, 0, 0, 0.1); background: #fff; border-radius: 1.6rem; padding: 1.6rem; height: unset; margin-bottom: 0.8rem;}
.bottom.popCont .cardSelList .cardSel.newCard.on {border: solid 0.1rem #2589f4; background: #daeaf9;}
.bottom.popCont .cardSelList .cardSel.newCard.on:after {display: none;}
.bottom.popCont .cardSelList .cardSel.newCard .label {font-size:1.6rem; margin:0;}
/* 250813 카드선택 tobe 공통으로 재정의 (e) */

/* 카드선택 팝업 */
.cardSel.myCard.appType {padding:17px 40px 17px 12px;}
.cardSel.myCard.appType:before {content: ''; position: absolute; top: 50%; right: 20px; width: 20px; height: 20px; margin-top: -10px; background: url(../img/mw/newonInp/ico_arrow_bottom_20.png) no-repeat 100% center; background-size: 100%; transition:transform 0.25s; transform:none;}
.cardSel.myCard.appType .cardInfo,
.cardSelList.appType .myCard .cardInfo {display:block; width:calc(100% - 4.4rem);}
.cardSel.myCard.appType .cardThumb {width:4.4rem; height:4.4rem;}
.cardSel.myCard.appType .cardName,
.cardSelList .myCard.appType .cardName {display:block; width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.cardSelList .myCard.appType .cardChips p.cardNumber {margin-left:0;}

/* s: 20241118 유제영 */
/* 카드 선택 공통 */
.customSlt{position: relative; /*overflow:hidden*/;display: flex; flex-direction: column;align-items: stretch;margin: 16px 0 5px;z-index: 2; border-radius: 8px;}/*뉴원수정*/
.customSlt .ipt {border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; z-index: 100}
.customSlt:after{content: '';position: absolute; top: 0;left: 0;width: 100%;height: 100%;border-radius: 8px;border: 1px solid transparent;border-color: rgba(133, 151, 168, 0.18);box-sizing: border-box;z-index: 0;}
.customSlt:focus-within:after {border: 2px solid transparent;border-color: rgb(73, 80, 87);transition:border-color ease-in-out 0.225s;-webkit-transition:border-color ease-in-out 0.225s;}
.customSlt .label{margin: 0; padding: 13px 20px 0; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.customSlt .label .tip, .sltWrap .label .tip {z-index:3;}
.customSlt .btnIco_del {visibility: hidden; position: absolute; bottom: 0; right:1px;  width: 32px; height: 44px;background: none;}
.customSlt .ipt:focus-within {outline: 0;}
.customSlt + .txt {font-size: 1.4rem;line-height: 1.429;font-weight: 400;color: rgba(50, 63, 79, 0.5);}
.customSlt span.unit {position: absolute; right: 1px; bottom: 0; padding: 0 15px 0 5px; font-size: 1.6rem; line-height: 44px;}
.customSlt .cardSel{z-index: 2; border: 0;}
.customSlt .cardSel:focus{outline: 0 !important;}
.customSlt .label + .cardSel::before{top: calc(50% - 16px);} /* 241113 뉴원 수정 */
/* e: 20241118 유제영 */

/* 카드 선택 button tag (s) *//* 250416 장윤희 - disabled 케이스 추가 */
.customSlt .cardSel[disabled] {height: auto; margin-bottom: -33px; padding-top: 90px; border-top-left-radius: 8px; border-top-right-radius: 8px; background: rgba(133, 151, 168, 0.18) url(/dcmw/img/mw/newonInp/ico_arrow_bottom_20.png) no-repeat; background-size: 20px; background-position: calc(100% - 20px) 50%; color : #787d82; transform: translate(0px, -33px);}
.customSlt .cardSel[disabled]:before {background:none;}
.customSlt .cardSel[disabled] .cardImg {top:67%;}
.customSlt .cardSel[disabled] .cardImg img {border:1px solid #fff;}
.customSlt .cardSel[disabled] .tit {top:67%; color:#787d82;}
.customSlt .cardSel .tit {text-align:left;}
/* 카드 선택 button tag (e) */

.snapScroll {padding: 0; display: flex; width: 100%; white-space: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; -webkit-scroll-snap-type: x mandatory; -ms-scroll-snap-type: x mandatory; scroll-padding: 0 16px;}
.snapScroll::-webkit-scrollbar {width: 0;}
.snapScroll > ul,
.snapScroll > div {white-space: nowrap; font-size: 0;}
.snapScroll > ul > li,
.snapScroll > div > div {scroll-snap-align: start; display: inline-block;}
.snapScroll > ul > li:last-child,
.snapScroll > div > div:last-child {margin-right: 0;}

.radiusShadowBox {border-radius: 1.6rem; background: #fff; box-shadow: 0.1rem 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.2) inset, 0.8rem 0.8rem 2.4rem 0 rgba(0, 0, 0, 0.1);}

/* ============================== 공통 스타일 정의 (e) ============================== */


/*! CSS Used from: /dcmw/css/m.content.css?20251021000002 */
.myCard{padding:20px 0 15px 0;border-top:1px solid #333;border-bottom:1px solid #e0e0e0;}

/* ============================== 마이 메인 (s) ============================== */

/* 마이 메인 공통 */
.moduleTitle{font-size:2rem;font-weight:700;color:#212528;margin-bottom:1.6rem;}
.cardSel.myCard .cardName {font-size: 1.4rem; line-height: 2rem; margin-top: 0.4rem;}

.buzzvilBanner {}
.buzzvilBanner.snapScroll {scroll-padding: 0 20px;}
.buzzvilBanner.snapScroll > ul {padding: 0 2rem;}
.buzzvilBanner.snapScroll > ul > li {width: 20rem; margin-right: 12px;}
.renewSwiper .swiper-slide img {width: 100%;}
.renewSwiper a {display: block; border-radius: 1.6rem;}
.renewSwiper a.item:not(.recommendedCard) {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1.3rem; border-radius: 1.6rem; padding: 1.2rem 1.8rem; border: solid 0.1rem rgba(0, 0, 0, 0.1); background: #fff;}
.renewSwiper .item .thumb {width: 5.4rem; height: 5.4rem; flex-shrink: 0;}
.renewSwiper .item .thumb img {width: 100%; height: 100%; object-fit: contain;}
.renewSwiper .item .text {line-height: 2rem; font-weight: 600;}
.renewSwiper .item .text > * {display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.renewSwiper a.dDay {color: #212528; position: relative; gap: 1.6rem; padding: 1.2rem 2rem; border: none;}
.renewSwiper .dDay .text {display: flex; flex-direction: column;}
.renewSwiper .dDay .text strong {line-height: 2rem; font-weight: 700; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
.renewSwiper .dDay .text p {font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; margin-top: 0.8rem; color: #485056;}
.renewSwiper .dDay .thumb {width: 6.4rem; height: 6.4rem;}
.renewSwiper .dDay .floatingBar {display: block; background: #485056; border-radius: 2rem; padding: 0.4rem 1rem; font-size: 1.2rem; font-weight: 700; line-height: 1.6rem; color: #fff; position: absolute; top: 1rem; right: 1rem;}
.renewSwiper .swiper-slide:nth-child(5n + 1) .dDay {background: #e2c1fd;}
.renewSwiper .swiper-slide:nth-child(5n + 2) .dDay {background: #8ad4ff;}
.renewSwiper .swiper-slide:nth-child(5n + 3) .dDay {background: #a3f3bf;}
.renewSwiper .swiper-slide:nth-child(5n + 4) .dDay {background: #ffdc7e;}
.renewSwiper .swiper-slide:nth-child(5n + 5) .dDay {background: #ffb6c0;}
.renewSwiper .slideList {padding-left: 2rem;}
.renewSwiper .slideList > * {width: calc(100% - 2rem);}
.renewSwiper .swiper-container .slideList > * {width: calc(100% - 4rem);}
.renewSwiper.swiperWrap[data-page="true"] .swiper-controls {display: flex; justify-content: center; align-items: center; position: static; margin-top: 1.2rem;}
.renewSwiper.swiperWrap [class*=swiper-button] {margin-right: 1px}
.renewSwiper.swiperWrap .swiper-pagination {display: flex; gap: 0.4rem;}
.renewSwiper.swiperWrap .swiper-pagination-bullet {width: 0.6rem; height: 0.6rem; margin: 0;}
.renewSwiper.swiperWrap .swiper-pagination-bullet::before {width: 0.6rem; height: 0.6rem; top: 0; left: 0; border: 0; border-radius: 1rem; background: rgba(0, 0, 0, 0.2);}
.renewSwiper.swiperWrap .swiper-pagination-bullet-active {width: 1.8rem;}
.renewSwiper.swiperWrap .swiper-pagination-bullet-active::before {background: #2589f4; width: 1.8rem;}
.renewSwiper.swiperWrap .swiper-controls.al {margin-left: 0; margin-right: 0; left: 4rem; bottom: 1.2rem; right: unset;}
.renewSwiper.swiperWrap .swiper-button-play:after {top: 5px;border-top: 4px solid rgba(51, 51, 51, 0); border-bottom: 4px solid rgba(51, 51, 51, 0); border-right: 5px solid rgba(51, 51, 51, 0); border-left: 5px solid rgba(51, 51, 51, 1);}
.renewSwiper.swiperWrap .swiper-button-stop:before,
.renewSwiper.swiperWrap .swiper-button-stop:after {top: 5px; bottom: 4px;}


.privateBanner {overflow: hidden !important; margin-left: 2rem; margin-right: 2rem; border-radius: 1.6rem; border: solid 0.1rem rgba(0, 0, 0, 0.1); background-color: #fff}
.privateBanner.renewSwiper .slideList {padding-left: 0;}
.privateBanner.renewSwiper .slideList > * {width: 100%;}
.privateBanner.renewSwiper .slideList > li > a {border-radius: 0; border: none;}
.privateBanner.renewSwiper .swiper-container .slideList > li > a {padding: 1.8rem 1.8rem 1.8rem 1.8rem;  min-height: 8.6rem; align-items: flex-end; background-color: transparent;}
.privateBanner.renewSwiper.swiperWrap .swiper-container li .text {align-self: start;}
.privateBanner.renewSwiper.swiperWrap .swiper-container li .thumb {align-self: center;}
.privateBanner.renewSwiper.swiperWrap .swiper-controls.al {margin-bottom: 0; padding: 0 1rem 0 0.3rem; left: 1.5rem; bottom: 0.6rem; background-color: rgba(0, 0, 0, 0.45); align-items: center; min-width: 50px; justify-content: space-around;}
.privateBanner.renewSwiper .swiper-controls span.swiper-counter {font-size: 0.95rem;}
.privateBanner.renewSwiper.swiperWrap button[class *="swiper-button"] {transform: scale(0.9);}

/* welcomeArea =============================================== */

/* 251208 긴급대응서비스 추가로 인한 마이 welcome name영역 변경 (s)*/
.welcomeArea {position:relative; padding-right:2.4rem;}
.welcomeArea .userName {display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; width:calc(100% - 2.4rem);}
.welcomeArea .userName .name {margin-right:1.2rem; font-size:2rem; line-height:2.8rem;}
.welcomeArea .userName strong {font-weight:700; color:#212528;}
.welcomeArea .urgentBtn {display:block; position:absolute; top:50%; right:0; width:2.8rem; height:2.8rem; padding:0.2rem; margin-top:-1.2rem;}
/* 251208 긴급대응서비스 추가로 인한 마이 welcome name영역 변경 (e)*/
/* 251208 혜택 welcome영역 분리 (s)*/
.welcomeArea.benefit {display:flex; flex-direction:row; align-items:center; padding-right:0;}
.welcomeArea.benefit .userName {align-items:flex-end; flex-wrap:wrap; font-size:2rem; line-height:2.8rem; color:#212528;}
.welcomeArea.benefit .membershipTier {justify-content:flex-end; min-width:80px;}
/* 251208 혜택 welcome영역 분리 (e) */
/*
.welcomeArea {display: flex; flex-direction: row; align-items: center;}
.welcomeArea .userName {display: flex; flex-direction: row; align-items: flex-end; color: #212528; font-size: 2rem; line-height: 2.8rem;}
.welcomeArea .userName strong {font-weight: 700;}
*/
.welcomeArea .membershipTier {display: flex; flex-direction: row; gap: 0.4rem; align-items: center; margin-left: auto; color: #707070; font-size: 1.4rem; font-weight: 700;}
.welcomeArea .membershipTier::before {content: ""; display: block; width: 2.4rem; height: 2.4rem;}
.welcomeArea .membershipTier::after {content: ""; display: block; width: 1.6rem; height: 1.6rem; background: url(/dcmw/img/mw/common/btn_acco.png) 0 0 no-repeat; background-size: contain; transform: rotate(-90deg);}
.welcomeArea .membershipTier.vvip {color: #31312f;}
.welcomeArea .membershipTier.vvip::before {background: url(/dcmw/img/mw/content/ico_membership_vvip.png) 0 0 no-repeat; background-size: contain;}
.welcomeArea .membershipTier.vip {color: #707070;}
.welcomeArea .membershipTier.vip::before {background: url(/dcmw/img/mw/content/ico_membership_vip.png) 0 0 no-repeat; background-size: contain;}
.welcomeArea .membershipTier.platinum {color: #2b96b7;}
.welcomeArea .membershipTier.platinum::before {background: url(/dcmw/img/mw/content/ico_membership_platinum.png) 0 0 no-repeat; background-size: contain;}
.welcomeArea .membershipTier.gold {color: #916519;}
.welcomeArea .membershipTier.gold::before {background: url(/dcmw/img/mw/content/ico_membership_gold.png) 0 0 no-repeat; background-size: contain;}

/* renewCardStatement */
.renewCardStatement {overflow: hidden; padding: 0 2rem 4rem;}
.renewCardStatement[class*="swiper"] {padding: 0 0 3.0rem;}
.renewCardStatement .swiper-container {overflow: visible; padding-left: 2rem;}
.renewCardStatement .item {width: 100%; height: auto; background: #fff; border-radius: 1.6rem; box-shadow: 0.1rem 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.2) inset, 0.8rem 1.6rem 2.4rem 0 rgba(0, 0, 0, 0.1); padding: 1.6rem 0 2.4rem;}
.renewCardStatement .swiper-wrapper .item {display: flex; flex-direction: column; width: calc(100% - 4rem); min-height: 23.1rem; height:auto; padding-bottom: 2rem;}
.renewCardStatement .noticeMessage {font-size: 1.4rem; line-height: 2rem; color: #485056;}
.renewCardStatement .noticeMessage strong {font-weight: 600; color: #212528;}
.renewCardStatement .topArea {display: flex; flex-direction: row; align-items: center; gap: 0.8rem; padding: 0 2rem 1.2rem; border-bottom: solid 0.1rem rgba(0, 0, 0, 0.1); position: relative;}
.renewCardStatement .topArea p {flex-shrink: 0; font-size:1.6rem; font-weight:500; color:#212528;}
.renewCardStatement .date {font-size: 1.6rem; font-weight: 500; color: #212528; line-height: 2.2rem; flex-shrink: 0;}
.renewCardStatement .status {width: 4.1rem; height: 2.4rem; line-height: 1.6rem; padding: 0.4rem 0; text-align: center; border-radius: 2rem; font-size: 1.2rem; line-height: 1.6rem; color: #fff; background: #009c70; font-weight: 700;}
.renewCardStatement .status.posted {background: #248bf9;}
.renewCardStatement .amountHide {margin-left: auto; flex-shrink: 0; font-weight:700; color:#6d747b;}
.renewCardStatement .sectionBtn {width: 5.2rem; height: 5.2rem; text-indent: 100%; overflow: hidden; white-space: nowrap; position: absolute; top: -1.6rem; right: 0;}
.renewCardStatement .sectionBtn::before {content: ""; display: block; width: 1.6rem; height: 1.6rem; background: url(/dcmw/img/mw/content/arrow_16x16_black.png); background-size: contain; transform: rotate(90deg); position: absolute; top: calc(50% - 0.8rem); right: 1.2rem;}
.renewCardStatement .middleArea {display: flex; flex-direction: column; gap: 0.4rem; padding: 1.6rem 2rem 0;}
.renewCardStatement .middleArea h2 {font-size: 1.4rem; line-height: 2rem; font-weight: 700; color: #485056;}
.renewCardStatement .paymentAmount {display: flex; flex-direction: row; gap: 0.8rem; align-items: center; font-size: 2.5rem; line-height: 3.5rem; color: #212528;}
.renewCardStatement .paymentAmount > strong {font-weight:800;}
.renewCardStatement .paymentAmount::after {content: ""; display: block; width: 2.4rem; height: 2.4rem; background: url(/dcmw/img/mw/content/arrow_16x16_black.png) center center no-repeat #fff; background-size: 1.6rem; border: solid 0.1rem rgba(0, 0, 0, 0.1); border-radius: 4rem;}
.renewCardStatement .paymentAmount.hiddenAfter::after{display: none;}
.renewCardStatement .middleArea.minimumAmount {flex-direction:unset; padding:1.2rem 2rem 0;}
/* 251106 이용대금명세서 최소결제영역 링크로 변경 (s) */
.renewCardStatement .middleArea.minimumAmount .amount {padding:0.5rem 1.0rem; border-radius:16px; background-color:#e7f5ff; line-height:2.0rem; font-weight:500; color:#2589f4;}
.renewCardStatement .middleArea.minimumAmount .amount > span {font-weight:700;}
/* 251106 이용대금명세서 최소결제영역 링크로 변경 (e) */
.renewCardStatement .bottomArea {display:flex; align-items:center; margin-top:auto; padding:1.2rem 2.0rem 0;}
.renewCardStatement .bottomArea .link {display:inline-block; position:relative; padding:0 1.9rem; font-size:1.3rem; line-height:1.8rem; color:#212528; font-weight:700; text-align:center;}
.renewCardStatement .bottomArea .link::before {content:""; display:block; width:0.1rem; height:1.2rem; background:rgba(0, 0, 0, 0.2); position: absolute; top:calc(50% - 0.6rem); left:0;}
.renewCardStatement .bottomArea .link:nth-child(1) {width:27%; padding-left:1.0rem;}
.renewCardStatement .bottomArea .link:nth-child(2) {width:31%;}
.renewCardStatement .bottomArea .link:nth-child(3) {width:calc(100% - 58%); padding-right:1.0rem;}
.renewCardStatement .bottomArea .link:first-of-type::before {display:none;}
.renewCardStatement .emptyCase {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%;}
.renewCardStatement .emptyCase strong {font-size: 2rem; line-height: 2.8rem; font-weight: 700; color: #212528;}
.renewCardStatement .emptyCase p {font-size: 1.4rem; line-height: 2rem; color: #485056; margin-top: 0.4rem;}
.renewCardStatement .emptyCase .btn {display: flex; flex-direction: row; gap: 0.8rem; align-items: center; font-size: 1.4rem; line-height: 2rem; color: #485056; font-weight: 700; padding: 0.8rem 1.2rem 0.8rem 1.6rem; border: solid 0.1rem rgba(0, 0, 0, 0.1); border-radius: 0.8rem; margin-top: 1.6rem;}
.renewCardStatement .emptyCase .btn::before {content: ""; display: block; width: 2.4rem; height: 2.4rem; background: url(/dcmw/img/mw/content/icon_gift_box.png); background-size: contain;}
.renewCardStatement .swiper-pagination {left: 50%; transform: translate(-50%);}
.renewCardStatement .swiper-pagination {display: flex; gap: 0.4rem; margin-top: 1.6rem;}
.renewCardStatement .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {width: 0.6rem; height: 0.6rem; margin: 0; background: none; opacity: 1;}
.renewCardStatement .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet::before {content: ""; display: block; width: 0.6rem; height: 0.6rem; top: 0; left: 0; border: 0; border-radius: 1rem; background: rgba(0, 0, 0, 0.2);}
.renewCardStatement .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {width: 1.8rem;}
.renewCardStatement .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active::before {background: #2589f4; width: 1.8rem;}
.renewCardStatement .statementButton {display: flex; flex-direction: row; gap: 0.4rem; margin-top: 1.2rem; position: relative;}
.renewCardStatement .btn_p {flex: 1 0 0; width: 100%; height: 5.6rem;}
.renewCardStatement .myTooltip::after {left: unset; right: 4.6rem;}
.renewCardStatement .otherInfo {display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.2rem;}
.renewCardStatement .otherInfo .infoItem {background: #fff; border-radius: 1.6rem; padding: 1.6rem 2rem; box-shadow: 0.1rem 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.2) inset, 0.8rem 0.8rem 2.4rem 0 rgba(0, 0, 0, 0.1);}
.renewCardStatement .otherInfo .accoBtn {font-size: 1.6rem; line-height: 2.2rem; color: #212528; font-weight: 600;}
/* 251001 이용대금명세서 상단 link 수정 (s) */
.renewCardStatement .otherInfo .link {position: relative; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: space-between; padding-right: 2.4rem; line-height: 2.2rem; color: #212528; font-weight: 600;}
.renewCardStatement .otherInfo .link strong {font-size: 1.6rem; flex-shrink: 0;}
.renewCardStatement .otherInfo .link span {font-size: 1.6rem; flex-shrink: 0;}
.renewCardStatement .otherInfo .link::after {content: ""; position: absolute; top: 50%; right: 0; width: 1.6rem; height: 1.6rem; background: url(/dcmw/img/mw/content/arrow_16x16_black.png) no-repeat center center; background-size: 1.6rem 1.6rem; transform: translateY(-50%);}
.renewCardStatement .otherInfo .link.block {display: block;}
.renewCardStatement .otherInfo .link.block p {margin-top: 0.2rem; font-size: 1.4rem; font-weight: 500; color: #485056; word-break: keep-all;}
.renewCardStatement .otherInfo .link.block p span {font-size: 1.4rem;}
/* 251001 이용대금명세서 상단 link 수정 (e) */
.renewCardStatement.minPayment .item {min-height:20rem;}/* 251020 이용대금명세서 - 최소결제금액 없는 case height */

/* favoritesMenu */
.favoritesMenu {overflow: hidden;}
.favoritesMenu .scrollList {display: flex; gap: 0.8rem; white-space: nowrap; overflow: auto hidden; scrollbar-width: none; padding: 0 2rem;}
.favoritesMenu .item {display: flex; flex-direction: row; align-items: center; background: #fff; border: solid 0.1rem rgba(0, 0, 0, 0.1); border-radius: 2rem; padding-right: 1.2rem; touch-action: manipulation;}
.favoritesMenu .iconPin {position: relative;}
.favoritesMenu .item a {display: block; line-height: 1.6rem; font-size: 1.2rem; color: #485048; padding: 1.2rem 0 1.2rem 1.6rem;}
.favoritesMenu input[type="checkbox"] {left: 0; font-size: 1.6rem;}
.favoritesMenu input[type="checkbox"] + label {width: 2.4rem; height: 2.4rem; text-indent: 100%; overflow: hidden; white-space: nowrap; position: relative; padding: 0;}
.favoritesMenu input[type="checkbox"] + label:before {width: 2.4rem; height: 2.4rem; border: 0; background: url(/dcmw/img/mw/content/icon_favorites_pin.png) 0 0 no-repeat; background-size: 2.4rem 6.8rem !important; margin: 0;}
.favoritesMenu input[type="checkbox"]:checked + label:before {background-position-y: bottom;}

/* myLoungBanner */
.myLoungBanner {display: block;}
.myLoungBanner img {width: 100%; height: 100%;}
.myLoungBanner.arrow {position:relative; height:4rem; padding:1.0rem 2.0rem; border-radius:1.2rem; background:#b7e3ff url(/dcmw/img/mw/content/arrow_16x16_black.png) no-repeat right 20px center; background-size:1.6rem; font-size:1.5rem; font-weight:700; color:#00426c;}

/* recommendedCardList */
.recommendedCardList .swiper-slide {width: 20rem;}
.snapScroll.recommendedCardList {scroll-padding: 0 20px;}
.snapScroll.recommendedCardList .slideList {padding-left: 20px;}
.snapScroll.recommendedCardList .slideList > li {width: auto; max-width: 280px;}
.renewSwiper .recommendedCard {display: flex; flex-direction: row; align-items: center; gap:0; padding-right: 3.5rem}
.recommendedCard .thumb {flex-shrink: 0; width: 5.5rem; height: 6rem;}
.recommendedCard .thumb img {width: 100%; height: 100%; object-fit: contain; object-position: left center;}
.recommendedCard .thumb.horiz {width: 6rem; margin-right: -0.5rem;}
.recommendedCard .thumb.horiz img {object-position: center bottom;}
.recommendedCard .info {display: flex !important; flex-direction: column; gap: 0.4rem; margin-top: 0 !important;}
.recommendedCard strong {display: block; font-size: 1.4rem; font-weight: 600; line-height: 2rem; color: #212528; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; white-space: normal; word-break: keep-all; word-break: break-word; word-break: auto-phrase;}
.recommendedCard span {font-size: 1.1rem; line-height: 1.5rem; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; white-space: normal; word-break: keep-all; word-break: break-word; word-break: auto-phrase;}
.recommendedCard span::before {display: none;}

/* performanceGuide */
.performanceGuide {display: flex; flex-direction: column; gap: 1.6rem; padding: 2rem; border-radius: 1.6rem; box-shadow: 0.1rem 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.2) inset, 0.8rem 0.8rem 2.4rem 0 rgba(0, 0, 0, 0.1); background: #fff;}
.performanceGuide .moduleTitle {margin: 0;}
.performanceGuide .cardSelect {}
.performanceGuide .customSlt {margin: 0; padding: 0.8rem 0; border-radius: 0;}
.performanceGuide .customSlt:after {display: none;}
.performanceGuide .cardSel.myCard {gap:0.8rem;}
.performanceGuide .cardSel.myCard .cardThumb {width:5.4rem; height:5.6rem;}
.performanceGuide .cardSel.myCard .cardName {font-size:1.6rem; color:#212528; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.performanceGuide .cardSel.myCard .cardInfo,
.performanceGuide .cardSelList .myCard .cardInfo {width:calc(100% - 6.6rem);}
.performanceGuide.accoItem {transition: background-color 0.3s, padding 0.3s, border-color 0.3s, margin 0.3s, box-shadow 0.3s; border:1px solid #fff;}
.performanceGuide.accoItem .accoBtn {display: flex; justify-content: space-between; -webkit-tap-highlight-color: transparent;}
.performanceGuide.accoItem .accoBtn::before {right: -5px;}
.performanceGuide.accoItem .ico {display: inline-block; width: 50px; margin-right: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; transform: translate(20px, -5px) scale(0.9);}
.performanceGuide.accoItem .moduleTitle {display: inline-block; transform-origin: left center; transition: all 0.3s; line-height: 1.4;}
.performanceGuide.accoItem:not(.on) {padding: 1.5rem 2rem; background-color: #ffcdf7; border:1px solid #e1a1d7; /*margin: -3.6rem 0;*/ box-shadow: unset;}
.performanceGuide.accoItem:not(.on) .ico {opacity: 1; transform: translate(0, 0) scale(1);}
.performanceGuide.accoItem:not(.on) .moduleTitle {transform: scale(0.8); color: #111}

.cardSel.myCard {display: flex; flex-direction: row; align-items: center; padding: 0; width: unset; height: unset;}
.cardSel.myCard:before {right: 0; width: 1.6rem; height: 1.6rem; background: url(../img/mw/content/arrow_16x16_black.png) no-repeat; background-size: contain; transform: rotate(90deg);}
.cardSel.myCard::after {display: none;}
.cardSel.myCard {gap: 1.2rem;}
.cardSel.myCard .cardThumb {flex-shrink: 0; width: 6rem; height: 6rem;}
.cardSel.myCard .cardThumb img {width: 100%; height: 100%; object-fit: contain; object-position: center center;}
.cardSel.myCard .cardThumb img.horizontal {transform: rotate(90deg);}
.cardSel.myCard .cardInfo {padding-right: 2.5rem;}
.cardSelList .myCard .cardInfo {width: calc(100% - 5rem); gap: 0.4rem;}
.cardSel.myCard .cardInfo,
.cardSelList .myCard .cardInfo {display: flex; flex-direction: column;} /* 250813 카드선택 myCard용 추가 */
.cardSel.myCard .cardName {font-size: 1.4rem; line-height: 2rem; margin-top: 0.4rem;}
.bottom.popCont .cardSelList .cardSel.myCard {gap: 1.2rem; border: solid 0.1rem rgba(0, 0, 0, 0.1); background: #fff; border-radius: 1.6rem; padding: 1.6rem; height: unset; margin-bottom: 0.8rem;}
.bottom.popCont .cardSelList .cardSel.myCard.on {border: solid 0.1rem #2589f4; background: #daeaf9;}
.bottom.popCont .cardSelList .cardSel.myCard.on:after {display: none;}
.cardSelList .myCard .cardThumb {width: 4.8rem; height: 4.8rem; flex-shrink: 0;}
.cardSelList .myCard .cardName {font-size: 1.4rem; color: #212528; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.performanceGuide .performanceStatus {padding-top: 1.6rem;}
.performanceStatus .title {display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0.8rem 0;}
.performanceStatus .title p {font-size: 1.4rem; font-weight:600; line-height: 2rem; color: #6d747b;}
.performanceStatus .title strong {font-size: 1.6rem; line-height: 2.2rem; font-weight: 700; color: #262c32;}
.performanceGuide .cardArea {padding-bottom:0.8rem;}
.performanceGuide .performanceProgress {margin-top: 0.8rem;}

/* 251031 실적 구간 정렬기준 수정 (s) */
.performanceProgress .performanceProgressBar {width:calc(100% - 3.2rem); height: 1.2rem; background: #e3e7eb; border-radius: 6rem; margin: 0.7rem auto 0;}
.performanceProgressBar .currentPoint {display: block; height: 1.2rem; border-radius: 6rem; background:#2589f4; position: relative; transition: width 0.4s 0.5s ease-out;}
.performanceProgressBar .currentPoint::after {content: ""; display: block; width: 2rem; height: 2rem; background: url(/dcmw/img/mw/content/progress_bar_point2.png) no-repeat; background-size: contain; position: absolute; top: -0.4rem; right: -1rem;}
.performanceProgress .range {display: flex; flex-direction: row; text-align: center; font-size: 1.2rem; font-weight:600; line-height: 1.6rem; color: #989fa7; padding-top: 0.8rem; margin:0 -1.6rem;}
.performanceProgress .range li {text-align:center;}
.performanceProgress .range.div_2 li {width:50%;}
.performanceProgress .range.div_3 li {width:33.3%;}
.performanceProgress .range.div_4 li {width:25%;}
.performanceProgress .range.div_5 li {width:20%;}
.performanceProgress .range li:first-of-type {text-align: left;}
.performanceProgress .range li:last-of-type {text-align: right; padding-right:1.8rem;}
@media screen and (max-width: 320px) {
	.senior .performanceProgress .performanceProgressBar {width:calc(100% - 2.0rem);}
	.senior .performanceProgress .range li:last-of-type {padding-right:1.0rem;}
}
/* 251106 금액 영역 줄바꿈 수정 (s) */
@media screen and (max-width: 345px) {
	html:not(.senior) .performanceProgress .range.div_5 li > span {letter-spacing:-1px;}
}
/* 251106 금액 영역 줄바꿈 수정 (e) */
@media screen and (max-width: 360px) {
	.performanceProgress .range.div_4 li:nth-child(3) {padding-left:0.5rem;}
	.senior .performanceProgress .range.div_5 li:nth-child(2) {padding-left:0.4rem;}
}
@media screen and (min-width: 375px) {
	.performanceProgress .range.div_4 li:nth-child(3) {padding-left:1rem;}
}
@media screen and (min-width: 690px) {
	.performanceProgress .range.div_4 li:nth-child(2) {padding-right:2.8rem;}
	.performanceProgress .range.div_4 li:nth-child(3) {padding-left:3.1rem;}
	.performanceProgress .range.div_5 li:nth-child(2) {padding-right:2.8rem;}
	.performanceProgress .range.div_5 li:nth-child(4) {padding-left:3.1rem;}
}
/* 251031 실적 구간 정렬기준 수정 (e) */
.performanceGuide .emptyCase {font-size: 1.5rem; color: #485056; text-align: center; padding: 0.8rem; margin-top: 0.8rem; line-height: 2rem;}
.performanceGuide .btnMore {display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; line-height: 2.4rem; padding: 1.2rem 2rem; border-radius: 0.8rem; border: solid 0.1rem rgba(0, 0, 0, 0.2); background: #fff;}
.performanceGuide .accoBody .btnMore {margin-top: 1.6rem;}
.performanceGuide .btnMore strong {display: flex; flex-direction: row; align-items: center; gap: 0.8rem; font-size: 1.4rem; font-weight: 600; color: #212528;}
.performanceGuide .btnMore strong::after {content: ""; display: block; width: 1.6rem; height: 1.6rem; background: url(/dcmw/img/mw/content/arrow_16x16_black.png) no-repeat; background-size: contain;}

.cardTransactions {}
.cardTransactions .title {display: flex; flex-direction: row; align-items: center; justify-content: space-between; font-size: 2rem; font-weight: 700; color: #212528; line-height: 2.8rem;}
.cardTransactions .title::after {content: ""; display: block; width: 3.6rem; height: 3.6rem; background: url(/dcmw/img/mw/content/arrow_16x16_black.png) center center no-repeat #fff; background-size: 1.6rem; border: solid 0.1rem rgba(0, 0, 0, 0.1); border-radius: 4rem; box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.1);}
.cardTransactions .list {margin: 1.6rem 0 0 -0.9rem;}
.cardTransactions .list li {display: grid; grid-template-columns: 4rem 1fr auto; gap: 0.8rem; padding: 1.5rem 0; align-items: center;}
.cardTransactions .list .thumb {width: 4.8rem; height: 4.8rem; text-align: center;}
.cardTransactions .list .thumb img {width: 100%; height: 100%; object-fit: contain; object-position: center center; filter: drop-shadow(0.4rem 0.4rem 0.8rem rgba(0, 0, 0, 0.1));}
.cardTransactions .list .thumb img.horizontal {transform: rotate(90deg);}
.cardTransactions .info {overflow: hidden; padding-left:0.7rem;}
.cardTransactions .info strong {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.6rem; font-weight: 600; color: #212528; line-height: 2.2rem;}
.cardTransactions .info span {font-size: 1.4rem; line-height: 2.0rem; color: #8f8f8f; font-weight:600; margin-top: 0.4rem;}
.cardTransactions .info span p {display:inline-block; position:relative; padding-right:0.8rem;}
.cardTransactions .info span p:first-child::after {content:''; display:inline-block; position:absolute; top:50%; right:0.1rem; width:0.3rem; height:0.3rem; margin-top:-0.1rem; border-radius:50%; background-color:#8f8f8f;}
.cardTransactions .list .amount {min-width:9rem; margin-top:-2.0rem; font-size: 1.6rem; line-height: 2.2rem; color: #212528; font-weight: 600; text-align:right; white-space: nowrap;}
.cardTransactions .list .amount.cancel {margin-top:0;}/* 251111 최근이용내역 취소 케이스 */
.cardTransactions .list .amount.cancel em {color: #888; text-decoration: line-through;}
.cardTransactions .list .amount.cancel span {display: block; text-align: right; font-size: 1.4rem; color: #e80163;}
.cardTransactions .emptyCase {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.2rem 2rem 0; margin-top: 1.6rem;}
.cardTransactions .emptyCase strong {font-size: 2.0rem; line-height: 2.8rem; font-weight: 700; color: #212528;}
.cardTransactions .emptyCase p {font-size: 1.4rem; line-height: 2rem; color: #485056; margin-top: 0.8rem;}
.cardTransactions .emptyCase .btn {width:100%; font-size: 1.4rem; line-height: 2.0rem; color: #212528; font-weight: 600; padding: 1.4rem; border: solid 0.1rem rgba(0, 0, 0, 0.2); border-radius: 0.8rem; margin-top: 3.2rem; background-color:#fff;}

.creditLimit {background: #797ee1; border-radius: 1.6rem; padding: 2rem;}
.creditLimit .title {display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #fff; font-weight: 700;}
.creditLimit .title h2 {font-size: 2rem; line-height: 2.8rem;}
.creditLimit .title .moreBtn {display: flex; flex-direction: row; align-items: center; gap: 0.4rem; font-size: 1.3rem; line-height: 1.8rem; font-weight:600;}
.creditLimit .title .moreBtn::after {content: ""; display: block; width: 1.6rem; height: 1.6rem; background: url(/dcmw/img/mw/content/arrow_16x16_white.png) no-repeat; background-size: contain;}
.creditLimit .list {display: flex; flex-direction: column; gap: 0.6rem; margin-top: 2.4rem;}
.creditLimit .list li {display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.1); border-radius: 0.8rem; padding: 1.3rem 1.6rem; color: #fff; line-height: 1.6rem; font-size: 1.2rem; }
.creditLimit .list p,
.creditLimit .list strong,
.creditLimit .list a {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.creditLimit .list strong {text-align: right; font-weight:700;}
.creditLimit .list a {text-decoration: underline;}

.utilityBtn {display: flex; flex-direction: row; justify-content: center; gap: 1.2rem;}
.utilityBtn button.btn {display: flex; flex-direction: row; align-items: center; gap: 0.4rem; background: #fff; border: solid 0.1rem rgba(0, 0, 0, 0.1); font-size: 1.4rem; line-height: 2rem; color: #485056; padding: 0.8rem 1.6rem 0.8rem 1.2rem; border-radius: 3rem;}
.utilityBtn button.btn::before {content: ""; display: block; width: 1.6rem; height: 1.6rem; background: url(/dcmw/img/mw/content/icon_utility_01.png); background-size: contain;}
.utilityBtn .btn.seniorScreenBtn::before {background: url(/dcmw/img/mw/content/icon_utility_02.png); background-size: contain;}
.utilityBtn .btn.seniorScreenBtn.active::before {background: url(/dcmw/img/mw/content/icon_utility_03.png); background-size: contain;}

.creditLimitQuick {padding:2.0rem; border-radius:1.6rem; background-color:#fff; box-shadow:0.1rem 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.2) inset, 0.8rem 0.8rem 2.4rem 0 rgba(0, 0, 0, 0.1);}
.creditLimitQuick .quickMenu {display:flex; flex-direction:row; justify-content:center;}
.creditLimitQuick .quickMenu a {width: calc(100% / 3); color:#212528; font-size:1.4rem; font-weight:600; line-height:2.0rem; text-align:center;}
.creditLimitQuick .quickMenu a:last-of-type {font-size:1.2rem; line-height:1.6rem;}
.creditLimitQuick .quickMenu a:last-of-type .thumb {margin-bottom:1.8rem;}
.creditLimitQuick .quickMenu .thumb {width:3.6rem; height:3.6rem; margin:0 auto 1.4rem;}
.creditLimitQuick .quickMenu img {display:block; width:100%; height:100%;}

/* 마이 - 큰글씨 */
.senior .renewCardStatement .bottomArea .link {padding:0 0.8rem;}
.senior .renewCardStatement .bottomArea .link:nth-child(1) {width:26%;}
.senior .renewCardStatement .bottomArea .link:nth-child(2) {width:26%;}
.senior .renewCardStatement .bottomArea .link:nth-child(3) {width:calc(100% - 52%);}

/* 마이 - media & 큰글씨 */
@media screen and (min-width:359px) {
	.senior .renewCardStatement .topArea {padding:0 1.0rem 1.2rem;}
	/* .senior .renewCardStatement .paymentAmount {font-size:1.7rem;} *//* 251023 명세서 - 금액 폰트사이즈 media 삭제 */
	.senior .renewCardStatement .bottomArea {padding:1.2rem 1.2rem 0;}
	.senior .creditLimitQuick .quickMenu a:last-of-type .thumb {margin-bottom:1.5rem;}
}
@media screen and (max-width:349px) {
	/* .renewCardStatement .paymentAmount {font-size:2.1rem;} *//* 251023 명세서 - 금액 폰트사이즈 media 삭제 */
	.renewCardStatement .bottomArea {padding:1.2rem 1.2rem 0;}
	.renewCardStatement .bottomArea .link {padding:0 0.8rem;}
	.creditLimitQuick .quickMenu a:last-of-type .thumb {margin-bottom:1.5rem;}

	.senior .renewCardStatement .bottomArea .link:nth-child(1) {width:22%;}
	.senior .renewCardStatement .bottomArea .link:nth-child(2) {width:22%;}
	.senior .renewCardStatement .bottomArea .link:nth-child(3) {width:calc(100% - 44%);}
	.senior .performanceGuide .btnMore {padding:1.2rem 0.4rem;}
	.senior .performanceGuide .btnMore strong {gap:0.2rem;}
	.senior .cardTransactions .emptyCase .btn {padding:1.4rem 0.6rem;}
}
@media screen and (max-width:280px) {
	.renewCardStatement .bottomArea .link:nth-child(1) {width:22%;}
	.renewCardStatement .bottomArea .link:nth-child(2) {width:22%;}
	.renewCardStatement .bottomArea .link:nth-child(3) {width:calc(100% - 44%);}

	.senior .renewCardStatement .bottomArea {padding:1.2rem 0.6rem 0;}
	.senior .renewCardStatement .bottomArea .link {padding:0 0.6rem;}
	.senior .performanceGuide .btnMore strong {gap:0;}
}
@media screen and (max-width:359px) {
    .welcomeArea .userName {flex-direction:column; align-items:flex-start;}
}

@media screen and (max-width:359px) {
    /* .welcomeArea .userName {flex-direction:column; align-items:flex-start;} *//* 251014 긴급대응서비스 추가로 인한 마이 welcome영역 @media 삭제 */
}

/* ============================== 마이 메인 (e) ============================== */


/* ============================== 로그인 페이지 (s) ============================== */
html.fitPage.newAppLogin .header {position: static;}
.newAppLogin body {background-color: #ECF5FD;}
.newAppLogin #content {padding: 40px 0 0;}
.newAppLogin .ipt {caret-color: #000; background-color: #fff;}
.newAppLogin .loginHeader {display: flex; justify-content: space-between; align-items: center; position: static; padding: 2px 16px 0 16px; border-color: transparent; background-color: transparent; z-index: 2000; backdrop-filter: unset; -webkit-backdrop-filter: unset;}
.newAppLogin .loginHeader div {display: flex; align-items: center;}
.newAppLogin .loginHeader div p {margin-left: 6px; font-size: 1.2rem; font-weight: 800; line-height: 1.6rem; color: #000;}
.newAppLogin .btnIco_allMenu.new {position: relative; right: auto; width: 24px; height: 24px; background: url(/dcmw/img/mw/login/app/ico_menu.png) no-repeat;}
.newAppLogin .loginHeader div > a {display: flex; align-items: center; top: 7px; padding-top: 3px;}
.newAppLogin .loginHeader div .wooriPay p {margin-left: 0;}
.newAppLogin .loginHeader div > a img {display: inline-block; position: relative; top: 5px; width: 42px; height: 47px;}
.newAppLogin .wooriPay {position: relative; margin-right: 5px; padding-top: 3px; transform: translateX(calc(100% - 30px)); animation: transformAni 0.3s ease; animation-fill-mode: forwards; animation-delay: 0.7s;}
.newAppLogin .loginHeader div > a.wooriPay {display: none;}
.newAppLogin .loginHeader div > a.wooriPay.on {display: flex;}
.newAppLogin .aroundApp .icoPhone {position: relative; background: #fff; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0px 2px 2px 0px #d1e4fe;}
.newAppLogin .aroundApp .icoPhone:after {content: ''; position: absolute; width: 9px; height: 13px; border: 2px solid #3182f7; border-top: 3px solid #3182f7; border-bottom: 3px solid #3182f7; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 3px;}
.newAppLogin .aroundApp .icoPhone::before {content: ''; position: absolute; width: 5px; height: 3px; background: #3182f7; top: 9px; left: 50%; transform: translateX(-50%); border-radius: 3px;}
.newAppLogin .wooriPay .frame {position: relative; background: #3282f8; width: 34px; height: 34px; border-radius: 50%; margin-right: 6px; box-shadow: 0px 2px 2px 0px #d1e4fe; animation: opacityAni 0.3s ease; animation-fill-mode: forwards; opacity: 0;}
.newAppLogin .wooriPay .frame img {width: 42px; height: 50px;}
.newAppLogin .wooriPay .frame:before {position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 14px; background: url(/dcmw/img/mw/login/app/ico_pay2.svg) no-repeat center; background-size: 100%; animation: opacityAni 0.5s ease; animation-fill-mode: forwards; animation-delay: 0.3s; opacity: 0; z-index: 1;}
.newAppLogin .wooriPay .frame:after {position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 10px; background: url(/dcmw/img/mw/login/app/ico_pay3.svg) no-repeat center; background-size: 100%; animation: blinkAni 1.5s step-end infinite; opacity: 0; animation-delay: 0.2s;}
.newAppLogin .wooriPay p {animation: opacityAni 1s ease; animation-fill-mode: forwards; animation-delay: 0.7s; opacity: 0;}
.newAppLogin .ipt { background-color: #fff;}
@keyframes transformAni {100% {transform : translateX(0px);}}
@keyframes opacityAni {form {opacity: 0;}to {opacity: 1;}}
@keyframes blinkAni {50% {opacity: 1;}}
.newAppLogin .secLogin {display: flex; flex-direction: column; justify-content: space-between; height: calc(100dvh - 180px); padding-bottom: 24px;}
.newAppLogin .loginTypeTit {text-align: center;}
.newAppLogin .loginTypeTit strong {display: block; margin-bottom: 15px; font-size: 2.2rem; color: #000; font-weight: 800;}
.newAppLogin .loginTypeTit .singleIpt label {color: #666;}
.newAppLogin .loginTypeTit .singleIpt input[type='checkbox'] + label:before {border: 1px solid #6C6C6C; background: url(/dcmw/img/mw/common/ico_checkbox2.png?v=20241127) no-repeat center center; background-color: #6C6C6C;} /* 250211 접근성 반영 */
.newAppLogin .loginTypeTit .singleIpt input[type='checkbox']:checked + label {color: #3182F7;}
.newAppLogin .loginTypeTit .singleIpt input[type='checkbox']:checked + label:before {border: 1px solid #3182F7; background-color: #3182F7; background-size: 110% !important;}
.newAppLogin .loginTypeTit > a {color: #3182F7; border-bottom: 2px solid #3182F7; font-weight: 600;}
.newAppLogin .loginBtnsWrap {padding: 0 16px;}
.newAppLogin .loginBtnsWrap .ipt {height: 60px; padding: 0 45% 0 20px;}
.newAppLogin .secLogin .typeThin {display: flex; gap: 8px;}
.newAppLogin .secLogin .typeThin button {width: 100%; height: 4.0rem; background: #fff; color: #3182f7; border-radius: 14px; font-size: 1.4rem; font-weight: 500; line-height: 4.0rem;}
.newAppLogin .typeThick {display: flex; gap: 8px;}
.newAppLogin .loginBtnsWrap .typeThick button {width: 100%; height: 5.6rem; margin-top: 16px; color: #3182F7; background: #fff; border-radius: 16px; font-size: 1.6rem; font-weight: 600; line-height: 5.6rem;}
.newAppLogin .secLogin button.blue {color: #fff; background: #3182f7;}
.newAppLogin .bottomBtn {display: flex; align-items: center; justify-content: center; gap: 8px;  height: 88px; color: #000; background: #fff; border-radius: 24px 24px 0 0; font-size: 1.6rem; font-weight: 600;}
.newAppLogin .bottomBtn i.btnIco_acco {display: block; transform: rotate(180deg); width: 24px; height: 24px; background: url(/dcmw/img/mw/login/ico_close_login_cont.png) no-repeat center center/15px 15px;}
.newAppLogin .loginTypeTit .keypad {margin-top: 70px;}
.newAppLogin .loginTypeTit .btnKeypad {background: #ECF5FD;}
.newAppLogin .loginTypeTit .form_wrap {display: inline-block; width: calc(100% - 40px); margin-top: 30px;}
.newAppLogin .loginTypeTit .form_wrap .iptWrap {width: 100%; height: 100%; margin: 0; border-radius: 0;}
.newAppLogin .loginTypeTit .form_wrap > div {display: flex; align-items: center; position: relative; height: 60px; background: #fff; border-top: 1px solid #EAEAEA;  border-right: 1px solid #EAEAEA; border-left: 1px solid #EAEAEA; text-align: left;}
.newAppLogin .loginTypeTit .form_wrap > div:first-child {border-radius: 10px 10px 0 0;}
.newAppLogin .loginTypeTit .form_wrap > div:last-child {border-top: 0; border-bottom: 1px solid #EAEAEA; border-radius: 0 0 10px 10px;}
.newAppLogin .loginTypeTit .form_wrap > div.birth {height: 0; transition: 0.4s; overflow: hidden;}
.newAppLogin .loginTypeTit .form_wrap > div.birth.on {height: 60px; border-bottom: 1px solid #EAEAEA;}
.newAppLogin .loginTypeTit .form_wrap > div.birth .iptWrap:after {content: none;}
.newAppLogin .loginTypeTit .form_wrap > div.birth .ipt {padding: 0 10px 0 20px;}
.newAppLogin .loginTypeTit .form_wrap > div input {width: 100%; height: 100%; padding-left: 20px; border: none; color: #000; font-size: 1.4rem; font-weight: 500;}
.newAppLogin .loginTypeTit .form_wrap > div input.ipt:focus {position: relative; border: 1px solid #000 !important; z-index: 1;}
.newAppLogin .loginTypeTit .form_wrap > div input::placeholder {color: #939393 !important; font-size: 1.5rem !important;} /* 250116 접근성 반영 */
.newAppLogin .loginTypeTit .form_wrap > div:first-child input {border-radius: 10px 10px 0 0;}
.newAppLogin .loginTypeTit .form_wrap > div:last-child input {padding: 0 10px 0 20px; border-radius: 0 0 10px 10px;}
.newAppLogin .loginTypeTit .form_wrap .btnSave {position: absolute; height: 100%; top: 50%; right: 0; transform: translateY(-50%); padding: 0 20px 0 25px; color: #666; font-size: 1.4rem;}
.newAppLogin .loginTypeTit .form_wrap .btnSave:before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 25px; height: 25px; background: url(/dcmw/img/mw/common/ico_checkbox1.png?v=20250218) no-repeat center center/25px 25px;}
.newAppLogin .loginTypeTit .form_wrap .btnSave.on {color: #3182F7;}
.newAppLogin .loginTypeTit .form_wrap .btnSave.on:before {background: url(/dcmw/img/mw/common/ico_checkbox7.png) no-repeat center center/15px 15px;}
.newAppLogin .loginTypeTit .form_wrap .btnDelete {visibility: hidden; position: absolute; top: 1px; right: 1px; z-index: 11; overflow: hidden; color: rgba(0, 0, 0, 0); width: 32px; height: 100%; background: none;}
.newAppLogin .loginTypeTit .form_wrap .id.focus .btnDelete {visibility: visible;}
.newAppLogin .loginTypeTit .form_wrap .birth.focus .btnDelete {visibility: visible;}
.newAppLogin .loginTypeTit .form_wrap .iptWrap .btnIco_del {height: 100%;}
.newAppLogin .loginTypeTit .form_wrap .id .iptWrap input {padding: 0 45% 0 20px;}
.newAppLogin .loginTypeTit .certifyDiv {display: flex; flex-direction: column; gap: 8px; width: calc(100% - 68px); margin: 30px auto 0;}
.newAppLogin .loginTypeTit .certifyDiv a {position: relative; height: 56px; background: #fff; border-radius: 12px; padding-left: 12px; color: #000; text-align: left; font-size: 1.8rem; font-weight: 600; text-indent: 52px; line-height: 56px;}
.newAppLogin .loginTypeTit .certifyDiv a.on {box-shadow: inset 0 0 0px 2px #3182f7, 0px 4px 32px 0px rgba(0, 0, 0, 0.08);}
.newAppLogin .loginTypeTit .certifyDiv a:before {position: absolute; content: ''; top: 50%; left: 20px; transform: translateY(-50%); width: 32px; height: 32px;}
.newAppLogin .loginTypeTit .certifyDiv a.finance:before {background: url(/dcmw/img/mw/login/app/ico_certify_1.png) no-repeat center; background-size: 100%;}
.newAppLogin .loginTypeTit .certifyDiv a.joint:before {background: url(/dcmw/img/mw/login/app/ico_certify_2.png) no-repeat center; background-size: 100%;}
.newAppLogin .loginTypeTit .certifyDiv a.payco:before {background: url(/dcmw/img/mw/login/app/ico_certify_3.png) no-repeat center; background-size: 100%;}
.newAppLogin .loginTypeTit .certifyDiv a.browser:before {background: url(/dcmw/img/mw/login/app/ico_certify_4.png) no-repeat center; background-size: 100%;}
.newAppLogin .loginTypeTit .certifyDiv a.won:before {background: url(/dcmw/img/mw/login/app/ico_certify_5.png) no-repeat center; background-size: 100%;}
.newAppLogin .loginTypeTit .loginVisual {width: 132px; height: 151px; margin: 60px auto 0;}

/* 로그인 타입 선택 팝업 */
.newAppLogin .popCont.bottom {border-radius: 24px 24px 0 0; z-index: 1;}
.newAppLogin .btnIco_close {background: url(/dcmw/img/mw/login/app/btn_close.svg) no-repeat center center !important;}
.newAppLogin .popHead h1 {font-weight: 800; word-break: keep-all;}
.newAppLogin #select_type .bottom.popCont .popBody {padding: 0 24px}
.newAppLogin #select_type .popCont.bottom .popInner > section {padding: 0 0 34px;}
.newAppLogin #select_type .popInner section {display: flex; flex-direction: column; align-items: flex-start; margin-top: 16px;}
.newAppLogin #select_type .popInner section a {display: block; position: relative; width: 100%; height: 3.0rem; color: #333; font-size: 1.8rem; text-align: left; text-indent: 44px;}
.newAppLogin #select_type .popInner section a.on {color: #3182F7}
.newAppLogin #select_type .popInner section a + a {margin-top: 20px;}
.newAppLogin #select_type .popInner section a:before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 30px; height: 30px;}
.newAppLogin #select_type .popInner section a.icoLogin1:before {background: url(/dcmw/img/mw/login/app/ico_login_type_1.svg) no-repeat center; background-size: 100%;}
.newAppLogin #select_type .popInner section a.icoLogin2:before {background: url(/dcmw/img/mw/login/app/ico_login_type_2.svg) no-repeat center; background-size: 100%;}
.newAppLogin #select_type .popInner section a.icoLogin3:before {background: url(/dcmw/img/mw/login/app/ico_login_type_3.svg) no-repeat center; background-size: 100%;}
.newAppLogin #select_type .popInner section a.icoLogin4:before {background: url(/dcmw/img/mw/login/app/ico_login_type_4.svg) no-repeat center; background-size: 100%;}
.newAppLogin #select_type .popInner section a.icoLogin5:before {background: url(/dcmw/img/mw/login/app/ico_login_type_5.svg) no-repeat center; background-size: 100%;}
.newAppLogin #select_type .popInner section a.icoLogin6:before {background: url(/dcmw/img/mw/login/app/ico_login_type_6.svg) no-repeat center; background-size: 100%;}
.newAppLogin #select_type .popInner section a.icoLogin7:before {background: url(/dcmw/img/mw/login/app/ico_login_type_7.svg) no-repeat center; background-size: 100%;}

/* 입력키패드 팝업*/
.newAppLogin #userKeypad {position: static;}
.newAppLogin #userKeypad .popInner section {text-align: center;}
.newAppLogin #userKeypad .popInner section h1 {color: #000; font-size: 1.6rem; font-weight: 800;}
.newAppLogin #userKeypad .popCont.bottom .popInner > section {padding: 0;} 
.newAppLogin #userKeypad .keypad {margin: 20px 0;}
.newAppLogin .btnKeypad {display: flex; justify-content: center; gap: 12px; height: 14px; padding: 0; border-bottom: 0; line-height: 1;}
.newAppLogin .btnKeypad > span {width: 14px; height: 14px; background: #d9d9d9; border: 1px solid #d9d9d9;}
.newAppLogin .btnKeypad > span.on {background: #3182F7; border: 1px solid #3182F7;}
.newAppLogin #userKeypad .popCont.bottom .popInner > section ul {display: flex; flex-wrap: wrap; gap: 9px;}
.newAppLogin #userKeypad .popCont.bottom .popInner > section ul li {display: flex; align-items: center; justify-content: center; width: calc(33.33% - 6px); height: 64px;}
.newAppLogin #userKeypad .popCont.bottom .popInner > section ul li button {width: 100%; height: 100%; color: #000; font-size: 28px;}
.newAppLogin #userKeypad .popCont.bottom .popInner > section ul li button.delAll {color: #000; font-size: 1.6rem; font-weight: 600;}
.newAppLogin #userKeypad .btnIco_del {width: 32px; height: 32px; background: url(/dcmw/img/mw/login/app/ico_delete.png) no-repeat center;}
.newAppLogin #userKeypad .btnIco_close {background: url(/dcmw/img/mw/login/ico_close_login_cont.png) no-repeat center center/15px 15px;}
.newAppLogin #userKeypad .errorMsg {margin-top: 12px; color: #ff0000;}

/* 카드 터칭 로그인 팝업 */
.newAppLogin #popupCardTouching1 .popCont {padding-bottom: 0;}
.newAppLogin #popupCardTouching1 .popBody {padding: 12px 26px 26px 26px;}
.newAppLogin #popupCardTouching1 .popBody h2 {margin: 12px 0 19px 0; color: #000; font-size: 1.6rem; font-weight: 500; word-break: keep-all;}
.newAppLogin #popupCardTouching1 ul {padding: 20px; background: #f4f4f4;}
.newAppLogin #popupCardTouching1 .txtList_remark {margin: 0; font-size: 1.0rem;}
.newAppLogin #popupCardTouching1 .txtList_remark li {padding-left: 9px; color: #999; word-break: keep-all;}
.newAppLogin #popupCardTouching1 .popInner img {width: 112px;}
.newAppLogin .alert .msg {word-break: keep-all;}
/* 디바이스 세로 670PX 이하 화면 */
@media (max-height: 670px) {
    .newAppLogin #content {padding: 40px 0 0;}
    .newAppLogin .secLogin {height: calc(100dvh - 180px); overflow: auto;}
    .newAppLogin .loginBtnsWrap {margin-top: 30px;}  
    .newAppLogin #loginIdpw.appIdpw .form {height: calc(100dvh - 228px);}
}

.newAppLogin #loginIdpw.test .form {display: flex; flex-direction: column; justify-content: space-between; height: calc(100dvh - 269px); padding-bottom: 24px;}
.newAppLogin #loginIdpw .form {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.newAppLogin .secLogin {display: none;}
.newAppLogin #loginIdpw.secLogin.on {display: flex;}
.newAppLogin #loginSimple.secLogin.on {display: flex;}
.newAppLogin #loginPattern.secLogin.on {display: flex;}
.newAppLogin #loginFinger.secLogin.on {display: flex;}
.newAppLogin #loginCertify.secLogin.on {display: flex;}
.newAppLogin #loginFaceId.secLogin.on {display: flex;}
.newAppLogin #loginBio.secLogin.on {display: flex;}
.newAppLogin #loginCard.secLogin.on {display: flex;}
.certifyBtns {display: none;}
.certifyBtns.on {display: block;}
.newAppLogin input[type="password"] {font-family: 'Nanum Square', '맑은 고딕', 'Malgun Gothic', 'Dotum', '돋움', 'gulim', '굴림', Helvetica, sans-serif;}
.newAppLogin .cover {position: absolute; top: 0; left: 0; width: 100vw; height: 100dvh; background: #FFF; z-index: 10;}
.newAppLogin .cover.off {display: none;}
#cardLoginGuide .popInner > img {width: 112px; height: 134px;}

.newAppLogin .id .iptWrap .btnIco_del {display: none;}
.newAppLogin .secLogin .id .btnDelete:before, .newAppLogin .secLogin .id .btnDelete:after {content: ''; display: block; position: absolute; top: 50%; left: 10px; width: 2px; height: 12px; margin-top: -7px; background-color: #666; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.newAppLogin .secLogin .id .btnDelete:after {transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.newAppLogin .secLogin .id input .btnDelete {width: 0;}
.newAppLogin .secLogin .id input:focus .btnDelete {width: 32px;}
.newAppLogin .secLogin .id.focus .btnSave {display: none;}
/* ============================== 로그인 페이지 (e) ============================== */


/* ============================== 홈 메인 (s) ============================== */
/* 홈 메인 - 카드추천 */
.cardPickWrap .textBanner {display: block; font-size: 2rem; line-height: 2.8rem; color: #212528; padding: 0 7rem 0 2rem; position: relative; word-break: keep-all;}
.cardPickWrap .textBanner::after {content: ""; display: block; width: 3.6rem; height: 3.6rem; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3l5 5-5 5' stroke='%236d747b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center no-repeat #fff; background-size: 1.6rem 1.6rem; box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.1); border: solid 0.1rem rgba(0, 0, 0, 0.1); border-radius: 5rem; position: absolute; top: calc(50% - 1.8rem); right: 2rem;}
.cardPickWrap .textBanner em {display: block; color: #2589f4; font-weight: 700;}
.cardPickWrap .textBanner strong {font-weight: 700;}
.cardPickWrap .cardPickSwiper {margin-top: 4.8rem; min-height: 32.6rem;}

.cardPickSwiper.snapScroll {scroll-padding: 0 2rem;}
.cardPickSwiper.snapScroll > ul {padding: 0 2rem;}
.cardPickSwiper.snapScroll > ul > li {width: 15rem;;}
.cardPickSwiper .item {display: flex; flex-direction: column; gap: 2.4rem; position: relative; max-width: 14.5rem; min-height: 20.3rem;}
.cardPickSwiper .item .thumb {width: 12.8rem; height: 20.3rem; border-radius: 0.4rem; overflow: hidden; box-shadow: 0.4rem 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.1);}
.cardPickSwiper .item .thumb img {width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto 128 / 203;}
.cardPickSwiper .cardInfo strong {white-space: normal;} 
.cardPickSwiper .cardInfo {display: flex; flex-direction: column; gap: 0.8rem; box-sizing: border-box; padding-right: 1rem;}
.cardPickSwiper .cardInfo strong,
.cardPickSwiper .cardInfo p {color: #212528; font-size: 1.55rem; font-weight: 700; line-height: 2.2rem; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
.cardPickSwiper .cardInfo strong {min-height: 4.4rem; letter-spacing: -0.01em;}
.cardPickSwiper .cardInfo p {color: #485056; font-size: 1.2rem; font-weight: 400; line-height: 1.6rem; white-space: normal;}
.cardPickSwiper .item .chip {font-size: 1.2rem; color: #fff; font-weight: 700; line-height: 1.6rem; padding: 0.4rem 1rem; background: rgba(0, 0, 0, 0.6); border-radius: 2rem; position: absolute; top: 1rem; left: 5.3rem;}

/* 홈 메인 - 앱 다운로드 배너 */
.wooricardAppBanner {display: flex; flex-direction: row; gap: 1.6rem; margin-top: 4.8rem; padding: 0 2rem; min-height: 8.3rem;}
.wooricardAppBanner .thumb {width: 8rem; height: 8rem; box-shadow: 0.1rem 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.2) inset, 0.8rem.8rem 2.4rem 0 rgba(0, 0, 0, 0.1); border-radius: 1rem; overflow: hidden; flex-shrink: 0;}
.wooricardAppBanner .thumb img {width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1 / 1;}
.wooricardAppBanner .text strong {font-weight: 700; line-height: 2rem; color: #212528;}
.wooricardAppBanner .text p {font-size: 1.2rem; color: #6d747b; line-height: 1.6rem; margin-top: 0.4rem;}
.wooricardAppBanner .text .link {display: flex; flex-direction: row; align-items: center; gap: 0.4rem; color: #485056; font-size: 1.3rem; line-height: 1.8rem; font-weight: 600; margin-top: 0.8rem;}
.wooricardAppBanner .text .link::after {content: ""; display: block; width: 1.6rem; height: 1.6rem; background: url(/dcmw/img/mw/content/icon_link_arrow.png); background-size: contain;}

/* 홈 메인 - 라이프서비스 */
.lifeCareService h2.title {font-size: 2rem; line-height: 2.8rem; font-weight: 700; color: #212528;}
.lifeCareService .quickLink {display: block; border-radius: 1.6rem; min-height: 16.1rem; overflow: hidden;}
.lifeCareService .quickLink img {width: 100%; height: 100%; object-fit: contain; aspect-ratio: 321 / 161;}
.lifeCareService .quickLink + .quickLink {margin-top: 1.2rem;}
.lifeCareService .careServiceWrap {display: flex;flex-direction: column;gap: 1rem; margin-top:1.6rem}
.lifeCareService .careServiceWrap .careServiceImgWrap {display: flex;gap: 1rem;}
.lifeCareService .careServiceWrap .careServiceImgWrap .careServiceLink {border-radius:1.6rem ; overflow: hidden}
.lifeCareService .careServiceWrap .careServiceImgWrap .careServiceLink img {width:100%; height:100%}
.lifeCareService .lifeServiceList {padding: 1.6rem; border-radius: 1.6rem; border: solid 0.1rem rgba(0, 0, 0, 0.1); background: #fff; margin-top: 1.2rem;}
.lifeCareService .lifeServiceList .item {display: block; padding-bottom: 1.6rem;}
.lifeCareService .lifeServiceList .item:not(:first-of-type) {padding: 1.6rem 0; border-top: solid 0.1rem rgba(0, 0, 0, 0.1);}
.lifeCareService .lifeServiceList .item:last-of-type {padding-bottom: 0;}
.lifeCareService .lifeServiceList .list {display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.4rem;}
.lifeCareService .lifeServiceList .accoBtn {display: block; padding: 0.4rem 2.4rem 0.4rem 5.6rem; position: relative;}
.lifeCareService .lifeServiceList .accoBtn .icon {display: block; width: 4.8rem; height: 4.8rem; background: #f7f7f7; padding: 1.2rem; border-radius: 5rem; position: absolute; top: 0; left: 0;}
.lifeCareService .lifeServiceList .accoBtn .icon img {width: 100%; height: 100%; object-fit: contain;}
.lifeCareService .lifeServiceList .accoBtn strong {font-size: 1.6rem; line-height: 2.2rem; font-weight: 600;}
.lifeCareService .lifeServiceList .accoBtn p {font-size: 1.2rem; font-weight: 500; color: #485056;}
.lifeCareService .lifeServiceList .accoBody {margin-top: 1.6rem;}
.lifeCareService .lifeServiceList .list .linkItem {width: calc(50% - 0.2rem); padding: 1.2rem; border-radius: 0.8rem; border: solid 0.1rem rgba(0, 0, 0, 0.1); background: #fff;}
.lifeCareService .lifeServiceList .list .ribbon {display: inline-block; font-size: 1rem; font-weight: 700; line-height: 1.4rem; color: #000; padding: 0.4rem 0.8rem; margin-bottom: 0.5rem;}
.lifeCareService .lifeServiceList .list .title {display: block; font-size: 1.4rem; line-height: 2rem; font-weight: 600; color: #212528;}
.lifeCareService .lifeServiceList .list .text {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-top: 0.4rem; color: #485056; font-size: 1.1rem; line-height: 1.5rem; font-weight: 400; height: 3rem;}
.lifeCareService .radiusShadowBox {padding: 1.6rem 2rem; margin-top: 2.4rem;}
.lifeCareService .radiusShadowBox h3 {display: flex; flex-direction: row; align-items: center; gap: 0.8rem; color: #212528; font-size: 1.6rem; font-weight: 700; line-height: 2.2rem;}
.lifeCareService .radiusShadowBox h3 .thumb {width: 2.4rem; height: 2.4rem; flex-shrink: 0;}
.lifeCareService .radiusShadowBox h3 img {width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1 / 1;}
.lifeCareService .radiusShadowBox .linkList {display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 1.2rem; margin-top: 1.2rem;}
.lifeCareService .linkList a {display: block; width: calc(50% - 0.6rem); padding: 0.7rem 0; color: #6d747b; font-weight: 600; line-height: 2rem;}
/* ============================== 홈 메인 (e) ============================== */