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

/* #container, #container .cont, #container .cont-area {padding: 0 !important; margin: 0 !important;} */

#event_layout {position: relative; max-width: 1080px; margin: 0 auto; font-family: "KBFGDisplayM", "KBFGTextB", "Segoe WP","Segoe UI","Helvetica Neue","Arial", sans-serif; color-scheme: light;}
#event_layout img {width: 100%; vertical-align: top;}

#event_intro>div {display: none;}

.intro_1 .start_btn {position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); width: 73.7%; opacity: 0; transition: opacity 0.3s ease;}
.intro_1 p {position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; font-size: 3.8vw; line-height: 125%; font-weight: bold; color: #222222; opacity: 0; transition: opacity 0.3s ease;}
.intro_1 p em {font-size: 3.1vw; vertical-align: top; padding: 0 0.3em; font-weight: normal;}
.intro_1.video-ready video {display:block;}
.intro_1.video-ready .start_btn,
.intro_1.video-ready p {opacity: 1;}

.intro_2 .skip_btn {position: absolute; bottom: 7%; left: 50%; transform: translateX(26%); width: 35.185%; opacity: 0; transition: opacity 0.3s ease;}
.intro_2 p {position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; font-size: 3.8vw; line-height: 125%; font-weight: bold; color: #222222; opacity: 0; transition: opacity 0.3s ease;}
.intro_2 p em {font-size: 3.1vw; vertical-align: top; padding: 0 0.3em; font-weight: normal;}
.intro_2.video-ready .skip_btn,
.intro_2.video-ready p {opacity: 1;}

.intro_3 .start_btn {position: absolute; top: 70%; left: 50%; transform: translateX(-50%); width: 68.426%; opacity: 0; transition: opacity 0.3s ease;}
.intro_3.video-ready .start_btn {opacity: 1;}

.event_content {position: absolute; top: 0; left: 0; width: 100%; margin: 0 auto; text-align: center;}

.event_content .event_step {position: absolute; top: 0.8em; right: 5%; font-size: 3vw; line-height: 125%; font-weight: 300; color: rgba(0,0,0,0.5);}

.event_content .event_title {display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 7vw; line-height: 125%; font-weight: bold; gap: 0.6em; margin: 0.8em 0;}
.event_content .event_title span {padding: 8px 25px; border-radius: 40px; font-size: 4.5vw; line-height: 125%; background: #f76900; color: #fff; font-weight: 600;}


.event_content .graph {position: relative; width: 77.5%; margin: 0 auto; font-size: 0;}
.event_content .graph span {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: right; background: url(https://img1.kbcard.com/home_re/mo/img/card/sbti/graph_bar.gif) no-repeat 0 0; background-size: auto 100%;}
.bar_icn {position: absolute; top: -70%; width: 13% !important; height: auto !important; display: inline-block; margin: -0.2em -20% 0 -10%;}

.event_content .event_desc {width: 100%; font-size: 4.3vw; line-height: 125%; font-weight: bold; margin-top: 1.8em;}
.event_content .event_desc strong {color:#f76900;}
.event_content .event_desc>img {display: block; width: 71.76% !important; margin: 1.7em auto;}

.event_content .btn_event {position: relative; width: 68.24%; margin: 0 auto 0.2em; border: none; display: block; background: transparent;}
.event_content .btn_event span {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 3.8vw; line-height: 125%;}
/* .btn_event {width: 68.24%; background: url(https://img1.kbcard.com/home_re/mo/img/card/sbti/btn_bg.png) no-repeat center center; background-size: 100% auto;} */

.event_content .event_desc_4 .event_desc,
.event_content .event_desc_6 .event_desc,
.event_content .event_desc_10 .event_desc {font-size: 3.8vw;}

.event_content .event_desc_8 .event_desc p {padding: 0.5em 0;}

#event_result {position: relative; font-size: 0;}
#event_result img {vertical-align: top;}

#event_result a {position: absolute; bottom: 10%; left: 10%; width: 10%; height: 10%; display: block;}
#event_result a.reset_btn {bottom: 7.2%; left: 21.5%; width: 57%; height: 3.6%;}
#event_result a.kakao_btn {bottom: 1.2%; left: 37%; width: 13%; height: 3%;}
#event_result a.link_btn {bottom: 1.2%; left: 50%; width: 13%; height: 3%;}

#event_result .txt_hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
#event_result .share_tit {bottom: 4.4%; left: 33%; width: 34%; height: 2%; position: absolute;}
#event_result .reset_tit {bottom: 11.4%; left: 14.3%; width: 71%; height: 3.8%; position: absolute;}
#event_result .card_tit {bottom: 54%; left: 6%; width: 88%; height: 3.8%; position: absolute;}
#event_result .card_name1 {position: absolute; left: -5%; bottom: 119%; width: 37%; height: 103.33%; display: block;}
#event_result .card_name2 {position: absolute; left: 31.5%; bottom: 119%; width: 37%; height: 103.33%; display: block;}
#event_result .card_name3 {position: absolute; left: 68%; bottom: 119%; width: 37%; height: 103.33%; display: block;}
#event_result .card_result_btn p {position: absolute; bottom: 23.05%; left: 10%; width: 80.2%; height: 13.5%; display: none;}
#event_result .card_result_btn p a {position: relative; left: 0; top: 0; width: 100%; height: 33.33%; display: block;}
/* #event_result .card_result_btn p a:nth-child(2) {background: blue;} */

.card_result_desc {position: absolute; top: 22%; width: 100%; padding: 0 10%; font-size: 4.3vw; line-height: 125%; font-weight: bold; text-align: center;}
.card_result_desc>div {display: none;}
.card_result_desc>div p.tit {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.card_result_desc>div ul {display: flex; justify-content: space-around; margin: 0 1em 1.2em; text-align: center; font-size: 3.5vw; font-weight: 500;}
.card_result_desc>div p.txt {font-size: 3.5vw !important; font-weight: 600; line-height: 135% !important;}
.card_result_desc>div ul li {padding: 1% 2% 0; color: #fff;}

.card_result_desc>div.result_1 p.txt strong,
.card_result_desc>div.result_4 p.txt strong {color: #fa6801;}
.card_result_desc>div.result_1 ul li,
.card_result_desc>div.result_4 ul li {background: #fa6801;}

.card_result_desc>div.result_2 p.txt strong,
.card_result_desc>div.result_6 p.txt strong {color: #894afd;}
.card_result_desc>div.result_2 ul li,
.card_result_desc>div.result_6 ul li {background: #894afd;}

.card_result_desc>div.result_3 p.txt strong,
.card_result_desc>div.result_5 p.txt strong {color: #007ff4;}
.card_result_desc>div.result_3 ul li,
.card_result_desc>div.result_5 ul li {background: #007ff4;}

.card_result_desc>div.result_7 p.txt strong,
.card_result_desc>div.result_10 p.txt strong {color: #ff3f86;}
.card_result_desc>div.result_7 ul li,
.card_result_desc>div.result_10 ul li {background: #ff3f86;}

.card_result_desc>div.result_8 p.txt strong,
.card_result_desc>div.result_9 p.txt strong {color: #1dac05;}
.card_result_desc>div.result_8 ul li,
.card_result_desc>div.result_9 ul li {background: #1dac05;}

/* Footer 비노출 */
footer {display:none !important;}

/* 다크모드 강제 차단 */
@media (prefers-color-scheme: dark) {
    #event_layout,
    #event_intro,
    #event_start,
    #event_result {
        background-color: #fff !important;
        color: #222 !important;
        filter: none !important;
    }
    #event_layout img,
    #event_layout video {
        filter: none !important;
    }
    #event_layout .event_desc p,
    #event_layout .event_title strong,
    #event_layout .intro_1 p {
        color: #222 !important;
    }
    #event_layout .event_content .event_desc strong {color: #f76900 !important;}
    #event_layout .event_content .event_step {color: rgba(0,0,0,0.5) !important;}
    #event_layout .btn_event span {color: #fff !important;}
}