@font-face {
    font-family:KBFGText;
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src: local("KB금융 본문체 Bold"),
    url("/CMN/common/fonts/KBFGTextB_subset.woff") format("woff"), 
    url("/CMN/common/fonts/KBFGTextB_subset.woff2") format("woff2");
}

/* 컬러 변수 */
:root
{
    /*== Gray Color ==*/
    --gray000:#fff;
    --gray005:#f7f7fa;
    --gray010:#eff2f7;
    --gray015:#e7ebee;
    --gray020:#dde1e4;
    --gray030:#c6cbd0;
    --gray040:#aab0b8;
    --gray050:#8c949e;
    --gray060:#696e76;
    --gray070:#484b51;
    --gray080:#3d4046;
    --gray090:#26282c;
    --gray100:#1c1d21;
    --gray110:#121315;

    /*== Tint Color ==*/
    --yellow010:#ffedb0;
    --yellow020:#ffe17c;
    --yellow030:#ffd743;
    --yellow040:#ffcc00;
    --yellow050:#ffbc00;
    --yellow060:#ffa100;
    --yellow070:#ff8f00; /* 강조 뱃지  */
    --yellow080:#f76900; /* 알림/중요정보 */
    /*== Semantic Color ==*/
    --red020:#ffddd6;
    --red050:#ff200c; /* 경고/부정 */
    --blue060:#007eff; /* 긍정, 선택 */
    --vip050:#202d40; /* VIP */
    --violet050:#6d6bdd;
    --violet020:#c4c3f1;
} 

/* pc 영역 초기화 */
.container{padding-bottom: 0}
.eventViewWrap {width: 608px; margin: 28px auto 0; padding: 0 16px;background: none;}
.eventViewWrap .innerbox{padding: 0;}
#event26 > p + p{margin-top: 8px;}
#event26 .pc-hidden {display: none}

/* 배경 컬러 */
#event26 {font-size: 15px; line-height: 1.6; letter-spacing: -.3px;}
#event26 .bg-pink, #event26 .e-head.bg-pink {background-color:#ffecf7}
#event26 .bg-red, #event26 .e-head.bg-red {background-color:#ffefef}
#event26 .bg-orange, #event26 .e-head.bg-orange {background-color:#fff1e9}
#event26 .bg-brown, #event26 .e-head.bg-brown {background-color:#fff6df}
#event26 .bg-khaki, #event26 .e-head.bg-khaki {background-color:#f5f6cd}
#event26 .bg-olive, #event26 .e-head.bg-olive {background-color:#edfbdb}
#event26 .bg-green, #event26 .e-head.bg-green {background-color:#dfffe2}
#event26 .bg-mint, #event26 .e-head.bg-mint {background-color:#dbfdfa}
#event26 .bg-blue, #event26 .e-head.bg-blue {background-color:#e5f5ff}
#event26 .bg-purple, #event26 .e-head.bg-purple {background-color:#efe9ff}
#event26 .bg-rose, #event26 .e-head.bg-rose {background-color:#F5E8E7}
#event26 .bg-champagne, #event26 .e-head.bg-champagne {background-color:#EBE6E2}
#event26 .bg-gold, #event26 .e-head.bg-gold {background-color:#F1E8DB}

/* 텍스트 컬러 */
#event26 .orange {color: var(--yellow080)!important}
#event26 .blue{color: var(--blue060)!important}

#event26 .e-head + h3 {margin-top: 50px}
#event26 h3 {font-family: 'KBFGDisplayM'; margin: 70px 0 18px; font-size: 24px; line-height: 32px; color: var(--gray090)}
#event26 img,
#event26 video {width: 100%; height: auto; vertical-align: top;}
#event26 button{cursor: pointer;}
#event26 .center {text-align: center!important;}
#event26 sup {font-size: 10px; vertical-align: super; line-height: 0;}

/* 헤드 */
.e-head {overflow: hidden; width: 100vw; min-width: 960px; margin: 0 -16px; padding-top: 40px; text-align: center; transform: translate(calc(-50% + 320px), 0);}
.e-head__title{font-family: 'KBFGDisplayM'; font-size: 28px; line-height: 36px;}
.e-head__title + .e-head__img {margin-top: 34px;}
.e-head__sub{display:block; margin-bottom:2px; font-family: 'KBFGDisplayM'; font-size:24px; line-height: 32px;}
.e-head__date{margin-top: 4px; font-size: 15px; line-height: 24px;}
.e-head__img{width: 256px; margin: 6px auto 0;}
.e-head__info {position: relative; z-index: 2; width: 328px; margin: -16px auto 20px; padding: 16px; background-color: var(--gray000); box-shadow: 0 2px 8px 0 rgba(0,0,0,.1); border-radius: 16px; font-weight: 600;}

