/* ===================== */
/* card-detail */
/* ===================== */

/* ---- 정렬 ---- */
.al {text-align:left !important;}
.mt5	{margin-top:5px !important;}
.mt10	{margin-top:10px !important;}
.mt20	{margin-top:20px !important;}

/* ---- 폰트 스타일 ---- */
strong {font-weight:600;}
.txt_mark {padding-left:14px; text-indent:-14px;}
.txt_mark2 {padding-left:10px; text-indent:-10px;}
.em {color:var(--point-600);}
.em2 {font-weight:700; color:var(--point-600);}
.f17 {font-size:17px;}

.content.card-detail { margin-top: 92px; max-width: 831px; }
.conTitWr {display:none;}

/* ---- 리스트 스타일 ---- */
.bl01 > li {position:relative; padding-left:11px; font-size: 16px; line-height: 24px; letter-spacing: -0.64px; color:var(--gray-700); word-break: break-all; }
.bl01 > li:before {display:block; content:''; width:3px; height:3px; position:absolute; top:9px; left:0; background-color:var(--gray-700); border-radius:50%;}
.bl01 > li + li {margin-top:12px;}
.bl01 > li .bl02 {margin-top:6px;}
.bl02 > li {position:relative; padding-left:13px; font-size: 16px; line-height: 24px; letter-spacing: -0.64px; color:var(--gray-700); }
.bl02 > li:before {display:block; content:''; width:5px; height:1px; position:absolute; top:12px; left:0; background-color:var(--gray-700);}
.bl02 > li + li {margin-top: 4px;}
.bl02 > li .bl02 { margin-top: 4px;}
.bl02 > li .bl02 > li + li {margin-top:4px;}
ul > li > ol {margin-top:8px;}
ol > li {position:relative; padding-left:17px; font-size:16px; line-height: 24px; color:var(--gray-700); text-indent:-17px; letter-spacing:-0.64px;}
ol > li + li {margin-top:4px;}

