/* Pretendard */
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 100;
    src: url(../css/font/Pretendard-Thin.woff2) format('woff2'),
         url(../css/font/Pretendard-Thin.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 200;
    src: url(../css/font/Pretendard-ExtraLight.woff2) format('woff2'),
         url(../css/font/Pretendard-ExtraLight.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 300;
    src: url(../css/font/Pretendard-Light.woff2) format('woff2'),
         url(../css/font/Pretendard-Light.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: url(../css/font/Pretendard-Regular.woff2) format('woff2'),
         url(../css/font/Pretendard-Regular.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    src: url(../css/font/Pretendard-Medium.woff2) format('woff2'),
         url(../css/font/Pretendard-Medium.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    src: url(../css/font/Pretendard-SemiBold.woff2) format('woff2'),
         url(../css/font/Pretendard-SemiBold.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    src: url(../css/font/Pretendard-Bold.woff2) format('woff2'),
         url(../css/font/Pretendard-Bold.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 800;
    src: url(../css/font/Pretendard-ExtraBold.woff2) format('woff2'),
         url(../css/font/Pretendard-ExtraBold.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 900;
    src: url(../css/font/Pretendard-Black.woff2) format('woff2'),
         url(../css/font/Pretendard-Black.woff) format('woff');
}


body {
    font-family: 'Pretendard', 'Roboto', '맑은고딕', Malgun Gothic, sans-serif,'Sans-serif', 돋움, 'dotum';
}

/*웹접근성 관련 작업*/
.visually-hidden{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
button {padding: 0; border: none; font: inherit; color: inherit; cursor: pointer; background: none;  margin: 0;}
:focus-visible {
    outline: 2px dashed #ff4d4d;
    outline-offset: -2px;
}

.pop_bg .cb .btn_box a.prev_btn,
.pop_bg .cb .btn_box a.next_btn{color: transparent; border: 2px solid #fff;}
.pop_bg .cb .btn_box a.prev_btn{background: url('../img/kakaobank_data/prev_arr.png') no-repeat 50% 50% #fff}
.pop_bg .cb .btn_box a.prev_btn.disabled {background: url('../img/kakaobank_data/prev_arr_disabled.png') no-repeat 50% 50%;}
.pop_bg .cb .btn_box a.next_btn{background: url('../img/kakaobank_data/next_arr.png') no-repeat 50% 50% #fff}
.pop_bg .cb .btn_box a.next_btn.disabled {background: url('../img/kakaobank_data/next_arr_disabled.png') no-repeat 50% 50%;}

.kakaobank_data{
    background: #ffe300;
}
.kakaobank_data .cont_box{
    position: relative; min-height: 100vh; padding: 70px 0;
    box-sizing: border-box;
}
.kakaobank_data .cont_box .content_wrap{
    width: 100%; max-width: 1660px;
    position: relative; top: auto; left: auto;
    margin: 0 auto;
    background: none; box-shadow: none;
}
.kakaobank_data .cont_box .content_wrap .content {
    padding: 0;
}
.kakaobank_data .cont_box .content_wrap .content .flfr_data_wrap {
    margin-top: 0;
}


.kakaobank_data .flfr_data_wrap .title {
    text-align: left; margin-bottom: 40px;
}
.kakaobank_data .flfr_data_wrap .title h1 {
    font-size: 58px; font-weight: 600; margin-top: 20px;
}
.kakaobank_data .flfr_data_wrap .title span {
    font-size: 24px; font-weight: 500;
}





.kakaobank_data .content_wrap .content .flfr_data {
    display: flex; gap: 22px; overflow: visible;
}
.kakaobank_data .content_wrap .content .flfr_data .fl {
    float: none;
    width: 25.8%; flex-direction: column;
    display: flex; gap: 22px; position: relative;
}
.kakaobank_data .content_wrap .content .flfr_data .fl::before {
    content: ''; display: block;
    width: 232px; height: 208px;
    position: absolute; top: -192px; left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform:translateX(-50%);
    background: url('../img/kakaobank_data/kakao_lion.png') no-repeat center center / cover;
}
.kakaobank_data .content_wrap .content .flfr_data .fl > dl {
    background: #f1f3f4; border: 0px; border-radius: 20px;

}
.kakaobank_data .content_wrap .content .flfr_data .fl dl dt {

}
.kakaobank_data .content_wrap .content .flfr_data .fl dl dd {

}





.kakaobank_data .content_wrap .content .flfr_data .fr {
    float: none;
    width: 73%;
    height: 100%;
}
.kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider {
    border-radius: 20px; overflow: hidden; position: relative;
}
.kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider img {
    width: 81%;
}
.kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider .prev_btn,
.kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider .next_btn{font-size: 0;}
.kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider .prev_btn {
    width: 52px; height: 52px;
    position: absolute; top: 50%; left: 30px;
    background: url('../img/kakaobank_data/arr_prev.png') no-repeat center center / cover;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform:translateY(-50%);
}
.kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider .next_btn {
    width: 52px; height: 52px;
    position: absolute; top: 50%; right: 30px;
    background: url('../img/kakaobank_data/arr_next.png') no-repeat center center / cover;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform:translateY(-50%);
}

.kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider .prev_btn.disabled {
    background: url('../img/kakaobank_data/arr_prev_disabled.png') no-repeat center center / cover;

}
.kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider .next_btn.disabled{
    background: url('../img/kakaobank_data/arr_next_disabled.png') no-repeat center center / cover;

}




.kakaobank_data .content_wrap .content .flfr_data .fr .btn_box {
    margin-top: 22px;
    display: flex;
}
.kakaobank_data .content_wrap .content .flfr_data .fr .btn_box a.down_btn{
   color: #fff; background-color: #1e1e1e;
   font-size: 15px; line-height: 35px;
   padding: 0 20px; border-radius: 30px;
   width: auto; height: auto;
}
.kakaobank_data .content_wrap .content .flfr_data .fr .btn_box a.zoom_btn {
    width: 35px; height: 35px; font-size: 0;
    position: relative; top: auto; right: auto; margin-left: auto;
    background: url('../img/kakaobank_data/zoom_ico.png') no-repeat 50% 46% #1e1e1e;
    border-radius: 50%;
}




.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box {
    margin: 0; padding: 0px; aspect-ratio: 1 / 0.85;
    overflow: hidden; border-radius: 20px; border: 0px;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab ul {
    background: none; height: auto; display: flex;
}

.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab ul li {
    border: 0px; width: 100%; text-align: center;
    background: #f1f3f4; padding: 0;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab ul li button {
    display: block; width: 100%; font-size: 18px; color: #222; line-height: 55px;
}

.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab ul li.on {
    background: #151f49;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab ul li.on button {
    color: #fff; text-decoration: underline;
}


.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab_con {
    padding: 26px 42px; color: #fff; box-sizing: border-box;
    height: calc(100% - 55px); background: #151f49;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab_con .inner {
    box-sizing: border-box; height: 100%; overflow-y: scroll; font-size: 15px; line-height: 1.7;
    background: url('../img/kakaobank_data/p_list_bg.png') no-repeat center center;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab_con .inner::-webkit-scrollbar {
    width: 5px;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab_con .inner::-webkit-scrollbar-thumb {
    background: #fff; /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}
.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab_con .inner::-webkit-scrollbar-track {
    background: rgba(255,255,255,.5);  /*스크롤바 뒷 배경 색상*/
}
.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab_con .inner > ul {
    height: auto; background: none;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab_con .inner > ul li {
    border: 0; padding: 0;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab_con .inner > ul li.on {
    background: none; font-weight: 800;
}




.kakaobank_data .content_wrap .content .flfr_data .fl .profile article:not(:first-child) {
    margin-top: 30px;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .profile h1 {
    font-size: 20px; font-weight: 600;
}

.kakaobank_data .content_wrap .content .flfr_data .fl .profile dl {
    display: flex; gap: 15px; flex-direction: row; margin-top: 10px;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .profile dl dt {
    width: 60px;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .profile dl dd {
    margin-top: 5px;
    width: calc( 100% - 75px);
}
.kakaobank_data .content_wrap .content .flfr_data .fl .profile dl dd p {
    font-weight: 600; font-size: 18px;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .profile dl dd span {
    color: #888;
}



/* 탭메뉴 (기본형) */
.tab{display: flex; justify-content: space-between;}
.tab li{flex: 1;}
.tab li a{position: relative; display: block; box-sizing: border-box; padding: 1rem; font-size: 1.2rem; font-weight: 500; text-align: center; background: #ddd;}
.tab li a:hover,
.tab li a:focus{background-color: #eee;}
.tab li a.on{color: #fff; background-color: #222;}
.tab li a.on:before{content: ""; position: absolute; top: 100%; left: 50%; margin: -1px 0 0; transform: translateX(-50%); display: block; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0px 7px; border-color: #222 transparent transparent transparent;}
.tab_cont{box-sizing: border-box; padding: 1rem 0;}
.tab_cont > div{display: none;}
.tab_cont > div.on{display: block;}


.kakaobank_data .content_wrap .content .flfr_data .fl .btn_box{
    margin-top: 10px;
    text-align: left;
}
.kakaobank_data .content_wrap .content .flfr_data .fl .btn_box a{
    display: inline-block;
    background-color: #ea002c;
    line-height: 30px;
    padding: 0 10px 0 8px;
    color: #fff;
    font-size: 15px;
}
.kakaobank_data .content_wrap .content .flfr_data .btn_box a.down_btn img{
    vertical-align: middle;
    margin-right: 3px;
}




.kakaobank_data .content_wrap .content .flfr_data .fr .data_pic_box {
    height: auto; position: relative;
}
.kakaobank_data .content_wrap .content .flfr_data .fr .data_pic_box .slide-fill {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    background: rgba(0,0,0,.5); padding: 30px; border-radius: 20px;
    opacity: 0; transition: 0.25s;
}
.kakaobank_data .content_wrap .content .flfr_data .fr .data_pic_box .slide-fill i {
    color: #fff; font-size: 45px;
}
.kakaobank_data .content_wrap .content .flfr_data .fr .data_pic_box:hover .slide-fill {
    opacity: 1;  transition: 0.25s;
}

.mobile .kakaobank_data .content_wrap .content .flfr_data .fl dl dd{
    display: block;
}


.re_listen_control.mobile {
    display: none;
}


.kakaobank_data .content_wrap .content .prov {
    text-shadow: none; color: #222;
    position: relative; right: auto; bottom: auto;
    text-align: right;
}




@media all and (max-width:1780px) {
    .kakaobank_data .cont_box {
        padding: 2.5% 0;
    }
    .kakaobank_data .cont_box .content_wrap {
        width: 95%; height: auto;
    }
    .mobile .kakaobank_data .content_wrap {
        width: 95%;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);

    }
    .kakaobank_data .flfr_data_wrap .title {
        margin-bottom: 20px;
    }
    .kakaobank_data .flfr_data_wrap .title img {
        height: 30px;
    }
    .kakaobank_data .flfr_data_wrap .title h1 {
        margin-top: 10px; font-size: 45px;
    }
    .kakaobank_data .flfr_data_wrap .title span {
        font-size: 20px;
    }
    .kakaobank_data .content_wrap .content .flfr_data .fl::before {
        width: 45%; height: auto;
        top: -21%; aspect-ratio: 1/ 0.9;
    }
    .kakaobank_data .content_wrap .content .flfr_data .fl .plist_box {
        aspect-ratio: 1 / 0.83;
    }
    .kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab ul li a {
        font-size: 15px; line-height: 40px;
    }
    .kakaobank_data .content_wrap .content .flfr_data .fl .plist_box .kakaobank_tab_con {
        padding: 20px 35px;
        height: calc(100% - 40px);
    }


}









@media all and (max-width:1400px) {
    .kakaobank_data .content_wrap { height: auto;}
}

@media all and (max-width:1200px){
    .mobile .kakaobank_data{
        background: #ffe300; padding: 0;
    }
    .kakaobank_data .cont_box {
        padding: 4% 0;
    }
    .kakaobank_data .content_wrap .content .bar {
        display: none;
    }
    .mobile .kakaobank_data .content_wrap .content .flfr_data .fr .data_pic_box {
        height: auto;
    }
    .mobile .kakaobank_data .content_wrap .content {
        padding: 0;
    }
    .kakaobank_data .content_wrap .content .tit{
        font-size: 32px;
    }
    .kakaobank_data .content_wrap .content .flfr_data_wrap {
        margin-top: 0;
    }




}
@media all and (max-width:1000px){

    .re_listen_control.mobile {
        display: block; width: 100%; height: 40px;
    }
    .mobile .container .content_wrap .content .flfr_data .fr .sel_dis {
        display: none;
    }


    .mobile .kakaobank_data .content_wrap {
        position: relative;
        top: auto; left: auto;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform:translate(0, 0);
    }
    .kakaobank_data .content_wrap .content .flfr_data {
        flex-direction: column; gap: 25px;
    }
    .kakaobank_data .flfr_data_wrap .title img {
        height: 25px;
    }
    .kakaobank_data .flfr_data_wrap .title h1 {
        font-size: 32px;
    }
    .kakaobank_data .flfr_data_wrap .title span {
        font-size: 18px;
    }




    .mobile .container .content_wrap .content .flfr_data .fr {
        margin-top: 0;
    }
    .kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider {
        margin-top: 10px;
    }

    .kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider .prev_btn {
        width: 30px; height: 30px; left: 15px;
    }
    .kakaobank_data .content_wrap .content .flfr_data .fr .webcast-slider .next_btn {
        width: 30px; height: 30px; right: 15px;
    }







    .mobile .container .content_wrap .content .flfr_data .fl {
        gap: 10px;
    }
    .kakaobank_data .content_wrap .content .flfr_data .fl > dl {
        /* display: none; */
    }
    .kakaobank_data .content_wrap .content .flfr_data .fl::before {
        content: none;
    }
    .mobile .kakaobank_data .content_wrap .content .flfr_data .fl .plist_box {
        display: block; aspect-ratio : auto; height: 350px;
    }
    .kakaobank_data .content_wrap .content .flfr_data .fr .btn_box {
        margin-top: 10px;
    }

    .kakaobank_data .content_wrap .content .prov {
        text-align: center;
    }








    /* .mobile .kakaobank_data .content_wrap {
        position: relative; top: auto; left: auto;
        transform: translate(0);
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -o-transform:translate(0);
    }
    .mobile .kakaobank_data .content_wrap .content .flfr_data .fl{
        float: none;
        margin-top: 15px;
    }
    .mobile .kakaobank_data .content_wrap .content .flfr_data .fr .btn_box {
        justify-content: flex-start;
    }
    .kakaobank_data .content_wrap .content .flfr_data .fr .btn_box .list .btn {
        height: 35px; width: 35px;
    }
    .kakaobank_data .content_wrap .content .flfr_data .fr .btn_box .list .btn i {
        font-size: 14px;
    }
    .mobile .kakaobank_data .content_wrap .content .flfr_data .fr {
        float: none;
    }
    .mobile .kakaobank_data .content_wrap .content .flfr_data .fl .plist_box {
        display: block;
    }
    .kakaobank_data .cont_box .prov {
        display: block; margin-top: 20px;
        position: relative; bottom: auto; left: auto;
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform:translateX(0);
    }
    .kakaobank_data .content_wrap .content .flfr_data .fl .profile dl dt {
        display: block;
    }
    .container .content_wrap .content .flfr_data .fr .fullscreen .btn_box {
        width: 90%; justify-content: center;
    } */
}





/*
@media all and (max-width:800px){
    .mobile .kakaobank_data .content_wrap .content {
        padding: 0;
    }
    .kakaobank_data .content_wrap .content .tit{
        margin: 25px 0 0;
    }
    .kakaobank_data .content_wrap .content .flfr_data_wrap {
        margin-top: 0;
    }
}
@media all and (max-width:650px){
    .kakaobank_data .content_wrap .content .flfr_data .btn_box a.down_btn{
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
    }
    .kakaobank_data .content_wrap .content .flfr_data .btn_box a.down_btn span{
        display: none;
    }
    .kakaobank_data .content_wrap .content .flfr_data .btn_box a.down_btn img{
        margin-right: 0;
        margin-top: 3px;
    }
}
@media all and (max-width:600px){
    .kakaobank_data .content_wrap .content{
        background-size: 168%;
    }
    .mobile .kakaobank_data .content_wrap .content .tit {
        margin: 25px 0 0;
    }
    .kakaobank_data .content_wrap .content .tit .point {
        font-size: 28px;
    }





    .kakaobank_data .content_wrap .content .flfr_data .fr .btn_box{

    }
    .kakaobank_data .content_wrap .content .flfr_data .fr .btn_box a.audio_btn{
        top: 38px; right: 0;
    }


    .kakaobank_data .content_wrap .content .prov{
        font-size: 16px;
    }
    .container .content_wrap .content .flfr_data .fr .fullscreen .btn_box {
        justify-content: flex-start;
    }
}
@media all and (max-width:450px){
    .kakaobank_data .content_wrap .content h1 {
        margin-top: 0;
    }
    .kakaobank_data .content_wrap .content h1 img{
        width: 140px;
    }
    .mobile .kakaobank_data .content_wrap .content .tit .mt{
        font-size: 21px;
    }
    .mobile .kakaobank_data .content_wrap .content {
        padding: 22px 10px 40px 10px;
    }
    .kakaobank_data .content_wrap .content .tit .point {
        font-size: 20px;
    }
} */