@charset "utf-8";


#header.sub_hd { position: fixed; width: 100%; }
#header.sub_hd:not(.on) :where(.hd_logo, .hd_lnb, .menu-trigger) { filter: var(--filter-white); }



/*───────────────────────────────────────────────────────────

    서브 비주얼

───────────────────────────────────────────────────────────*/

.sub_visual { position: relative; width: 100%; height: 540px; box-sizing: border-box; padding-block: 113px 90px; background-color: var(--point-green); display: flex; align-items: center; }
.sub_visual .flex_des { display: flex; align-items: flex-start; flex-wrap: wrap; width: 100%; height: 100%; gap: 30px; }
.sub_visual .title_wrap { width: calc(100% - 210px); box-sizing: border-box; }
.sub_visual .title_box { display: flex; align-items: center; font-size: var(--title-20); }
.sub_visual .title_box h2 { color: var(--point-white); font-weight: 700; font-size: clamp(300%, 3.7vw, 350%); letter-spacing: 0.003em; }
.sub_visual .title_box h3 { display: flex; align-items: center; color: var(--point-white); font-weight: 600; font-size: clamp(250%, 3.2vw, 300%); letter-spacing: -0.03em; font-family: var(--font-type05); }
.sub_visual .title_box h3::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 100%; background: var(--point-white); margin-inline: 20px; }
.sub_visual .sv_ico_wrap { margin-top:16px; width: 180px; aspect-ratio: auto 1; flex-shrink: 0; }
.sub_visual .ico_box { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: 100%; background: rgba(255, 255, 255, 0.2); padding: 41px; }
.sub_visual .ico_box:has(.excel_ico) { padding-inline: 32px 50px; }
.sub_visual .ico_box:has(.corp_ico) { padding-inline: 45px 38px; }
.sub_visual .time_box { display: flex; width: fit-content; border-radius: var(--radius-45); box-sizing: border-box; margin-top: 45px; background: var(--point-white); margin-left: 2px; }
.sub_visual .time_box :where(.total_time, .acc_time) { box-sizing: border-box; font-size: var(--title-20); }
.sub_visual .total_time { padding-right: clamp(15px, 1.6vw, 31px); flex-shrink: 0; }
.sub_visual .total_time .clock { width: 60px; aspect-ratio: auto 1; display: flex; justify-content: center; align-items: center; background: var(--point-green02); border-radius: 100%; flex-shrink: 0; margin-left: -2px; }
.sub_visual .total_time .clock img { max-width: calc(100% - 20px); max-height: calc(100% - 20px); }
.sub_visual .total_time strong { display: flex; gap: clamp(15px, 1.6vw, 30px); align-items: center; font-size: 110%; font-weight: 500; letter-spacing: -0.03em; font-family: var(--font-type05); color: var(--black-color03); }
.sub_visual .acc_time { position: relative; display: flex; align-items: center; padding-inline: clamp(20px, 2.1vw, 40px) clamp(20px, 2.1vw, 41px); }
.sub_visual .acc_time::before { content: ''; position: absolute; left: 0; top: 30px; translate: 0 -50%; width: 1px; height: 20px; background: var(--gray-bg04); }
.sub_visual .acc_time p { color: var(--point-green); font-weight: 600; font-size: 120%; letter-spacing: 0.005em; }
.sub_visual .nav_pc { position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box; z-index: 5; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.sub_visual .nav_pc ul { display: flex; justify-content: center; flex-wrap: nowrap; gap: 63px; width: 100%; }
.sub_visual .nav_pc li { position: relative; font-size: var(--title-20); width: auto; }
.sub_visual .nav_pc li::before { content: ''; position: absolute; left: 0; top: -1px; width: 0; height: 3px; background: var(--point-white); transition: all 0.4s; }
.sub_visual .nav_pc li a { display: block; box-sizing: border-box; width: fit-content; padding-block: 24px 19px; color: var(--point-white); font-size: 110%; font-weight: 300; font-family: var(--font-type05); line-height: 1.18; letter-spacing: -0.03em; text-align: center; }

.sub_visual .nav_pc li.on::before { width: 100%; }
.sub_visual .nav_pc li.on a { font-weight: 500; }

.sub_visual .nav_m { position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box; border-top: 1px solid rgba(255, 255, 255, 0.2); display: none; }
.sub_visual .nav_m dl { width: 100%; position: relative; height: 100%; height: 60px; font-size: var(--title-20); }
.sub_visual .nav_m dt { position: relative; display: flex; align-items: center; width: 100%; padding: 0 55px 0 20px; height: 100%; box-sizing: border-box; font-size: 110%; color: var(--point-white); cursor: pointer; white-space: nowrap; }
.sub_visual .nav_m dt::before { position: absolute; content: ''; width: 11px; height: 11px; border: solid var(--point-white); border-width: 0 0 2px 2px; top: 45%; right: 24px; transform: translateY(-50%) rotate(-45deg); border-radius: 1px; transition: all 0.4s;}
.sub_visual .nav_m dt span { text-overflow: ellipsis; overflow: hidden; }
.sub_visual .nav_m dd { position: absolute; top: 100%; left: 0; width: 100%; padding: 20px; background: var(--point-white); border: 1px solid var(--point-green); box-sizing: border-box; z-index: 2; border-top: 0; opacity: 0; pointer-events: none; transition: all 0.4s; }

.sub_visual .nav_m dd a { display: block; font-weight: 400; color: var(--black-color00); padding-block: 11px; box-sizing: border-box;line-height: 1.4; font-size: 100%; }
.sub_visual .nav_m dd li.on a { color: var(--point-green); font-weight: 500; }

.sub_visual .nav_m dt.on::before { transform: translateY(-50%) rotate(-45deg) scale(-1, -1); top: 55%; }
.sub_visual .nav_m dt.on + dd { opacity: 1; pointer-events: all; }

.num_list { display: flex; gap: 24px; width: 100%; flex-wrap: wrap; counter-reset: num 0; }
.num_list > li { width: calc(100% / 4 - 18px); box-sizing: border-box; padding-inline: clamp(20px, 3vw, 39px); padding-block: clamp(20px, 3vw, 39px) clamp(25px, 4vw, 51px); display: flex; flex-direction: column; gap: clamp(15px, 3vw, 40px); background: var(--point-white); border-radius: var(--radius-10); border: 1px solid var(--border-color02); font-size: var(--title-20); }
.num_list > li::before { content: counter(num, decimal-leading-zero); counter-increment: num 1; width: 40px; height: 40px; box-sizing: border-box; padding-top: 1px; padding-right: 1px; background: var(--point-green); display: flex; justify-content: center; align-items: center; border-radius: 100%; color: var(--point-white); font-size: 90%; flex-shrink: 0; }
.num_list > li span { font-size: inherit; font-weight: 400; line-height: 1.7; letter-spacing: -0.065em; font-family: var(--font-type05); }

.chk_list { display: flex; gap: 20px; flex-wrap: wrap; width: 100%; }
.chk_list > li { display: flex; align-items: baseline; gap: clamp(15px, 2vw, 20px); width: calc(100% / 2 - 10px); box-sizing: border-box; padding: clamp(20px, 3vw, 30px);font-size: var(--title-20); background: var(--point-white); border: 1px solid var(--border-color01); border-radius: var(--radius-10); }
.chk_list > li em { display: flex; justify-content: center; align-items: center; width: 40px; aspect-ratio: auto 1; background: var(--border-color03); border-radius: 100%; flex-shrink: 0; }
.chk_list > li em::before { content: ''; display: block; width: 18px; height: 15px; background: url('../images/sub/ico_chk.svg') no-repeat center; background-size: 100% auto; }

body:has(.sub_data) .sub_visual { background-color: var(--point-blue); }
body:has(.sub_data) .sub_visual .acc_time p { color: var(--point-blue); }
body:has(.sub_data) .sub_visual .total_time .clock { background: var(--point-blue02); }
body:has(.sub_data) .num_list > li::before { background: var(--point-blue); }

body:has(.sub_bi) .sub_visual { background-color: var(--point-yellow); }
body:has(.sub_bi) .sub_visual .acc_time p { color: var(--point-yellow); }
body:has(.sub_bi) .sub_visual .total_time .clock { background: var(--point-yellow02); }
body:has(.sub_bi) .num_list > li::before { background: var(--point-yellow); }

body:has(.sub_corporate) .sub_visual { background-color: var(--point-purple); }
body:has(.sub_corporate) .sub_visual .acc_time p { color: var(--point-purple); }
body:has(.sub_corporate) .sub_visual .total_time .clock { background: var(--point-purple02); }
body:has(.sub_corporate) .num_list > li::before { background: var(--point-purple); }

body:has(.sub_data) .sub_visual .nav_m dd { border-color: var(--point-blue); }
body:has(.sub_data) .sub_visual .nav_m dd li.on a { color: var(--point-blue); }

body:has(.sub_bi) .sub_visual .nav_m dd { border-color: var(--point-yellow); }
body:has(.sub_bi) .sub_visual .nav_m dd li.on a { color: var(--point-yellow); }

body:has(.sub_corporate) .sub_visual .nav_m dd { border-color: var(--point-purple); }
body:has(.sub_corporate) .sub_visual .nav_m dd li.on a { color: var(--point-purple); }

body:has(.sub_ai) .sub_visual { background-color: var(--point-pink01); }
body:has(.sub_ai) .sub_visual .acc_time p { color: var(--point-pink02); }
body:has(.sub_ai) .sub_visual .total_time .clock { background: var(--point-pink02); }
body:has(.sub_ai) .num_list > li::before { background: var(--black-color07); }
.agent_visual.sub_visual .title_box h2{font-size:clamp(250%, 3.7vw, 320%);}
.agent_visual.sub_visual .title_box h3{font-size:clamp(200%, 3.2vw, 245%)}

body:has(.sub_board) .sub_visual { background-color: #17275f; }


body:has(.sub_ui_excel) .sub_visual .sv_ico_wrap { display: flex; gap: 20px; width: 380px; aspect-ratio: unset; }
body:has(.sub_ui_excel) .sub_visual .title_wrap { width: calc(100% - 410px); }
body:has(.sub_ui_excel) .sub_visual .ico_box { width: 180px; padding: 40px; padding-inline: 32px 47px; aspect-ratio: auto 1;  }
body:has(.sub_ui_excel) .sub_visual .ico_box:nth-child(2) { padding: 41px; }

@media (hover: hover) and (pointer: fine) {
    #header.sub_hd:not(.on):hover :where(.hd_logo, .hd_lnb) { filter: unset; }
    .sub_visual nav li:hover::before { width: 100%; }
}

@media (max-width: 1240px){
    .sub_visual { height: auto; padding-block: 113px 120px; }
    .sub_visual .flex_des { flex-direction: column; }
    .sub_visual .title_wrap { width: 100%; order: 2; }
    .sub_visual .sv_ico_wrap { order: 1; }
    body:has(.sub_ui_excel) .sub_visual .title_wrap { width: 100%; }
}

@media (max-width: 1093px){
    
    .sub_content br.for_pc { display: none; }
}

@media (max-width: 1023px){
    .sub_visual { padding-block: clamp(80px, 11vw, 113px) clamp(90px, 12vw, 120px); height: auto; }
    
    .sub_visual .flex_des { gap: clamp(20px, 3vw, 30px); }
    .sub_visual .title_box h2 { font-size: 300%; }
    .sub_visual .title_box h3 { font-size: 250%; }
    .sub_visual .title_box h3::before { margin-inline: clamp(15px, 2vw, 20px); }

    .sub_visual .sv_ico_wrap { margin-top: 0; width: clamp(100px, 18vw, 180px); order: 1; }
    .sub_visual .ico_box { padding: clamp(20px, 4vw, 41px); }
    .sub_visual .ico_box:has(.excel_ico) { padding-inline: clamp(23px, 3vw, 32px) clamp(28px, 5vw, 50px); }
    .sub_visual .ico_box:has(.corp_ico) { padding-inline: clamp(20px, 4vw, 45px) clamp(20px, 4vw, 38px); }

    .sub_visual .time_box { margin-top: clamp(22px, 4vw, 45px); }
    .sub_visual .total_time { padding-right: clamp(15px, 2vw, 31px); }
    .sub_visual .total_time strong { gap: clamp(10px, 2vw, 30px); }
    .sub_visual .total_time .clock { width: clamp(37px, 5vw, 50px); }
    .sub_visual .acc_time { padding-inline: clamp(20px, 2vw, 40px) clamp(20px, 2vw, 41px); }
    .sub_visual .acc_time p { font-size: 110%; }

    .sub_visual .nav_pc ul { gap: clamp(40px, 6vw, 60px); }
    .sub_visual nav li a { padding-block: clamp(12px, 2.4vw, 24px) clamp(10px, 2vw, 19px); }
    
    .num_list { gap: 20px; }
    .num_list > li { width: calc(100% / 3 - 15px); }

    .sub_visual .acc_time::before { top: 25px; }

    body:has(.sub_ui_excel) .sub_visual .sv_ico_wrap { width: clamp(220px, 38vw, 380px); }
    body:has(.sub_ui_excel) .sub_visual .ico_box { padding: clamp(26px, 4vw, 41px); padding-inline: clamp(23px, 3vw, 32px) clamp(28px, 5vw, 50px); width: clamp(100px, 18vw, 180px); }
    body:has(.sub_ui_excel) .sub_visual .ico_box:nth-child(2) { padding: clamp(20px, 4vw, 41px); }
}

@media (max-width: 860px){
    .sub_visual .title_box { flex-direction: column; align-items: flex-start; gap: 10px; }
    .sub_visual .title_box h2 { font-size: 290%; }
    .sub_visual .title_box h3 { font-size: 230%; }
    .sub_visual .title_box h3::before { display: none; }
    .sub_visual .nav_pc { display: none; }
    .sub_visual .nav_m dd a { padding-block: clamp(7px, 1vw, 11px); }

    .num_list > li::before { width: 36px; height: 36px; }
    .chk_list { gap: 20px; }
    .chk_list > li { width: calc(100% / 2 - 10px); }
    .chk_list > li em { width: 36px; }
    .chk_list > li em::before { width: 17px; height: 14px; }

    body:not(:has(.sub_corpor)) .sub_visual .nav_m { display: block; }

    .sub_visual .acc_time::before { top: 22px; }
}

@media (max-width: 767px){
    .sub_visual .time_box { flex-direction: column; box-sizing: border-box; padding: 20px; gap: clamp(15px, 2vw, 20px); border-radius: var(--radius-20); width: 100%; margin-left: 0; }
    .sub_visual .total_time { padding: 0; }
    .sub_visual .acc_time { padding: 0; }
    .sub_visual .acc_time::before { display: none; }
    .sub_visual .total_time .clock { margin-left: 0; }
}

@media (max-width: 640px){
    .sub_visual .title_box h2 { font-size: 260%; }
    .sub_visual .title_box h3 { font-size: 210%; }

    .num_list > li { width: calc(100% / 2 - 10px); }
    .num_list > li::before { width: 32px; height: 32px; }

    .chk_list > li { width: 100%; }
    .chk_list > li em { width: 32px; }
    .chk_list > li em::before { width: 16px; height: 13px; }
}

@media (max-width: 479px){
    .sub_visual .title_box h2 { font-size: 230%; }
    .sub_visual .title_box h3 { font-size: 190%; }

    .num_list { gap: 15px; }
    .num_list > li { width: calc(100% / 2 - 7.5px); }

    .chk_list { gap: 15px; }
    .sub_visual .nav_m dt::before { width: 8px; height: 8px; }
}

@media (max-width: 390px){
    .sub_visual .flex_des { flex-direction: column; gap: 30px; }
    .sub_visual .title_wrap { width: 100%; padding-right: 0; }

    .num_list > li { width: 100%; }
}

/*───────────────────────────────────────────────────────────

    서브 컨텐츠

───────────────────────────────────────────────────────────*/

#wrap:has(.full_sec) #container { max-width: 100%; width: 100%; }

.sub_content .pro_cont.color_bg { box-sizing: border-box; padding-block: 131px 140px; background: var(--main-point01); }

.sub_content .pro_cont + .pro_cont { margin-top: 140px; }
.sub_content .pro_cont .sub_title { font-size: var(--title-20); text-align: center; margin-bottom: 54px; }
.sub_content .pro_cont .sub_title h4 { color: var(--black-color00); font-weight: 700; font-size: 250%; letter-spacing: -0.03em; font-family: var(--font-type05); }
.sub_content .pro_cont .sub_title h4 + p{margin-top: clamp(20px, 2.1vw, 30px);}
.sub_content .pro_cont .sub_title p{font-size: 90%; font-weight: 400; color: var(--black-color06);}
.sub_content .pro_cont:nth-child(1) .sub_title { margin-bottom: 44px; }
.sub_content .pro_cont:nth-child(3) { margin-top: 131px; }
.sub_content .pro_cont .objec_box { box-sizing: border-box; text-align: center; font-size: var(--title-20); padding-block: 27px 29px; padding-inline: 20px; border: 1px solid var(--point-green); border-radius: var(--radius-10); }
.sub_content .pro_cont .objec_box p { color: var(--black-color00); font-weight: 400; font-size: 110%; line-height: 1.64; letter-spacing: -0.045em; font-family: var(--font-type05); }


body:has(.sub_data) .sub_content .pro_cont .objec_box { border-color: var(--point-blue); }
body:has(.sub_data) .sub_content .pro_cont.color_bg { background: var(--main-point02); }

body:has(.sub_bi) .sub_content .pro_cont .objec_box { border-color: var(--point-yellow); }
body:has(.sub_bi) .sub_content .pro_cont.color_bg { background: var(--main-point03); }

body:has(.sub_corporate) .sub_content .pro_cont .objec_box { border-color: var(--point-purple); }
body:has(.sub_corporate) .sub_content .pro_cont.color_bg { background: var(--main-point04); }

body:has(.sub_ai) .sub_content .pro_cont .objec_box { border-color: var(--point-pink02); }
body:has(.sub_ai) .sub_content .pro_cont.color_bg { background: var(--main-point05); }


@media (max-width: 1023px){
    .sub_content .pro_cont:nth-child(1) .sub_title { margin-bottom: clamp(30px, 4vw, 44px); }
    .sub_content .pro_cont + .pro_cont { margin-top: clamp(70px, 13vw, 140px); }
    .sub_content .pro_cont.color_bg { padding-block: clamp(70px, 13vw, 131px) clamp(70px, 13vw, 140px); }
    .sub_content .pro_cont .sub_title { margin-bottom: clamp(30px, 5vw, 54px); }
}

@media (max-width: 640px){
    .sub_content .pro_cont .sub_title h4 { font-size: 200%; }
    .sub_content .pro_cont .objec_box p { font-size: 100%; }
}

/*───────────────────────────────────────────────────────────

    기업데이터

───────────────────────────────────────────────────────────*/

.sub_corpor .pro_list { display: flex; gap: 76px; }
.sub_corpor .pro_list > li { width: 100%; text-align: center; font-size: var(--title-20); }
.sub_corpor .pro_list .ico_wrap { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; aspect-ratio: auto 1; background: var(--point-white); border-radius: 100%; }
.sub_corpor .pro_list .ico_wrap::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: conic-gradient(var(--point-purple) 70deg, #fff 70deg); border-radius: inherit; z-index: 1; }



.sub_corpor .pro_list > li:nth-child(2) .ico_wrap::before { background: conic-gradient(var(--point-purple) 110deg, #fff 110deg); }
.sub_corpor .pro_list > li:nth-child(3) .ico_wrap::before { background: conic-gradient(var(--point-purple) 180deg, #fff 180deg); }
.sub_corpor .pro_list > li:nth-child(4) .ico_wrap::before { background: conic-gradient(var(--point-purple) 250deg, #fff 250deg); }
.sub_corpor .pro_list > li:nth-child(5) .ico_wrap::before { background: conic-gradient(var(--point-purple) 290deg, #fff 290deg); }
.sub_corpor .pro_list > li:nth-child(6) .ico_wrap::before { background: conic-gradient(var(--point-purple) 360deg, #fff 360deg); }

.sub_corpor .pro_list > li:not(:first-child) .ico_wrap::after { content: ''; position: absolute; left: -39px; top: 50%; translate: -50% -50%; width: 13px; height: 13px; background: url('../images/sub/ico_arw.svg') no-repeat center; background-size: 13px 13px; }

.sub_corpor .pro_list p { color: var(--black-color03); font-weight: 400; font-size: 100%; line-height: 1.5; letter-spacing: -0.05em; font-family: var(--font-type05); margin-top: 24px; }

.sub_corpor .pro_list .ico_box { width: calc(100% - 12px); height: calc(100% - 12px); display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; background: var(--point-white); border-radius: inherit; box-sizing: border-box; padding: 25px; }

.sub_corpor .num_list { margin-top: 60px; gap: 20px; }
.sub_corpor .num_list > li { width: calc(100% / 2 - 10px); flex-direction: row; align-items: center; padding-block: clamp(20px, 3vw, 26px); min-height: 126px; padding-inline: clamp(20px, 1.6vw, 29px); gap: clamp(20px, 1.6vw, 30px); }
.sub_corpor .num_list dl { width: 100%; margin-bottom: 2px; }
.sub_corpor .num_list dt { color: var(--black-color00); font-weight: 500; font-size: 110%; font-family: var(--font-type05); letter-spacing: -0.05em; }
.sub_corpor .num_list dd { color: var(--black-color05); font-weight: 400; font-size: 90%; font-family: var(--font-type05); margin-top: 14px; letter-spacing: -0.045em;  }

@media (max-width: 1180px){
    .sub_corpor .pro_list { gap: 64px; }
    .sub_corpor .pro_list > li:not(:first-child) .ico_wrap::after { left: -32px; }
}

@media (max-width: 1093px){
    
}

@media (max-width: 1023px){
    .sub_corpor .pro_list { flex-wrap: wrap; justify-content: flex-end; }
    .sub_corpor .pro_list > li { width: calc(100% / 4 - 48px); }
    .sub_corpor .pro_list > li:nth-child(5) { order: 6; }
    .sub_corpor .pro_list > li:nth-child(5) .ico_wrap::after { left: 50%; top: -44px; transform: rotate(90deg); }
    .sub_corpor .pro_list > li:nth-child(6) { order: 5; }
    .sub_corpor .pro_list > li:nth-child(6) .ico_wrap::after { left: calc(100% + 32px); transform: rotate(180deg); }
    .sub_corpor .pro_list p { margin-top: clamp(20px, 2vw, 24px); }

    .sub_corpor .num_list { margin-top: clamp(40px, 6vw, 60px); }
    .sub_corpor .num_list > li { width: 100%; gap: clamp(15px, 3vw, 30px); min-height: auto; }
    .sub_corpor .num_list dd { margin-top: clamp(10px, 1.4vw, 14px); }
}

@media (max-width: 860px){
    .sub_corpor .pro_list > li { width: calc(100% / 3 - 42.67px); }

    .sub_corpor .pro_list > li:nth-child(4) { order: 6; }
    .sub_corpor .pro_list > li:nth-child(4) .ico_wrap::after { left: 50%; top: -44px; transform: rotate(90deg); }
    .sub_corpor .pro_list > li:nth-child(5) { order: 5; }
    .sub_corpor .pro_list > li:nth-child(5) .ico_wrap::after { left: calc(100% + 32px); top: 50%; transform: rotate(180deg); }
    .sub_corpor .pro_list > li:nth-child(6) { order: 4; }
    .sub_corpor .pro_list > li:nth-child(6) .ico_wrap::after { left: calc(100% + 32px); transform: rotate(180deg); }
}

@media (max-width: 479px){
    .sub_corpor .pro_list { flex-direction: column; justify-content: center; align-items: center; }
    .sub_corpor .pro_list > li { width: 100%; max-width: 150px; }
    .sub_corpor .pro_list > li:nth-child(4) { order: unset; }
    .sub_corpor .pro_list > li:nth-child(5) { order: unset; }
    .sub_corpor .pro_list > li:nth-child(6) { order: unset; }
    .sub_corpor .pro_list > li .ico_wrap::after { left: 50% !important; top: -38px !important; transform: rotate(90deg) !important; }

    .sub_corpor .num_list { gap: 15px; }
}

/*───────────────────────────────────────────────────────────
	
    Board

───────────────────────────────────────────────────────────*/
    /* 작성하기 */
        #wrap .bbs_write{position: relative;display: block;width: 100%;box-sizing: border-box;border-top: 1px solid var(--black-color01);border-bottom: 1px solid var(--border-color01);padding-block: 30px;}
        #wrap .bbs_write :where(tbody, tr, th, td){position: relative;display: block;width: 100%;background: none;border:0;padding:0;line-height: 1.57;}
        #wrap .bbs_write tbody{display: flex;gap: 20px clamp(50px, 5.3vw, 100px);flex-wrap: wrap;}
        #wrap .bbs_write tr{width: calc(100% / 2 - clamp(50px, 5.3vw, 100px) / 2);display: flex;align-items: center;gap: 18px 0;font-size: var(--title-20);}
            #wrap .bbs_write tr:has(#title, [name="content"], [name="captcha"]){width: 100%;}
        #wrap .bbs_write th{width: clamp(140px, 10vw, 150px);flex-shrink: 0;padding-right: 15px;font-size: inherit;font-weight: 500;color: var(--black-color01);letter-spacing: -0.03em;}
        #wrap .bbs_write th em{font-weight: inherit;color: var(--point-red);}
        #wrap .bbs_write td{width: 100%;font-size: 95%;font-weight: 400;color: var(--black-color03);letter-spacing: -0.03em;line-height: inherit;}
        #wrap .bbs_write label{font-size: inherit; font-weight: inherit; color: inherit;}
        #wrap .bbs_write :where([type="text"], [type="password"], textarea){width: 100%;height: 60px;min-width: auto;border: 1px solid var(--border-color01);line-height: normal;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;padding: 0 20px;font-size: inherit;font-weight: inherit;color: inherit;vertical-align: middle;letter-spacing: inherit;margin: 0;}
        #wrap .bbs_write :where([type="text"], [type="password"], textarea)::placeholder{color: var(--black-color09);}
        #wrap .bbs_write textarea{height: 200px;resize: none;pad': 20px';padding: 20px;}
        #wrap .cap_wrap{display: flex;flex-wrap: wrap;align-items: center;gap: 10px;}
        #wrap .cap_wrap .controller{display: flex;flex-shrink: 0;gap: 10px;width: 225px;padding: 10px;box-shadow: inset 0 0 0 1px var(--border-color01);}
        #wrap #captcha_box{width: 100%;aspect-ratio: auto 4.73;border: 1px solid var(--border-color01);overflow: hidden;margin: 0;}
        #wrap #captcha_box img{width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;max-width: none;max-height: none;margin: -1px 0 0 -1px;}
        #wrap #refreshCode{font-size: 0;width: 40px;aspect-ratio: auto 1;background: var(--point-white) url('../images/sub/refreshCode.svg') no-repeat center;flex-shrink: 0;border: 1px solid var(--border-color01);}
        #wrap #captcha_inp{max-width: 230px;}
        #wrap .policy_wrap{margin-top: 40px;display: grid;gap: 24px;}

        @media (max-width:1023px){
            #wrap .bbs_write{padding-block: clamp(25px, 3vw, 30px);}
            #wrap .bbs_write tr{width: 100%;row-gap: clamp(10px, 2.3vw, 18px);}
            #wrap .bbs_write :where([type="text"], [type="password"]){height: clamp(45px, 7vw, 60px);padding-inline: clamp(15px, 2.5vw, 20px);}
            #wrap .bbs_write textarea{height: clamp(130px, 20vw, 200px);padding: clamp(15px, 2.5vw, 20px);}
            #wrap .cap_wrap .controller{width: clamp(200px, 25vw, 225px);padding: clamp(7px, 1.5vw, 10px);gap: clamp(7px, 1.5vw, 10px);}
			#wrap #refreshCode{width:clamp(36px, 4.5vw, 40px);background-size: clamp(14px, 2.1vw, 16px);}
            #wrap .policy_wrap{margin-top: clamp(25px, 4vw, 40px);gap: clamp(15px, 2.4vw, 24px);}
            #wrap .btn_wrap{margin-top:clamp(40px, 8vw, 80px);}
        }
        @media (max-width:860px){
            #wrap .cap_wrap{flex-wrap: wrap;}
        }
        @media (max-width:479px){
            #wrap .bbs_write tr{flex-wrap: wrap;}
            #wrap .bbs_write th{width: auto; flex-shrink: unset; padding-right: 0;}
            #wrap #captcha_inp{max-width: none;}
        }

    /* 인풋 */
        textarea[readonly]{width: 100%;height: 160px;font-size: var(--title-16);resize: none;box-sizing: border-box;line-height: 1.6;color: var(--black-color08);letter-spacing: -0.03em;overflow: hidden;overflow-y: auto;background: var(--point-white);border: 1px solid var(--border-color01);padding: 20px;}
            textarea[readonly]::-webkit-scrollbar {width: auto; }
            textarea[readonly]::-webkit-scrollbar-track {border-left: 4px solid var(--border-color01); margin:10px; cursor: pointer;}
            textarea[readonly]::-webkit-scrollbar-thumb {border-left: 4px solid var(--black-color10); cursor: pointer;}

        label:has([type="checkbox"]){display: flex;align-items: flex-start;gap: 12px;font-size: var(--title-18);font-weight: 500;color: var(--black-color01);line-height: 28px;transition: all 0.4s;cursor: pointer;}
        label:has([type="checkbox"]) em{font-weight: 600;color: var(--point-color08);display: contents;}
        label [type="checkbox"]{position: relative;display: inline-flex;width: 28px;height: 28px;border: 1px solid var(--border-color01);background: var(--point-white);transition: inherit;cursor: pointer;flex-shrink: 0;}
            label [type="checkbox"]:before{position: absolute;content:'';width: 16px;aspect-ratio: auto 1.33;background: url('../images/sub/chk_icon.svg') no-repeat center / 100% auto;transition: inherit;top: 50%;left: 50%;translate: -50% -50%;filter: var(--filter-black) opacity(0.2);}
            label [type="checkbox"]:checked{border-color: var(--point-red);background: var(--point-red);}
            label [type="checkbox"]:checked:before{filter: var(--filter-white);}
        label:has([type="checkbox"]) em{font-weight: inherit; color: var(--point-color01); display: contents;}

        @media (max-width:1023px){
            textarea[readonly]{padding: clamp(18px, 2.5vw, 20px);height: clamp(140px, 16.5vw, 160px);} 
            label:has([type="checkbox"]){line-height: clamp(20px, 3.3vw, 28px);gap: clamp(10px, 1.7vw, 12px);}
            label [type="checkbox"]{width: clamp(20px, 3.3vw, 28px);height: clamp(20px, 3.3vw, 28px);}
            label [type="checkbox"]:before{width: clamp(11px, 2.1vw, 16px);}
        }
        @media (max-width:640px){
            textarea[readonly]::-webkit-scrollbar-track {border-width: 3px;}
            textarea[readonly]::-webkit-scrollbar-thumb {border-width: 3px;}
        }


    /* 버튼 */
        #wrap .view_btn{position: relative; line-height: inherit; min-height: auto;}
        #wrap .view_btn:after{display: none;}
        #wrap .btn_wrap{position: relative;inset: auto;display: flex;justify-content: center;flex-wrap: wrap;gap: 15px;text-align: center;padding: 0;margin: 60px 0 0;font-size: var(--title-20);}
        #wrap .btn_wrap :where(button, a){display: flex;align-items: center;justify-content: center;font-size: inherit;font-weight: 400;color: var(--point-white);line-height: 1.3;min-width: 180px;padding: 17px 25px;background: var(--black-color02);border: 1px solid var(--black-color02);width: auto;height: auto;border-radius: var(--radius-10);margin: 0; box-sizing: border-box;}
            #wrap .btn_wrap :where(button, a).sm{min-width:140px;}
            #wrap .btn_wrap :where(button, a):last-child{background: var(--point-red); border-color: var(--point-red);}

            #wrap .btn_wrap.ta_right{justify-content: flex-end; margin-top: 30px;}
            #wrap .btn_wrap.ta_right :where(button, a){font-size: 90%;min-width: 120px;padding-block: 15px;border-radius: var(--radius-05);}

        @media (max-width:1023px) {
            #wrap .btn_wrap{margin-top: clamp(35px, 6vw, 60px);gap: clamp(10px, 2vw, 15px);}
            #wrap .btn_wrap :where(button, a){min-width: clamp(135px, 19vw, 180px);padding-block: clamp(14px, 2.2vw, 17px);}
            #wrap .btn_wrap :where(button, a).sm{min-width: clamp(100px, 15vw, 140px);}
            #wrap .btn_wrap.ta_right{margin-top: clamp(15px, 3vw, 30px);}
            #wrap .btn_wrap.ta_right :where(button, a){min-width: clamp(80px, 13vw, 120px);padding-block: clamp(10px, 2vw, 15px);}
        }


    /* 검색 */
        #wrap .search_wrap{position: relative; margin-bottom: 40px;}
        #wrap .search_wrap fieldset{display: flex;justify-content: flex-end;gap: 10px;font-size: var(--title-20);}
        #wrap .search_wrap .inp_box{display: flex;width: 100%;max-width: 360px;}
        #wrap .search_wrap :where(select, [type="text"], button){height: 50px;font-size: 90%;font-weight: 400;color: var(--black-color06);line-height: normal;border: 1px solid var(--border-color01);background: var(--point-white);padding-inline: 19px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
        #wrap .search_wrap select{width: 100%;max-width: 160px;appearance: none;background: var(--point-white) url('../images/sub/sel_arw.svg') no-repeat calc(100% - 19px) 50%;padding-right: 45px;flex-shrink: 0;}
        #wrap .search_wrap [type="text"]{width: 100%;border-right: 0;}
        #wrap .search_wrap button{width: 50px;flex-shrink: 0;background: var(--black-color01) url('../images/sub/search.svg') no-repeat center;border: 0;padding: 0;}

        @media (max-width:1023px) {
            #wrap .search_wrap{margin-bottom: clamp(20px, 4vw, 40px);}
            #wrap .search_wrap :where(select, [type="text"], button){padding-inline: clamp(15px, 2.4vw, 19px);}
            #wrap .search_wrap .inp_box{max-width: clamp(300px, 36vw, 360px);}
            #wrap .search_wrap :where(select, [type="text"], button){height: clamp(42px, 6.5vw, 50px);}
			#wrap .search_wrap select{max-width: clamp(120px, 17vw, 160px);background-position-x: calc(100% - clamp(15px, 2.4vw, 19px));padding-right: clamp(40px, 5vw, 50px);}
            #wrap .search_wrap button{width: clamp(42px, 6.5vw, 50px);background-size: clamp(18px, 2.7vw, 22px);}
        }
        @media (max-width:479px) {
            #wrap .search_wrap :where(select, [type="text"], button){font-size: 85%;}
        }
        @media (max-width:360px) {
            #wrap .search_wrap fieldset{flex-wrap: wrap;}
            #wrap .search_wrap .inp_box{max-width: 100%;}
            #wrap .search_wrap select{max-width: 100%; flex-shrink: unset;}
        }

    /* 기본 리스트 */
        #wrap .list_default{position: relative;font-size: var(--title-20);border-top: 2px solid var(--black-color01);}
        #wrap .list_default :where(th, td){font-size: 90%;font-weight: 400;line-height: 1.3;text-align: center;padding-inline: 15px;border-bottom: 1px solid var(--border-color01);}
        #wrap .list_default :where(th, td) strong{font-weight: 500;}
        #wrap .list_default .left{text-align: left;}
        #wrap .list_default th{color: var(--black-color00);padding-block: 20px;}
        #wrap .list_default td{color: var(--black-color06);padding-block: 23px;font-weight: 300;}
        #wrap .list_default td a{color: var(--black-color01);white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}

        @media (max-width:1023px) {
            #wrap .list_default th{padding-block: clamp(15px, 2vw, 20px);}
            #wrap .list_default td{padding-block: clamp(17px, 2.3vw, 23px);}
        }
        @media (max-width:860px) {
            #wrap .list_default{display: block; width: 100%;}
            #wrap .list_default thead{display: none;}
            #wrap .list_default :where(tbody, tr, th, td){position: relative; display: block; width: 100%; padding:0; border:0; text-align: left; box-sizing: border-box;}
            #wrap .list_default tr{border-bottom: 1px solid var(--border-color01);display: flex;flex-wrap: wrap;gap: 12px 25px;padding:20px 15px;}
            #wrap .list_default td{padding:0; width: auto;}
                #wrap .list_default td.no{display: none;}
                #wrap .list_default td.left{width: 100%;font-weight: 400;}
        }

    /* 상세 */
        /* 상세 */
        #wrap .bbs_view{position: relative;font-size: var(--title-20);border-bottom: 1px solid var(--border-color01);}
        #wrap .bbs_view .view_tit{padding: 30px 20px 23px;text-align: left;border: 0;margin: 0;width: 100%;font-size: var(--title-20);background: none;display: grid;gap: 18px;border-top: 2px solid var(--black-color01);border-bottom: 1px solid var(--border-color01);}
            #wrap .bbs_view .view_tit:after{display: none;}
        #wrap .bbs_view .view_tit h3{font-size: 150%;font-weight: 500;color: var(--black-color01);width: 100%;text-align: inherit;line-height: 1.3;letter-spacing: -0.03em;}
        #wrap .bbs_view .view_tit p{font-size: 90%;font-weight: 400;color: var(--black-color08);width: 100%;text-align: inherit;display: block;line-height: 1.67;padding: 0;}
        #wrap .bbs_view .view_cont{padding: 30px 20px;min-height: 278px;font-size: 95%;font-weight: 400;color: var(--black-color04);line-height: 1.8;letter-spacing: -0.03em;border-bottom: 0;box-sizing: border-box;width: 100%;margin: 0;word-break: keep-all;}
        #wrap .extra_editor_wrap{display: flex;gap: 12px clamp(30px, 3vw, 44px);width: 100%;border: 0;box-sizing: border-box;margin: 0;background: none;overflow: hidden;padding: 23px 0;border-top: 1px solid var(--border-color01);}
        #wrap .extra_editor_wrap h4{position: relative;font-size: 90%;font-weight: 500;color: var(--black-color03);line-height: 1.3;text-align: center;width: 140px;flex-shrink: 0;padding: 0 15px;background: none;display: flex;align-items: center;justify-content: center;}
        #wrap .extra_editor_wrap h4:before{position: absolute; content:''; width: 1px; height: 12px; background: var(--border-color01); top:50%; right:0; translate: 0 -50%;}
        #wrap .extra_cont{display: flex;flex-direction: column;gap: 12px;padding: 0;font-size: 85%;font-weight: 400;color: var(--black-color07);line-height: 1.3;width: 100%;}
        #wrap .extra_cont span{font-size: inherit;color: inherit;display: block;margin: 0;}
        #wrap .extra_cont span a{color: inherit !important;}


        @media (max-width:1023px){
            #wrap .bbs_view .view_tit{padding: clamp(23px, 3vw, 30px) clamp(15px, 2.5vw, 20px) clamp(20px, 2.3vw, 23px);gap: clamp(10px, 2vw, 18px);}
            #wrap .bbs_view .view_tit h3{font-size: 180%;}
            #wrap .bbs_view .view_cont{padding: clamp(20px, 3vw, 30px) clamp(15px, 2.5vw, 20px);min-height: clamp(180px, 28vw, 278px);}
            #wrap .extra_editor_wrap{padding-block: clamp(18px, 2.3vw, 23px);column-gap: clamp(25px, 3.5vw, 30px);}
            #wrap .extra_editor_wrap h4{width: clamp(100px, 14vw, 140px);}
        }
        @media (max-width:640px){
            #wrap .bbs_view .view_tit h3{font-size: 160%;}
        }
        @media (max-width:479px){
            #wrap .bbs_view .view_tit h3{font-size: 130%;}
            #wrap .bbs_view .view_cont{font-size: 90%;line-height: 1.7;}
        }
        @media (max-width:360px){
            #wrap .extra_editor_wrap{flex-wrap: wrap;padding-inline: 15px;}
            #wrap .extra_editor_wrap h4{width: 100%;padding-inline: 0;text-align: left;justify-content: flex-start;}
            #wrap .extra_editor_wrap h4:before{display: none;}
        }

    /* 페이징 */
        #wrap .paging {text-align:center;padding:0;line-height:normal;margin: 50px 0 0;box-sizing:border-box;display: flex;justify-content: center;flex-wrap: wrap;gap: 10px;font-size: var(--title-20);}
		#wrap .paging span {display: block;}
		#wrap .paging a {display:inline-flex;align-items:center;justify-content:center;font-size: max(13px, 85%);font-weight: 400;color: var(--black-color08);padding: 0;border:0;box-sizing:border-box;width: auto;min-width: 36px;height: auto;min-height: 22px;line-height: 1.3;text-align:center;margin: 0;border-radius: 0;}
		#wrap .paging :is(.page_num.on a, a.on){color: var(--point-color01); font-weight: 600;}
		#wrap .paging .arrow a {font-size:0;background:no-repeat center;}
        #wrap .paging .arrow img{display: none;}
        #wrap .paging .arrow:where(.first, .last) a{background-image:url('../images/sub/paging_first.svg');}
        #wrap .paging .arrow:where(.prev, .next) a{background-image:url('../images/sub/paging_prev.svg');}
        #wrap .paging .arrow:where(.next, .last) a{scale: -1 -1;}
		#wrap .paging .arrow.prev a {margin-right: 5px;}
		#wrap .paging .arrow.next a {margin-left: 5px;}

        @media (max-width:1023px){
            #wrap .paging{gap: clamp(5px, 1.5vw, 10px); margin-top: clamp(35px, 5vw, 50px);}
            #wrap .paging a{min-width: clamp(28px, 4.1vw, 36px);}
            #wrap .paging .arrow.prev a {margin-right:clamp(0px, 1vw, 5px);}
            #wrap .paging .arrow.next a {margin-left: clamp(0px, 1vw, 5px);}
        }