.tblCol {table-layout:fixed; width:100%; border-top:1px solid var(--black); background-color:var(--white);}
.tblCol thead th {padding:12px 20px; color:var(--text-secondary); border-bottom:1px solid #E7E9EF; line-height:24px; text-align:center; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.64px; }
.tblCol tbody th {padding:16px; font-weight:700; font-size:16px; color:var(--black); border-bottom:1px solid #E7E9EF; line-height:24px; text-align:center; letter-spacing:-0.64px;}
.tblCol tbody td {padding:24px; color:var(--gray-500); border-bottom:1px solid #E7E9EF; text-align:center; vertical-align:middle; font-size: 16px; line-height: 24px; letter-spacing: -0.64px; }
.tblCol.al tbody td {text-align:left;}
.tblCol.al tbody td.ac {text-align:center;}

/* 웹에서 인트로아웃시 덜컹 방지 */
html {scrollbar-gutter: stable;}

.vipCard * {font-family:'Pretendard';}
/* .vipCard::before { content: ""; position:absolute; top: 0; left: 0; width: 100%; height: 410px; background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; } */
[data-pgm-id=ind2010] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2011] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2012] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2013] .vipCard::before{ background: url("/static/images/card/card_602369_bg.svg") no-repeat center; background-color: #000A22; }
[data-pgm-id=ind2014] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2015] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2016] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2017] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2018] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2019] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2020] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2021] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }
[data-pgm-id=ind2022] .vipCard::before{ background: url("/static/images/card/card_225005_bg.svg") no-repeat center; background-color: #525252; }

.cardImg {margin-bottom:32px; height:320px; text-align:center;}
.cardImg img {display:block; width:auto; height: 100%; margin:0 auto;}
#contents .cardTop h3.card_title, .cardTop h3.card_title { font-size: 48px; font-weight: 700; line-height: normal; color:var(--gray-900); text-align:center;}
.cardTop .card_type {margin:8px 0 28px; display:flex; justify-content:center;}
.cardTop .card_type .brand {display:flex; gap:12px;}
.cardTop .card_type .brand li span {overflow:hidden; position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.cardTop .card_type .brand li {width:43px; height:32px;}
.cardTop .card_type .brand li.visa {-webkit-mask:url('/static/images/icons/ic-visa.svg') no-repeat 0 0; mask:url('/static/images/icons/ic-visa.svg') no-repeat 0 0; -webkit-mask-size: contain; mask-size: contain; background-color: #1434CB;}
.cardTop .card_type .brand li.master {background:url('/static/images/icons/ic-master.svg') no-repeat 0 0; background-size:contain;}
.cardTop .cardIssue {margin-bottom:12px; padding:24px 40px; border:1px solid var(--alpha-bk5); border-radius:16px;}
.cardTop .cardIssue dl + dl {margin-top:8px;}
.cardTop .cardIssue dl {display:flex; justify-content:space-between;}
.cardTop .cardIssue dl dt, .cardTop .cardIssue dl dd {font-size:18px; color:var(--gray-700); line-height:27px; letter-spacing:-0.72px;}
.cardTop .cardIssue dl dt { white-space: nowrap; }
.cardTop .cardIssue dl dd {display:flex; gap:12px; justify-content: flex-end; font-weight: 500; color: var(--gray-900); margin-left: 20px; text-align: right;}
.cardTop .noti_wrap {padding:20px 40px; background-color:var(--gray-20); border-radius:16px;}
.cardTop .noti_wrap {display:flex; gap:60px;}
.cardTop .noti_wrap .noti_tit {position:relative; padding-left:24px; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.64px; color:var(--gray-500); }
.cardTop .noti_wrap .noti_tit:before {display:block; content:''; position:absolute; top:4px; left:0; width:20px; height:20px; background: url('/static/images/icons/ic-noti.svg') no-repeat 0 0/16px 16px;}
.cardTop .noti_wrap .noti_con {max-width:619px; font-size: 16px; line-height: 24px; letter-spacing: -0.64px; color:var(--gray-500);}
.cardTop .noti_wrap .noti_con p + p, .cardTop .noti_wrap .noti_con ul + p {margin-top:6px;}
.cardTop .noti_wrap .noti_con p + .txt_mark2 {margin-top:0;}

.fee_wrap {margin-top: 60px;}
.fee_wrap .fee_header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.fee_wrap .fee_header .contTit {margin-top: unset; padding-bottom: unset;}
.fee_wrap .fee_header .contTit::after {content: none;}
.fee_wrap .fee_header .contTit button {position: relative; padding-right: 20px;}
.fee_wrap .fee_header .contTit button::after {content: ''; display: block; width: 20px; height: 20px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); -webkit-mask: url(/static/images/icons/chevron-right.svg) no-repeat center center / 20px auto; mask: url(/static/images/icons/chevron-right.svg) no-repeat center center / 20px auto; background-color: var(--black);}
.fee_wrap .fee_header .contTit + p {color: var(--gray-500)}
.fee_wrap .fee_body .fee_item_list br.mobr {display: none;}
.fee_wrap .fee_body .fee_item_list li {background: var(--gray-20); border-radius: var(--radius-16); padding: 20px 32px; display: flex; align-items: baseline; gap: 12px;}
.fee_wrap .fee_body .fee_item_list li + li {margin-top: 8px;}
.fee_wrap .fee_body .fee_item_list li > p {flex: 0 170px; font-weight: 600;}
.fee_wrap .fee_body .fee_item_list li > div {flex-grow: 1;}
.fee_wrap .fee_body .fee_item_list li dl {display: flex; justify-content: space-between;}
.fee_wrap .fee_body .fee_item_list li dl + dl {margin-top: 4px;}
.fee_wrap .fee_body .fee_item_list li dl dt {color: var(--gray-500);}
.fee_wrap .fee_body .fee_item_list li dl dd {font-weight: 600;}
.fee_wrap .fee_body .fee_item_list li dl + p.txt_mark,
.fee_wrap .fee_mark_list .txt_mark {color: var(--gray-400); font-size: 14px; margin-top: 4px;}
.fee_wrap .fee_mark_list {margin-top: 16px;}

/* 연회비 팝업 */
.fee_wrap.inpop.inner {margin-top: unset; padding: 20px 32px 32px;}
.fee_wrap.inpop .fee_header {flex-direction: column; gap: 4px 0; align-items: flex-start;}
.fee_wrap.inpop .fee_body .fee_item_list li {flex-direction: column; padding: unset; background: none; gap: 8px 0;}
.fee_wrap.inpop .fee_body .fee_item_list li + li {margin-top: 40px;}
.fee_wrap.inpop .fee_body .fee_item_list li > p {flex: unset; font-size: 18px;}
.fee_wrap.inpop .fee_body .fee_item_list li > div {width: 100%; background: var(--gray-20); border-radius: var(--radius-16); padding: 20px 24px; display: flex; flex-direction: column;}
.fee_wrap.inpop .fee_body .fee_item_list li > div hr {all: unset; width: 100%; height: 1px; background: var(--alpha-bk5); margin: 20px 0;}
.fee_wrap.inpop .fee_body .fee_item_list li > div dl {display: block;}
.fee_wrap.inpop .fee_body .fee_item_list li > div dl dt {font-size: 15px;}
.fee_wrap.inpop .fee_body .fee_item_list li > div dl dd {margin-top: 6px;}
.fee_wrap.inpop .fee_body .fee_item_list li > div dl dd.detail {font-size: 15px; font-weight: 400; color: var(--gray-400); margin-top: unset;}
.fee_wrap.inpop .fee_body .fee_item_list li dl + p.txt_mark {margin-top: 6px;}
.fee_wrap.inpop .fee_mark_list {margin-top: 20px;}

@media (max-width: 1023px) {
    .fee_wrap .fee_body .fee_item_list br.mobr {display: block;}
    .fee_wrap .fee_body .fee_item_list li {flex-direction: column;}
    .fee_wrap .fee_body .fee_item_list li > p {flex: unset;}
    .fee_wrap .fee_body .fee_item_list li > div {width: 100%;}
    .fee_wrap .fee_body .fee_item_list li > div dl {gap: 0 8px;}
    .fee_wrap .fee_body .fee_item_list li > div dl dd {flex: 0 0 auto;}
}


@media (max-width: 767px) {
    .fee_wrap.inpop.inner {padding: 20px 20px 32px;}
    .fee_wrap .fee_body .fee_item_list li {padding: 20px;}
}




.cardViewBody * {font-family:'Pretendard';}
#contents h4.contTit, h4.contTit {position:relative; margin-top:60px; padding-bottom:12px; color: #070707; font-size: 24px; font-weight: 700; line-height: 36px; letter-spacing: -0.96px;}
#contents h4.contTit:after, h4.contTit:after {display:block; content:''; width:100%; height:1px; position:absolute; left:0; right:0; bottom:0; background-color:#070707;}

.cardViewBody .item > button {position:relative; width:100%; text-align:left;}
.cardViewBody .item > button::after {display:block; content:''; width:20px; height:20px; position:absolute; top: 50%; right: 0; transform: translateY(-50%); background:url('/static/images/icons/ic-open.svg') no-repeat 0 0/20px 20px;}

.vipCardItem .item:last-child {border-bottom:1px solid var(--alpha-bk5);}
.vipCardItem .item > button {padding:24px 40px 24px 0; border-top:1px solid var(--alpha-bk5);}
.vipCardItem .item:first-child > button {border-top:0 none;}
.vipCardItem .item .tit.noSub {min-height:109px;}
.vipCardItem .item.noItem .tit::after {display:none;}
.vipCardItem .item .point {color:var(--point-600);}

.vipCardItem .item.on .tit:after {background:url('/static/images/icons/ic-close.svg') no-repeat 0 0/20px 20px;}
.vipCardItem .item .tit .main {display:block; color:var(--gray-900); font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: -0.8px; }
.vipCardItem .item .tit .sub {display:block; margin-top:4px; display:flex;}
.vipCardItem .item .tit .sub span {position:relative; color:var(--gray-500); font-size: 18px; line-height: 27px; letter-spacing: -0.72px; }
.vipCardItem .item .tit .sub span + span {padding-left:15px;}
.vipCardItem .item .tit .sub span + span:before {display:block; content:''; position:absolute; top:6px; left:7px; width:1px; height:13px; background-color: var(--primary-p50);}

.vipCardItem .item .view {display:none; padding:32px 32px 48px; font-size:16px; color:var(--gray-700); background-color:var(--gray-20); line-height:24px; letter-spacing:-0.64px;}

/* 20260923_수정, view inner 개편 */
.cardViewBody .item .view .bnft_tit,
.refer_view .bnft_tit {font-size: 18px; font-weight: 600; line-height: 27px; letter-spacing: -0.72px; position: relative; margin-bottom: 16px;}
.cardViewBody .item .view .benefit + .benefit {position: relative;}
.cardViewBody .item .view .benefit + .benefit {margin-top: 32px; padding-top: 32px;}
.cardViewBody .item .view .benefit + .benefit::before {content: ''; display: block; width: 100%; height: 1px; position: absolute; top: 0; background: var(--alpha-bk5);}

.vipCardItem .view table + table {margin-top:24px;}
.vipCardItem .view .ico.visa {display:inline-block; margin-left:10px; width:43px; height:19px; background:url('/static/images/card/addon/ic_visa02.png') no-repeat 0 -1px; background-size:contain; vertical-align:middle;}
.vipCardItem .view .ico span {overflow:hidden; position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.cardViewBody .view .cell_tit {font-weight: 600; color: var(--text-secondary); margin-bottom: 12px;}

.cardViewBody .view .cell_tit ~ p:not([class]) {margin-top: 6px;}
.cardViewBody .view .cell_tit ~ ul.bl01 li { margin-top: 10px;}
.cardViewBody .item .view .benefit table .bl01 > li, 
.cardViewBody .item .view .benefit .cell .bl01 > li {color: var(--gray-500);}
.cardViewBody .item .view .benefit table .bl01 > li::before,
.cardViewBody .item .view .benefit .cell .bl01 > li::before {background: var(--gray-500);}

.cardBtmInfo {padding-top: 20px;}
.cardBtmInfo *, .cardBtmInfo ul li, .cardBtmInfo ol li {color:var(--gray-500);}
.cardBtmInfo .item {background: var(--gray-20); border-radius: var(--radius-16); overflow: hidden;}
.cardBtmInfo .item.on {padding-bottom: 24px;}
.cardBtmInfo .item + .item {margin-top: 12px;}
.cardBtmInfo .item > button {padding: 20px 32px;}
.cardBtmInfo .item:first-child > button {border-top:0 none;}
.cardBtmInfo .item > button::after {right: 32px;}
.cardBtmInfo .item.on  > button::after {background:url('/static/images/icons/ic-close.svg') no-repeat 0 0/20px 20px;}
.cardBtmInfo .item .tit .main {font-size: 18px; font-weight: 600; color: var(--gray-900);}
.cardBtmInfo .item .view {display: none; padding-top: unset;}
.cardBtmInfo .item .view table {border-top: none; border-radius: 16px; overflow: hidden;}
.cardBtmInfo .item .view table td {border-bottom: none;}
.cardBtmInfo .item .view .cell {position: relative;}
.cardBtmInfo .item .view .cell + .cell {margin-top: 24px; padding-top: 24px;}
.cardBtmInfo .item .view .cell + .cell::before {content: ''; display: block; width: 100%; height: 1px; position: absolute; top: 0; background: var(--alpha-bk5);}
.cardBtmInfo .item .view .cell_tit {font-size: 16px; margin-bottom: 12px;}
.cardBtmInfo .item .view .cell_tit ~ ul.bl01 li {margin-top: 8px;}
.cardBtmInfo .refer_view {padding:40px 0 0;}

.vipCardItem .link_text {color: var(--point-600); line-height: 150%; text-decoration: underline;}

@media (max-width: 1023px) {
    #contents .cardTop h1.card_title, .cardTop h1.card_title { font-size: 32px; font-weight: 700; line-height: 42.88px; letter-spacing: -1.28px; }
    .cardTop h3.card_title{font-size: 32px;}
    .cardTop .cardIssue {padding:24px 24px;}
    .cardTop .cardIssue dl dt, .cardTop .cardIssue dl dd { font-size: 16px; line-height: 24px; letter-spacing: -0.64px; }

    .cardTop .noti_wrap .noti_tit {font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.64px; color:var(--gray-500);}
    .cardTop .noti_wrap .noti_con {padding-left: 24px; max-width:556px; font-size: 16px; line-height: 24px; letter-spacing: -0.64px; color:var(--gray-500);}

    .annualFee dl + dl {margin-top:12px;}
    .annualFee dl dt {font-size: 16px; line-height: 24px; letter-spacing: -0.64px; }
    .annualFee dl dd {font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.64px; }

    #contents h4.contTit, h4.contTit {padding-bottom:16px; margin-top:48px; font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: -0.8px;}

    .vipCardItem .item .tit .main {font-size: 18px; font-weight: 600; line-height: 27px; letter-spacing: -0.72px;}
    .vipCardItem .item .tit .sub span + span {padding-left:0;}
    .vipCardItem .item .tit .sub span + span:before {content:none;}
    .vipCardItem .item .tit .sub span {font-size: 16px; line-height: 24px; letter-spacing: -0.64px;}
    .vipCardItem .item .view {padding:32px 20px 48px; font-size: 16px; line-height: 24px; letter-spacing: -0.64px;}
    .vipCardItem .item .view .sub_tit {font-size: 18px; font-weight: 600; line-height: 27px; letter-spacing: -0.72px;}
}

@media (min-width: 768px) and (max-width: 1023px) {
}

@media (max-width: 767px) {
    /* .vipCard::before {height: 260px;} */

    .content.card-detail { margin-top: 68px; }

    .cardImg {margin-bottom:32px; height:220px;}

    .cardTop .cardIssue { padding:24px 20px; }
    .cardTop .noti_wrap { display:block; padding:20px; }
    .cardTop .noti_wrap .bl02 li { margin-top: 4px; }
    .cardTop .noti_wrap .noti_tit { margin-bottom: 8px; }

    .vipCardItem .item .tit .sub { flex-flow: column; }
    .vipCardItem .item .tit .sub span + span {padding-left:0;}
    .vipCardItem .item .tit .sub span + span:before { content: none; }

    .cardBtmInfo .item > button {padding: 20px;}
    .cardBtmInfo .item > button::after {right: 20px;}
    .cardBtmInfo .item .tit .main {max-width: calc(100% - 28px);}
}

.annualFee.feeTable {padding: 32px 40px 48px;}
.annualFee.feeTable .ac {text-align: center !important;}
.view .underlined {text-decoration: underline;}
.tblCol tbody tr:last-child td {border-bottom: none;}
.tblCol td.hasTb .scrollable-table {overflow-x: auto; position: relative;}
.tblCol td.hasTb .scrollable-table ._table {border-top: none;}
.tblCol td.hasTb .scrollable-table ._table th {background: none;}
.tblCol td.hasTb .scrollable-table table {width: 100%; min-width: 700px;}
.tblCol td.hasTb table {border-top: 1px solid #000; border-bottom: 1px solid #E7E9EF;}
.tblCol td.hasTb thead th {padding: 12px 20px;}
.tblCol td.hasTb tbody th,
.tblCol td.hasTb tbody td {padding: 16px; border-top: 1px solid #E7E9EF; border-bottom: none;}
.cardBtmInfo .view {padding: 32px 40px 24px;}
.cardBtmInfo .sub_tit {margin:24px 0 12px; font-size:18px; font-weight:700; line-height:27px; letter-spacing:-0.72px;}
.cardBtmInfo .sub_tit + p {font-size: 16px;}
.bl01.ntc > li {padding-left: 13px; text-indent: -13px;}
.bl01.ntc > li:before {content:none;}
ol.ver02 {counter-reset: item 0;}
ol.ver02 > li {counter-increment: item; padding-left: 22px; text-indent: 0;}
ol.ver02 li::before {content: counter(item) ". "; display: block; width: 22px; position: absolute; left: 0;}
.img_thumbs {width: 100%; margin-top: 10px; margin-bottom: 12px;}
.img_thumbs img {width: 100%;}
.img_thumbs.mx70 {max-width: 70px;}
.img_thumbs.mx150 {max-width: 150px;}
.img_thumbs.mx300 {max-width: 300px;}



/* 인트로 */
.vipCard-intro {position: absolute; z-index: 8; width: 100%; height: calc(100dvh - 70px); top:0; left: 50%; transform: translateX(-50%); background: #000; will-change: transform; overscroll-behavior-y: contain; scroll-snap-type: y mandatory;}
.vipCard-intro .intro-cont { height: 100%; text-align: center; color: #fff; user-select: none; -webkit-user-select: none; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 40px 0;}
.vipCard-intro .intro-cont .text-wrap { opacity: 0; transform: translateY(60px); flex-shrink: 0;}
.vipCard-intro .intro-cont .text-wrap .desc {text-shadow: 0 0 20px rgba(0, 0, 0, 0.25); font-size: 20px; line-height: 150%; letter-spacing: -0.8px;}
.vipCard-intro .intro-cont .text-wrap .title {margin-top: 8px; text-align: center; text-shadow: 0 0 20px rgba(0, 0, 0, 0.25); font-size: 54px; font-weight: 700; line-height: normal;}
.vipCard-intro .intro-cont .img-wrap {max-width: 500px; opacity: 0; transform: translateY(120px); overflow: hidden;  aspect-ratio: 1/1; width: clamp(300px, 60vh, 500px);}
.vipCard-intro .intro-cont .img-wrap img {width: 100%; height: 100%; object-fit: cover; position: relative;}
.vipCard-intro .intro-cont .btn-wrap {position: absolute; bottom: 0; width: 100%; display: flex; justify-content: center; align-items: center; padding-bottom: 20px; }
.vipCard-intro .intro-cont .btn-wrap button {width: 40px; height: 40px; 
    -webkit-mask: url(/static/images/icons/chevron-down.svg) no-repeat center center / auto 30px;
    mask: url(/static/images/icons/chevron-down.svg) no-repeat center center / auto 30px;
    background-color: var(--white);}

.card-detail { opacity: 0; transform: translateY(160px); }

.vipCard-intro.infinite {background: url(/static/images/card/detail_bg_infinite.png) no-repeat bottom center/cover;}
.vipCard-intro.diamond {background: url(/static/images/card/detail_bg_diamond.png) no-repeat bottom center/cover;}
.vipCard-intro.platinum {background: url(/static/images/card/detail_bg_platinum.png) no-repeat bottom center/cover;}
.vipCard-intro.bliss7 {background: url(/static/images/card/detail_bg_bliss7.png) no-repeat bottom center/cover;}
.vipCard-intro.bliss5 {background: url(/static/images/card/detail_bg_bliss5.png) no-repeat bottom center/cover;}
.vipCard-intro.ePlatinum {background: url(/static/images/card/detail_bg_eplatinum.png) no-repeat bottom center/cover;}

@media (max-width: 1023px) {
    .vipCard-intro {height: calc(100dvh - 56px);}
    .vipCard-intro .intro-cont {padding-top: 0;}
    .cardBtmInfo .view {padding: 0 20px 24px;}
}
@media (max-width: 767px) {
    .vipCard-intro .intro-cont .text-wrap .desc {font-size: 18px; line-height: 150%; letter-spacing: -0.72px;}
    .vipCard-intro .intro-cont .text-wrap .title {font-size: 36px; line-height: 134%; letter-spacing: -1.44px;}
    .vipCard-intro .intro-cont .img-wrap {width: 100%;}
}

/* 카드상세 서비스 안내 페이지 이동 버튼 추가 */
.vipCardItem .item .view .benefit .bnft_tit:has(button) {display: flex; justify-content: space-between; align-items: center;}
.vipCardItem .item .view .benefit .bnft_tit:has(button) button {margin-left: 12px;}
.vipCardItem .item .view .benefit .bnft_tit:has(button) button._btn-xsmall-tertiary {padding: 6px 8px; border: 1px solid var(--primary-p100);background: unset;}

.cardViewBody .item .view .cell_tit:has(.tit_btn) {display: flex; justify-content: space-between; align-items: center;}
.cardViewBody .item .view .cell_tit:has(.tit_btn) .tit_btn {margin-left: 12px; padding: 0 12px 0 0; border: unset; background: unset; font-size: 15px; font-weight: 400; letter-spacing: -2%; line-height: 150%; color: var(--point-600); position: relative;}
.cardViewBody .item .view .cell_tit:has(.tit_btn) .tit_btn::after {content: ''; display: block; width: 12px; height: 12px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); -webkit-mask: url(/static/images/icons/chevron-right.svg) no-repeat center center / 12px auto; mask: url(/static/images/icons/chevron-right.svg) no-repeat center center / 12px auto; background-color: var(--point-600);}

[class^="_modal"][class*="-popup"] .inner.pop_wrap {color: var(--gray-500); padding: 20px 32px 32px; min-height: 233px;}
[class^="_modal"][class*="-popup"] .inner.pop_wrap .pop_header {margin-bottom: 20px;}
[class^="_modal"][class*="-popup"] .inner.pop_wrap .btn-close {right:32px;}
.pop_wrap .pop_header h4.contTit {color: var(--gray-900); margin-top: unset; padding-bottom: unset;}
.pop_wrap .pop_header h4.contTit::after {content: none;}
.pop_wrap .pop_body .main_cont:not(:last-of-type)::after {content: ''; display: block; position: relative; width: 100%; height: 1px;background: var(--alpha-bk5); margin: 24px 0;}
.pop_wrap .pop_body .main_cont:not(:last-of-type).bdn::after {content: none;}
.pop_wrap .pop_body h5.mainTit {color: var(--gray-900); font-size: 18px; font-weight: 700; line-height: 150%; letter-spacing: -0.04%; margin-bottom: 8px;}
.pop_wrap .pop_body h5.mainTit + ul.item_list {margin-top: 12px;}
.pop_wrap .pop_body ul.item_list {margin-top: 8px;}
.pop_wrap .pop_body ul.item_list li + li {margin-top: 6px;}
.pop_wrap .pop_body ul.item_list li {position: relative; padding-left: 11px;}
.pop_wrap .pop_body ul.item_list li::before {content: ''; display: block; position: absolute; top: 10px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--gray-500);}
.pop_wrap .pop_body p.subTit {color: var(--gray-900); font-size: 16px; font-weight: 600; line-height: 150%; letter-spacing: -0.04%;}
.pop_wrap .pop_body .info + .info,
.pop_wrap .pop_body .info + p {margin-top: 16px;}

.pop_wrap .pop_body [class^="_table"] {border: none;}
.pop_wrap .pop_body .table_wrap {margin-top: 32px;}
.pop_wrap .pop_body .table_wrap table {border-top: 1px solid #000;}
.pop_wrap .pop_body .table_wrap table thead tr > * {padding: 12px 0; text-align: left; background: unset; color: var(--text-secondary);}
.pop_wrap .pop_body .table_wrap table tbody tr > * {padding: 16px 0; vertical-align: top; text-align: left; color: var(--gray-500);}
.pop_wrap .pop_body .table_wrap table tbody tr > td:first-child {padding: 16px 20px 16px 0;}
.pop_wrap .pop_body .table_wrap table .item_list {margin-top: unset;}


@media (max-width: 767px) {
    [class^="_modal"][class*="-popup"] .inner.pop_wrap {padding: 20px 24px;}
    [class^="_modal"][class*="-popup"] .inner.pop_wrap .pop_header {margin-bottom: 24px;}
    [class^="_modal"][class*="-popup"] .inner.pop_wrap .btn-close {right:20px;}
    .pop_wrap .pop_header h4.contTit {font-size: 18px;}
    .pop_wrap .pop_body * {font-size: 15px;}
    .pop_wrap .pop_body h5.mainTit {font-size: 16px;}
    .pop_wrap .pop_body p.subTit {font-size: 15px;}
    .vipCardItem .item .view .benefit .bnft_tit:has(button) {display: block;}
    .vipCardItem .item .view .benefit .bnft_tit:has(button) button {margin-left: unset; margin-top: 8px;}

    .cardViewBody .item .view .cell_tit:has(.tit_btn) {display: block;}
    .cardViewBody .item .view .cell_tit:has(.tit_btn) .tit_btn {margin-left: unset; margin-top: 8px;}
}

/* 인트로 노출 시 breadcrumb */
.container.intro-ready .breadcrumb {background: rgba(17, 17, 17, 0.50);}
/* .container.intro-ready .breadcrumb::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25);} */


.txt_mark.sm.ancmt {color: var(--gray-400); font-size: 14px;}