/* 리스트 */
li > ul {margin-top: 4px;}
.e-dot-list {color: inherit}
.e-dot-list > li {position: relative; padding-left: 10px;}
.e-dot-list > li + li {margin-top: 8px;}
.e-dot-list > li::before {content: ''; position: absolute; top: 9px; left: 0; width: 4px; height: 4px; background-color: currentColor; border-radius: 50%}
.e-dot-list + .e-btn {margin-top: 16px}

.e-dash-list {color: inherit}
.e-dash-list > li {position: relative; padding-left: 12px; text-indent: -12px;}
.e-dash-list > li + li {margin-top: 8px;}
.e-dash-list > li::before {content: '- '; width: 6px;} 
li > .e-dash-list > li + li {margin-top:2px;}

.e-eligibility-list {counter-reset: step; color: inherit}
.e-eligibility-list > li {position: relative; margin-top: 18px; padding-left: 32px; counter-increment: step;}
.e-eligibility-list > li::before {content: counter(step); position: absolute; top:2px; left:2px; width: 20px; height: 20px; background: var(--gray090); border-radius: 50%; color: var(--gray000); text-align: center; line-height: 20px; font-size: 13px; font-weight: 600;}
.e-eligibility-list strong{color: var(--gray090)}

.e-eligibility-list--manual > li::before {display: none}
.e-list-num{position: absolute; top:2px; left:2px; width: 20px; height: 20px; background: var(--gray090); border-radius: 50%; color: var(--gray000); text-align: center; line-height: 20px; font-size: 13px; font-weight: 600;}

ol.e-eligibility-list > li:last-child::after {display: none}
ol.e-eligibility-list > li::after {content: ''; position: absolute; top: 24px; left: 11.5px; width: 1px; height: calc(100% - 8px); background: var(--gray060)}

.e-caption-box .e-eligibility-list > li:first-child {margin-top: 0;}
.e-caption-box .e-eligibility-list > li {margin-top: 8px; padding-left: 24px}
.e-caption-box .e-eligibility-list > li::after{display: none}
.e-caption-box .e-eligibility-list > li::before {top: 4px; width: 14px; height: 14px; line-height: 14px; font-size: 10px; font-weight: 400; background: none; border: 1px solid currentColor; color: inherit}

