@charset "utf-8";

#bo_cate {margin-bottom:28px}
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {zoom:1}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {display:inline-block;padding:2px}
#bo_cate a {display:block;line-height:28px;padding:5px 15px;border-radius:30px;border:1px solid #d6e9ff;color:#6794d3}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none;background:#3a8afd;color:#fff}
#bo_cate #bo_cate_on {z-index:2;background:#3a8afd;color:#fff;font-weight:bold;border:1px solid #3a8afd;
-webkit-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
-moz-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
box-shadow:inset 0 2px 5px rgb(33, 135, 202)}

#faq_wrap {margin:10px 0 30px}
#faq_wrap h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.faq_admin {text-align:right}
#faq_wrap ol {margin:0;padding:0;list-style:none}
#faq_wrap li {border-bottom:1px solid #ececec;background:#fff;position:relative}
#faq_wrap li:first-child {border-top:1px solid #ececec}
#faq_wrap li h3 {min-height:50px;line-height:30px;padding:15px;padding-left:50px;position:relative}
#faq_wrap li h3 .tit_btn {position:absolute;right:15px;top:15px;border:0;width:30px;height:30px;background:#fff;color:#c5cdd8;font-size:1.2em}
#faq_wrap li h3 .tit_bg {display:inline-block;position:absolute;top:15px;left:15px;text-align:center;color:#000;font-size:1.6em}
#faq_wrap li h3.faq_li_open a {color:#3a8afd}

#faq_con .con_inner {display:none;padding:5px 5px 20px 50px}
#faq_con .con_inner .tit_bg {display:inline-block;position:absolute;top:10px;left:10px;text-align:center;background:#777;color:#fff;border-radius:50%;width:30px;line-height:30px;height:30px}
#faq_con .con_inner .closer_btn {position:absolute;right:15px;top:15px;border:0;width:30px;height:30px;background:#fff;color:#3a8afd;font-size:1.2em}

#faq_sch {background:#f7f7f7;padding:30px;text-align:center;margin:0 0 10px}
#faq_sch .sch_tit {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#faq_sch .frm_input {border:1px solid #d0d3db;width:300px;height:45px;border-radius:0;border-radius:3px}
#faq_sch .btn_submit {padding:0 10px;height:45px;width:88px;font-size:1.083em;font-weight:bold;color:#fff;background:#434a54}


/**********************
여기서부터 빌더전용 CSS입니다.
스킨작업은 가급적 CSS를 수정하지마시고, 
주석 후 새로 라인을 추가해주세요.
************************/

