@charset "utf-8";

/* =======================================================
    custom
======================================================= */
:root {
    --c: #fff;
    --bg: var(--primary);

    --rem: 1em;
    --ellipsis: 1;
    --container: var(--container-lg);
}

/* =======================================================
    common
======================================================= */
body { font-family: 'Pretendard', sans-serif; font-size: 1em; line-height: 1.4; letter-spacing: -0.02em; color: #191919; }

* { scrollbar-width: thin; scrollbar-color: #aaa #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #aaa; border-radius: var(--radius-full); }

mark { display: inline-block; background: linear-gradient(to bottom, transparent 55%, rgba(var(--primary-rgb),0.15) 55%); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 100%; padding: 0 0.1em; }
a:has(img) { display: block; }

.grid { display: grid; gap: 2em 2em; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.grid-5 { grid-template-columns: repeat(5,1fr); }

.flex { display: flex; align-items: center; }

main:not(.smb) .container:has(#fwrite) { --container: var(--container-md); }

.alert { display: flex; align-items: center; margin: 1.5em 0; gap: 0.25em; text-align: center; border-radius: var(--radius-md); }
.alert i { font-size: 1.5em; }
.alert a { font-weight: 700; text-decoration: underline; }
.alert .btn_write { margin-left: auto; background-color: var(--info); color: #fff; padding: 0.5em 1.5em; font-weight: 500; font-size: 1.125em; }

.alert1 { padding: 1em 1.5em; gap: 0.5em; text-align: left; }
.alert2 { flex-direction: column; padding: 1.5em 1em; }

.alert.info { background-color: var(--info-bg); color: var(--info-dk);  }
.alert.warning { background-color: var(--warning-bg); color: var(--warning-dk); }

.btn_confirm.right { justify-content: flex-end; font-size: 0.875em; }

select.disabled { pointer-events: none; }

.account_ok { background-color: var(--success-bg); color: var(--success); }
/* =======================================================
    layout
======================================================= */
/* header */
.hd { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; border-bottom: 1px solid #ddd; background-color: #fff; }
.hd_con { height: 5em; display: flex; align-items: center; justify-content: space-between; }

.hd_logo img { max-height: 2.875em; }

.hd_gnb { font-size: 1em; }
.hd_gnb a { white-space: nowrap; display: block; }
.hd_gnb a:hover { color: var(--primary); }

@media screen and (min-width: 1025px){
    .hd_gnb_list { display: flex; justify-content: flex-start; align-items: center; gap: 2.5em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
    .hd_gnb_item { position: relative; padding: 1em 0; }
    .hd_gnb_sub { position: absolute; top: 95%; left: 50%; transform: translateX(-50%); background-color: #fff; box-shadow: var(--shadow-sm); padding: 0.25em 0; opacity: 0; pointer-events: none; margin-top: 0.5em; transition: var(--ts-md); }
    .hd_gnb_sub li { font-size: 0.9375em; }
    .hd_gnb_sub a { padding: 0.375em 1em; aspect-ratio: 12/1}
    .hd_gnb_item:hover .hd_gnb_sub { opacity: 1; pointer-events: auto; margin-top: 0; }
}

.hd_login { display: flex; justify-content: flex-end; align-items: center; gap: 0.625em; color: #a7a7a7; }
.hd_login .btn { font-size: 0.875em; gap: 0.5em; }
.hd_login .btn:hover { color: #191919; }

.hd_gnb_btn { width: 1.5em; aspect-ratio: 1/0.75; position: relative; background-color: transparent; border: 0; z-index: 5; }
.hd_gnb_btn .bar { display: inline-block; width: 100%; height: 2px; background-color: currentColor; position: absolute; left: 50%; transform: translateX(-50%); -webkit-border-radius: 1em;-moz-border-radius: 1em;border-radius: 1em; margin-top: -1px; transition: var(--ts-md); }
.hd_gnb_btn .bar-1 { top: 0; }
.hd_gnb_btn .bar-2 { top: 50%; }
.hd_gnb_btn .bar-3 { top: 100%; }
.hd_gnb_btn.is-close .bar { top: 50%; }
.hd_gnb_btn.is-close .bar-1 { transform: translateX(-50%) rotate(-45deg); }
.hd_gnb_btn.is-close .bar-2 { width: 0; }
.hd_gnb_btn.is-close .bar-3 { transform: translateX(-50%) rotate(45deg); }

/* footer */
.ft { background-color: #2C353B; color: #fff; padding: 3.75em 0 4.25em; }
.ft .divider { margin: -0.25em 0.5em 0; vertical-align: middle; }
.ft_con { display: flex; justify-content: space-between; align-items: flex-end; }
.ft_logo { filter: brightness(0) invert(1); }
.ft_logo img { max-width: 10em; }
.ft_fnb a { font-size: 0.875em; }
.ft_info { margin: 1.25em 0; }
.ft_info span { font-size: 0.9375em; }

/* main */
.main { padding: 6em 0 9em; margin-top: 5em; }

/* =======================================================
    sub
======================================================= */
.page_title { margin-bottom: 3em; text-align: center; }
.page_title h2 { font-size: 2.5em; font-weight: 700; text-transform: uppercase; overflow: hidden; }
.page_title h2 b { color: var(--primary); }

/* company - 회사소개 */
.company_flex { justify-content: space-between; }
.company_img { width: 38%; max-width: 510px; aspect-ratio: 1/1.2; padding-left: 2em; position: relative; }
.company_img .deco { width: 90%; height: 90%; position: absolute; left: 0; top: 5%; background: var(--primary-dk); }
.company_img img { width: 100%; height: 100%; object-fit: cover; }
.company_con { }
.company_txt p { font-size: 1.125em; line-height: 1.5; margin-bottom: 1em; }
.company_txt p mark { font-weight: 700; }
.company_list { padding-top: 1.5em; }
.company_list li {  }
.company_list h5 { font-size: 2.5em; line-height: 1.2; font-weight: 700; }
.company_list h5::after { content:""; width: 100%; height: 1px; display: block; background-color: #898989; margin: 0.25em 0; }
.company_list p { font-size: 1.125em; font-weight: 700; }
.company_list small { display: block; color: #686868; font-weight: 500; margin-top: 0.25em; }

/* ceo - CEO 인사말 */
.ceo_banner { padding: 7em 0; background: url(/img/ceo_banner.png) no-repeat center/cover; color: #fff; text-align: center; flex-direction: column; justify-content: center; }
.ceo_banner h4 { font-size: 1.5em; }
.ceo_banner p { font-size: 1.125em; margin-top: 0.5em; }
.ceo_con { align-items: flex-start; justify-content: space-between; margin-top: 2.5em; }
.ceo_con h3 { font-size: 2.25em; font-weight: 700; }
.ceo_con h3 .line { overflow: hidden; }
.ceo_con h3 .emph { font-weight: 700; }
.ceo_con p { font-size: 1.125em; line-height: 1.6; margin-bottom: 1em; }
.ceo_con p mark { font-weight: 700; }

/* matching - 과외 매칭 */
.matching .frm_label { display: block; margin-bottom: 0.5em; }

/* matching - 구인구직 */
.jobs textarea { min-height: 0; }
.jobs .frm_label { display: block; margin-bottom: 0.5em; }
.jobs .chk_wrap { padding: 0.75em 0; }
.jobs .post_meta .big { font-size: 1.125em; color: var(--primary-dk); }
.jobs .post_meta .big i { font-size: 1.25em; }
.jobs .post_content div:not(:last-child) { margin-bottom: 2.5em; }
.jobs .post_content h4 { font-size: 1.25em; font-weight: 700; }
.jobs .post_content ul { margin-top: 0.5em; padding: 1.5em 2em; border: 2px solid #eee; }
.jobs .post_content li { font-size: 1.125em; display: grid; grid-template-columns: 0.1fr 1fr; }
.jobs .post_content li:not(:last-child) { margin-bottom: 0.625em; }
.jobs .post_content h5 { color: #7e7e7e; position: relative; padding-left: 1em; }
.jobs .post_content h5::before { content:""; width: 0.3em; height: 0.3em; border-radius: var(--radius-full); background-color: currentColor; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.jobs .post_content p { color: #3f3f3f; }

/* tutor - 과외 선생님찾기 */
.tutor { --c: var(--primary); --bg: rgba(var(--primary-rgb),0.1); }
.tutor .frm_label { display: block; margin-bottom: 0.5em; }
.tutor .cke_sc { position: absolute; right: 0; bottom: 100%; margin-bottom: 0.5em; }
.tutor:has(.tutor_profile) .page_title { display: none; }

/* tutor - 상세, 목록 공통 */
.tutor_profile { border-radius: var(--radius-full); overflow: hidden; aspect-ratio: 1/1; }
.tutor_profile img { width: 100%; height: 100%; object-fit: cover; }

.tutor_meta h4 { line-height: 1; display: flex; align-items: flex-end; margin-bottom: 0.75em; gap: 0.5em; }
.tutor_meta h4 b { font-size: 1.5em; font-weight: 700; }
.tutor_meta h4 small { font-size: 0.75em; font-weight: 600; vertical-align: top; }
.tutor_meta p { font-size: 1em; line-height: 1.5; color: #575757; width: calc(100% - 6.5em); }

/* tutor - 상세 */
.tutor_view { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 2.5em 3em; border: 0; }
.tutor_view.top { display: flex; gap: 2em; padding: 3em; }
.tutor_view .tutor_box { width: 55%; display: flex; justify-content: flex-start; align-items: center; gap: 2em; }
.tutor_view .tutor_profile { width: 42%; }
.tutor_view .tutor_meta { margin-bottom: 1em; }
.tutor_view .tutor_subject { font-weight: 500; background-color: rgba(var(--primary-rgb), 0.07); padding: 1em 1.5em; border-radius: var(--radius-md); color: var(--primary-dk); display: flex; justify-content: center; align-items: center; }
.tutor_view .btn_submit { width: 100%; margin-top: 1em; background-color: var(--primary); padding: 1em; font-weight: 600; border-radius: var(--radius-sm);}
.tutor_view .tutor_career h4 { font-size: 1.25em; font-weight: 700; margin-bottom: 0.5em; }
.tutor_view .tutor_career p { color: #575757; line-height: 1.5; }
.tutor_view .tutor_file { margin-top: 2em; }
.tutor_con { line-height: 1.6; }
.tutor_con * { font-size: clamp(15px, 0.9375em, 18px); }
.tutor_con b { font-size: 1.125em; font-weight: 700; }

/* tutor - 목록 */
.tutor_list .tutor_item { position: relative; display: flex; padding-top: 2em; filter: drop-shadow(var(--shadow-sm)); }
.tutor_list .tutor_img { width: 9em; position: relative; }
.tutor_list .tutor_svg { height: 100%; }
.tutor_list .tutor_svg path { fill: #fff; }
.tutor_list .tutor_profile { position: absolute; left: 0.25em; bottom: 2.75em; width: 75%; overflow: visible; }
.tutor_list .tutor_profile img { position: relative; border-radius: var(--radius-full); }
.tutor_list .tutor_box { margin-left: -0.5em; background-color: #fff; border-radius: var(--radius-md); position: relative; flex-grow: 1; padding: 1.25em; padding-left: 0.8em; }
.tutor_list .tutor_trophy { align-self: center; }
.tutor_list .tutor_meta h4 { display: flex; }
.tutor_list .tutor_rank { font-size: 1.25em; align-self: center; font-weight: 800; margin-left: auto; margin-top: -0.3em; }
.tutor_list .tutor_more { position: absolute; right: 0; bottom: 0; border-radius: var(--radius-full); padding: 0.5em 1.75em; margin: 1.5em; font-weight: 600; color: #fff; background: linear-gradient(45deg, var(--primary-hv), var(--primary-dk)); border: 0; }
.tutor_list .tutor_profile::before { content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: var(--radius-full); animation: spin 4s linear infinite; }

.tutor_list .tutor_item-1 .tutor_trophy { color: #F6BF2F; }
.tutor_list .tutor_item-1 .tutor_rank { color: #F6BF2F; }
.tutor_list .tutor_item-1 .tutor_profile { padding: 0.4em; }
.tutor_list .tutor_item-1 .tutor_profile::before { background: linear-gradient(to bottom, #ffe7b7, #E99F00); }
.tutor_list .tutor_item-1 .tutor_more { background: linear-gradient(45deg, #ffe7b7, #E99F00); }

.tutor_list .tutor_item-2 .tutor_trophy { color: #8F8F8F; }
.tutor_list .tutor_item-2 .tutor_rank { color: #8F8F8F; }
.tutor_list .tutor_item-2 .tutor_profile { padding: 0.4em; }
.tutor_list .tutor_item-2 .tutor_profile::before { background: linear-gradient(to bottom, #ffe7b7, #E99F00); }
.tutor_list .tutor_item-2 .tutor_more { background: linear-gradient(45deg, #d9d9d9, #9f9f9f); }

.tutor_list .tutor_item-3 .tutor_trophy { color: #967548; }
.tutor_list .tutor_item-3 .tutor_rank { color: #967548; }
.tutor_list .tutor_item-3 .tutor_profile { padding: 0.4em; }
.tutor_list .tutor_item-3 .tutor_profile::before { background: linear-gradient(to bottom, #ecd6b9, #9b7d57); }
.tutor_list .tutor_item-3 .tutor_more { background: linear-gradient(45deg, #ecd6b9, #9b7d57); }


/* 정산 */
.calculate:has(.post_content) .page_title  { display: none; }
.calculate:has(.post_content) .container { max-width: 600px; }
.calculate .post_content li { display: flex; margin-bottom: 0.5em; }
.calculate .post_content li b { width: 6.5em; }
.calculate .post_content .btn_confirm {  }
.calculate .post_content .btn { padding: 0.75em 1.5em; flex: 1 1 40%; max-width: none; }

/* =======================================================
    상품목록
======================================================= */
/* 대분류 */
.sct_tab { display: flex; justify-content: center; align-items: center; gap: 1em; margin-bottom: 2em; }
.sct_tab li { font-size: 1.25em; font-weight: 700; color: #9A9A9A; }
.sct_tab li.is-active { color: #191919; }

/* 중분류 */
.sct_ct .tab_list { justify-content: center; }

/* 정렬 */
.sct_top { display: flex; margin-bottom: 1em; }
.sct_sort { font-size: 0.9375em; position: relative; display: inline-block; margin-left: auto; }
.sct_sort .sort_btn { background-color: #fff; border: 1px solid #ddd; border-radius: var(--radius-sm); padding: 0.625em; position: relative; z-index: 101; gap: 0.5em; }
.sct_sort .sort_btn i { transition: var(--ts-sm); }
.sct_sort .sort_list { background-color: #fff; position: absolute; left: 0; top: 100%; margin-top: -0.5em; width: 100%; border: 1px solid #ddd; border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 1em 0.625em 0.5em; display: flex; flex-direction: column; gap: 0.5em; z-index: 100; pointer-events: none; transform: translateY(0.5em); opacity: 0; transition: var(--ts-sm); }
.sct_sort .sort_list li { font-size: 0.9375em; color: #9a9a9a; font-weight: 500; }
.sct_sort .sort_list li:hover,
.sct_sort .sort_list li.is-active { color: var(--primary); }
.sct_sort.is-open .sort_btn i { transform: rotate(180deg); }
.sct_sort.is-open .sort_list { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* 목록 */
.sct_10 { gap: 3em 2em; }
.sct_10 .sct_a { display: block; }
.sct_10 .sct_img img { width: 100%; }
.sct_10 .sct_ct_wrap { margin-top: 1em; }
.sct_10 .sct_txt { font-size: 1.125em; font-weight: 600; }
.sct_10 .sct_txt { font-size: 1.125em; font-weight: 600; }
.sct_10 .sct_author { font-size: 0.875em; margin: 0.75em 0 0.25em; }
.sct_10 .sct_author span { color: #9a9a9a; }
.sct_10 .sct_author b { font-weight: 500; }
.sct_10 .sct_cost { font-size: 1.125em; font-weight: 700; line-height: 1.2; }
.sct_10 .sct_cost small { font-size: 0.75em; font-weight: 500; margin-left: 0.2em; }

/* 상세 */
#sit_ov_from { margin-bottom: 5em; }
#sit_ov_wrap { display: flex; justify-content: space-between; align-items: flex-start; height: auto; }

/* 상세 이미지 */
#sit_pvi { width: 48.5%; position: sticky; top: 7em; padding: 2em 0; }
#sit_pvi .sit_pvi_box { width: 55%; margin: auto; position: relative; box-shadow: var(--shadow-md); }
#sit_pvi .sit_pvi_box img { width: 100%; }

/* 상세 정보 */
:has(#sit) .container { position: relative; }
#sit_ov { width: 48.5%; }
#sit_title { font-size: 2.5em; line-height: 1.2; font-weight: 700; border-bottom: 1px solid #ddd; padding-bottom: 0.3em; }

.sit_info_list { display: flex; flex-wrap: wrap; gap: 0 2em; border-bottom: 1px solid #ddd; }
.sit_info_item {  display: flex; align-items: center; gap: 0.5em; padding: 1.25em 0; }
.sit_info_label { color: #939393; }
.sit_info_price { width: 100%; display: grid; grid-template-columns: 0.2fr 1fr; border-bottom: 1px solid #ddd; padding: 0.625em 0; }
.sit_info_price strong { font-size: 2.5em; font-weight: 700; color: var(--primary); }

#sit_opt_added { margin-top: 1em; }
#sit_opt_added > li { border: 1px solid #ddd; border-radius: var(--radius-sm); background-color: #F8F8F8; padding: 1.25em 1.5em; margin-bottom: 0.5em; position: relative; }
#sit_opt_added .opt_name { font-weight: 600; margin-bottom: 0.5em; }
#sit_opt_added .opt_count { display: flex; justify-content: space-between; align-items: flex-end; }
#sit_opt_added .opt_count_box { display: flex; height: 2.25em; justify-content: flex-start; gap: 0.25em; }
#sit_opt_added .opt_count_box button,
#sit_opt_added .opt_count_box input { background-color: #fff; border-radius: var(--radius-sm); border: 1px solid #ddd; }
#sit_opt_added .opt_count_box button { width: 2.25em; }
#sit_opt_added .opt_count_box button i { font-size: 1.25em; }
#sit_opt_added .opt_count_box input { width: 3.25em; text-align: center; }
#sit_opt_added .sit_opt_prc { font-size: 1.5em; font-weight: 700; }
#sit_opt_added .sit_opt_del { position: absolute; right: 0; top: 0; margin: 1em;}
#sit_tot_price { font-size: 1.375em; line-height: 1; display: flex; align-items: center; margin-top: 1em; }
#sit_tot_price span { font-size: 0.875em; margin-right: auto; }
#sit_tot_price strong { font-size: 1.25em; }
#sit_ov_btn { margin-top: 1em; }
#sit_ov_btn button { max-width: none; border-radius: var(--radius-sm); }

/* 상세 탭 */
#sit_tab .tab_tit { display: flex; }
#sit_tab .tab_tit li { flex-grow: 1; border-top: 1px solid #ddd;; border-bottom: 1px solid #ddd; }
#sit_tab .tab_tit li:has(.selected) { border-bottom-color: #fff; }
#sit_tab .tab_tit li:not(:last-child) { border-right: 1px solid #ddd; }
#sit_tab .tab_tit button { width: 100%; padding: 1em; background-color: #fafafa; font-size: 1em; font-weight: 500; color: #9a9a9a; }
#sit_tab .tab_tit button.selected { background-color: #fff; color: #191919; }
#sit_tab .tab_con > li { padding: 2em; }

/* 옵션 선택 */
.sit_option { margin-top: 1em; }
.sit_option label.label-title { display: none; }
.sit_option select,
.sit_option .frm_input { display: block; width: 100%; padding: 0.875em; height: auto; border-radius: var(--radius-sm); }
.sit_option .get_item_options,
.sit_option .get_item_supply,
.sit_option .get_item_custom { margin-bottom: 0.5em; }

/* 책 커스텀 */
#sit_pvi .sit_pvi_cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; padding: 40% 5%; display: none; }
#sit_pvi .sit_pvi_cover.type2 { color: #fff; }
#sit_pvi .sit_pvi_cover img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#sit_pvi .sit_pvi_cover h4,
#sit_pvi .sit_pvi_cover p { position: relative; word-break: break-all; }
#sit_pvi .sit_pvi_cover h4 { font-size: 2.25em; font-weight: 700; }
#sit_pvi .sit_pvi_cover p { font-size: 1.125em; font-weight: 500; margin-top: 1em; }
.sit_option_custom .alert { padding: 0.5em 1em; }

/* 장바구니 */
.btn_cart_del { display: flex; justify-content: flex-end; align-items: center; gap: 0.5em; margin-bottom: 1em; }
.btn_cart_del button { padding: 0.4em 0.8em; }

#sod_bsk #sod_bsk_tot { margin: 2em 0; }
#sod_bsk #sod_bsk_tot ul { display: flex; border-top: 2px solid #000; border-bottom: 1px solid #000; text-align: center; }
#sod_bsk #sod_bsk_tot li { flex-grow: 1; }
#sod_bsk #sod_bsk_tot span,
#sod_bsk #sod_bsk_tot strong { display: block; border-bottom: 1px solid #ddd; }
#sod_bsk #sod_bsk_tot span { font-size: 1.125em; padding: 1em; }
#sod_bsk #sod_bsk_tot strong { font-size: 1.75em; padding: 0.5em; }

.sod_chk { width: 3em; }
.sod_chk b { display: none; }
.sod_qty { width: 5em; }
.sod_price { width: 8em; }
.sod_point { width: 8em; }
.sod_send_cost { width: 8em; }
.sod_total { width: 8em; }

.sod_prd { flex-grow: 1; }
.sod_prd .flex { padding: 0 0.5em; gap: 1em; }
.sod_prd .sod_img { width: 4.25em; }
.sod_prd .sod_name { text-align: left; }
.sod_prd .prd_name { font-size: 1.125em; }
.sod_prd .sod_opt { margin-top: 0.25em; }
.sod_prd .sod_opt li { font-size: 0.875em; color: #575757; }
.sod_prd .sod_option_btn .mod_options { font-size: 0.8125em; margin-top: 0.5em; padding: 0.4em 0.8em; }

.sod_list { text-align: center; border-top: 2px solid #000; }
.sod_item { position: relative; display: flex; border-bottom: 1px solid #ddd; padding: 1em 0; align-items: center; }
.sod_item.multi:not(.first) { margin-top: -1em; }
.sod_item.multi:not(.last) { border-bottom: 0; }
.sod_item.is-thead > div { text-align: center; }

#sod_bsk_list .mod_option_bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.1); z-index: 999; }
#sod_bsk_list #mod_option_frm { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1000; background-color: #fff; width: 90%; max-width: 560px; border-radius: var(--radius-md); max-height: calc(var(--vh) * 60); overflow-y: scroll; }
#mod_option_frm h2 { border-bottom: 1px solid #ddd; padding: 0.75em 1em; font-size: 1.25em; font-weight: 600; }
#mod_option_frm form { padding: 1em 1.25em; }
#mod_option_frm #mod_option_close { position: absolute; right: 0; top: 0; padding: 0.75em 1em; font-size: 1.25em; font-weight: 600; }
#mod_option_frm .sit_option_custom .alert { display: none; }

.option_wr .get_item_options,
.option_wr .get_item_supply { margin-bottom: 0.5em; }
.option_wr label { display: block; margin-bottom: 0.25em; }
.option_wr select { width: 100%; }

/* 주문서 */
.sod_wrap { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 2em; gap: 2%; }

.sod_left { flex-grow: 1; }
.sod_left section { border: 1px solid #ddd; padding: 1em 1.25em; border-radius: var(--radius-md); }
.sod_left section:not(:last-child) { margin-bottom: 2em; }
.sod_left h2 { font-size: 1.375em; font-weight: 700; padding-bottom: 0.5em; border-bottom: 2px solid #000; margin-bottom: 0.25em; }
.sod_left .tbl_wrap table { border-top: 0; text-align: left;  }
.sod_left .tbl_wrap tr { border-bottom: 0; }
.sod_left .tbl_wrap th { width: 8em; }
.sod_left .tbl_wrap td { padding: 0.25em 1em; }
.sod_left .frm_address { max-width: 600px; }
.sod_left .btn_frmline { padding: 0.75em 1em; }
.sod_left .order_choice_place { display: flex; justify-content: flex-start; gap: 1em; }

.sod_right { width: 100%; max-width: 400px; flex-shrink: 0; font-size: 0.9375em; }
#sod_frm #sod_bsk_tot { border: 1px solid #ddd; border-radius: var(--radius-md); overflow: hidden; }
#sod_frm #sod_bsk_tot ul { display: flex; flex-wrap: wrap; }
#sod_frm #sod_bsk_tot li { border-bottom: 1px solid #ddd; padding: 0.875em; line-height: 1; position: relative; }
#sod_frm #sod_bsk_tot li:last-child { border-bottom: 0; }
#sod_frm #sod_bsk_tot small { font-weight: 500; }
#sod_frm #sod_bsk_tot .is-column { width: 33.333%; text-align: center; border-right: 1px solid #ddd; }
#sod_frm #sod_bsk_tot .is-column:nth-of-type(3) { border-right: 0; }
#sod_frm #sod_bsk_tot .is-column span { display: block; margin-bottom: 0.5em; }

#sod_frm #sod_bsk_tot .is-row { width: 100%; display: flex; justify-content: space-between; align-items: center; }
#sod_frm #ct_tot_price b { color: var(--primary); font-size: 1.375em; font-weight: 700; }
#sod_frm #sod_bsk_tot .sod_bsk_coupon:before { content:"-"; }
#sod_frm #sod_bsk_tot .sod_bsk_dvr:before { content:"+"; }
#sod_frm #sod_bsk_tot .sod_bsk_coupon:before,
#sod_frm #sod_bsk_tot .sod_bsk_dvr:before { position: absolute; left: 0; top: 50%; width: 1.25em; aspect-ratio: 1/1; border: 1px solid #ddd; border-radius: var(--radius-full); transform: translate(-50%,-50%); color: var(--primary-hv); background-color: #fff; font-size: 1.125em; font-weight: 800; }

#sod_frm_pay { margin-top: 1em; }
#sod_frm_pay .pay_tbl { background-color: #fff; border:  1px solid #ddd; border-radius: var(--radius-md); }
#sod_frm_pay .pay_tbl tr { border-bottom: 1px solid #ddd; }
#sod_frm_pay .pay_tbl tr:last-child { border-bottom: 0; }
#sod_frm_pay .pay_tbl th,
#sod_frm_pay .pay_tbl td { padding: 0.625em; }
#sod_frm_pay .pay_tbl th { text-align: left; }
#sod_frm_pay .pay_tbl td { text-align: right; }

#od_tot_price { margin-top: 1em; background-color: rgba(var(--primary-rgb),0.08); display: flex; justify-content: space-between; align-items: center; padding: 0.875em 0.625em;  border: 1px solid rgba(var(--primary-rgb),0.15); border-radius: var(--radius-md); }
#od_tot_price .print_price { margin-left: auto; color: var(--primary); font-size: 1.875em; margin-right: 0.25em; }

#od_pay_sl h3 { font-size: 1.125em; font-weight: 700; }
#od_pay_sl > div { border: 1px solid #ddd; margin-top: 1.5em; padding: 1em; border-radius: var(--radius-md) var(--radius-md) 0 0; }
#od_pay_sl #sod_frm_pt_alert { color: #575757; font-size: 0.9375em; padding: 0.25em; }
#od_pay_sl #settle_bank { border-top: 1px solid #ddd; margin-top: 1em; padding: 0.625em 1em 0; grid-column: -1/1; }

#sod_frm_paysel { gap: 0; padding-left: 1px; padding-top: 1px; margin-top: 0.5em; }
#sod_frm_paysel input { display: none; }
#sod_frm_paysel input + label { border: 1px solid #ddd; margin-left: -1px; margin-top: -1px; padding: 1em 1em 1em 5.5em; background: no-repeat left 5% center/4em; }
#sod_frm_paysel input:checked + label { color: var(--primary); border-color: var(--primary); position: relative; }
#sod_frm_paysel .bank_icon { background-image: url('../img/pay_icon1.png'); }
#sod_frm_paysel .vbank_icon { background-image: url('../img/pay_icon2.png'); }
#sod_frm_paysel .iche_icon { background-image: url('../img/pay_icon2.png'); }
#sod_frm_paysel .hp_icon { background-image: url('../img/pay_icon3.png'); }
#sod_frm_paysel .card_icon { background-image: url('../img/pay_icon4.png'); }
#sod_frm_paysel .PAYCO { background-image: url('../img/payco.png'); }

#sod_frm .btn_confirm { flex-direction: column; margin-top: -1px; border: 1px solid #ddd; padding: 1em; border-radius: 0 0 var(--radius-md) var(--radius-md); }
#sod_frm .btn_confirm .btn_submit,
#sod_frm .btn_confirm .btn01 { width: 100%; height: 3em; font-size: 1.125em; max-width: none; border-radius: var(--radius-sm);}

/* 주문 상세 */
#sod_fin_no { border: 1px solid rgba(var(--primary-rgb),0.1); color: var(--primary); background-color: rgba(var(--primary-rgb),0.08); padding: 0.875em 1.25em; margin-bottom: 1.5em; border-radius: var(--radius-sm); font-size: 1.125em; }
#sod_fin_no strong { margin-left: 0.5em; }

#sod_sts_wrap { display: flex; flex-direction: column; align-items: flex-end; margin-top: 1em; position: relative; }
#sod_sts_explan_open { padding: 0.4em 0.8em; margin-left: auto; }
#sod_sts_explan { position: absolute; right: 0; top: 100%; margin-top: 0.5em; line-height: 1; opacity: 0; pointer-events: none; transform: translateY(0.5em); transition: var(--ts-sm); }
#sod_sts_explan.is-show { opacity: 1; pointer-events: auto; transform: translateY(0);}
#sod_fin_legend { padding: 1em; border: 1px solid #dcd; border-radius: var(--radius-sm); background-color: #fff; display: grid; grid-template-columns: 0.5fr 1fr; font-size: 0.9375em; gap: 0.5em 0.5em; color: #575757; }
#sod_fin_legend dt { font-weight: 600; }
#sod_fin_legend dd { white-space: nowrap; }

#sod_fin .order_view_infos { border: 1px solid var(--primary); border-radius: var(--radius-md); }
#sod_fin .order_view_infos li { display: flex; justify-content: space-between; padding: 0.75em 1.25em; }
#sod_fin #sod_bsk_tot li:not(:first-child) { border-top: 1px solid #eee; }
#sod_fin #sod_fin_tot li { background-color: rgba(var(--primary-rgb),0.08); border-top: 1px solid rgba(var(--primary-rgb),0.1); }
#sod_fin #sod_fin_tot strong { color: var(--primary); font-size: 1.25em; }

#sod_fin_cancel { margin-top: 1.5em; } 
#sod_fin_cancel button { display: flex; padding: 1em; width: 100%; border: 1px solid #555; color: #555; border-radius: var(--radius-sm); }
#sod_fin_cancelfrm { display: none; margin-top: 0.5em; text-align: center; }
#sod_fin_cancelfrm .frm_input { padding: 0.75em 0.625em; border-radius: var(--radius-sm); height: auto; }
#sod_fin_cancelfrm .btn_frmline { width: 100%; padding: 0.875em 1em; margin-top: 0.5em; border-radius: var(--radius-sm); }

/* 마이페이지 공통 */
.smb_wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 2%; }
.smb_ov { width: 100%; max-width: 250px; flex-shrink: 0; border: 1px solid #ddd; border-radius: var(--radius-md); position: sticky; top: 7em; }
.smb_con { flex-grow: 1; }
.smb_tit { font-size: 1.5em; margin-bottom: 1em; font-weight: 700; }
.smb_menu,
.smb_private { border-bottom: 1px solid #ddd; padding: 1em; }

.smb_me { display: flex; gap: 0.5em; padding: 1.25em 1em; line-height: 1; justify-content: flex-start; border-bottom: 1px solid #ddd; }
.my_ov_img,
.my_ov_txt { flex-grow: 1; }
.my_ov_img img { width: auto; height: 100%; max-width: none; display: inline-block; }
.my_ov_txt strong { font-size: 1.25em; font-weight: 700; }
.my_level { margin-top: 0.5em; }
.my_level .badge { font-size: 0.8125em; padding: 0.35em 0.7em; line-height: 1; }
.my_level .badge1 { background-color: var(--primary); }
.my_level .badge2 { background-color: var(--warning); }
.my_level .badge3 { background-color: var(--success); }
.my_level .badge4 { background-color: #191919; }
.my_level small { font-size: 0.75em; }
.my_ov_btns { margin-top: 0.3em; }
.my_ov_btns .btn { font-size: 0.75em; border-bottom: 1px solid currentColor; padding: 0.3em; -webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0; }

.smb_me .smb_info { color: var(--primary); }
.smb_menu li { font-weight: 500; margin-bottom: 0.625em; color: #575757; }
.smb_menu li:last-child { margin-bottom: 0; }
.smb_menu li:hover { color: var(--primary); }
.smb_menu li.bdt::before { content:""; width: 100%; height: 1px; background-color: #ddd; display: block; margin-bottom: 0.875em; }
.smb_private h3 { font-weight: 700; }
.smb_private dl { font-size: 0.9375em; }
.smb_private dt { color: #9a9a9a; margin-bottom: 0.25em; padding-top: 0.5em; }
.smb_private dd { border-bottom: 1px dashed #ddd; padding-bottom: 0.5em; }
.smb_private dd:last-child { border-bottom: 0; padding-bottom: 0; }
.withdrawal { text-align: center; width: 100%; padding: 0.75em; display: block; color: #bbb; }

/* 주문내역 */
.smb_my_od { margin-bottom: 3em; }
.smb_my_od:last-child { margin-bottom: 0; }
.smb_my_od td a { text-decoration: underline; }
.smb_my_tit { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5em;  }
.smb_my_tit h2 { font-size: 1.25em; font-weight: 700; }
.smb_my_tit a { color: #a7a7a7; font-size: 0.9375em; }
.smb_my_tit a:hover { color: var(--primary); }
.smb_my_tit a i { font-size: 1.25em; line-height: 1; }

.status_01, .status_02, .status_03, .status_04, .status_05, .status_06 { display: inline-flex; justify-content: center; align-items: center; font-size: 0.875em; line-height: 1; padding: 0.4em 0.8em; border-radius: var(--radius-full); }
.status_01 { background-color: #edfbde; color: #8cc152; }
.status_02 { background-color: #84c93a; color: #fff; }
.status_03 { background-color: #e2f6f2; color: #16b494; }
.status_04 { background-color: #e2eaf6; color: #3a8afd; }
.status_05 { background-color: #3a8afd; color: #fff; }
.status_06 { background-color: #fff; color: red; }

/* 회원권 구매 */
.mbship_form { margin-bottom: 3em; }
.mbship_list { display: flex; gap: 1em; }
.mbship_item { flex-grow: 1; border-radius: var(--radius-md); border: 1px solid #ddd; padding: 2em 3em; cursor: pointer; color: #262626; position: relative; }
.mbship_item input[type=checkbox] { display: none; }
.mbship_item.selected { background-color: var(--primary); color: #fff; }
.mbship_item.selected .mbship_img img { filter: brightness(0) invert(1); }
.mbship_item.selected .mbship_img img::before { background-color: #fff; }
.mbship_item.unable { color: #777; cursor: default; }
.mbship_item.unable .mbship_img img { opacity: 0.6; }
.mbship_item:nth-child(1) .badge { background-color: var(--warning); }
.mbship_item:nth-child(2) .badge { background-color: var(--success); }
.mbship_box { display: flex; justify-content: space-between; align-items: flex-end }
.mbship_txt h4 { font-size: 1.5em; font-weight: 700; }
.mbship_txt p { font-size: 1em; margin-top: 0.25em; }
.mbship_price { font-size: 1.875em; margin-top: 0.5em; }
.mbship_price b { font-weight: 700; }
.mbship_img { position: relative; }
.mbship_img span {  width: 3em; aspect-ratio: 1/1; background-color: #AFE7FF; border-radius: var(--radius-full); display: block; position: absolute; top: 40%; left: 40%; opacity: 0.4; }
.mbship_img img { position: relative; }
.mbship_info { font-size: 0.875em; position: absolute; right: 0; top: 0; padding: 1em; }
.mbship_info .badge { margin-left: 0.25em; }

/* 문제 사고팔기 - 등록 */
.problem_add .frm_item.is-file { margin-top: 1em; }
.problem_add .frm_label { display: block; margin-bottom: 0.5em; }

/* 문제 사고팔기 - 목록 */
.sod_subj { flex-grow: 1; padding: 0 1em; text-align: left; }
.sod_file { width: 10em; text-align: center }
.sod_txt { width: 6em; }

/* 문제 사고팔기 - 목록 마이페이지 */
.sod_status { width: 6em; }
.sod_status .badge { font-size: 0.875em; }
.sod_status .badge.wait { --bg: #f1f1f1; color: #686868; }
.sod_status .badge.ok { --bg: var(--success-bg); color: var(--success); }
.sod_status .badge.no { --bg: var(--error-bg); color: var(--error); }
main[class*="problem"] .sod_subj strong { display: block; }
main[class*="problem"] .sod_subj small { font-size: 0.9375em; }

/* 문제 사고팔기 - 판매내역 */
.problem_sale .btn_confirm { justify-content: space-between; align-items: flex-start; }
.problem_sale .total_calc { font-size: 1.625em; font-weight: 500; margin-right: 1em; }
.problem_sale .total_calc b { margin-left: 0.5em; }

/* 문제 사고팔기 - 목록 상품 */
.sod_file a { color: #939393; display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.25em; line-height: 1; }
.sod_file a i { font-size: 1.125em; }
.sod_file a.is-active { color: #333; }
.sod_file a.is-active:hover { color: var(--primary); }

/* 문제 사고팔기 - 구매 */
.problem_order .page_title { display: none; }
.problem_order .problem_box { border: 1px solid #ddd; border-radius: var(--radius-lg); padding: 3% 5.5%; justify-content: space-between; gap: 1.5em; }
.problem_order .problem_txt { flex-shrink: 0; }
.problem_order .problem_txt small { font-size: 0.9375em; color: #333; }
.problem_order .problem_meta { display: flex; gap: 0.5em; margin-top: 0.5em; }
.problem_order .problem_meta .badge { padding: 0.25em 1.125em; font-weight: 500; }
.problem_order .problem_txt h3 { font-size: 3em; font-weight: 700; line-height: 1.2; margin: 0.5em 0; }
.problem_order .problem_txt p { font-size: 1em; line-height: 1.6; color: #676767; }

.problem_order .problem_selected { flex-grow: 1; max-width: 400px; display: flex; flex-direction: column; gap: 1em; }
.problem_order .problem_item { width: 100%; border-radius: var(--radius-md); display: flex; padding: 1em 1.5em; justify-content: space-between; background-color: #F4F4F4; cursor: pointer; }
.problem_order .problem_item h4 { font-size: 1.25em; font-weight: 800;  }
.problem_order .problem_item p { font-weight: 600; color: #333; margin-top: 0.25em; }
.problem_order .problem_item div { opacity: 0.6; }
.problem_order .problem_item img { filter: grayscale(1) opacity(0.6); }
.problem_order .problem_item input { display: none; }

.problem_order .problem_item.is-active div { opacity: 1; }
.problem_order .problem_item.is-active img { filter: none; }

.problem_order .problem_item.pdf.is-active { background-color: #FFF2F2; color: #AD0B00; }
.problem_order .problem_item.hwp.is-active { background-color: #F1FAFD; color: #009FE3; }
.problem_order .btn_confirm { margin: 0; }
.problem_order .btn_confirm .btn { width: 100%; font-size: 1.25em; border-radius: var(--radius-sm); font-weight: 600; padding: 0.875em 1em; }
.problem_order .problem_preview { border: 1px solid #ddd; opacity: 0; pointer-events: none; transition: var(--ts-md); }
.problem_order .problem_preview.is-show { opacity: 1; pointer-events: auto; }


/* 필터 */
.has-filter { display: flex; justify-content: space-between; align-items: flex-start; gap: 2em; }
.has-filter .d_sc_wrap { flex-grow: 1; }

.sct_filter { width: 100%; max-width: 250px; flex-shrink: 0; border-radius: var(--radius-md); position: sticky; top: 7em; }

.sct_filter .filter_title { display: flex; align-items: center; margin-bottom: 1em; gap: 0.25em; }
.sct_filter .filter_title h3 { font-weight: 500; color: #949494; letter-spacing: 0; margin-right: auto; }
.sct_filter .filter_title button { line-height: 1; padding: 0.4em; }
.sct_filter .filter_title .btn_reset { border-color: #ccc; color: #999; }

.sct_filter .filter_list { color: #666; }
.sct_filter .filter_item { border-radius: var(--radius-sm); margin-bottom: 0.5em; overflow: hidden; border: 1px solid #dedede; }
.sct_filter .filter_subject { display: flex; align-items: center; gap: 0.5em; cursor: pointer; padding: 0.625em 0.875em; }
.sct_filter .filter_subject img,
.sct_filter .filter_subject i { flex-shrink: 0; font-size: 1.25em; }
.sct_filter .filter_subject img { filter: grayscale(1); }
.sct_filter .filter_subject h4 { flex-grow: 1; font-weight: 600; font-size: 0.9375em; }
.sct_filter .filter_subject h4::after { content:""; width: 4px; aspect-ratio: 1/1; display: inline-block; background-color: var(--primary-hv); vertical-align: top; border-radius: var(--radius-full); margin-left: 0.2em; opacity: 0; }
.sct_filter .filter_option { flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 0.35em; line-height: 1; padding: 0.625em 0.875em; display: none; }
.sct_filter .filter_option label { display: inline-flex; justify-content: center; align-items: center; border-radius: var(--radius-sm); padding: 0.35em 0.7em; font-size: 0.875em; color: #999; /*border: 1px solid #dedede;*/ background-color: #f5f5f5; }
.sct_filter .filter_option input:checked + label { background-color: var(--primary); border-color: var(--primary); color: #fff;}

.sct_filter .filter_item.is-open .filter_option { display: flex; }
.sct_filter .filter_item.is-open .filter_subject i { transform: rotate(180deg); }

.sct_filter .filter_item:has(input:checked) { color: var(--primary); border-color:var(--primary); }
.sct_filter .filter_item:has(input:checked) .filter_subject img { filter: none; }
.sct_filter .filter_item:has(input:checked) .filter_subject h4::after { opacity: 1; }

/* =======================================================
    index
======================================================= */
.idx { --padding: 10em; }
.idx { padding: 0 !important; text-align: center; overflow: hidden; }
.idx .flex { align-items: center; justify-content: space-between; }

.idx .deco { position: absolute; }
.idx .deco svg { width: 100%; height: auto; display: block; transform-origin: 50% 50%; animation: spin var(--due) linear infinite; }
.idx .deco1 { width: 400px; --due: 10s; transform: rotate(30deg); }
.idx .deco2 { width: 270px; --due: 8s; }
.idx .deco3 { width: 240px; --due: 6s;  transform: rotate(120deg); }
.idx .deco4 { width: 200px; --due: 4s; }
@keyframes spin {
    to   { transform: rotate(360deg); }
}

.idx_title { margin-bottom: 5em; }
.idx_title small { font-size: 1.25em; margin-bottom: 0.5em; font-weight: 600; color: var(--primary-dk); display: block; }
.idx_title h2 { font-size: 2.75em; line-height: 1.3; font-weight: 700; }
.idx_title p { font-size: 1.125em; margin-top: 1em; }

.idx_more { padding: 1em 1.5em; font-weight: 600; background-color: var(--primary-dk); color: #fff; border-radius: var(--radius-full); gap: 1em; align-items: flex-start; margin-top: 2em; }
.idx_more img { height: 0.5em; vertical-align: top; transition: var(--ts-sm); }
.idx_more:hover img { transform: translateX(0.5em); }

/* visual */
.idx_visual { padding: 0; text-align: left; color: #fff; overflow: hidden; }
.idx_visual .swiper { height: calc(var(--vh) * 87); }
.idx_visual .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.idx_visual .swiper-paging { position: absolute; bottom: 35%; left: 0; right: 0; z-index: 5; width: 100%; padding-left: 0.5em; }
.idx_visual .swiper-paging-number { display: flex; justify-content: flex-start; align-items: center; letter-spacing: 0.2em; gap: 0.25em; margin-bottom: 0.75em; }
.idx_visual .swiper-paging-number span { opacity: 0.6; }
.idx_visual .swiper-paging-number .current { opacity: 1; width: 1.8em; }
.idx_visual .swiper-paging-bar { max-width: 360px; height: 0.25em; display: flex; }
.idx_visual .swiper-paging-bullet { background-color: rgba(255,255,255,0.4); flex-grow: 1; cursor: pointer; transition: var(--ts-sm); }
.idx_visual .swiper-paging-bullet.is-active { background-color: #fff; }
.idx_visual .swiper-txt { position: absolute; left: 0; right: 0; width: 100%; z-index: 5; top: 40%; transform: translateY(-50%); pointer-events: none; }
.idx_visual .swiper-txt b { font-size: 1.375em; margin-bottom: 1em; }
.idx_visual .swiper-txt h2 { font-size: 3.5em; font-weight: 700; line-height: 1.2; }
.idx_visual .swiper-txt h2 .line { overflow: hidden; }
.idx_visual .swiper-txt p { font-size: 1.25em; margin-top: 1.25em; }

/* quick */
.idx_quick { padding: 0; position: relative; z-index: 5; margin-top: -6em; }
.idx_quick .quick_list { background-color: #fff; box-shadow: var(--shadow-md); overflow: hidden; }
.idx_quick .quick_item { flex-grow: 1; padding: 2em 1em; position: relative; }
.idx_quick .quick_item::after { content:""; width: 1px; height: 70%; background-color: #C7C7C7; display: inline-block; position: absolute; right: 0; top: 15%; }
.idx_quick .quick_item:last-child::after { display: none; }
.idx_quick .quick_item a { display: block; }
.idx_quick .quick_item img { width: 50%; max-width: 100px; filter: grayscale(0.7); transition: var(--ts-sm); }
.idx_quick .quick_item p { margin-top: 0.875em; }
.idx_quick .quick_item a:hover { color: var(--primary); }
.idx_quick .quick_item a:hover img { filter: grayscale(0); }

/* intro */
.idx_recommend { --ellipsis: 2; padding: var(--padding) 0; position: relative; }
.idx_recommend .deco2 { right: -2%; top: -5%; }
.idx_recommend .deco3 { left: -2%; top: 50%; }
.idx_recommend .deco4 { right: 10%; bottom: -15%; }
.idx_recommend .recommend_list { gap: 2em; position: relative; }
.idx_recommend .recommend_item a { aspect-ratio: 1/0.7; background-color: var(--primary-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; padding: 2.5em; position: relative; }
.idx_recommend .recommend_item:hover a { margin-top: -0.5em; box-shadow: var(--shadow-lg); }
.idx_recommend .recommend_txt { text-align: left; }
.idx_recommend .recommend_txt h4 { font-size: 1.25em; font-weight: 600; }
.idx_recommend .recommend_txt p { width: 40%; font-size: 1.125em; margin-top: 1.25em; color: #5C5C5C; }
.idx_recommend .recommend_img { width: 43%; position: absolute; left: 45%; top: 20%; transform: rotate(23deg); box-shadow: 0 0.25em 1em rgba(0,0,0,0.3); aspect-ratio: 1/1.4; overflow: hidden; }
.idx_recommend .recommend_img img { width: 100%; height: 100%; object-fit: cover; }

/* best */
.idx_best { background: linear-gradient(to top, transparent 50%, var(--primary-bg) 50%); padding: var(--padding) 0; }
.idx_best .best_box { position: relative; }
.idx_best .best_item { text-align: left; }
.idx_best .best_item:hover p b { color: var(--primary); }
.idx_best .best_img { aspect-ratio: 1/1.4; overflow: hidden; border: 1px solid #ddd; margin-bottom: 1.5em; }
.idx_best .best_img img { width: 100%; height: 100%; object-fit: cover; }
.idx_best .best_txt h4 { font-size: 1.25em; font-weight: 600; }
.idx_best .best_txt p { font-size: 1.5em; }
.idx_best .best_txt p b { font-size: 1.375em; font-weight: 700; transition: var(--ts-sm); }
.idx_best .swiper-btn { font-size: 2.5em; background-color: #fff; color: var(--primary); border-radius: var(--radius-full); aspect-ratio: 1/1; width: 1.2em; line-height: 1; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; position: absolute; top: 35%; z-index: 5; box-shadow: var(--shadow-sm); }
.idx_best .swiper-btn-prev { left: -0.6em; }
.idx_best .swiper-btn-next { right: -0.6em; }

/* tutor */
.idx_tutor { padding: var(--padding) 0; }

/* rank */
.idx_rank { background-color: var(--primary-bg); padding: var(--padding) 0; position: relative; }
.idx_rank::after { content:""; display: block; width: 45%; position: absolute; left: 0; top: 0; height: 100%; z-index: 3; background: linear-gradient(to right, var(--primary-bg) 70%, transparent); pointer-events: none; }
.idx_rank .deco { z-index: 4; }
.idx_rank .deco1 { left: -10%; top: 5%; }
.idx_rank .deco4 { left: 20%; top: 65%; }
.idx_rank .deco2 { right: 5%; top: -20%; }
.idx_rank .deco3 { right: 12%; bottom: -15%; }
.idx_rank .idx_title { text-align: left; flex-shrink: 0; position: relative; z-index: 5; margin-bottom: 0; width: 35%; }
.idx_rank .idx_title p { margin-top: 4.5em; }
.idx_rank .idx_title p .small { font-size: 0.8125em; color: #a6a6a6; margin-top: 1em; display: block; }
.idx_rank .rank_box { max-width: 900px; align-self: center; }
.idx_rank .rank_list { overflow: visible; }
.idx_rank .rank_item { background-color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 3em 8%; /*filter: grayscale(1);*/ --light: var(--primary-hv); --dark: var(--primary-dk); }
.idx_rank .rank_item.is-active { filter: grayscale(0); }
.idx_rank .rank_img { border: 0.4em solid var(--primary); border-radius: var(--radius-full); overflow: hidden; aspect-ratio: 1/1; }
.idx_rank .rank_img img { width: 100%; height: 100%; object-fit: cover; }
.idx_rank .rank_txt { margin-top: 1.5em; }
.idx_rank .rank_txt h4 { font-size: 1.875em; color: var(--primary); font-weight: 700; display: flex; justify-content: center; align-items: center; gap: 0.25em; }
.idx_rank .rank_txt h4 svg { width: 0.8125em; aspect-ratio: 1/1; }
.idx_rank .rank_txt span { font-size: 0.9375em; margin-top: 0.5em; background: linear-gradient(45deg, var(--light), var(--dark)); }
.idx_rank .rank_txt p { font-size: 1.125em; color: #a6a6a6; margin-top: 1em; }
.idx_rank .rank_num { position: absolute; right: 0; top: 0; margin: 0.5em; color: #fff; background: linear-gradient(var(--light), var(--dark)); font-size: 1.125em; font-weight: 600; border-radius: var(--radius-sm); padding: 0.25em 0.5em; }
.idx_rank .rank_item-1 { --primary: #F6BF2F; --bg: #F6BF2F; --light: #ffe7b7; --dark: #E99F00; }
.idx_rank .rank_item-2 { --primary: #bdbdbd; --bg: #bdbdbd; --light: #d9d9d9; --dark: #9f9f9f; }
.idx_rank .rank_item-3 { --primary: #967548; --bg: #967548; --light: #ecd6b9; --dark:  #9b7d57; }


/* stats */
.idx_stats { padding: var(--padding) 0; }
.idx_stats .stats_list { padding: 0 10%; }
.idx_stats .stats_img { width: 35%; }
.idx_stats .stats_txt { font-weight: 600; margin-top: 0.5em; }
.idx_stats .stats_txt p { font-size: 1.25em; }
.idx_stats .stats_txt p b { font-size: 3em; font-weight: 800; }
.idx_stats .stats_txt h4 { font-size: 1.25em; }

/* review */
.idx_review { background-color: var(--primary-bg); padding: var(--padding) 0; }
.idx_review .review_item { background-color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 3em 2.5em; }
.idx_review .review_icon { position: absolute; left: 0; top: 0; font-size: 4em; color: rgba(var(--primary-rgb),0.15); margin: 0.3em 0.5em; }
.idx_review .review_star { font-size: 1.75em; display: flex; color: var(--primary-dk); justify-content: flex-end; align-items: center; margin-bottom: 0.75em; }
.idx_review .review_txt { text-align: left; }
.idx_review .review_txt h4 { font-size: 1.625em; font-weight: 700; }
.idx_review .review_txt p { font-size: 1.125em; line-height: 1.5; color: #575757; }
.idx_review .review_meta { font-size: 1.125em; color: #333; margin: 0.5em 0 1em; }

/* insight */
.idx_insight { padding: var(--padding) 0; }
.idx_insight .insight_list { text-align: left; overflow: hidden; padding: 0 1em 2em 1em; }
.idx_insight .insight_item a { border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: block; overflow: hidden; }
.idx_insight .insight_thumb { aspect-ratio: 1/0.8; }
.idx_insight .insight_thumb img { width: 100%; height: 100%; object-fit: cover; }
.idx_insight .insight_txt { padding: 1.25em 1.5em; }
.idx_insight .insight_subject { font-size: 1.25em; font-weight: 600; }
.idx_insight .insight_desc { display: block; margin: 0.5em 0 0; line-height: 1.5; --ellipsis: 2; color: #575757; }

/* faq */
.idx_faq { background-color: var(--primary-bg); padding: var(--padding) 0; }
.idx_faq .flex { align-items: flex-start; justify-content: space-between; }
.idx_faq .idx_title { text-align: left; }
.idx_faq .idx_title small { font-size: 2em; }
.idx_faq .faq_list { width: 55%; border-top: 3px solid var(--primary); }
.idx_faq .faq_item { border-bottom: 1px solid #ddd; }
.idx_faq .faq_box { display: flex; padding: 1em 1.25em; gap: 1em; }
.idx_faq .faq_arrow,
.idx_faq .faq_icon { aspect-ratio: 1/1; width: 1.875em; font-size: 1.5em; flex-shrink: 0; display: inline-flex; justify-content: center; align-items: center; }
.idx_faq .faq_arrow { color: #575757; transition: var(--ts-sm); }
.idx_faq .faq_arrow i { font-size: 1.25em; }
.idx_faq .faq_icon { border-radius: var(--radius-full); color: #fff; }
.idx_faq .faq_txt { padding: 0 0.5em; flex-grow: 1; text-align: left; }
.idx_faq .faq_q .faq_box { align-items: center; cursor: pointer; }
.idx_faq .faq_q .faq_txt { font-size: 1.25em; font-weight: 600; }
.idx_faq .faq_q .faq_icon { background-color: var(--primary); }
.idx_faq .faq_a { background-color: #E8F3F7; color: #575757; display: none; }
.idx_faq .faq_a .faq_box { align-items: flex-start; }
.idx_faq .faq_a .faq_txt { line-height: 1.5; }
.idx_faq .faq_a .faq_icon { background-color: #aaa; }
.idx_faq .faq_item.is-open .faq_arrow { transform: rotate(180deg); }