.e-prize-list {display: flex; flex-direction: column; margin-top: 16px}
.e-prize-list + * {margin-top: 16px}
.e-prize-card {position: relative; padding: 52px 16px 16px; border-radius: 16px; background: var(--gray000); box-shadow: 0 2px 8px 0 rgba(0,0,0,.1)}
.e-prize-card + .e-prize-card {margin-top: 8px}
.e-prize-card__count {position: absolute; top: 16px; left: 16px; min-width: 44px; padding: 3px 8px; border-radius: 999px; background: var(--gray090); color: var(--gray000); font-size: 13px; font-weight: 600; line-height: 18px; text-align: center}
.e-prize-card__content {display: flex; align-items: flex-start; justify-content: space-between}
.e-prize-card__info {flex: 1; min-width: 0; font-weight: 600}
.e-prize-card__amount {color: var(--blue060); font-size: 24px; line-height: 32px; font-family: 'KBFGDisplayM'; font-weight: 400;}
.e-prize-card__img {flex-shrink: 0; width: 136px;}
.e-prize-card__title {word-break: keep-all}
.e-prize {position: relative; width: 100%; font-weight: 600; font-size: 18.7px; text-align: center; line-height: 32px; letter-spacing: -.03rem;}
.e-prize__num{position: absolute;left: 0; width: 100%; font-size: 18.7px}
.e-prize--cashback .e-prize__num {top: calc(50% - 24px); color: var(--gray000); text-shadow: 0 0 2px #418715; }
.e-prize--giftcard .e-prize__num {top: 26px; font-weight: 600; color: var(--gray090)}
.e-prize--money .e-prize__num{top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; line-height: 1.6rem; color: var(--gray090);}
.e-prize--money .e-prize__sub-num{font-size: 1rem; line-height: 1.2rem}

.e-benefit .e-prize__num{font-size: 14px}
.e-benefit .e-prize--cashback .e-prize__num {top: 25%;}
.e-benefit .e-prize--giftcard .e-prize__num {top: 20%;}


.e-category-list {margin-top: 18px}
.e-category-list .e-caption-box {margin-top: 16px}
.e-category-item {padding: 16px 0; border-top: 1px solid var(--gray010)}
.e-category-item__title {margin-bottom: 16px;font-family: 'KBFGDisplayM'} 
.e-category-item__info {display: flex; flex-direction: column; }
.e-category-item__row {display: flex; justify-content: space-between; align-items: flex-start;}
.e-category-item__row + .e-category-item__row {margin-top: 12px}
.e-category-item__row dd {margin-left: 8px; text-align: right; white-space: nowrap}

/* 캡션박스 */
.e-caption-box {margin-top: 8px; padding: 12px; background: var(--gray005); border-radius: 8px; color: var(--gray060)}

/* 버튼 */
.e-btn-wrap {display: flex; margin-top: 12px; justify-content: left}
.e-btn-wrap .e-btn {flex: 1}
.e-btn-wrap .e-btn + .e-btn {margin: 0 0 0 8px}
.e-caption-box .e-btn-wrap {margin-top: 12px}

.e-btn {display: block; padding: 8px 10px; border: 1px solid var(--gray050); background: var(--gray000); border-radius: 8px; font-size: 15px; line-height: 1.6; color: var(--gray090); text-align: center;}
.e-btn + .e-btn {margin-top: 8px;}
.e-btn--gray {background: var(--gray010); border: none; font-weight: 600;}
.e-btn--black {background: var(--gray090); border: none; color: var(--gray000); font-weight: 600;}
.e-blank::after {content: ''; display: inline-block; width: 24px; height: 24px; margin-left: 6px; background: url(https://img1.kbcard.com/home_re/mo/ico/16/ico-1-link.svg) no-repeat center / 16px; vertical-align: top}
.e-btn--black.e-blank::after {background: url(https://img1.kbcard.com/home_re/mo/dark/ico/16/ico-1-link.svg) no-repeat center / 16px;}

.e-fixed-area {position: fixed; z-index: 100; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100vw; padding: 20px calc((100vw - 640px) / 2); background: rgba(255, 255, 255, .8); border-top: 1px solid #ddd; box-sizing: border-box;}
.e-fixed-area > * {margin: 0 3px; min-width: 160px; height: 56px; line-height: 56px; padding: 0 16px; font-weight: 600; border-radius: 8px; font-size: 18px;}
.e-btn-cta {display: inline-block; vertical-align: middle; cursor: pointer; min-width: 160px; height: 56px; line-height: 56px; padding: 0 16px; font-weight: 600; border-radius: 8px; font-size: 18px; text-align: center; background: var(--yellow040); color: var(--gray090); box-sizing: border-box; }
.e-fixed-area.is-bottom { position: absolute; transform: translate(calc(-50% + 480px), 0);}

.e-btn-more {display: none}
/* 추천카드 */
.e-card-benefit__item {display: flex; align-items: center;}
.e-card-benefit > li + li {margin-top: 32px;}
.e-card-benefit__thumb {position: relative; flex-shrink: 0; width: 66px; height: 104px; margin-right: 32px;}
#event26 .e-card-benefit__thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); width: 104px; height: 66px;}
.e-card-benefit__content {flex: 1}
.e-card-benefit__benefits {margin-top: 8px; font-size: 15px; line-height: 1.6;}
.e-card-benefit__condition {color: var(--blue060)}
.e-card-benefit__title { font-family: 'KBFGDisplayM'; font-weight: 400;}

/* 혜택 */
.e-benefit-tab {display: none;}
.e-benefit-content {display: flex; flex-direction: column; padding: 18px 0}
.e-benefit {padding: 16px; background: var(--gray000); border-radius: 16px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1); color: var(--gray060)}
.e-benefit + .e-benefit {margin-top: 8px}
.e-benefit img {max-width:100%; margin: 0 auto; display: block;}
.e-benefit__title {margin-bottom: 12px; text-align: center; color: var(--gray090); font-weight: 600;}
.e-benefit__flag {display: inline-block; min-width: 44px; padding: 3px 8px; border-radius: 999px; background: var(--gray090); color: var(--gray000); font-size: 13px; font-weight: 600; line-height: 18px; text-align: center}
.e-benefit__flag + p {margin-top: 12px;}
.e-benefit__point {font-size: 24px; line-height: 28px; color: var(--blue060); font-family: 'KBFGDisplayM'; font-weight: 400;}
.e-benefit__img {position: relative; display: block; width: 102px; margin: 0 auto;}
.e-benefit__img + *,
.e-benefit img + *{margin-top: 12px}
.e-benefit__coupon {position: absolute; top: 16px; left: 0; width: 100%; text-align: center; font-size: 32px; font-weight: 600; transform: rotate(8deg); color: var(--gray000)}
.e-benefit__coupon span{font-size: 20px;}
.e-benefit__poster {width: 296px; margin: 20px auto}
.e-benefit__txt {color: var(--gray090)}

/* 아코디언 */
.e-accordion {margin: 16px 0; border-top: 1px solid var(--gray020); border-bottom: 1px solid var(--gray020)}
.e-accordion + .e-accordion {margin-top: calc(-16px - 1px);}
.e-accordion__btn {position: relative; display: block; width: 100%; padding: 18px 0; background: none; border: none; color: var(--gray090); text-align: left; line-height: 24px; font-weight: 600; }
.e-accordion__btn::after {content: ''; position: absolute; top: calc(50% - 8px); right: 0; width: 16px; height: 16px; background: url(https://img1.kbcard.com/home_re/mo/ico/16/ico-2-plus.svg) no-repeat center; background-size: 100%; }
.e-accordion__btn[aria-expanded="true"]::after {background: url(https://img1.kbcard.com/home_re/mo/ico/16/ico-2-fold.svg) no-repeat center}
.e-accordion__panel{display:none; padding-bottom: 16px;}

/* 테이블 */
.e-tbl { table-layout: fixed; word-wrap: break-word; word-break: break-all; text-align: center; position: relative; border-collapse: collapse; border-spacing: 0;}
.e-tbl caption { position: relative !important; opacity: 0; overflow: hidden; position: absolute; width: 1px; height: 1px; font-size: 1px; line-height: 0; margin: -1px; clip: rect(0 0 0 0); }
.e-tbl th, .e-tbl td { vertical-align: middle; padding: 15px; border: 1px solid var(--gray020); color: var(--gray090); font-size: 14px; line-height: 22px; text-align: left; }
.e-tbl th:first-child, .e-tbl td:first-child { border-left: 0; }
.e-tbl th:last-child, .e-tbl td:last-child { border-right: 0; }
.e-tbl th { background: var(--gray005); }
.e-tbl--center th, .e-tbl--center td { text-align: center; }

/* 이용 전 확인해 주세요 */
.e-notice {width: 608px; margin: 50px -16px 0; padding: 40px calc((100vw - 608px) / 2); background: var(--gray005); border-top: 1px solid var(--gray020); color: var(--gray060); transform: translate(calc(-50% + 320px), 0);}
.e-notice__section + .e-notice__section {margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray020)}
.e-notice h4 {margin-bottom: 16px; color: var(--gray090); font-family: 'KBFGDisplayM'; font-size: 16px; line-height: 1.5;}
h4.e-accordion__title {margin-bottom: 0;}
#event26 .e-notice h3{margin-top: 0;}
.e-refer {margin-top: 4px; padding-left: 11px; text-indent: -11px;}

.pay3 .event-utillity {width: 100vw; z-index: 1; transform: translate(calc(-50% + 320px), 0);}
.pay3 .event-utillity .btn-wrap {max-width: 640px; margin: 0 auto;}
.is-fixed .cont-area{max-width: 640px; margin: 0 auto;}

/* swiper */
.e-swiper-container {overflow:hidden;}
.swiper-wrapper {display:flex; width:100%; height:auto;}
.swiper-slide {padding:0; flex-shrink:0;}
.swiper-pagination {position:relative; width:100%; height:6px; margin-top:12px; text-align:center; transform:translate3d(0, 0, 0); z-index:10;}
.swiper-pagination > span {width:6px; height:6px; border-radius:40px; background:var(--gray090); vertical-align:top; opacity:.6;}
.swiper-pagination > span + span {margin-left:6px;}
.swiper-pagination-bullet {display:inline-block;}
.swiper-pagination-bullet-active {width:20px !important; opacity:1 !important;}