.rb_faq {margin-top: 30px;}
.rb_faq h2 {font-size: 22px; text-align: center;}
.rb_faq .rb_faq_sub_tit {font-size: 14px; text-align: center; margin-top: 20px; line-height: 130%;}
.rb_faq .faq_ser_wrap {width: 400px; margin: 0 auto; position: relative; margin-top: 50px;}
.rb_faq .faq_ser_wrap input {width: 100%; height:60px; border-radius: 60px; border:1px solid #2563eb; color:#2563eb; font-size: 16px; padding-left: 30px; padding-right: 60px; box-sizing: border-box;}
.rb_faq .faq_ser_wrap button {position: absolute; top:20px; right:30px;}

.rb_faq #bo_cate {margin-bottom: 0px; margin-top: 30px; display: flex;}
.rb_faq #bo_cate #bo_cate_ul {flex:1; position: relative;}
.rb_faq #bo_cate a {display: inline-flex; padding: 0px 20px; border:0px; font-size: 16px; color:#000; background-color: transparent; line-height: 56px; position: relative;}
.rb_faq #bo_cate a:first-child {padding-left: 0px;}
.rb_faq #bo_cate a:hover {background-color: transparent; font-family:'font-B',sans-serif;}
.rb_faq #bo_cate #bo_cate_on {background-color: transparent; font-weight: normal; box-shadow: none; color:#2563eb; border:0px; font-family:'font-B',sans-serif;}
.rb_faq #bo_cate li {padding: 0px; display: inline-block;}
.rb_faq #bo_cate #bo_cate_ul:before {content: "";bottom: 0;position: absolute;width: 100%;margin: 0;height: 1px;background-color: rgba(0, 0, 0, .1);}
.rb_faq #bo_cate #bo_cate_on::after {content: "";position: absolute;bottom: 0;right: 20px;left: 0px;height: 2px;background-color: currentColor;}

.rb_faq #faq_wrap {margin-top: 0px;}
.rb_faq #faq_con .con_inner .closer_btn {color:#2563eb;}
.rb_faq #faq_wrap li h3.faq_li_open a {color:#000; font-family:'font-B',sans-serif;}
.rb_faq #faq_wrap li h3 {font-family:'font-R',sans-serif; font-size: 18px; font-weight: normal; min-height: 60px; padding-top: 20px; padding-bottom: 20px;}
.rb_faq #faq_wrap li h3 .tit_bg {font-family:'font-B',sans-serif; top:18px; font-size: 24px;}
.rb_faq #faq_wrap li h3 .tit_btn {top:20px;}
.rb_faq #faq_con .con_inner .closer_btn {top:20px;}
.rb_faq #faq_con .con_inner {padding-top: 0px;}
.rb_faq #faq_con .con_inner img {max-width:100%;}
.rb_faq #faq_wrap li:first-child {border-top:0px;}

.rb_faq .btns_gr_wrap {position:fixed; top:128px; left: 0px; width: 100%; z-index: 0; height:0px;}
.rb_faq .btns_gr_wrap .sub {padding: 0px; height:0px; min-height: 0px;}
.rb_faq .btns_gr_wrap .btns_gr {float:right; width: 50px; margin-right: -100px;}
.rb_faq .btns_gr_wrap .btns_gr .fl_btns {width: 50px; height:50px; border:1px solid #ddd; background-color: #fff; border-radius: 6px; text-align: center; margin-bottom: 10px; position: relative; display: block; line-height: 45px;}
.rb_faq .btns_gr_wrap .btns_gr .fl_btns:hover {border-color:#2563eb;}

/* 툴팁 { */
.rb_faq .tooltips {
    opacity: 0;
    transition: all 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: default;
    position: absolute;
    left:50px;
    width: max-content;
    color: #fff;
    background-color: #212121;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 100%;
    top:50%;
    transform: translateY(-50%);
}
.rb_faq .tooltips:after {
    border-top: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid #212121;
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid rgba(0, 0, 0, 0);
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
}


.rb_faq .btns_gr_wrap .btns_gr .fl_btns:hover .tooltips {left: 60px; opacity: 1;}

/* } */

@media all and (max-width:1024px) {
    .rb_faq .faq_ser_wrap {width: 100%; padding-left: 40px; padding-right: 40px;}
    .rb_faq .faq_ser_wrap button {right: 70px;}
    .rb_faq {padding-left: 20px; padding-right: 20px;}
}

/* ============================================================
   BEBEPIN Modern Design System - FAQ (rb.faq) Overhaul
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUITE@2/fonts/static/woff2/SUITE.css');

.rb_faq,
.rb_faq * {
    font-family: 'SUITE', -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", sans-serif !important;
    letter-spacing: -0.3px;
    box-sizing: border-box;
}

.rb_faq {
    margin-top: 20px;
    padding-bottom: 60px;
}

/* Headings */
.rb_faq h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: center !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 8px !important;
}
.rb_faq .rb_faq_sub_tit {
    font-size: 15px !important;
    color: #64748b !important;
    text-align: center !important;
    line-height: 1.6 !important;
    margin-top: 8px !important;
    margin-bottom: 32px !important;
}

/* Search bar */
.rb_faq .faq_ser_wrap {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 30px auto !important;
    position: relative !important;
}
.rb_faq .faq_ser_wrap input {
    width: 100% !important;
    height: 54px !important;
    border-radius: 9999px !important;
    border: 2px solid #2563eb !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding-left: 24px !important;
    padding-right: 60px !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08) !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    background: #ffffff !important;
}
.rb_faq .faq_ser_wrap input:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.15) !important;
}
.rb_faq .faq_ser_wrap button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 8px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #2563eb !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}
.rb_faq .faq_ser_wrap button:hover {
    background: #1d4ed8 !important;
}
.rb_faq .faq_ser_wrap button svg path {
    fill: #ffffff !important;
}

/* Category Tabs */
.rb_faq #bo_cate {
    margin: 20px 0 24px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
}
.rb_faq #bo_cate a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 12px 20px !important;
    line-height: 1.5 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
}
.rb_faq #bo_cate a:hover {
    color: #0f172a !important;
}
.rb_faq #bo_cate #bo_cate_on {
    color: #0f172a !important;
    font-weight: 700 !important;
    border: none !important;
    border-bottom: 2px solid #0f172a !important;
    background: transparent !important;
    box-shadow: none !important;
}
.rb_faq #bo_cate #bo_cate_on::after {
    display: none !important;
}
.rb_faq #bo_cate #bo_cate_ul:before {
    display: none !important;
}

/* FAQ Accordion */
#faq_wrap ol {
    margin-top: 10px;
    padding: 0;
    list-style: none;
}
#faq_wrap li {
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
}
#faq_wrap li:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}
#faq_wrap li:first-child {
    border-top: 1px solid #e2e8f0 !important;
}

/* Question Header */
#faq_wrap li h3 {
    min-height: auto !important;
    line-height: 1.5 !important;
    padding: 20px 24px 20px 68px !important;
    position: relative !important;
    cursor: pointer !important;
    background: #ffffff !important;
    transition: background 0.2s ease !important;
}
#faq_wrap li h3.faq_li_open {
    background: #f8fafc !important;
}
#faq_wrap li h3 .tit_bg {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 20px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #bfdbfe !important;
}
#faq_wrap li h3 a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
#faq_wrap li:hover h3 a,
#faq_wrap li h3.faq_li_open a {
    color: #2563eb !important;
}
#faq_wrap li h3 .tit_btn {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    transition: all 0.2s ease !important;
}
#faq_wrap li h3.faq_li_open .tit_btn {
    background: #2563eb !important;
    color: #ffffff !important;
    transform: translateY(-50%) rotate(45deg) !important;
}

/* Answer Body */
#faq_con .con_inner {
    padding: 24px 28px 28px 68px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    position: relative !important;
}
.rb_faq #faq_con .con_inner .closer_btn {
    display: none !important;
}

/* Pagination */
.pg_wrap {
    margin-top: 36px !important;
}
.pg_page {
    border-radius: 8px !important;
    color: #475569 !important;
    font-weight: 600 !important;
}
.pg_current {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}