@charset "UTF-8";
/*
  [240806 수진] 
  - .search_wrap 모바일일때 깨지는 현상 수정
  - .btn 텍스트 커서 잡히는 현상 수정

  [240808 수진]
  - .box_multiple 추가 
  - .box_line_top 추가

  [240809 수진]
  - line 스타일 추가 

  [240812 수진]
  - pop-layer  반응형 작업
  - paging style a 태그 추가

  [240828 수진]
  - popupLayer 열릴때 body에 overflow: hidden작업
  - font, bg, line에 main color, sub color 추가
  - box_multiple 반응형 작업

  [240829 수진]
  - input type="file" .filebox 추가
*/

:root {
/* 폰트 스타일 */
  --font-st1: 'pretendard';

/* 메인 컬러 */
  --main-color: #F5F2ED;
  --sub-01-color:#DF0012;
  --sub-02-color:#ddd;
  
/* 컬러 팔레트 */
  --white:#fff;
  --yellowLight2:#feffec ; --yellowLight:#fff89f;--yellow:#ffdc27;--yellowDark:#ffbe00;
  --orangeLight:#ffa519;--orange:#ff7d1d;--orangeDark:#d94800;
  --redLight:#ff564a;--red:#f11100;--redDark:#a70c00;
  --greenLight2: #dcf9e2 !important;--greenLight:#82ee75;--green:#1eb30d;--greenDark:#00964e;
  --blueLight:#0087e9;--blue:#2452ce;
  --navyLight:#243595;--navy:#252f68;--navyDark:#131a43;
  --purpleLight2:#edefff;--purpleLight:#ba81ed;--purple:#8327d5;--purpleDark:#500e8b;
  --blueGrayLight:#c5cddc;
  --grayLight:#e7eaf0;--gray:#989898;--grayDark:#333;--black:#000;
  --primary:#4876EF;
  --pinkLight:#ffe7f5;--pink:#f628a1;--pinkDark:#b10068;

  --skyBlueLight:#F3F4FB;--skyBlue:#55f3ff;--skyBlueDark:#e8ebff;
  
/* input radio checkbox 색상 */
  --input-color:#DF0012;
}

/* font */
body, html, a, button, table, input, select, textarea {font-family:var(--font-st1), sans-serif;color:#666;font-size:15px;}
body {letter-spacing:-.025em;}

/* 폰트사이즈 반응형 */
@media screen and (max-width: 1600px) {
  body, html, a, button, table, input, select, textarea {font-size:14px;}
}
@media screen and (max-width: 900px) {
  body, html, a, button, table, input, select, textarea {font-size:13px;}
}

/* display layout */ 
.wFix {max-width: 1440px;width: 100%;margin:0 auto;position:relative; padding: 7rem 0;}
.wFix2{max-width: 1660px; width: 100%; margin: 0 auto; position: relative; padding: 7rem 0;}
@media screen and (max-width:1750px) {
    .wFix, .wFix2{max-width: 100%;padding: 7rem 1.5rem;}
}
@media screen and (max-width:1200px) {}
@media screen and (max-width:900px) {
}

/* 숨김 */
.visibility_hidden{visibility:hidden;} /* 공간은 그대로 */
.blind{width:1px;height:1px;overflow:hidden;position:absolute;top:-9999em;left:-9999em;display:block;text-indent:-9999em;font-size:0px;line-height:0;}

/* padding & margin ********************************************************************************************************************/
.p0 {padding: 0 !important;}
.p1{padding:.1em !important;}
.p2{padding:.2em !important;}
.p3{padding:.3em !important;}
.p4{padding:.4em !important;}
.p5{padding:.5em !important;}
.p6{padding:.6em !important;}
.p7{padding:.7em !important;}
.p8{padding:.8em !important;}
.p9{padding:.9em !important;}
.p10{padding:1em !important;}
.p11{padding:1.1em !important;}
.p12{padding:1.2em !important;}
.p13{padding:1.3em !important;}
.p14{padding:1.4em !important;}
.p15{padding:1.5em !important;}
.p20{padding:2em !important;}
.p21{padding:2.1em !important;}
.p22{padding:2.2em !important;}
.p23{padding:2.3em !important;}
.p24{padding:2.4em !important;}
.p25{padding:2.5em !important;}
.p30{padding:3em !important;}
.p31{padding:3.1em !important;}
.p32{padding:3.2em !important;}
.p33{padding:3.3em !important;}
.p34{padding:3.4em !important;}
.p35{padding:3.5em !important;}
.p40{padding:4em !important;}
.p41{padding:4.1em !important;}
.p42{padding:4.2em !important;}
.p43{padding:4.3em !important;}
.p44{padding:4.4em !important;}
.p45{padding:4.5em !important;}
.p46{padding:4.6em !important;}
.p47{padding:4.7em !important;}
.p48{padding:4.8em !important;}
.p49{padding:4.9em !important;}
.p50{padding:5em !important;}

/* padding-top */
.p0 {padding: 0 !important;}
.pt1{padding-top:.1em !important;}
.pt2{padding-top:.2em !important;}
.pt3{padding-top:.3em !important;}
.pt4{padding-top:.4em !important;}
.pt5{padding-top:.5em !important;}
.pt6{padding-top:.6em !important;}
.pt7{padding-top:.7em !important;}
.pt8{padding-top:.8em !important;}
.pt9{padding-top:.9em !important;}
.pt10{padding-top:1em !important;}
.pt11{padding-top:1.1em !important;}
.pt12{padding-top:1.2em !important;}
.pt13{padding-top:1.3em !important;}
.pt14{padding-top:1.4em !important;}
.pt15{padding-top:1.5em !important;}
.pt20{padding-top:2em !important;}
.pt21{padding-top:2.1em !important;}
.pt22{padding-top:2.2em !important;}
.pt23{padding-top:2.3em !important;}
.pt24{padding-top:2.4em !important;}
.pt25{padding-top:2.5em !important;}
.pt30{padding-top:3em !important;}
.pt31{padding-top:3.1em !important;}
.pt32{padding-top:3.2em !important;}
.pt33{padding-top:3.3em !important;}
.pt34{padding-top:3.4em !important;}
.pt35{padding-top:3.5em !important;}
.pt40{padding-top:4em !important;}
.pt41{padding-top:4.1em !important;}
.pt42{padding-top:4.2em !important;}
.pt43{padding-top:4.3em !important;}
.pt44{padding-top:4.4em !important;}
.pt45{padding-top:4.5em !important;}
.pt46{padding-top:4.6em !important;}
.pt47{padding-top:4.7em !important;}
.pt48{padding-top:4.8em !important;}
.pt49{padding-top:4.9em !important;}
.pt50{padding-top:5em !important;}

/* padding-bottom */
.pb1{padding-bottom:.1em !important;}
.pb2{padding-bottom:.2em !important;}
.pb3{padding-bottom:.3em !important;}
.pb4{padding-bottom:.4em !important;}
.pb5{padding-bottom:.5em !important;}
.pb6{padding-bottom:.6em !important;}
.pb7{padding-bottom:.7em !important;}
.pb8{padding-bottom:.8em !important;}
.pb9{padding-bottom:.9em !important;}
.pb10{padding-bottom:1em !important;}
.pb11{padding-bottom:1.1em !important;}
.pb12{padding-bottom:1.2em !important;}
.pb13{padding-bottom:1.3em !important;}
.pb14{padding-bottom:1.4em !important;}
.pb15{padding-bottom:1.5em !important;}
.pb20{padding-bottom:2em !important;}
.pb21{padding-bottom:2.1em !important;}
.pb22{padding-bottom:2.2em !important;}
.pb23{padding-bottom:2.3em !important;}
.pb24{padding-bottom:2.4em !important;}
.pb25{padding-bottom:2.5em !important;}
.pb30{padding-bottom:3em !important;}
.pb31{padding-bottom:3.1em !important;}
.pb32{padding-bottom:3.2em !important;}
.pb33{padding-bottom:3.3em !important;}
.pb34{padding-bottom:3.4em !important;}
.pb35{padding-bottom:3.5em !important;}
.pb40{padding-bottom:4em !important;}
.pb41{padding-bottom:4.1em !important;}
.pb42{padding-bottom:4.2em !important;}
.pb43{padding-bottom:4.3em !important;}
.pb44{padding-bottom:4.4em !important;}
.pb45{padding-bottom:4.5em !important;}
.pb46{padding-bottom:4.6em !important;}
.pb47{padding-bottom:4.7em !important;}
.pb48{padding-bottom:4.8em !important;}
.pb49{padding-bottom:4.9em !important;}
.pb50{padding-bottom:5em !important;}

/* padding-left */
.pl1{padding-left:.1em !important;}
.pl2{padding-left:.2em !important;}
.pl3{padding-left:.3em !important;}
.pl4{padding-left:.4em !important;}
.pl5{padding-left:.5em !important;}
.pl6{padding-left:.6em !important;}
.pl7{padding-left:.7em !important;}
.pl8{padding-left:.8em !important;}
.pl9{padding-left:.9em !important;}
.pl10{padding-left:1em !important;}
.pl11{padding-left:1.1em !important;}
.pl12{padding-left:1.2em !important;}
.pl13{padding-left:1.3em !important;}
.pl14{padding-left:1.4em !important;}
.pl15{padding-left:1.5em !important;}
.pl20{padding-left:2em !important;}
.pl21{padding-left:2.1em !important;}
.pl22{padding-left:2.2em !important;}
.pl23{padding-left:2.3em !important;}
.pl24{padding-left:2.4em !important;}
.pl25{padding-left:2.5em !important;}
.pl30{padding-left:3em !important;}
.pl31{padding-left:3.1em !important;}
.pl32{padding-left:3.2em !important;}
.pl33{padding-left:3.3em !important;}
.pl34{padding-left:3.4em !important;}
.pl35{padding-left:3.5em !important;}
.pl40{padding-left:4em !important;}
.pl41{padding-left:4.1em !important;}
.pl42{padding-left:4.2em !important;}
.pl43{padding-left:4.3em !important;}
.pl44{padding-left:4.4em !important;}
.pl45{padding-left:4.5em !important;}
.pl46{padding-left:4.6em !important;}
.pl47{padding-left:4.7em !important;}
.pl48{padding-left:4.8em !important;}
.pl49{padding-left:4.9em !important;}
.pl50{padding-left:5em !important;}

/* padding-right */
.pr1{padding-right:.1em !important;}
.pr2{padding-right:.2em !important;}
.pr3{padding-right:.3em !important;}
.pr4{padding-right:.4em !important;}
.pr5{padding-right:.5em !important;}
.pr6{padding-right:.6em !important;}
.pr7{padding-right:.7em !important;}
.pr8{padding-right:.8em !important;}
.pr9{padding-right:.9em !important;}
.pr10{padding-right:1em !important;}
.pr11{padding-right:1.1em !important;}
.pr12{padding-right:1.2em !important;}
.pr13{padding-right:1.3em !important;}
.pr14{padding-right:1.4em !important;}
.pr15{padding-right:1.5em !important;}
.pr20{padding-right:2em !important;}
.pr21{padding-right:2.1em !important;}
.pr22{padding-right:2.2em !important;}
.pr23{padding-right:2.3em !important;}
.pr24{padding-right:2.4em !important;}
.pr25{padding-right:2.5em !important;}
.pr30{padding-right:3em !important;}
.pr31{padding-right:3.1em !important;}
.pr32{padding-right:3.2em !important;}
.pr33{padding-right:3.3em !important;}
.pr34{padding-right:3.4em !important;}
.pr35{padding-right:3.5em !important;}
.pr40{padding-right:4em !important;}
.pr41{padding-right:4.1em !important;}
.pr42{padding-right:4.2em !important;}
.pr43{padding-right:4.3em !important;}
.pr44{padding-right:4.4em !important;}
.pr45{padding-right:4.5em !important;}
.pr46{padding-right:4.6em !important;}
.pr47{padding-right:4.7em !important;}
.pr48{padding-right:4.8em !important;}
.pr49{padding-right:4.9em !important;}
.pr50{padding-right:5em !important;}

/* margin-top */
.m0 {margin: 0 !important}
.m_auto {margin: 0 auto !important;}
.mt1{margin-top:.1em !important;}
.mt2{margin-top:.2em !important;}
.mt3{margin-top:.3em !important;}
.mt4{margin-top:.4em !important;}
.mt5{margin-top:.5em !important;}
.mt6{margin-top:.6em !important;}
.mt7{margin-top:.7em !important;}
.mt8{margin-top:.8em !important;}
.mt9{margin-top:.9em !important;}
.mt10{margin-top:1em !important;}
.mt11{margin-top:1.1em !important;}
.mt12{margin-top:1.2em !important;}
.mt13{margin-top:1.3em !important;}
.mt14{margin-top:1.4em !important;}
.mt15{margin-top:1.5em !important;}
.mt20{margin-top:2em !important;}
.mt21{margin-top:2.1em !important;}
.mt22{margin-top:2.2em !important;}
.mt23{margin-top:2.3em !important;}
.mt24{margin-top:2.4em !important;}
.mt25{margin-top:2.5em !important;}
.mt30{margin-top:3em !important;}
.mt31{margin-top:3.1em !important;}
.mt32{margin-top:3.2em !important;}
.mt33{margin-top:3.3em !important;}
.mt34{margin-top:3.4em !important;}
.mt35{margin-top:3.5em !important;}
.mt40{margin-top:4em !important;}
.mt41{margin-top:4.1em !important;}
.mt42{margin-top:4.2em !important;}
.mt43{margin-top:4.3em !important;}
.mt44{margin-top:4.4em !important;}
.mt45{margin-top:4.5em !important;}
.mt46{margin-top:4.6em !important;}
.mt47{margin-top:4.7em !important;}
.mt48{margin-top:4.8em !important;}
.mt49{margin-top:4.9em !important;}
.mt50{margin-top:5em !important;}

/* margin-bottom */
.mb1{margin-bottom:.1em !important;}
.mb2{margin-bottom:.2em !important;}
.mb3{margin-bottom:.3em !important;}
.mb4{margin-bottom:.4em !important;}
.mb5{margin-bottom:.5em !important;}
.mb6{margin-bottom:.6em !important;}
.mb7{margin-bottom:.7em !important;}
.mb8{margin-bottom:.8em !important;}
.mb9{margin-bottom:.9em !important;}
.mb10{margin-bottom:1em !important;}
.mb11{margin-bottom:1.1em !important;}
.mb12{margin-bottom:1.2em !important;}
.mb13{margin-bottom:1.3em !important;}
.mb14{margin-bottom:1.4em !important;}
.mb15{margin-bottom:1.5em !important;}
.mb20{margin-bottom:2em !important;}
.mb21{margin-bottom:2.1em !important;}
.mb22{margin-bottom:2.2em !important;}
.mb23{margin-bottom:2.3em !important;}
.mb24{margin-bottom:2.4em !important;}
.mb25{margin-bottom:2.5em !important;}
.mb30{margin-bottom:3em !important;}
.mb31{margin-bottom:3.1em !important;}
.mb32{margin-bottom:3.2em !important;}
.mb33{margin-bottom:3.3em !important;}
.mb34{margin-bottom:3.4em !important;}
.mb35{margin-bottom:3.5em !important;}
.mb40{margin-bottom:4em !important;}
.mb41{margin-bottom:4.1em !important;}
.mb42{margin-bottom:4.2em !important;}
.mb43{margin-bottom:4.3em !important;}
.mb44{margin-bottom:4.4em !important;}
.mb45{margin-bottom:4.5em !important;}
.mb46{margin-bottom:4.6em !important;}
.mb47{margin-bottom:4.7em !important;}
.mb48{margin-bottom:4.8em !important;}
.mb49{margin-bottom:4.9em !important;}
.mb50{margin-bottom:5em !important;}

/* margin-left */
.ml1{margin-left:.1em !important;}
.ml2{margin-left:.2em !important;}
.ml3{margin-left:.3em !important;}
.ml4{margin-left:.4em !important;}
.ml5{margin-left:.5em !important;}
.ml6{margin-left:.6em !important;}
.ml7{margin-left:.7em !important;}
.ml8{margin-left:.8em !important;}
.ml9{margin-left:.9em !important;}
.ml10{margin-left:1em !important;}
.ml11{margin-left:1.1em !important;}
.ml12{margin-left:1.2em !important;}
.ml13{margin-left:1.3em !important;}
.ml14{margin-left:1.4em !important;}
.ml15{margin-left:1.5em !important;}
.ml20{margin-left:2em !important;}
.ml21{margin-left:2.1em !important;}
.ml22{margin-left:2.2em !important;}
.ml23{margin-left:2.3em !important;}
.ml24{margin-left:2.4em !important;}
.ml25{margin-left:2.5em !important;}
.ml30{margin-left:3em !important;}
.ml31{margin-left:3.1em !important;}
.ml32{margin-left:3.2em !important;}
.ml33{margin-left:3.3em !important;}
.ml34{margin-left:3.4em !important;}
.ml35{margin-left:3.5em !important;}
.ml40{margin-left:4em !important;}
.ml41{margin-left:4.1em !important;}
.ml42{margin-left:4.2em !important;}
.ml43{margin-left:4.3em !important;}
.ml44{margin-left:4.4em !important;}
.ml45{margin-left:4.5em !important;}
.ml46{margin-left:4.6em !important;}
.ml47{margin-left:4.7em !important;}
.ml48{margin-left:4.8em !important;}
.ml49{margin-left:4.9em !important;}
.ml50{margin-left:5em !important;}

/* margin-right */
.mr1{margin-right:.1em !important;}
.mr2{margin-right:.2em !important;}
.mr3{margin-right:.3em !important;}
.mr4{margin-right:.4em !important;}
.mr5{margin-right:.5em !important;}
.mr6{margin-right:.6em !important;}
.mr7{margin-right:.7em !important;}
.mr8{margin-right:.8em !important;}
.mr9{margin-right:.9em !important;}
.mr10{margin-right:1em !important;}
.mr11{margin-right:1.1em !important;}
.mr12{margin-right:1.2em !important;}
.mr13{margin-right:1.3em !important;}
.mr14{margin-right:1.4em !important;}
.mr15{margin-right:1.5em !important;}
.mr20{margin-right:2em !important;}
.mr21{margin-right:2.1em !important;}
.mr22{margin-right:2.2em !important;}
.mr23{margin-right:2.3em !important;}
.mr24{margin-right:2.4em !important;}
.mr25{margin-right:2.5em !important;}
.mr30{margin-right:3em !important;}
.mr31{margin-right:3.1em !important;}
.mr32{margin-right:3.2em !important;}
.mr33{margin-right:3.3em !important;}
.mr34{margin-right:3.4em !important;}
.mr35{margin-right:3.5em !important;}
.mr40{margin-right:4em !important;}
.mr41{margin-right:4.1em !important;}
.mr42{margin-right:4.2em !important;}
.mr43{margin-right:4.3em !important;}
.mr44{margin-right:4.4em !important;}
.mr45{margin-right:4.5em !important;}
.mr46{margin-right:4.6em !important;}
.mr47{margin-right:4.7em !important;}
.mr48{margin-right:4.8em !important;}
.mr49{margin-right:4.9em !important;}
.mr50{margin-right:5em !important;}


/* width 5% ~ 100% 비율 */
.w_auto {width:auto !important;min-width:auto !important;}
.w5 {width:5% !important;min-width:5% !important;}
.w6 {width:6% !important;min-width:6% !important;}
.w7 {width:7% !important;min-width:7% !important;}
.w8 {width:8% !important;min-width:8% !important;}
.w9 {width:9% !important;min-width:9% !important;}
.w10 {width:10% !important;min-width:10% !important;}
.w11 {width:11% !important;min-width:11% !important;}
.w12 {width:12% !important;min-width:12% !important;}
.w13 {width:13% !important;min-width:13% !important;}
.w14 {width:14% !important;min-width:14% !important;}
.w15 {width:15% !important;min-width:15% !important;}
.w16 {width:16% !important;min-width:16% !important;}
.w17 {width:17% !important;min-width:17% !important;}
.w18 {width:18% !important;min-width:18% !important;}
.w19 {width:19% !important;min-width:19% !important;}
.w20 {width:20% !important;min-width:20% !important;}
.w21 {width:21% !important;min-width:21% !important;}
.w22 {width:22% !important;min-width:22% !important;}
.w23 {width:23% !important;min-width:23% !important;}
.w24 {width:24% !important;min-width:24% !important;}
.w25 {width:25% !important;min-width:25% !important;}
.w26 {width:26% !important;min-width:26% !important;}
.w27 {width:27% !important;min-width:27% !important;}
.w28 {width:28% !important;min-width:28% !important;}
.w29 {width:29% !important;min-width:29% !important;}
.w30 {width:30% !important;min-width:30% !important;}
.w31 {width:31% !important;min-width:31% !important;}
.w32 {width:32% !important;min-width:32% !important;}
.w33 {width:33% !important;min-width:33% !important;}
.w33_3 {width:33.3333333% !important;min-width:33.3333333% !important;}
.w34 {width:34% !important;min-width:34% !important;}
.w35 {width:35% !important;min-width:35% !important;}
.w36 {width:36% !important;min-width:36% !important;}
.w37 {width:37% !important;min-width:37% !important;}
.w38 {width:38% !important;min-width:38% !important;}
.w39 {width:39% !important;min-width:39% !important;}
.w40 {width:40% !important;min-width:40% !important;}
.w45 {width:45% !important;min-width:45% !important;}
.w46 {width:46% !important;min-width:46% !important;}
.w47 {width:47% !important;min-width:47% !important;}
.w48 {width:48% !important;min-width:48% !important;}
.w49 {width:49% !important;min-width:49% !important;}
.w50 {width:50% !important;min-width:50% !important;}
.w51 {width:51% !important;min-width:51% !important;}
.w52 {width:52% !important;min-width:52% !important;}
.w53 {width:53% !important;min-width:53% !important;}
.w54 {width:54% !important;min-width:54% !important;}
.w55 {width:55% !important;min-width:55% !important;}
.w56 {width:56% !important;min-width:56% !important;}
.w57 {width:57% !important;min-width:57% !important;}
.w58 {width:58% !important;min-width:58% !important;}
.w59 {width:59% !important;min-width:59% !important;}
.w60 {width:60% !important;min-width:60% !important;}
.w65 {width:65% !important;min-width:65% !important;}
.w66 {width:66% !important;min-width:66% !important;}
.w67 {width:67% !important;min-width:67% !important;}
.w68 {width:68% !important;min-width:68% !important;}
.w69 {width:69% !important;min-width:69% !important;}
.w70 {width:70% !important;min-width:70% !important;}
.w71 {width:71% !important;min-width:71% !important;}
.w72 {width:72% !important;min-width:72% !important;}
.w73 {width:73% !important;min-width:73% !important;}
.w74 {width:74% !important;min-width:74% !important;}
.w75 {width:75% !important;min-width:75% !important;}
.w76 {width:76% !important;min-width:76% !important;}
.w77 {width:77% !important;min-width:77% !important;}
.w78 {width:78% !important;min-width:78% !important;}
.w79 {width:79% !important;min-width:79% !important;}
.w80 {width:80% !important;min-width:80% !important;}
.w81 {width:81% !important;min-width:81% !important;}
.w82 {width:82% !important;min-width:82% !important;}
.w83 {width:83% !important;min-width:83% !important;}
.w84 {width:84% !important;min-width:84% !important;}
.w85 {width:85% !important;min-width:85% !important;}
.w86 {width:86% !important;min-width:86% !important;}
.w87 {width:87% !important;min-width:87% !important;}
.w88 {width:88% !important;min-width:88% !important;}
.w89 {width:89% !important;min-width:89% !important;}
.w90 {width:90% !important;min-width:90% !important;}
.w95 {width:95% !important;min-width:95% !important;}
.w96 {width:96% !important;min-width:96% !important;}
.w97 {width:97% !important;min-width:97% !important;}
.w98 {width:98% !important;min-width:98% !important;}
.w99 {width:99% !important;min-width:99% !important;}
.w100 {width:100% !important;min-width:100% !important;}

/* height */
.h_auto {height:auto !important;min-height:auto !important;}
.h5 {height:5% !important;min-height:5% !important;}
.h6 {height:6% !important;min-height:6% !important;}
.h7 {height:7% !important;min-height:7% !important;}
.h8 {height:8% !important;min-height:8% !important;}
.h9 {height:9% !important;min-height:9% !important;}
.h10 {height:10% !important;min-height:10% !important;}
.h11 {height:11% !important;min-height:11% !important;}
.h12 {height:12% !important;min-height:12% !important;}
.h13 {height:13% !important;min-height:13% !important;}
.h14 {height:14% !important;min-height:14% !important;}
.h15 {height:15% !important;min-height:15% !important;}
.h16 {height:16% !important;min-height:16% !important;}
.h17 {height:17% !important;min-height:17% !important;}
.h18 {height:18% !important;min-height:18% !important;}
.h19 {height:19% !important;min-height:19% !important;}
.h20 {height:20% !important;min-height:20% !important;}
.h21 {height:21% !important;min-height:21% !important;}
.h22 {height:22% !important;min-height:22% !important;}
.h23 {height:23% !important;min-height:23% !important;}
.h24 {height:24% !important;min-height:24% !important;}
.h25 {height:25% !important;min-height:25% !important;}
.h26 {height:26% !important;min-height:26% !important;}
.h27 {height:27% !important;min-height:27% !important;}
.h28 {height:28% !important;min-height:28% !important;}
.h29 {height:29% !important;min-height:29% !important;}
.h30 {height:30% !important;min-height:30% !important;}
.h31 {height:31% !important;min-height:31% !important;}
.h32 {height:32% !important;min-height:32% !important;}
.h33 {height:33% !important;min-height:33% !important;}
.h33_3 {height:33.3333333% !important;min-height:33.3333333% !important;}
.h34 {height:34% !important;min-height:34% !important;}
.h35 {height:35% !important;min-height:35% !important;}
.h36 {height:36% !important;min-height:36% !important;}
.h37 {height:37% !important;min-height:37% !important;}
.h38 {height:38% !important;min-height:38% !important;}
.h39 {height:39% !important;min-height:39% !important;}
.h40 {height:40% !important;min-height:40% !important;}
.h45 {height:45% !important;min-height:45% !important;}
.h46 {height:46% !important;min-height:46% !important;}
.h47 {height:47% !important;min-height:47% !important;}
.h48 {height:48% !important;min-height:48% !important;}
.h49 {height:49% !important;min-height:49% !important;}
.h50 {height:50% !important;min-height:50% !important;}
.h51 {height:51% !important;min-height:51% !important;}
.h52 {height:52% !important;min-height:52% !important;}
.h53 {height:53% !important;min-height:53% !important;}
.h54 {height:54% !important;min-height:54% !important;}
.h55 {height:55% !important;min-height:55% !important;}
.h56 {height:56% !important;min-height:56% !important;}
.h57 {height:57% !important;min-height:57% !important;}
.h58 {height:58% !important;min-height:58% !important;}
.h59 {height:59% !important;min-height:59% !important;}
.h60 {height:60% !important;min-height:60% !important;}
.h65 {height:65% !important;min-height:65% !important;}
.h66 {height:66% !important;min-height:66% !important;}
.h67 {height:67% !important;min-height:67% !important;}
.h68 {height:68% !important;min-height:68% !important;}
.h69 {height:69% !important;min-height:69% !important;}
.h70 {height:70% !important;min-height:70% !important;}
.h71 {height:71% !important;min-height:71% !important;}
.h72 {height:72% !important;min-height:72% !important;}
.h73 {height:73% !important;min-height:73% !important;}
.h74 {height:74% !important;min-height:74% !important;}
.h75 {height:75% !important;min-height:75% !important;}
.h76 {height:76% !important;min-height:76% !important;}
.h77 {height:77% !important;min-height:77% !important;}
.h78 {height:78% !important;min-height:78% !important;}
.h79 {height:79% !important;min-height:79% !important;}
.h80 {height:80% !important;min-height:80% !important;}
.h81 {height:81% !important;min-height:81% !important;}
.h82 {height:82% !important;min-height:82% !important;}
.h83 {height:83% !important;min-height:83% !important;}
.h84 {height:84% !important;min-height:84% !important;}
.h85 {height:85% !important;min-height:85% !important;}
.h86 {height:86% !important;min-height:86% !important;}
.h87 {height:87% !important;min-height:87% !important;}
.h88 {height:88% !important;min-height:88% !important;}
.h89 {height:89% !important;min-height:89% !important;}
.h90 {height:90% !important;min-height:90% !important;}
.h95 {height:95% !important;min-height:95% !important;}
.h96 {height:96% !important;min-height:96% !important;}
.h97 {height:97% !important;min-height:97% !important;}
.h98 {height:98% !important;min-height:98% !important;}
.h99 {height:99% !important;min-height:99% !important;}
.h100 {height:100% !important;min-height:100% !important;}


/* font-size ********************************************************************************************************************/
.font_ss{font-size:x-small !important;} /* medium(기본 글자크기)에 대한 상대적인 크기 */
.font_s{font-size:small !important;}
.font_m{font-size:medium !important;}
.font_l{font-size:large !important;}
.font_xl{font-size:x-large !important;}

.font_8 {font-size:0.8em !important;}
.font_9 {font-size:0.9em !important;}
.font_10 {font-size:1.0em !important;}
.font_11 {font-size:1.1em !important;}
.font_12 {font-size:1.2em !important;}
.font_13 {font-size:1.3em !important;}
.font_14 {font-size:1.4em !important;}
.font_15 {font-size:1.5em !important;}
.font_16 {font-size:1.6em !important;}
.font_17 {font-size:1.7em !important;}
.font_18 {font-size:1.8em !important;}
.font_19 {font-size:1.9em !important;}
.font_20 {font-size:2.0em !important;}
.font_22 {font-size:2.2em !important;}
.font_24 {font-size:2.4em !important;}
.font_26 {font-size:2.6em !important;}
.font_28 {font-size:2.8em !important;}
.font_30 {font-size:3.0em !important;}
.font_32 {font-size:3.2em !important;}
.font_34 {font-size:3.4em !important;}
.font_36 {font-size:3.6em !important;}
.font_38 {font-size:3.8em !important;}
.font_40 {font-size:4.0em !important;}
.font_42 {font-size:4.2em !important;}
.font_44 {font-size:4.4em !important;}
.font_46 {font-size:4.6px !important;}
.font_48 {font-size:4.8em !important;}
.font_50 {font-size:5.0em !important;}

/* line-height ********************************************************************************************************************/
.lh0 {line-height:0 !important;}
.lh110 {line-height:110% !important;}
.lh120 {line-height:120% !important;}
.lh130 {line-height:130% !important;}
.lh140 {line-height:140% !important;}
.lh150 {line-height:150% !important;}
.lh160 {line-height:160% !important;}
.lh170 {line-height:170% !important;}
.lh180 {line-height:180% !important;}
.lh190 {line-height:190% !important;}

/* text 정렬 ********************************************************************************************************************/
.t_right{text-align:right !important;}
.t_left{text-align:left !important;}
.t_center{text-align:center !important;}

/* vartical-align style ********************************************************************************************************************/
.v_top{vertical-align:top !important;}
.v_bottom {vertical-align:bottom !important;}
.v_middle {vertical-align:middle !important;}
.v_baseline {vertical-align:baseline !important;}
.v_sub {vertical-align:sub !important;}
.v_text-top {vertical-align:text-top !important;}
.v_text-bottom {vertical-align:text-bottom !important;}

/* 객체 정렬 ********************************************************************************************************************/
.left {float:left !important;}
.right {float:right !important;}
.left:after,
.right:after{content:'';display:block;clear:both;}
.clear {clear:both !important;}
.clearfix::after{content: '';display: block;clear: both;} 

/* position ********************************************************************************************************************/
.p_fixed {position:fixed !important;}
.p_absolute {position:absolute !important;}
.p_relative {position:relative !important;}
.p_stiky{position:stiky !important;}
.p_unset {position:unset !important;}

/* overflow ********************************************************************************************************************/
.o_auto {overflow: auto !important;}
.o_x_auto {overflow-x: auto !important;}
.o_y_auto {overflow-y: auto !important;}
.o_revert {overflow: revert !important;}
.o_x_revert {overflow-x: revert !important;}
.o_y_revert {overflow-y: revert !important;}
.o_x_hidden {overflow-x: hidden !important;}
.o_y_hidden {overflow-y: hidden !important;}
.o_hidden {overflow: hidden !important;}
.o_unset {overflow: unset !important;}

/* display ********************************************************************************************************************/
.d_block {display:block !important;}
.d_inline-block {display:inline-block !important;}
.d_inline {display:inline !important;}
.d_none {display:none !important;}
.d_flex {display:flex !important;}
.d_inline-flex {display:inline-flex !important;}
.o_hidden {overflow:hidden !important;}

/* flex */
.f-d_row {flex-direction:row !important;}
.f-d_column {flex-direction:column !important;}
.f-d_row-reverse {flex-direction:row-reverse !important;}
.f-d_column-reverse {flex-direction:column-reverse !important;}

.f-w_nowrap {flex-wrap:nowrap !important;}
.f-w_wrap {flex-wrap:wrap !important;}

.a-i_center {align-items:center !important;}
.a-i_flex-start {align-items:flex-start !important;}
.a-i_flex-end {align-items:flex-end !important;}
.a-i_stretch {align-items:stretch !important;}
.a-i_baseline {align-items:baseline !important;}

.a-c_center {align-content:center !important;}
.a-c_flex-start {align-content:flex-start !important;}
.a-c_flex-end {align-content:flex-end !important;}
.a-c_space-around {align-content:space-around !important;}
.a-c_space-between {align-content:space-between !important;}
.a-c_stretch {align-content:stretch !important;}

.j-c_center {justify-content:center !important;}
.j-c_flex-start {justify-content:flex-start !important;}
.j-c_flex-end {justify-content:flex-end !important;}
.j-c_space-between {justify-content:space-between !important;}
.j-c_space-around {justify-content:space-around !important;}
.j-c_space-evenly {justify-content:space-evenly !important;}

/* cursor style ********************************************************************************************************************/
.c_pointer { cursor: pointer !important; }
.c_default { cursor: default !important; }
.c_text { cursor: text !important; }
.c_wait { cursor: wait !important; }
.c_progress { cursor: progress !important; }
.c_help { cursor: help !important; }
.c_not-allowed { cursor: not-allowed !important; }

/* 크기 조정 및 이동 관련 커서 */
.c_move { cursor: move !important; }
.c_all-scroll { cursor: all-scroll !important; }
.c_col-resize { cursor: col-resize !important; }
.c_row-resize { cursor: row-resize !important; }
.c_n-resize { cursor: n-resize !important; }
.c_s-resize { cursor: s-resize !important; }
.c_e-resize { cursor: e-resize !important; }
.c_w-resize { cursor: w-resize !important; }
.c_ne-resize { cursor: ne-resize !important; }
.c_nw-resize { cursor: nw-resize !important; }
.c_se-resize { cursor: se-resize !important; }
.c_sw-resize { cursor: sw-resize !important; }

/* 드래그 앤 드롭 관련 커서 */
.c_copy { cursor: copy !important; }
.c_alias { cursor: alias !important; }
.c_no-drop { cursor: no-drop !important; }
.c_grab { cursor: grab !important; }
.c_grabbing { cursor: grabbing !important; }


/* 말줄임 style ********************************************************************************************************************/
.ellipsis{white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;display: block;}
.ellipsis2{overflow: hidden !important;text-overflow: ellipsis !important;display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;display: block;}
.ellipsis3{overflow: hidden !important;text-overflow: ellipsis !important;display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important;display: block;}
.ellipsis4{overflow: hidden !important;text-overflow: ellipsis !important;display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important;display: block;}

/* font style ********************************************************************************************************************/
/* weight */
.font_300 {font-weight: 300  !important;}
.font_400 {font-weight: 400  !important;}
.font_500 {font-weight: 500  !important;}
.font_bold, .font_600 {font-weight: bold !important;}
.font_normal {font-weight: normal  !important;}

/* font color */
.font_mainColor {color: var(--main-color) !important;}
.font_sub01Color {color: var(--sub-01-color) !important;}
.font_sub02Color {color: var(--sub-02-color) !important;}
.font_white {color:var(--white) !important;}
.font_yellowLight2{color:var(--yellowLight2) !important;}
.font_yellowLight{color:var(--yellowLight) !important;}
.font_yellow{color:var(--yellow) !important;}
.font_yellowDark{color:var(--yellowDark) !important;}
.font_orangeLight{color:var(--orangeLight) !important;}
.font_orange{color:var(--orange) !important;}
.font_orangeDark{color:var(--orangeDark) !important;}
.font_redLight {color:var(--redLight) !important;}
.font_red {color:var(--red) !important;}
.font_redDark {color:var(--redDark) !important;}
.font_greenLight {color:var(--greenLight) !important;}
.font_greenLight2 {color:var(--greenLight2) !important;}
.font_green {color:var(--green) !important;}
.font_greenDark {color:var(--greenDark) !important;}
.font_blueLight {color:var(--blueLight) !important;}
.font_blue {color:var(--blue) !important;}
.font_skyBlue {color:var(--skyBlue) !important;}
.font_skyBlueLight {color:var(--skyBlueLight) !important;}
.font_skyBlueDark {color:var(--skyBlueDark) !important;}
.font_navyLight{color:var(--navyLight) !important;}
.font_navy{color:var(--navy) !important;}
.font_navyDark{color:var(--navyDark) !important;}
.font_purpleLight{color:var(--purpleLight) !important;}
.font_purple{color:var(--purple) !important;}
.font_purpleDark{color:var(--purpleDark) !important;}
.font_grayLight2 {color: #F7F7F7 !important;}
.font_bluegrayLight {color:var(--blueGrayLight) !important;}
.font_grayLight {color:var(--grayLight) !important;}
.font_gray {color:var(--gray) !important;}
.font_grayDark {color:var(--grayDark) !important;}
.font_black{color:var(--black) !important;}
.font_primary{color: var(--primary) !important;}
.font_pinkLight{color: var(--pinkLight) !important;}
.font_pink{color: var(--pink) !important;}
.font_pinkDark{color: var(--pinkDark) !important;}
/* bg color style ********************************************************************************************************************/
.bg_mainColor {background: var(--main-color) !important;}
.bg_sub01Color {background: var(--sub-01-color) !important;}
.bg_sub02Color {background: var(--sub-02-color) !important;}
.bg_white {background:var(--white) !important;}
.bg_yellowLight2{background:var(--yellowLight2) !important;}
.bg_yellowLight{background:var(--yellowLight) !important;}
.bg_yellow{background:var(--yellow) !important;}
.bg_yellowDark{background:var(--yellowDark) !important;}
.bg_orangeLight{background:var(--orangeLight) !important;}
.bg_orange{background:var(--orange) !important;}
.bg_orangeDark{background:var(--orangeDark) !important;}
.bg_redLight {background:var(--redLight) !important;}
.bg_red {background:var(--red) !important;}
.bg_redDark {background:var(--redDark) !important;}
.bg_greenLight {background:var(--greenLight) !important;}
.bg_greenLight2 {background:var(--greenLight2) !important;}
.bg_green {background:var(--green) !important;}
.bg_greenDark {background:var(--greenDark) !important;}
.bg_blueLight {background:var(--blueLight) !important;}
.bg_blue {background:var(--blue) !important;}
.bg_skyBlue {background:var(--skyBlue) !important;}
.bg_skyBlueLight {background:var(--skyBlueLight) !important;}
.bg_skyBlueDark {background:var(--skyBlueDark) !important;}
.bg_navyLight{background:var(--navyLight) !important;}
.bg_navy{background:var(--navy) !important;}
.bg_navyDark{background:var(--navyDark) !important;}
.bg_purpleLight{background:var(--purpleLight) !important;}
.bg_purple{background:var(--purple) !important;}
.bg_purpleDark{background:var(--purpleDark) !important;}
.bg_grayLight2 {background-color: #F7F7F7 !important;}
.bg_bluegrayLight {background:var(--blueGrayLight) !important;}
.bg_grayLight {background:var(--grayLight) !important;}
.bg_gray {background:var(--gray) !important;}
.bg_grayDark {background:var(--grayDark) !important;}
.bg_black{background:var(--black) !important;}
.bg_primary{background: var(--primary) !important;}
.bg_pinkLight{background: var(--pinkLight) !important;}
.bg_pink{background: var(--pink) !important;}
.bg_pinkDark{background: var(--pinkDark) !important;}

/* line color style 버튼 라인 ********************************************************************************************************************/
.line_mainColor {border: 1px solid var(--main-color) !important;}
.line_sub01Color {border: 1px solid var(--sub-01-color) !important;}
.line_sub02Color {border: 1px solid var(--sub-02-color) !important;}
.line_white {border: 1px solid var(--white) !important;}
.line_yellowLight2{border: 1px solid var(--yellowLight2) !important;}
.line_yellowLight{border: 1px solid var(--yellowLight) !important;}
.line_yellow{border: 1px solid var(--yellow) !important;}
.line_yellowDark{border: 1px solid var(--yellowDark) !important;}
.line_orangeLight{border: 1px solid var(--orangeLight) !important;}
.line_orange{border: 1px solid var(--orange) !important;}
.line_orangeDark{border: 1px solid var(--orangeDark) !important;}
.line_redLight {border: 1px solid var(--redLight) !important;}
.line_red {border: 1px solid var(--red) !important;}
.line_redDark {border: 1px solid var(--redDark) !important;}
.line_greenLight {border: 1px solid var(--greenLight) !important;}
.line_greenLight2 {border: 1px solid var(--greenLight2) !important;}
.line_green {border: 1px solid var(--green) !important;}
.line_greenDark {border: 1px solid var(--greenDark) !important;}
.line_blueLight {border: 1px solid var(--blueLight) !important;}
.line_blue {border: 1px solid var(--blue) !important;}
.line_skyBlue {border: 1px solid var(--skyBlue) !important;}
.line_skyBlueLight {border: 1px solid var(--skyBlueLight) !important;}
.line_skyBlueDark {border: 1px solid var(--skyBlueDark) !important;}
.line_navyLight{border: 1px solid var(--navyLight) !important;}
.line_navy{border: 1px solid var(--navy) !important;}
.line_navyDark{border: 1px solid var(--navyDark) !important;}
.line_purpleLight{border: 1px solid var(--purpleLight) !important;}
.line_purple{border: 1px solid var(--purple) !important;}
.line_purpleDark{border: 1px solid var(--purpleDark) !important;}
.line_grayLight2 {border: 1px solid #F7F7F7 !important;}
.line_bluegrayLight {border: 1px solid var(--blueGrayLight) !important;}
.line_grayLight {border: 1px solid var(--grayLight) !important;}
.line_gray {border: 1px solid var(--gray) !important;}
.line_grayDark {border: 1px solid var(--grayDark) !important;}
.line_black{border: 1px solid var(--black) !important;}
.line_primary{border: 1px solid var(--primary) !important;}
.line_pinkLight{border: 1px solid var(--pinkLight) !important;}
.line_pink{border: 1px solid var(--pink) !important;}
.line_pinkDark{border: 1px solid var(--pinkDark) !important;}
 
/* line ********************************************************************************************************************/
/* line 
[html]
<div class="line_bottom_1 line_solid line_color_grayLight"></div>
*/
.line_0 {border: 0 !important;}
.line_1 {border: .1em solid #eee !important;}
.line_2 {border: .2em solid #eee !important;}
.line_3 {border: .3em solid #eee !important;}
.line_4 {border: .4em solid #eee !important;}
.line_5 {border: .5em solid #eee !important;}
.line_6 {border: .6em solid #eee !important;}
.line_7 {border: .7em solid #eee !important;}
.line_8 {border: .8em solid #eee !important;}
.line_9 {border: .9em solid #eee !important;}
.line_10 {border: 1em solid #eee !important;}
.line_11 {border: 1.1em solid #eee !important;}
.line_12 {border: 1.2em solid #eee !important;}
.line_13 {border: 1.3em solid #eee !important;}
.line_14 {border: 1.4em solid #eee !important;}
.line_15 {border: 1.5em solid #eee !important;}
.line_16 {border: 1.6em solid #eee !important;}
.line_17 {border: 1.7em solid #eee !important;}
.line_18 {border: 1.8em solid #eee !important;}
.line_19 {border: 1.9em solid #eee !important;}
.line_20 {border: 2.0em solid #eee !important;}
.line_21 {border: 2.1em solid #eee !important;}
.line_22 {border: 2.2em solid #eee !important;}
.line_23 {border: 2.3em solid #eee !important;}
.line_24 {border: 2.4em solid #eee !important;}
.line_25 {border: 2.5em solid #eee !important;}
.line_26 {border: 2.6em solid #eee !important;}
.line_27 {border: 2.7em solid #eee !important;}
.line_28 {border: 2.8em solid #eee !important;}
.line_29 {border: 2.9em solid #eee !important;}
.line_30 {border: 3.0em solid #eee !important;}

.line_bottom_1 {border:0;border-bottom-width: 1px !important;}
.line_bottom_2 {border:0;border-bottom-width: .2em !important;}
.line_bottom_3 {border:0;border-bottom-width: .3em !important;}
.line_bottom_4 {border:0;border-bottom-width: .4em !important;}
.line_bottom_5 {border:0;border-bottom-width: .5em !important;}
.line_bottom_6 {border:0;border-bottom-width: .6em !important;}
.line_bottom_7 {border:0;border-bottom-width: .7em !important;}
.line_bottom_8 {border:0;border-bottom-width: .8em !important;}
.line_bottom_9 {border:0;border-bottom-width: .9em !important;}
.line_bottom_10 {border:0;border-bottom-width: 1em !important;}
.line_bottom_11 {border:0;border-bottom-width: 1.1em !important;}
.line_bottom_12 {border:0;border-bottom-width: 1.2em !important;}
.line_bottom_13 {border:0;border-bottom-width: 1.3em !important;}
.line_bottom_14 {border:0;border-bottom-width: 1.4em !important;}
.line_bottom_15 {border:0;border-bottom-width: 1.5em !important;}
.line_bottom_16 {border:0;border-bottom-width: 1.6em !important;}
.line_bottom_17 {border:0;border-bottom-width: 1.7em !important;}
.line_bottom_18 {border:0;border-bottom-width: 1.8em !important;}
.line_bottom_19 {border:0;border-bottom-width: 1.9em !important;}
.line_bottom_20 {border:0;border-bottom-width: 2.0em !important;}
.line_bottom_21 {border:0;border-bottom-width: 2.1em !important;}
.line_bottom_22 {border:0;border-bottom-width: 2.2em !important;}
.line_bottom_23 {border:0;border-bottom-width: 2.3em !important;}
.line_bottom_24 {border:0;border-bottom-width: 2.4em !important;}
.line_bottom_25 {border:0;border-bottom-width: 2.5em !important;}
.line_bottom_26 {border:0;border-bottom-width: 2.6em !important;}
.line_bottom_27 {border:0;border-bottom-width: 2.7em !important;}
.line_bottom_28 {border:0;border-bottom-width: 2.8em !important;}
.line_bottom_29 {border:0;border-bottom-width: 2.9em !important;}
.line_bottom_30 {border:0;border-bottom-width: 3.0em !important;}

.line_top_1 {border:0;border-top-width: .1em !important;}
.line_top_2 {border:0;border-top-width: .2em !important;}
.line_top_3 {border:0;border-top-width: .3em !important;}
.line_top_4 {border:0;border-top-width: .4em !important;}
.line_top_5 {border:0;border-top-width: .5em !important;}
.line_top_6 {border:0;border-top-width: .6em !important;}
.line_top_7 {border:0;border-top-width: .7em !important;}
.line_top_8 {border:0;border-top-width: .8em !important;}
.line_top_9 {border:0;border-top-width: .9em !important;}
.line_top_10 {border:0;border-top-width: 1em !important;}
.line_top_11 {border:0;border-top-width: 1.1em !important;}
.line_top_12 {border:0;border-top-width: 1.2em !important;}
.line_top_13 {border:0;border-top-width: 1.3em !important;}
.line_top_14 {border:0;border-top-width: 1.4em !important;}
.line_top_15 {border:0;border-top-width: 1.5em !important;}
.line_top_16 {border:0;border-top-width: 1.6em !important;}
.line_top_17 {border:0;border-top-width: 1.7em !important;}
.line_top_18 {border:0;border-top-width: 1.8em !important;}
.line_top_19 {border:0;border-top-width: 1.9em !important;}
.line_top_20 {border:0;border-top-width: 2.0em !important;}
.line_top_21 {border:0;border-top-width: 2.1em !important;}
.line_top_22 {border:0;border-top-width: 2.2em !important;}
.line_top_23 {border:0;border-top-width: 2.3em !important;}
.line_top_24 {border:0;border-top-width: 2.4em !important;}
.line_top_25 {border:0;border-top-width: 2.5em !important;}
.line_top_26 {border:0;border-top-width: 2.6em !important;}
.line_top_27 {border:0;border-top-width: 2.7em !important;}
.line_top_28 {border:0;border-top-width: 2.8em !important;}
.line_top_29 {border:0;border-top-width: 2.9em !important;}
.line_top_30 {border:0;border-top-width: 3.0em !important;}

.line_right_1 {border:0;border-right-width: .1em !important;}
.line_right_2 {border:0;border-right-width: .2em !important;}
.line_right_3 {border:0;border-right-width: .3em !important;}
.line_right_4 {border:0;border-right-width: .4em !important;}
.line_right_5 {border:0;border-right-width: .5em !important;}
.line_right_6 {border:0;border-right-width: .6em !important;}
.line_right_7 {border:0;border-right-width: .7em !important;}
.line_right_8 {border:0;border-right-width: .8em !important;}
.line_right_9 {border:0;border-right-width: .9em !important;}
.line_right_10 {border:0;border-right-width: 1em !important;}
.line_right_11 {border:0;border-right-width: 1.1em !important;}
.line_right_12 {border:0;border-right-width: 1.2em !important;}
.line_right_13 {border:0;border-right-width: 1.3em !important;}
.line_right_14 {border:0;border-right-width: 1.4em !important;}
.line_right_15 {border:0;border-right-width: 1.5em !important;}
.line_right_16 {border:0;border-right-width: 1.6em !important;}
.line_right_17 {border:0;border-right-width: 1.7em !important;}
.line_right_18 {border:0;border-right-width: 1.8em !important;}
.line_right_19 {border:0;border-right-width: 1.9em !important;}
.line_right_20 {border:0;border-right-width: 2.0em !important;}
.line_right_21 {border:0;border-right-width: 2.1em !important;}
.line_right_22 {border:0;border-right-width: 2.2em !important;}
.line_right_23 {border:0;border-right-width: 2.3em !important;}
.line_right_24 {border:0;border-right-width: 2.4em !important;}
.line_right_25 {border:0;border-right-width: 2.5em !important;}
.line_right_26 {border:0;border-right-width: 2.6em !important;}
.line_right_27 {border:0;border-right-width: 2.7em !important;}
.line_right_28 {border:0;border-right-width: 2.8em !important;}
.line_right_29 {border:0;border-right-width: 2.9em !important;}
.line_right_30 {border:0;border-right-width: 3.0em !important;}

.line_left_1 {border:0;border-left-width: .1em !important;}
.line_left_2 {border:0;border-left-width: .2em !important;}
.line_left_3 {border:0;border-left-width: .3em !important;}
.line_left_4 {border:0;border-left-width: .4em !important;}
.line_left_5 {border:0;border-left-width: .5em !important;}
.line_left_6 {border:0;border-left-width: .6em !important;}
.line_left_7 {border:0;border-left-width: .7em !important;}
.line_left_8 {border:0;border-left-width: .8em !important;}
.line_left_9 {border:0;border-left-width: .9em !important;}
.line_left_10 {border:0;border-left-width: 1em !important;}
.line_left_11 {border:0;border-left-width: 1.1em !important;}
.line_left_12 {border:0;border-left-width: 1.2em !important;}
.line_left_13 {border:0;border-left-width: 1.3em !important;}
.line_left_14 {border:0;border-left-width: 1.4em !important;}
.line_left_15 {border:0;border-left-width: 1.5em !important;}
.line_left_16 {border:0;border-left-width: 1.6em !important;}
.line_left_17 {border:0;border-left-width: 1.7em !important;}
.line_left_18 {border:0;border-left-width: 1.8em !important;}
.line_left_19 {border:0;border-left-width: 1.9em !important;}
.line_left_20 {border:0;border-left-width: 2.0em !important;}
.line_left_21 {border:0;border-left-width: 2.1em !important;}
.line_left_22 {border:0;border-left-width: 2.2em !important;}
.line_left_23 {border:0;border-left-width: 2.3em !important;}
.line_left_24 {border:0;border-left-width: 2.4em !important;}
.line_left_25 {border:0;border-left-width: 2.5em !important;}
.line_left_26 {border:0;border-left-width: 2.6em !important;}
.line_left_27 {border:0;border-left-width: 2.7em !important;}
.line_left_28 {border:0;border-left-width: 2.8em !important;}
.line_left_29 {border:0;border-left-width: 2.9em !important;}
.line_left_30 {border:0;border-left-width: 3.0em !important;}

/* line color */
.line_color_white {border-color:var(--white) !important;}
.line_color_yellowLight2{border-color:var(--yellowLight2) !important;}
.line_color_yellowLight{border-color:var(--yellowLight) !important;}
.line_color_yellow{border-color:var(--yellow) !important;}
.line_color_yellowDark{border-color:var(--yellowDark) !important;}
.line_color_orangeLight{border-color:var(--orangeLight) !important;}
.line_color_orange{border-color:var(--orange) !important;}
.line_color_orangeDark{border-color:var(--orangeDark) !important;}
.line_color_redLight {border-color:var(--redLight) !important;}
.line_color_red {border-color:var(--red) !important;}
.line_color_redDark {border-color:var(--redDark) !important;}
.line_color_greenLight {border-color:var(--greenLight) !important;}
.line_color_greenLight2 {border-color:var(--greenLight2) !important;}
.line_color_green {border-color:var(--green) !important;}
.line_color_greenDark {border-color:var(--greenDark) !important;}
.line_color_blueLight {border-color:var(--blueLight) !important;}
.line_color_blue {border-color:var(--blue) !important;}
.line_color_skyBlue {border-color:var(--skyBlue) !important;}
.line_color_skyBlueLight {border-color:var(--skyBlueLight) !important;}
.line_color_skyBlueDark {border-color:var(--skyBlueDark) !important;}
.line_color_navyLight{border-color:var(--navyLight) !important;}
.line_color_navy{border-color:var(--navy) !important;}
.line_color_navyDark{border-color:var(--navyDark) !important;}
.line_color_purpleLight{border-color:var(--purpleLight) !important;}
.line_color_purple{border-color:var(--purple) !important;}
.line_color_purpleDark{border-color:var(--purpleDark) !important;}
.line_color_grayLight2 {border-color:#F7F7F7 !important;}
.line_color_bluegrayLight {border-color:var(--blueGrayLight) !important;}
.line_color_grayLight {border-color:var(--grayLight) !important;}
.line_color_gray {border-color:var(--gray) !important;}
.line_color_grayDark {border-color:var(--grayDark) !important;}
.line_color_black{border-color:var(--black) !important;}
.line_color_primary{border-color:var(--primary) !important;}
.line_color_pinkLight{border-color:var(--pinkLight) !important;}
.line_color_pink{border-color:var(--pink) !important;}
.line_color_pinkDark{border-color:var(--pinkDark) !important;}

/* line style */
.line_solid {border-style: solid !important;}
.line_dashed {border-style: dashed !important;}
.line_dotted {border-style: dotted !important;}
.line_double {border-style: double !important;}

/* button style ********************************************************************************************************************/

/* btn 기본 btn 부모로 div.btn_wrap 기본으로 넣어주기 */
.btn_wrap{width:auto;display:flex;justify-content: center;align-items: center;}
.btn_wrap > .btn {cursor:pointer !important;}
.btn {width:auto;box-sizing:border-box;display:inline-flex;align-items: center;justify-content: center;cursor:pointer;user-select: none /*필요없는 부분 텍스트 커서 삭제*/}
/* .btn:hover {box-shadow: 2px 2px 4px rgba(104 112 138 / .4);text-decoration: underline;} */
.btn > .material-symbols-outlined {font-size: 18px;margin: 0 .1em;}

/* btn 정렬 */
.btn_right {display:flex;justify-content: flex-end;}
.btn_left {display:flex;justify-content: flex-start;}

/* btn hover none  */
.btn_hover_none {cursor: default;}
.btn_hover_none:hover {text-decoration: none;box-shadow: none;}

/* hover underline */
.hover_underline:hover {text-decoration: underline;}

/* btn_sparkle 버튼 깜빡거리는 효과 */
.btn_sparkle {animation: sparkle .6s infinite;}
@keyframes sparkle {
  0% { opacity: .4; }
  50% { opacity: 1; }
  100% { opacity: .4; }
}

/* btn disabled  
<buttom class="btn btn_l bg_redLight font_white" disabled>버튼 비활성화</buttom>
*/
.btn:disabled,
.btn[disabled] {background-color: var(--grayLight) !important;color: var(--gray) !important;cursor: not-allowed !important;border-color: var(--gray) !important;}
.btn:disabled:hover,
.btn[disabled]:hover {text-decoration: none;box-shadow: none;}



/* btn 그림자 */
.btn_shadow {box-shadow: 2px 2px 4px rgba(104 112 138 / .1);}


/* btn_motion */
.btn_motion:hover span{animation: btn_motion 1.5s ease-in-out infinite}

@keyframes btn_motion {
  0% {
    transform: translate(0px, 0px);
  }
 
  50% {
    transform: translate(10px, 0px);
  }

  100% {
    transform: translate(0px, 0);
  }
}

/* btn text 
[html]
<button>텍스트 버튼<span class="material-symbols-outlined ml3">link</span></button>
*/
.btn_text {display: flex;align-items: center;color: var(--black);}
.btn_text .material-symbols-outlined {font-size: 20px;color: var(--black);}
.btn_text:hover {text-decoration: underline;}
.btn_text:hover .material-symbols-outlined{text-decoration:none;}

/* btn 사이즈  */
.btn_ss { padding:0 5px!important; height:22px!important;min-width:44px; font-size:.85rem!important;}
.btn_s {min-width: 44px !important ;padding:0 7px!important; height:26px!important; font-size:.9rem!important;}
.btn_m { padding:0 20px!important; height:40px!important; font-size:.95rem!important;}
.btn_l { padding:0 30px!important; height:50px!important; font-size:1.1rem!important;}
.btn_xl { padding:0 50px!important; height:65px!important; font-size:1.2rem!important;}


.btn_30 {padding: 0 !important;width: 30px !important;height: 30px !important;max-width: 30px !important;min-width: 30px !important;}
.btn_40 {padding: 0 !important;width: 40px !important;height: 40px !important;max-width: 40px !important;min-width: 40px !important;}
.btn_50 {padding: 0 !important;width: 50px !important;height: 50px !important;max-width: 50px !important;min-width: 50px !important;}
.btn_60 {padding: 0 !important;width: 60px !important;height: 60px !important;max-width: 60px !important;min-width: 60px !important;}
.btn_70 {padding: 0 !important;width: 70px !important;height: 70px !important;max-width: 70px !important;min-width: 70px !important;}
.btn_80 {padding: 0 !important;width: 80px !important;height: 80px !important;max-width: 80px !important;min-width: 80px !important;}
.btn_90 {padding: 0 !important;width: 90px !important;height: 90px !important;max-width: 90px !important;min-width: 90px !important;}
.btn_100 {padding: 0 !important;width: 100px !important;height: 100px !important;max-width: 100px !important;min-width: 100px !important;}

/* btn_flex_1 버튼 flex:1 btn_wrap이랑 같이 써주기
[html]

<div class="btn_wrap btn_flex_1">
	<button></button>
</div>
 */
.btn_flex_1 > * {flex:1;}

/* box-shadow * ********************************************************************************************************************/
.shadow_5 {box-shadow: 3px 3px 5px rgba(0 0 0 / 13%) !important;}
.shadow_10 {box-shadow: 3px 3px 10px rgba(0 0 0 / 13%) !important;}

/* border-radius * ********************************************************************************************************************/
.border_r_0 {border-radius: 0 !important;}
.border_r_2 {border-radius: 2px !important;}
.border_r_3 {border-radius: 3px !important;}
.border_r_4 {border-radius: 4px !important;}
.border_r_5 {border-radius: 5px !important;}
.border_r_6 {border-radius: 6px !important;}
.border_r_7 {border-radius: 7px !important;}
.border_r_8 {border-radius: 8px !important;}
.border_r_9 {border-radius: 9px !important;}
.border_r_10 {border-radius: 10px !important;}
.border_r_11 {border-radius: 11px !important;}
.border_r_12 {border-radius: 12px !important;}
.border_r_13 {border-radius: 13px !important;}
.border_r_14 {border-radius: 14px !important;}
.border_r_15 {border-radius: 15px !important;}
.border_r_16 {border-radius: 16px !important;}
.border_r_17 {border-radius: 17px !important;}
.border_r_18 {border-radius: 18px !important;}
.border_r_19 {border-radius: 19px !important;}
.border_r_20 {border-radius: 20px !important;}

.border_t_l_r_2 {border-top-left-radius: 2px !important;}
.border_t_l_r_3 {border-top-left-radius: 3px !important;}
.border_t_l_r_4 {border-top-left-radius: 4px !important;}
.border_t_l_r_5 {border-top-left-radius: 5px !important;}
.border_t_l_r_6 {border-top-left-radius: 6px !important;}
.border_t_l_r_7 {border-top-left-radius: 7px !important;}
.border_t_l_r_8 {border-top-left-radius: 8px !important;}
.border_t_l_r_9 {border-top-left-radius: 9px !important;}
.border_t_l_r_10 {border-top-left-radius: 10px !important;}
.border_t_l_r_11 {border-top-left-radius: 11px !important;}
.border_t_l_r_12 {border-top-left-radius: 12px !important;}
.border_t_l_r_13 {border-top-left-radius: 13px !important;}
.border_t_l_r_14 {border-top-left-radius: 14px !important;}
.border_t_l_r_15 {border-top-left-radius: 15px !important;}
.border_t_l_r_16 {border-top-left-radius: 16px !important;}
.border_t_l_r_17 {border-top-left-radius: 17px !important;}
.border_t_l_r_18 {border-top-left-radius: 18px !important;}
.border_t_l_r_19 {border-top-left-radius: 19px !important;}
.border_t_l_r_20 {border-top-left-radius: 20px !important;}

.border_t_r_r_2 {border-top-right-radius: 2px !important;}
.border_t_r_r_3 {border-top-right-radius: 3px !important;}
.border_t_r_r_4 {border-top-right-radius: 4px !important;}
.border_t_r_r_5 {border-top-right-radius: 5px !important;}
.border_t_r_r_6 {border-top-right-radius: 6px !important;}
.border_t_r_r_7 {border-top-right-radius: 7px !important;}
.border_t_r_r_8 {border-top-right-radius: 8px !important;}
.border_t_r_r_9 {border-top-right-radius: 9px !important;}
.border_t_r_r_10 {border-top-right-radius: 10px !important;}
.border_t_r_r_11 {border-top-right-radius: 11px !important;}
.border_t_r_r_12 {border-top-right-radius: 12px !important;}
.border_t_r_r_13 {border-top-right-radius: 13px !important;}
.border_t_r_r_14 {border-top-right-radius: 14px !important;}
.border_t_r_r_15 {border-top-right-radius: 15px !important;}
.border_t_r_r_16 {border-top-right-radius: 16px !important;}
.border_t_r_r_17 {border-top-right-radius: 17px !important;}
.border_t_r_r_18 {border-top-right-radius: 18px !important;}
.border_t_r_r_19 {border-top-right-radius: 19px !important;}
.border_t_r_r_20 {border-top-right-radius: 20px !important;}

.border_b_l_r_2 {border-bottom-left-radius: 2px !important;}
.border_b_l_r_3 {border-bottom-left-radius: 3px !important;}
.border_b_l_r_4 {border-bottom-left-radius: 4px !important;}
.border_b_l_r_5 {border-bottom-left-radius: 5px !important;}
.border_b_l_r_6 {border-bottom-left-radius: 6px !important;}
.border_b_l_r_7 {border-bottom-left-radius: 7px !important;}
.border_b_l_r_8 {border-bottom-left-radius: 8px !important;}
.border_b_l_r_9 {border-bottom-left-radius: 9px !important;}
.border_b_l_r_10 {border-bottom-left-radius: 10px !important;}
.border_b_l_r_11 {border-bottom-left-radius: 11px !important;}
.border_b_l_r_12 {border-bottom-left-radius: 12px !important;}
.border_b_l_r_13 {border-bottom-left-radius: 13px !important;}
.border_b_l_r_14 {border-bottom-left-radius: 14px !important;}
.border_b_l_r_15 {border-bottom-left-radius: 15px !important;}
.border_b_l_r_16 {border-bottom-left-radius: 16px !important;}
.border_b_l_r_17 {border-bottom-left-radius: 17px !important;}
.border_b_l_r_18 {border-bottom-left-radius: 18px !important;}
.border_b_l_r_19 {border-bottom-left-radius: 19px !important;}
.border_b_l_r_20 {border-bottom-left-radius: 20px !important;}

.border_b_r_r_2 {border-bottom-right-radius: 2px !important;}
.border_b_r_r_3 {border-bottom-right-radius: 3px !important;}
.border_b_r_r_4 {border-bottom-right-radius: 4px !important;}
.border_b_r_r_5 {border-bottom-right-radius: 5px !important;}
.border_b_r_r_6 {border-bottom-right-radius: 6px !important;}
.border_b_r_r_7 {border-bottom-right-radius: 7px !important;}
.border_b_r_r_8 {border-bottom-right-radius: 8px !important;}
.border_b_r_r_9 {border-bottom-right-radius: 9px !important;}
.border_b_r_r_10 {border-bottom-right-radius: 10px !important;}
.border_b_r_r_11 {border-bottom-right-radius: 11px !important;}
.border_b_r_r_12 {border-bottom-right-radius: 12px !important;}
.border_b_r_r_13 {border-bottom-right-radius: 13px !important;}
.border_b_r_r_14 {border-bottom-right-radius: 14px !important;}
.border_b_r_r_15 {border-bottom-right-radius: 15px !important;}
.border_b_r_r_16 {border-bottom-right-radius: 16px !important;}
.border_b_r_r_17 {border-bottom-right-radius: 17px !important;}
.border_b_r_r_18 {border-bottom-right-radius: 18px !important;}
.border_b_r_r_19 {border-bottom-right-radius: 19px !important;}
.border_b_r_r_20 {border-bottom-right-radius: 20px !important;}




/* wrap_between 
.wrap_between 쓰면 좌우로 붙게
*/
.wrap_between {display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.wrap_between .btn_wrap {width: auto !important;}


/* title style ********************************************************************************************************************/
.title_st1 {color: #000;font-weight: 500;font-size: 1.3rem;display:block;}
.title_st2 {color: #000;font-weight: 600;font-size: 1.1rem;display:block;}
.title_st3 {color: #000;font-weight: 600;font-size: .95rem;display:block;}

/* title size */
.title_ss {font-size: .9rem;}
.title_s {font-size: 1rem;}
.title_m {font-size: 1.3rem;}
.title_l {font-size: 1.5rem;}
.title_xl {font-size: 1.9rem;}



/* card box style ********************************************************************************************************************/

/* card_box_flex card */
.card_box_flex {display: flex;justify-content: space-between;}

/* card */
.card {border: 1px solid var(--navyDark);border-radius: 3px !important;}
.card_tit {padding:.3em .5em;display:block;font-size: .9rem;text-align: left;/*border-bottom: 1px solid #d8dce5;*/color: var(--white);background-color: var(--navyDark);}
.card_cont {padding: .5em;}
.card > .top_wrap {background-color: var(--navyDark);}

/* box style ********************************************************************************************************************/
.box_line {padding: .8em;border: 1px solid #d5d5d5;position: relative;}
.box_line_top {border-top: 1px solid #000 !important;}
.box_st1 {padding: .8em;border: 1px solid #e7e7e7;box-shadow: 0 0 8px rgb(0 0 0 / 10%);position: relative;}
.box_st2 {padding: .8em;border: 1px solid #dae1f1;position: relative;background-color: #dae1f1;}
.box_st3 {padding: .8em;border: 1px solid #dfdfdf;position: relative;background: #F2F4F8;}
.box_st4 {padding: .8em;border: 1px dotted #8b8e9c;box-shadow: 0 0 8px rgb(14 25 69 / 10%);position: relative;border-radius: 5px !important;}
.cont_line_box {padding-bottom: 4em;margin-bottom: 4em;position: relative;}
.cont_line_box::after {content: '';height: 2px;width: 100%;margin-top: 33px;background: url(https://gbmeta.or.kr/images/web/common/sub_head_line.gif);display: inline-block;position: absolute;left: 0;bottom: 0;width: 100%;}
.orange_box {padding: 1.5em 1.5em;background:#f7f6f4;position: relative;}

/* box_multiple 
[html]
<ul class="box_multiple box_st1 box_line_top">
	<li>
		<span class="tit">현재 포인트</span>
		<span class="txt font_600 font_orange font_20">0 P</span>
	</li>
	<li>
		<span class="tit">누적 포인트</span>
		<span class="txt font_600 font_orange font_20">0 P</span>
	</li>
</ul>
*/
.box_multiple {display: flex;}
.box_multiple > li {flex: 1;text-align: center;display: inline-flex;flex-direction: column;position: relative;}
.box_multiple > li:after {content:'';display: block;width: 1px;height: 100%;background-color: #e3e3e3;position: absolute;top:0;right: 0;}
.box_multiple > li:last-child:after {display: none;}
.box_multiple > li .tit {font-size: .96rem;color: var(--black);font-weight: 600;}
@media screen and (max-width:900px) {
	.box_multiple  {flex-direction: column;}
	.box_multiple > li {padding-bottom: .5em;margin-bottom: .5em;}
	.box_multiple > li:after {width: 100%;height: 1px;top: auto;right: auto;bottom: 0;left: 0;}
	.box_multiple > li:last-child {padding-bottom: 0;margin-bottom: 0;} 
}


/* tip_box
<span class="tip_ic material-symbols-outlined">info</span>
<div class="tip_box" style="display: none;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
*/
.tip_ic{display: flex; align-items: center; cursor: pointer; height: auto; width: auto;color: #9499A7;font-size: 22px !important;}
.tip_ic:hover{color: black;}
.tip_box{padding: .3em;max-width: 400px;position: absolute;/*position: absolute;top: 40px;right: 0;*/z-index: 99;background-color: #fffbed;border-radius: 5px;border: 1px solid #e8ddb4;box-shadow: 3px 3px 6px rgba(104 112 138 / 30%);color: var(--black);font-weight: 400;font-size: .85rem;word-break: keep-all;display: none;}


/* file_box
<div class="file_box">
    <span>Drop files here</span>
    <label for="file">Upload a file</label>
    <input type="file" name="file" id="file">
</div>
         
*/
.file_box{width: 100%; border: 1px dashed #D7DCE5;background-color: #f2f6fa; text-align: center; position: relative; height: 130px !important;}
.file_box span{font-size: 1.9em; color: #cfd4d9; line-height: 130px !important;}
.file_box label{padding: .8em; background: #333; color: white; font-weight: 600; font-size: .9em; border-radius: 5px; position: absolute; left: 10px; top: 10px !important;}
.file_box input[type="file"]{display: none;}


/* table style ********************************************************************************************************************/
:root {
/* 테이블 색상 */
--table1-th-th-bg:#d0e4ff; --table1-th-th-border:#c3d8f3; 
--table1-th-bg:#eff5fd;  --table1-th-border:#d7dfe9; 
--table1-td-bg:#fff; --table1-td-border:#e7e7e7;  
--table1-tf-th-bg:#d5dfed;  --table1-tf-th-border:#c0cad7; 
--table1-tf-td-bg:#edf1f6;  --table1-tf-td-border:#cbd3dd;

--table2-th-th-bg:#5a5a5a; --table2-th-th-border:#3d3d3d; 
--table2-th-bg:#f4f4f4;  --table2-th-border:#d6d8dc; 
--table2-td-bg:#fff; --table2-td-border:#e7e7e7;  
--table2-tf-th-bg:#e2e2e2;  --table2-tf-th-border:#c9c9c9; 
--table2-tf-td-bg:#f6f6f6;  --table2-tf-td-border:#e7e7e7;
  
--table3-th-th-bg:#3a3a3a; --table3-th-th-border:#4c4c4c; 
--table3-th-bg:#fff;  --table3-th-border:#e7e7e7; 
--table3-td-bg:#fff; --table3-td-border:#e7e7e7;  
--table3-tf-th-bg:#f1f1f1;  --table3-tf-th-border:#3a3a3a; 
--table3-tf-td-bg:#f9f9f9;  --table3-tf-td-border:#3a3a3a;

--table4-th-th-bg:#4d525e; --table4-th-th-border:#313541; 
--table4-th-bg:#6B7180;  --table4-th-border:#5c606a; 
--table4-td-bg:#fff; --table4-td-border:#e7e7e7;  
--table4-tf-th-bg:#595f70;  --table4-tf-th-border:#323848; 
--table4-tf-td-bg:#e3e4eb;  --table4-tf-td-border:#c8c8cb;  

--table5-th-th-bg:#fff; --table5-th-th-border:#c5c9d6; 
--table5-th-bg:#6B7180;  --table5-th-border:#5c606a; 
--table5-td-bg:#fff; --table5-td-border:#e7e7e7;  
--table5-tf-th-bg:#595f70;  --table5-tf-th-border:#323848; 
--table5-tf-td-bg:#e3e4eb;  --table5-tf-td-border:#c8c8cb;   
}
/* 
[html]

<table class="table_st1">
    <colgroup>
        <col width="*">
    </colgroup>
    <thead>
    	<tr>
    		<th>11</th>
    		<th>22</th>
    	</tr>
    </thead>
    <tbody>
        <tr>
            <th>11</th>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
    		<th>aa</th>
    		<Td>bb</Td>
    	</tr>
    </tfoot>
</table>
 */
/* table style1 */
.table_st1 {overflow:hidden;width:100%;border-top: 2px solid #2b3456;border-bottom: 1px solid #ddd;position:relative;overflow:hidden;width:calc(100% + 1px);margin-left:-1px;font-weight:300;line-height:1.25;border-collapse:collapse;}
.table_st1 th{padding:.4em .4em;border: 1px solid var(--table1-th-border);color: #000620;font-weight:600;font-size: 1rem;}
.table_st1 td{word-break:keep-all;padding: .4rem .4rem;background: #fff;border: solid #e7e7e7;border-width:1px;color:#333;position:relative;min-height:3.95rem;font-size: 1rem;font-weight: 500;text-align: left;transition:background .3s;-webkit-transition:background .3s;}
.table_st1 tbody tr:first-child th,
.table_st1 tbody tr:first-child td{border-top-width:0}
.table_st1 tbody th {text-align: left;background: var(--table1-th-bg);}
.table_st1 thead th {background: var( --table1-th-th-bg);border-color: var( --table1-th-th-border);font-weight: 600;}
.table_st1 tfoot td {background: var( --table1-tf-td-bg);border-color: var(--table1-tf-td-border);color: #000;}
.table_st1 tfoot th {background: var(--table1-tf-th-bg);border-color: var(--table1-tf-th-border);}


/* table style2 */
.table_st2 {overflow:hidden;width:100%;border-top: 1px solid #000;border-bottom: 1px solid #ddd;position:relative;overflow:hidden;width:calc(100% + 1px);margin-left:-1px;font-weight:300;line-height:1.25;border-collapse:collapse;}
.table_st2 th{padding:.4em .4em;border: 1px solid var(--table2-th-border);color: #000620;font-weight:600;font-size: 1rem;}
.table_st2 td{word-break:keep-all;padding: .4rem .4rem;background: #fff;border: solid #e7e7e7;border-width:1px;color:#333;position:relative;min-height:3.95rem;font-size: 1rem;font-weight: 500;text-align: left;transition:background .3s;-webkit-transition:background .3s;}
.table_st2 tbody tr:first-child th,
.table_st2 tbody tr:first-child td{border-top-width:0}
.table_st2 tbody th {text-align: left;background: var(--table2-th-bg);}
.table_st2 thead th {background: var( --table2-th-th-bg);border-color: var( --table2-th-th-border);font-weight: 600;color: #fff;}
.table_st2 tfoot td {background: var( --table2-tf-td-bg);border-color: var(--table2-tf-td-border);color: #000;}
.table_st2 tfoot th {background: var(--table2-tf-th-bg);border-color: var(--table2-tf-th-border);}

/* table style3 */
.table_st3 {overflow:hidden;width:100%;border-top: 2px solid #000;border-bottom: 1px solid #ddd;position:relative;overflow:hidden;width:calc(100% + 1px);margin-left:-1px;font-weight:300;line-height:1.25;border-collapse:collapse;}
.table_st3 th{padding:.4em .4em;border: 1px solid var(--table3-th-border);color: #000620;font-weight:600;font-size: 1rem;border-width:1px 0;}
.table_st3 td{word-break:keep-all;padding: .4rem .4rem;background: #fff;border: solid #e7e7e7;border-width:1px;color:#333;position:relative;min-height:3.95rem;font-size: 1rem;font-weight: 500;text-align: left;transition:background .3s;-webkit-transition:background .3s;border-width:1px 0;}
.table_st3 tbody tr:first-child th,
.table_st3 tbody tr:first-child td{border-top-width:0}
.table_st3 tbody th {text-align: left;background: var(--table3-th-bg);}
.table_st3 thead th {background: var( --table3-th-th-bg);border-color: var( --table3-th-th-border);font-weight: 600;color: #fff;border-width: 0 1px;}
.table_st3 tfoot td {background: var( --table3-tf-td-bg);border-color: var(--table3-tf-td-border);color: #000;}
.table_st3 tfoot th {background: var(--table3-tf-th-bg);border-color: var(--table3-tf-th-border);}


/* table style4 */
.table_st4 {width:100%;position:relative;overflow:auto;border-top: 1px solid #313541;width:calc(100% + 1px);margin-left:-1px;font-weight:300;line-height:1.25;border-collapse:collapse;}
.table_st4 th{padding:.4em .4em;border: 1px solid var(--table4-th-border);color: #fff;font-weight:600;font-size: 1rem;}
.table_st4 td{word-break:keep-all;padding: .4rem .4rem;background: #fff;border: solid #e7e7e7;border-width:1px;color:#333;position:relative;min-height:3.95rem;font-size: 1rem;font-weight: 500;text-align: left;transition:background .3s;-webkit-transition:background .3s;}
.table_st4 tbody tr:first-child th,
.table_st4 tbody tr:first-child td{border-top-width:0}
.table_st4 tbody th {background: var( --table4-th-bg);border: 1px solid var( --table4-th-border);}
.table_st4 thead th {background: var( --table4-th-th-bg);font-weight: 500;border: 1px solid var( --table4-th-th-border);}
.table_st4 tfoot td {background: var( --table4-tf-td-bg);border-color: var(--table4-tf-td-border);color: #000;}
.table_st4 tfoot th {background: var(--table4-tf-th-bg);border-color: var(--table4-tf-th-border);}


/* table style5 */
.table_st5 {overflow:hidden;width:100%;border-top: 2px solid #000;border-bottom: 1px solid #ddd;position:relative;overflow:hidden;width:calc(100% + 1px);margin-left:-1px;font-weight:300;line-height:1.25;border-collapse:collapse;}
.table_st5 th{padding:.4em .4em;border: 1px solid var(--table3-th-border);color: #000620;font-weight:600;font-size: 1rem;border-width:1px 0;}
.table_st5 td{word-break:keep-all;padding: .4rem .4rem;background: #fff;border: solid #e7e7e7;border-width:1px;color:#333;position:relative;min-height:3.95rem;font-size: 1rem;font-weight: 500;text-align: left;transition:background .3s;-webkit-transition:background .3s;border-width:1px 0;}
.table_st5 tbody tr:first-child th,
.table_st5 tbody tr:first-child td{border-top-width:0}
.table_st5 tbody th {text-align: left;background: var(--table3-th-bg);}
.table_st5 thead th {background: var( --table5-th-th-bg);border-color: var( --table5-th-th-border);font-weight: 600;color: #000;border-width: 0 0 1px 0;position:relative;}
.table_st5 thead th:after {content:'';width: 1px; height: 15px;background-color: var( --table5-th-th-border);position: absolute;right: 0;top: 50%;transform: translate(0, -50%);}
.table_st5 thead th:last-child:after {display: none;}
.table_st5 tfoot td {background: var( --table5-tf-td-bg);border-color: var(--table5-tf-td-border);color: #000;}
.table_st5 tfoot th {background: var(--table5-tf-th-bg);border-color: var(--table5-tf-th-border);}


/* table style 공통 */
/* 
[html]

<table class="table_st1 table_td_center">
 */
.table_td_center td,
td.table_td_center {text-align: center !important;}
.table_td_left td,
td.table_td_left {text-align: left !important;}
.table_td_right td,
td.table_td_right td {text-align: right !important;}
.table_th_left th,
th.table_th_left {text-align: left !important;}
.table_th_right th,
th.table_th_right {text-align: left !important;}
.table_th_center th,
th.table_th_center {text-align: center !important;}


/* 테이블 사이즈 */
/* 
[html]

<table class="table_st1 table_s">
 */
.table_ss > thead > tr > th,
.table_ss > thead > tr > td,
.table_ss > tbody > tr > th,
.table_ss > tbody > tr > td,
.table_ss > tfoot > tr > th,
.table_ss > tfoot > tr > td {height: 26px;font-size: .85rem;padding: .1em .4em;}
.table_s > thead > tr > th,
.table_s > thead > tr > td,
.table_s > tbody > tr > th,
.table_s > tbody > tr > td,
.table_s > tfoot > tr > th,
.table_s > tfoot > tr > td {height: 30px;font-size: .9rem;padding: .2em .4em;}
.table_m > thead > tr > th,
.table_m > thead > tr > td,
.table_m > tbody > tr > th,
.table_m > tbody > tr > td,
.table_m > tfoot > tr > th,
.table_m > tfoot > tr > td {height: 36px;font-size: .95rem;padding: .2em .4em;}
.table_l > thead > tr > th,
.table_l > thead > tr > td,
.table_l > tbody > tr > th,
.table_l > tbody > tr > td,
.table_l > tfoot > tr > th,
.table_l > tfoot > tr > td  {height: 46px;font-size: 1rem;padding: .2em .4em;}
.table_xl > thead > tr > th,
.table_xl > thead > tr > td,
.table_xl > tbody > tr > th,
.table_xl > tbody > tr > td,
.table_xl > tfoot > tr > th,
.table_xl > tfoot > tr > td {height: 56px;font-size: 1.05rem;padding: .2em .4em;}


/* 게시판 테이블 table_board */
/* 
[html]

<table class="table_st1 table_board">
 */
.table_board a:hover{text-decoration: underline;font-weight: 600;}
.table_board tbody tr:nth-child(odd) td {background-color: var(--skyBlueLight);}
.table_board tr:hover td {background-color: var(--skyBlueDark) !important;}
.table_board_height td,
.table_board_height th {height: 40px !important;}
.table_board a {font-weight: 600;}
.table_board td, table_board th {line-height: 1.1;}


/* 게시판 뷰페이지

[html]
<div class="board_view">
	<ul class="view_top">
		<li>
			<div>
				<span class="btn btn_hover_none btn_s bg_white line_black font_black border_r_20">공지</span>
				<h4 class="title mt3">게시물 제목</h4>
				<div class="other_info mt10">
					<span><span class="material-symbols-outlined">person</span><em class="font_black font_600 mr5">작성자</em>${resultVO.user_nm }</span>
					<span><span class="material-symbols-outlined">schedule</span><em class="font_black font_600 mr5">등록</em>${fn:substring(resultVO.bbs_dt,2,fn:length(resultVO.bbs_dt)) }</span>
						<span><span class="material-symbols-outlined">visibility</span><em class="font_black font_600 mr5">조회</em>${resultVO.view_cnt }</span>
				</div>
			</div>
		</li>

		<!-- 링크 사용여부 -->
		<li class="link">
			<span class="tit">관련링크</span>
			<div class="cont">
				<a href="" target="_blank" class="btn btn_s bg_white line_black font_black">원문보기<span class="material-symbols-outlined ml3">link</span></a>
			</div>
		</li>
		<!-- 첨부파일사용여부 -->
		<li class="link">
			<span class="tit">첨부파일</span>
			<div class="cont">
				<a href="" target="_blank" class="btn_text">붙임. 2024년 1분기 섬유제조패션산업 ISC 이슈리포트.pdf(1.5MB)&nbsp;&nbsp;<span class="material-symbols-outlined">download</span></a>
			</div>
		</li>
	</ul><!-- \\view_top -->
	<div class="view_conts" style="min-height: 600px;">
		
	</div>

	<div class="btn_wrap mt10">
			<button class="btn btn_l font_white bg_black" type="button" onclick="fn_location_new('viewForm','','list','/bbs/selectBbsList.do');">목록</button>
	</div>

</div><!-- \\board_view  -->

 */

.board_view .view_top {padding: 30px 0px 0 0;border-top: 3px solid #333;border-bottom: 1px solid #dbdbdb;text-align: center;}
.board_view .view_top li{border-bottom:none;}
.board_view .view_top li:first-child {margin-bottom: 2em;}
.board_view .view_top .tit_cont {padding-bottom: 2.5em;}
.board_view .view_top .title{white-space: inherit;font-size: 1.5rem;color: #000;font-weight: 500;}
.board_view .view_top .other_info {font-size: .95rem;}
.board_view .other_info {padding: 0 1em;width: auto;height: 50px;border: 1px solid #d7d7d7;border-radius: 50px;display: inline-flex;flex-direction: row;justify-content: center;
  : center;}
.board_view .other_info > span {position: relative;font-weight: normal;margin-right: 15px;padding-right: 15px;display: flex;flex-direction: row;align-items: center;}
.board_view .other_info > span:last-child {margin-right: 0;padding-right: 0;}
.board_view .other_info .material-symbols-outlined {margin-right: 2px;color: #333;font-size: 20px;}
.board_view .other_info > span::before {content: '';display: inline-block;position: absolute;top: 4px;right: 0;width: 1px;height: 14px;background: #ccc;}
.board_view .other_info > span:last-child::before {display: none;}
.board_view .view_top .link {min-height:54px;padding: .5em 1em;background: #f5f6f7;border-top: 1px dashed #ccc;display: flex;align-items: center;}
.board_view .view_top .link > a {color: #000;margin-right: 1.5em;}
.board_view .view_top .link > a:hover {text-decoration: underline;}
.board_view .view_top .link .tit {font-size: .9rem;width:70px;color: #000;font-weight: 500;text-align: left;}
.board_view .view_top .link .cont {width:calc(100% - 70px);font-size: .9rem;text-align: left;}
.board_view .view_conts {color: #000;text-align: left;padding: 45px 0px;margin:0 0 40px;border: 1px solid #c9c9c9;border-width: 0 0 1px 0;}
.board_view .view_conts iframe {margin: 0 auto;}
.board_view .view_conts img {display: inline-block;text-align: center;/*margin: 0 auto;*/}
.board_view .view_conts b {font-weight: 600;}

/* 테이블 thead th 고정
[html]

<table class="table_st1 table_thead_fix" style="max-height: 500px"> <!-- max-height로 사이즈 조절 -->
 */
.table_thead_fix {
    display: block;
    max-height: 200px; /* Adjust the height as needed */
    overflow-y: auto;
    width: 100%; /* Ensure the table takes the full width */
}
.table_thead_fix thead tr th,
.table_thead_fix thead tr,
.table_thead_fix thead {
    position: sticky;
    top: 0;
    z-index: 9;
}



/* scroll_table */
.scroll_txt {display: none;}
@media screen and (max-width:1500px) {
}
@media screen and (max-width:1200px) {
    /* scroll_table */
    .scroll_txt {display: block;font-size: .85rem;margin-bottom: .5em;}
    .scroll_txt .material-symbols-outlined {font-size: 22px;background-color: #e5e6ec;width: 26px;height: 26px;border-radius: 50px;display: inline-flex;justify-content: center;align-items: center;vertical-align: middle;margin-right: .3em;}
}
@media screen and (max-width:900px) {
}

/* 테이블 input button 높이값 고정 */
/* 
[html]

<table class="table_st1 table_input">
 */
.table_input th .btn ,
.table_input td .btn {height: 34px !important;}



/* paging style ********************************************************************************************************************/
/* 페이징 스타일 board paging style 공통 
[html]
<ul class="paging_wrap mt10">
	<li class="first"><button title="첫 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_left</span></button></li>
	<li class="prev"><button title="이전 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_left</span></button></li>
	<li class="active"><button readonly="readonly" onclick="">1</button></li>
	<li><button readonly="readonly" onclick="">2</button></li>
	<li><button readonly="readonly" onclick="">3</button></li>
	<li class="next"><button title="다음 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_right</span></button></li>
	<li class="last"><button title="끝 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_right</span></button></li>
</ul><!-- \\paging_wrap -->
*/
.paging_wrap {display: flex;flex-direction: row;align-items: center;justify-content: center;}
.paging_wrap li button,
.paging_wrap li a {width: 30px;height: 30px;margin: 0 .2em;display: inline-flex;align-items: center;justify-content: center;}
.paging_wrap li.first button .material-symbols-outlined,
.paging_wrap li.prev button .material-symbols-outlined,
.paging_wrap li.next button .material-symbols-outlined,
.paging_wrap li.last button .material-symbols-outlined,
.paging_wrap li.first a .material-symbols-outlined,
.paging_wrap li.prev a .material-symbols-outlined,
.paging_wrap li.next a .material-symbols-outlined,
.paging_wrap li.last a .material-symbols-outlined {font-size: 20px;color: #888;}
.paging_wrap li.first:hover button .material-symbols-outlined,
.paging_wrap li.prev:hover button .material-symbols-outlined,
.paging_wrap li.next:hover button .material-symbols-outlined,
.paging_wrap li.last:hover button .material-symbols-outlined,
.paging_wrap li.first:hover a .material-symbols-outlined,
.paging_wrap li.prev:hover a .material-symbols-outlined,
.paging_wrap li.next:hover a .material-symbols-outlined,
.paging_wrap li.last:hover a .material-symbols-outlined {color: #000;}
.paging_wrap li button:hover,
.paging_wrap li a:hover {font-weight: 500;}

/* paging_st1 
[html]
<ul class="paging_wrap paging_st1 mt10">
	<li class="first"><button title="첫 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_left</span></button></li>
	<li class="prev"><button title="이전 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_left</span></button></li>
	<li class="active"><button readonly="readonly" onclick="">1</button></li>
	<li><button readonly="readonly" onclick="">2</button></li>
	<li><button readonly="readonly" onclick="">3</button></li>
	<li class="next"><button title="다음 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_right</span></button></li>
	<li class="last"><button title="끝 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_right</span></button></li>
</ul><!-- \\paging_wrap -->
*/
.paging_st1 li.active button,
.paging_st1 li.active a {background-color: #333;color: #fff;border-radius: 80px;}

/* paging_st2 
[html]
<ul class="paging_wrap paging_st2 mt10">
	<li class="first"><button title="첫 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_left</span></button></li>
	<li class="prev"><button title="이전 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_left</span></button></li>
	<li class="active"><button readonly="readonly" onclick="">1</button></li>
	<li><button readonly="readonly" onclick="">2</button></li>
	<li><button readonly="readonly" onclick="">3</button></li>
	<li class="next"><button title="다음 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_arrow_right</span></button></li>
	<li class="last"><button title="끝 페이지 이동" onclick=""><span class="material-symbols-outlined">keyboard_double_arrow_right</span></button></li>
</ul><!-- \\paging_wrap -->
*/
.paging_st2 li:last-child {border-right: 1px solid #eee;}
.paging_st2 li button,
.paging_st2 li a {width: 32px;height: 32px;margin: 0;background-color: #fff;border: 1px solid #eee;border-width: 1px 0 1px 1px;}
.paging_st2 li.active button,
.paging_st2 li.active a {background-color: #333;color: #fff;}



/* list style ********************************************************************************************************************/
/*
[html]
<ul class="list_st1">
	<li></li>
	<li></li>
	<li></li>
</ul>
*/
.list_st1 li{position:relative;padding-left: 9px;width:100% !important;font-size:1rem;}
.list_st1 > li:before{content:'';background: #1f59a3;width: 4px;height: 4px;display:inline-block;position:absolute;left:0px;top: 10px;border-radius: 8px !important;}

.list_st2 > li {position: relative;padding-left: .7em;margin-bottom: .6em;font-size: 1rem;color: #444;}
.list_st2 > li::after {content: '';display: block;position: absolute;top: 10px;left: 0;width: 3px;height: 3px;background: #555;}

.list_st3 > li {position: relative;padding-left: .7em;margin-bottom: .6em;font-size: 1rem;color: #444;}
.list_st3 > li::after {content: '-';display: block;position: absolute;top: 0;left: 0;}
/* list_size */
/*
[html]
<ul class="list_st1 list_size_s">
	<li></li>
	<li></li>
	<li></li>
</ul>
*/
.list_size_ss li {font-size: .8rem;margin-bottom: .1em;}
.list_size_s li {font-size: .85rem;margin-bottom: .2em;}
.list_size_m li {font-size: .95rem;margin-bottom: .2em;}
.list_size_l li {font-size: 1.1rem;margin-bottom: .3em;}
.list_size_xl li {font-size: 1.2rem;margin-bottom: .4em;}

/* dl_list_st1 style ********************************************************************************************************************/
/*
.dl_list 공통으로 써주고 dl_list_st1 스타일 클래스 넣어주기

[html]
<dl class="dl_list dl_list_st1">
	<dt></dt>
	<dd></dd>
</dl>
*/
.dl_list {display: flex;}
.dl_list dt {width: 100px;}/* width 사이즈 조정 */
.dl_list dd {width: calc(100% - 100px);}/* width 사이즈 조정 */
/* dl_list_st1 */
.dl_list_st1 {position:relative;padding-left: 9px;}
.dl_list_st1:before{content:'';background: #1f59a3;width: 4px;height: 4px;display:inline-block;position:absolute;left:0px;top: 10px;border-radius: 8px !important;}
.dl_list_st1 dt {font-weight: 600;color: var(--blue);}
.dl_list_st1 dd {color: #666;}

/* dl_list_st2 */
.dl_list_st2 {position: relative;padding-left: .7em;margin-bottom: .6em;font-size: 1rem;color: #444;}
.dl_list_st2::after {content: '';display: block;position: absolute;top: 10px;left: 0;width: 3px;height: 3px;background: #555;}
.dl_list_st2 dt {font-weight: 600;color: var(--black);}
.dl_list_st2 dd {color: #666;}

/* dl_list_st3 */
.dl_list_st3 {position: relative;padding-left: .7em;margin-bottom: .6em;font-size: 1rem;color: #444;}
.dl_list_st3::after {content: '-';display: block;position: absolute;top: 0;left: 0;}
.dl_list_st3 dt {font-weight: 600;color: var(--black);}
.dl_list_st3 dd {color: #666;}

/* dl_list size */
.dl_list_size_ss dl {margin-bottom: .1em;}
.dl_list_size_ss dt,
.dl_list_size_ss dd {font-size: .8rem;}
.dl_list_size_s {margin-bottom: .2em;}
.dl_list_size_s dt,
.dl_list_size_s dd {font-size: .85rem;}
.dl_list_size_m dl {margin-bottom: .2em;}
.dl_list_size_m dt,
.dl_list_size_m dd {font-size: .95rem;}
.dl_list_size_l dl {margin-bottom: .3em;}
.dl_list_size_l dt,
.dl_list_size_l dd {font-size: 1.1rem;}
.dl_list_size_xl dl {margin-bottom: .4em;}
.dl_list_size_xl dt,
.dl_list_size_xl dd {font-size: 1.2rem;}

/* none_data style ********************************************************************************************************************/
.none_data {padding: 2em 1em;background: #fff;color: #000;font-weight: 500;display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: .5em;}
.none_data .material-icons {font-size: 2rem;margin-bottom: .2em;}

/* input size ********************************************************************************************************************/
input.input_m {height: 40px !important;}
input.input_l {height: 50px !important;font-size:1rem !important;}
input.input_xl {height: 54px !important;font-size:1.1rem !important;}

/* input 모바일 일때 width 100% */
@media screen and (max-width: 900px) {
  input[type="text"],
  input[type="tel"], 
  input[type="email"], 
  input[type="number"], 
  input[type="password"], 
  input[type="date"], 
  input[type="time"], 
  select {width:99% !important;min-width: 99% !important;max-width: 99% !important;}
}

/* input_wrap ********************************************************************************************************************/
/*
input_wrap에 넣으면 다 한줄로 정렬되고, 모바일일때는 width 100%
[html]
<div class="input_wrap">
 <input type="text" class="" maxlength="" id="" name="" title=""  placeholder="" value="">
 <input type="text" class="" maxlength="" id="" name="" title=""  placeholder="" value="">
</div>
*/
.input_wrap {display: flex;align-items: center;}
.input_wrap > * {margin: 0 .1em;}
@media screen and (max-width: 900px) {
	.input_wrap {flex-direction: column;align-items: flex-start;}
	.input_wrap > * {margin: 0 0 .1em 0;}
}

/* form size style ********************************************************************************************************************/
.form_ss {height:22px!important;min-width:44px; font-size:.85rem!important;}
.form_s {min-width: 44px !important ;padding:0 7px!important; height:26px!important; font-size:.9rem!important;}
.form_m {height:40px!important; font-size:.95rem!important;}
.form_l {height:50px!important; font-size:1.1rem!important;}
.form_xl {height:65px!important; font-size:1.2rem!important;}


/* 라디오박스 style ********************************************************************************************************************/
/*
	
[html]
<div class="radi_box">
	<input type="radio" id="a" value="" name="" class="">
	<label for="a">aa</label>
</div>
*/
.radi_box {position:relative;/*height:25px;*/display: inline-block;}
.radi_box input[type="radio"] {position: absolute;width: 1px;height: 1px;margin-left: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);}
.radi_box input[type="radio"] + label {width:100%;height: 70px;padding-left: 1rem;border: 1px solid #d2d2d2; border-radius: 2px; cursor: pointer;float: left;position:relative;margin-right: .3em;display: flex;align-items: center;justify-content: flex-start; color: #999;}
.radi_box input[type="radio"] + label:before {content:'';display: block;width: 16px;height: 16px;border-radius:100%;background: white;border: 5px solid #999;float: left;margin-right: 12px;margin-top:2px !important;box-sizing: unset;}
.radi_box input[type="radio"] + label span {width:100%;display:inline-block;padding-left: 43px;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;line-height:1.3;font-weight: 500;}
.radi_box input[type="radio"]:checked + label {border-color: black; float: left;text-align: left; color: #000; font-weight: 500;}
.radi_box input[type="radio"]:checked + label:before {content:'';background-color: #fff;border-color:black;}
.radi_box input[type="radio"]:checked + label span {color: black;}

/* 라디오박스 switch style */
.switch {position: relative;display: inline-block;width: 48px;height: 26px; }

/*스위치바탕 ie에서 테두리생김방지*/
.switch input {display:none;}
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;transition:.4s;}
/*스위치버튼 안쪽에 동그란모양*/
.slider:before {position: absolute;content: "";height: 18px;width: 18px;left: 4px;bottom: 4px;background: white;transition: .4s;}
/*체크된(on된)스위치바탕*/
input:checked + .slider {background: var(--greenLight);}
/*스위치버튼을 클릭하면 버튼주위에 글로우효과*/
input:focus + .slider {box-shadow: 0 0 3px #2196F3;}
/*스위치버튼을 클릭하면 우측으로 26px이동*/
input:checked + .slider:before {transform: translateX(22px);}
/*Rounded sliders*/
.slider.round {border-radius: 34px !important;}
/*스위치버튼 안쪽에 동그란모양*/
.slider.round:before {border-radius: 50%;}

/* 파일 업로드 style ********************************************************************************************************************/
/*
[html]
<div class="filebox">
    <input class="upload-name" value="첨부파일" placeholder="첨부파일">
    <label for="file">파일찾기</label> 
    <input type="file" id="file">
</div>

*/
.filebox .upload-name {display: inline-block;height: 40px;padding: 0 .4em;vertical-align: middle;border: 1px solid #dddddd;width: 78%;color: #999999;}
.filebox label {display: inline-block;padding: 10px 20px;color: #fff;vertical-align: middle;background-color: #999999;cursor: pointer;height: 40px;margin-left: 10px;}
.filebox input[type="file"] {position: absolute;width: 0;height: 0;padding: 0;overflow: hidden;border: 0;}



/* select box style ********************************************************************************************************************/
/* select_box 드롭다운 셀랙트박스 
[html]
<div class="select_box">
    <div class="selected">Select an option</div>
    <div class="options">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
        </ul>
    </div>
</div>

[js]
$(".select_box .selected").click(function() {
    //$(".select_box .options ul").toggle();
    var $options = $(this).siblings('.options');
    $options.find('> ul').toggle();
});
// select_box 드롭다운 셀랙트박스-옵션 선택 및 선택 후 옵션 숨기기
$(".select_box .options ul li").click(function() {
    var text = $(this).html();
    //$(".select_box .selected").html(text);
    //$(".select_box .options ul").hide();
    
    var $selected = $(this).closest('.options').siblings('.selected');
    $selected.html(text);
    
    $(this).closest('ul').hide();
}); 
// select_box 드롭다운 셀랙트박스-페이지의 다른 위치를 클릭하면 옵션 숨기기
$(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("select_box")){
            $(".select_box .options ul").hide();
        }
});
*/
.select_box {position: relative;min-width: 180px;display:inline-block;}
.select_box .selected {width:100%;cursor: pointer;display: inline-block;background: #fff url('../../../images/web/common/select_arr_b.svg') calc(100% - 6px) center no-repeat;padding: 0 20px 0 10px;border-radius: 2px;text-decoration: none;color: var(--black);font-size: 15px;box-sizing: border-box;height: 36px;text-align: left;display: flex;align-items: center;line-height: 1.2;}
.select_box .options ul {width:100%;background: #fff none repeat scroll 0 0;display: none;list-style: none;padding: 0px 0px;position: absolute;top: 100%;left: 0;box-sizing: border-box;box-shadow:0 6px 5px rgba(0 0 0 / 15%);}
.select_box .selected span.value,
.select_box .options span.value {display: none;}
.select_box .options ul li {padding: 5px;display: block;text-decoration: none;color: #000;box-sizing: border-box;padding: 6px 10px 6px 10px;text-align: left;font-size: .95rem;cursor: pointer;font-weight: 500;line-height: 1.3;border-bottom: 1px solid #e8e8e8;}
.select_box .options ul li:first-child {border-top: 1px solid #e8e8e8;}
.select_box .options ul li:last-child {border-bottom: 0;}
.select_box .options ul li:hover {background: #CD000B;color: #fff;transition: 0.2s ease;}


/* 드롭다운 style ********************************************************************************************************************/
/* 드롭다운 메뉴 공통
[html]
<div class="dropdown_menu_wrap">
	<span class="material-symbols-outlined dropdown_btn">menu</span>
    <div class="dropdown_menu" style="display: block;">
    	<button type="button" class="msg_share mr3 msg_correctio" onclick="modal.msg.open('126');">메세지 수정</button>
	</div>
</div>

[js]
//드롭다운 메뉴
$('부모클래스명').find('.dropdown_menu').hide();
$('부모클래스명').find('.dropdown_btn').on('click', (function() {
	//$('[data-ul=msg]').find('.dropdown_menu').hide();
	$(this).next('.dropdown_menu').toggle();
	$(this).next('.dropdown_menu').find('button').on('click', function() {
		$(this).parent().hide();
	});
}));
*/
.dropdown_menu_wrap {position: relative;display: inline-flex;align-items: center;justify-content: center;}
.dropdown_btn {color: #ababab;cursor:pointer;width: 20px;height: 20px;display: inline-flex;align-items: center;justify-content: center;}
.dropdown_btn:hover {color: #000;}

/* dropdown_menu_st1 
[html]
<div class="dropdown_menu_wrap">
	<span class="material-symbols-outlined dropdown_btn">menu</span>
    <div class="dropdown_menu dropdown_menu_st1">
    	<button type="button" class="msg_share mr3 msg_correctio" onclick="modal.msg.open('126');">메세지 수정</button>
	</div>
</div>
*/
.dropdown_menu_st1 {min-width: 84px;width: max-content;padding: .5em .3em .5em .3em;position: absolute;top: 29px;right: 0;z-index: 99;background-color: var(--white);border-radius: 5px;border: 1px solid #373F57;box-shadow: 3px 3px 6px rgba(104 112 138 / 30%);}
.dropdown_menu_st1::before {content: '';display: block;position: absolute;top: -9px;right: 2px;width: 18px;height: 16px;background: url('../../../images/web/common/dropdown_arr.png') no-repeat;}

/* dropdown_menu_st2 
[html]
<div class="dropdown_menu_wrap">
	<span class="material-symbols-outlined dropdown_btn">menu</span>
	<div class="dropdown_menu dropdown_menu_st2">
		<button type="button" class="d_flex" onclick=""><span class="material-symbols-outlined mr3">delete</span><span>메세지 삭제</span></button>
		<button type="button" class="d_flex" onclick=""><span class="material-symbols-outlined mr3">delete</span><span>메세지 삭제</span></button>
	</div>
</div>
*/
.dropdown_menu_st2 {min-width: 180px;width: max-content;padding: .5em .3em .5em .3em;position: absolute;top: 22px;right: 0;z-index: 99;background-color: var(--white);border: 1px solid #e1e1e1;box-shadow: 3px 3px 6px rgba(104 112 138 / 30%);}
.dropdown_menu_st2 > * {width: 100%;padding-bottom: .5em;margin-bottom: .5em;font-size: .85rem;color: var(--black);border-bottom: 1px solid #e5e5e5;}    
.dropdown_menu_st2 > *:last-child {padding-bottom: 0;margin-bottom: 0;border-bottom: 0;}
.dropdown_menu_st2 > *:hover {font-weight: 600;}
.dropdown_menu_st2 > *:hover .material-symbols-outlined {color: var(--black);}
.dropdown_menu_st2 .material-symbols-outlined {font-size: 18px;color: #5f6368;}


/* 검색 드롭다운 
[html]
<div class="dropdown_menu_wrap">
	<span class="material-symbols-outlined mr5 dropdown_btn">search</span>
	<div class="dropdown_menu search_dropdown">
		<div class="search_wrap search_st4">
			<input type="text" class="" id="" placeholder="캠페인을 검색해 주세요." name="keyword">
			<button type="submit" class="ic"><span class="material-symbols-outlined">search</span><span class="hide">검색</span></button>
		</div>
	</div>
</div>
[js]
$('부모클래스명').find('.dropdown_menu').hide();
	$('.부모클래스명').find('.dropdown_btn').on('click', (function() {
		//$('[data-ul=msg]').find('.dropdown_menu').hide();
		$(this).next('.dropdown_menu').toggle();
		$(this).next('.dropdown_menu').find('button').on('click', function() {
			$(this).parent().hide();
		});
	}));

*/
.search_dropdown {min-width: 100%;width: 100%;padding: .5em .3em .5em .3em;position: absolute;top: 42px;right: 0;z-index: 99;background-color: var(--white);box-shadow: 0 3px 6px rgba(104 112 138 / 30%);}


/* side_right_wrap 오른쪽 사이드 메뉴 ********************************************************************************************************************/
/*
[html]
<p class="btn btn_50 bg_grayLight font_black side_btn"><span class="material-symbols-outlined">history</span><!-- <em data-em="unidentified-notification-count" class="on">0</em> --></p>

<div class="right_side_wrap">
	<div class="top_wrap mb10">
		<div class="d_inline-flex a-i_center">
			<strong class="title_st1 mr10">활동추적</strong>
 		<form name="searchForm" id="searchForm" class="" method="post" onsubmit="">
            <select name="searchOrder" id="" class="select_st1 w100" title="정렬선택" onchange="search();">
            	<option value="DESC" selected>최신 순</option>
            	<option value="ASC">오래된 순</option>
            </select>
           </form>
       </div>
          <span class="material-symbols-outlined side_close_btn">close</span>
	</div>
      <div class="cont o_y_auto" style="height: calc(100% - 54px);">
      	<div class="box_st5 mb5">
      		<div class="top_wrap">
      			<span class="btn btn_s bg_white font_black line_black btn_hover_none border_r_20 c_default">📨 메세지 수신</span>
      			<span class="date">17:34:00</span>
      		</div>
      		<p class="font_black mt5">기획부서장 홍길동 3에게 14:15분 <span class="message_type mb4 bg_white font_red line_red">보고 메세지</span> 받음</p>
      	</div>
      	<div class="box_st5 mb5">
      		<div class="top_wrap">
      			<span class="btn btn_s bg_white font_black line_black btn_hover_none border_r_20 c_default">📩 메세지 발신</span>
      			<span class="date">17:34:00</span>
      		</div>
      		<p class="font_black mt5">기획부서장 홍길동 3에게 14:23분 <span class="message_type mb4 bg_white font_red line_red">보고 메세지</span> 보냄</p>
      	</div>
      	<div class="box_st5 mb5">
      		<div class="top_wrap">
      			<span class="btn btn_s bg_white font_black line_black btn_hover_none border_r_20 c_default">📝 개인활동일지</span>
      			<span class="date">17:34:00</span>
      		</div>
      		<p class="font_black mt5">기획부서장 홍길동 3에게 14:23분 개인활동일지 작성</p>
      	</div><div class="box_st5 mb5">
      		<div class="top_wrap">
      			<span class="btn btn_s bg_white font_black line_black btn_hover_none border_r_20 c_default">📨 메세지 수신</span>
      			<span class="date">17:34:00</span>
      		</div>
      		<p class="font_black mt5">기획부서장 홍길동 3에게 14:15분 <span class="message_type mb4 bg_white font_red line_red">보고 메세지</span> 받음</p>
      	</div>
      	<div class="box_st5 mb5">
      		<div class="top_wrap">
      			<span class="btn btn_s bg_white font_black line_black btn_hover_none border_r_20 c_default">📩 메세지 발신</span>
      			<span class="date">17:34:00</span>
      		</div>
      		<p class="font_black mt5">기획부서장 홍길동 3에게 14:23분 <span class="message_type mb4 bg_white font_red line_red">보고 메세지</span> 보냄</p>
      	</div>
      </div>
</div><!-- \\right_side_wrap -->
[js]
//side_right_wrap 오른쪽 사이드 메뉴
$(".side_btn").click(function() {
    $(".right_side_wrap").toggleClass("on");
});
$(".side_close_btn").click(function(event) {
    event.stopPropagation();
    $(".right_side_wrap").removeClass("on");
});
$(document).click(function(event) {
    if (!$(event.target).closest('.right_side_wrap, .side_btn').length) {
        $(".right_side_wrap").removeClass("on");
    }
});
$(".right_side_wrap").click(function(event) {
    event.stopPropagation();
});
*/
.side_btn .material-symbols-outlined {font-size: 24px;}
.right_side_wrap {width: 400px;height: 100%;position: fixed;top: 0;right: -400px/*width값이랑 동일하게*/;z-index:10;background-color: rgba(255,255,255,0.9);backdrop-filter: blur(10px);padding: 1em;box-shadow: 0 8px 30px rgba(0 0 0 / 60%); transition: right 0.5s ease; /* Smooth transition */}
.right_side_wrap.on {right:0;}
.side_close_btn {cursor: pointer;}


/* 체크박스 style ********************************************************************************************************************/
/*
[html]
<div class="checkbox">
	<input type="checkbox" id="a" name="" value="" class="">
	<label for="a">aa</label>
</div>
	
*/
.checkbox {position:relative;}
.checkbox input[type="checkbox"] {position: absolute;width: 1px;height: 1px;margin-left: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);}
.checkbox input[type="checkbox"] + label {width:100%;cursor: pointer;float: left;position:relative;margin-right: .5em;display: flex;align-items: center;padding-left:0;}
.checkbox input[type="checkbox"] + label:before {background-color: var(--grayLight);content:'\e5ca';font-family: 'Material Symbols Outlined';color: var(--gray);font-size: 20px;text-align: center;font-weight: 600;width: 18px;height: 18px;border-radius:100%;float: left;margin-right: 3px !important;display: inline-flex;align-items: center;justify-content: center;}
.checkbox input[type="checkbox"] + label span {width:100%;display:inline-block;padding-left: 43px;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;line-height:1.3;font-weight: 500;}
.checkbox input[type="checkbox"]:checked + label {float: left;text-align: left;color: var(--black);}
.checkbox input[type="checkbox"]:checked + label:before {background-color: var(--input-color);content:'\e5ca';font-family: 'Material Symbols Outlined';color: var(--white);}


/* textarea ********************************************************************************************************************/
textarea{width: 100%; box-sizing: border-box;height: auto; background: #fff; border: 1px solid #D7DCE5; resize: none;}
textarea:focus{background: white; color: black;}


/* input file ********************************************************************************************************************/
.filebox {display: inline-flex;}
.filebox input[type="file"] {position: absolute;width: 0;height: 0;padding: 0;overflow: hidden;border: 0 !important;opacity: 0;}
.filebox .upload-name {display: inline-block;height: 34px;padding: 0 10px;vertical-align: middle;border: 1px solid #c2c6cd !important;border-radius: 3px;width: 78%;color: #999999;font-size: .9rem;}
.filebox label {display: inline-block;padding: 0 10px;color: #fff;vertical-align: middle;background-color: #333;cursor: pointer;height: 34px;margin-left: .2em;font-weight: 500;font-size: .9rem;line-height: 32px;border-radius:3px !important;}


/* 파일업로드 ********************************************************************************************************************/
.qq-upload-file{font-size : 12px !important;}
.qq-btn span{font-size:19px; vertical-align:middle;}
.qq-btn {width: 25px; height:25px;margin:0; padding: 0px 4px 0px 2px!important;}

/* input error
[html]
<input type="text" class="error">
<span class="error_txt">오류메세지</span>
*/
input.error {border-color: var(--red) !important;border-width: 2px !important;}
.error_txt {color: var(--red);font-weight: 500;margin-top:2px;display:block;font-size: .95rem;display:none;}
  

/* 로딩화면 ********************************************************************************************************************/
.loading { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); min-height: 100vh; }
.loading span { display: inline-block; width: 10px; height: 10px; background-color: gray; border-radius: 50%; animation: loading 1s linear infinite; background-color: black; }
.loading span:nth-child(1) { animation-delay: 0s; }
.loading span:nth-child(2) { animation-delay: 0.2s; margin: 0px 10px; }
.loading span:nth-child(3) { animation-delay: 0.4s; }
.loading .txt { color: var(--black); display: block; margin-top: 1.4em; font-size: 1.2rem; }

@keyframes loading {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* loading_st2 

<span class="loading_st2" id="" style="display:;">
	<span class="load"></span>
</span><!-- \\loading_st2 -->
*/
.loading_st2 { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.loading_st2 .txt { color: var(--black); display: block; margin-top: 1.4em; font-size: 1.2rem; }
.load { font-size: 10px; width: 1em; height: 1em; position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; text-indent: -9999em; animation: mulShdSpin 1.1s infinite ease; transform: translateZ(0); }

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #CD000B, 1.8em -1.8em 0 0em rgba(205,0,11, 0.2), 2.5em 0em 0 0em rgba(205,0,11, 0.2), 1.75em 1.75em 0 0em rgba(205,0,11, 0.2), 0em 2.5em 0 0em rgba(205,0,11, 0.2), -1.8em 1.8em 0 0em rgba(205,0,11, 0.2), -2.6em 0em 0 0em rgba(205,0,11, 0.5), -1.8em -1.8em 0 0em rgba(205,0,11, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(205,0,11, 0.7), 1.8em -1.8em 0 0em #CD000B, 2.5em 0em 0 0em rgba(205,0,11, 0.2), 1.75em 1.75em 0 0em rgba(205,0,11, 0.2), 0em 2.5em 0 0em rgba(205,0,11, 0.2), -1.8em 1.8em 0 0em rgba(205,0,11, 0.2), -2.6em 0em 0 0em rgba(205,0,11, 0.2), -1.8em -1.8em 0 0em rgba(205,0,11, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(205,0,11, 0.5), 1.8em -1.8em 0 0em rgba(205,0,11, 0.7), 2.5em 0em 0 0em #CD000B, 1.75em 1.75em 0 0em rgba(205,0,11, 0.2), 0em 2.5em 0 0em rgba(205,0,11, 0.2), -1.8em 1.8em 0 0em rgba(205,0,11, 0.2), -2.6em 0em 0 0em rgba(205,0,11, 0.2), -1.8em -1.8em 0 0em rgba(205,0,11, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(205,0,11, 0.2), 1.8em -1.8em 0 0em rgba(205,0,11, 0.5), 2.5em 0em 0 0em rgba(205,0,11, 0.7), 1.75em 1.75em 0 0em #CD000B, 0em 2.5em 0 0em rgba(205,0,11, 0.2), -1.8em 1.8em 0 0em rgba(205,0,11, 0.2), -2.6em 0em 0 0em rgba(205,0,11, 0.2), -1.8em -1.8em 0 0em rgba(205,0,11, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(205,0,11, 0.2), 1.8em -1.8em 0 0em rgba(205,0,11, 0.2), 2.5em 0em 0 0em rgba(205,0,11, 0.5), 1.75em 1.75em 0 0em rgba(205,0,11, 0.7), 0em 2.5em 0 0em #CD000B, -1.8em 1.8em 0 0em rgba(205,0,11, 0.2), -2.6em 0em 0 0em rgba(205,0,11, 0.2), -1.8em -1.8em 0 0em rgba(205,0,11, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(205,0,11, 0.2), 1.8em -1.8em 0 0em rgba(205,0,11, 0.2), 2.5em 0em 0 0em rgba(205,0,11, 0.2), 1.75em 1.75em 0 0em rgba(205,0,11, 0.5), 0em 2.5em 0 0em rgba(205,0,11, 0.7), -1.8em 1.8em 0 0em #CD000B, -2.6em 0em 0 0em rgba(205,0,11, 0.2), -1.8em -1.8em 0 0em rgba(205,0,11, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(205,0,11, 0.2), 1.8em -1.8em 0 0em rgba(205,0,11, 0.2), 2.5em 0em 0 0em rgba(205,0,11, 0.2), 1.75em 1.75em 0 0em rgba(205,0,11, 0.2), 0em 2.5em 0 0em rgba(205,0,11, 0.5), -1.8em 1.8em 0 0em rgba(205,0,11, 0.7), -2.6em 0em 0 0em #CD000B, -1.8em -1.8em 0 0em rgba(205,0,11, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(205,0,11, 0.2), 1.8em -1.8em 0 0em rgba(205,0,11, 0.2), 2.5em 0em 0 0em rgba(205,0,11, 0.2), 1.75em 1.75em 0 0em rgba(205,0,11, 0.2), 0em 2.5em 0 0em rgba(205,0,11, 0.2), -1.8em 1.8em 0 0em rgba(205,0,11, 0.5), -2.6em 0em 0 0em rgba(205,0,11, 0.7), -1.8em -1.8em 0 0em #CD000B;
  }
}


/* 레이어팝업 ********************************************************************************************************************/
/*
[html]
<p class="btn" onClick="popupLayer('layer1');">Open</p>

<div id="layer1" class="dim-layer">
  <div class="dimBg"></div>
  <div class="pop-layer">
    <strong class="pop-head">
    	<span class="tit">레이어팝업창 입니다.</span>
    	<span class="material-symbols-outlined btn-layerClose">close</span>
    </strong>
    <div class="pop-conts">
      간혹 레이어배경 .dimBg이 늦게 떠지는 경우가 있으면 스크립트에 fadein/out 문제임 show/hide로 수정하면됨
    </div>
  </div>
</div>

[js]
function popupLayer(layerId){

    $("#"+layerId).fadeIn();
    $contents = $("#"+layerId).find(".pop-layer");
    $("body").css("overflow", "hidden");
    
    var $elWidth = ~~($contents.outerWidth()),
      $elHeight = ~~($contents.outerHeight());

    $contents.css({
      marginTop: -$elHeight /2,
      marginLeft: -$elWidth/2
    })
    $contents.find(".btn-layerClose").click(function(){
      $("#"+layerId).fadeOut();
      $("body").css("overflow", "");
    });
  
  }
*/
.dim-layer {display:none;}
.pop-layer {width:800px;height: auto;min-height:340px;max-height: 800px;background:#fff;position:fixed;top:50%;left:50%;z-index:9999;border-radius:5px;box-shadow: 0 0 10px rgba(0 0 0 / 50%);}
.pop-head {height:40px;padding:.4em 1em;display:flex;justify-content: space-between;align-items: center;background-color: #eee;border-radius:5px 5px 0 0;}
.pop-head .tit {font-size: 1.1rem;color: var(--black);}
.pop-conts {padding:1em 1em 70px 1em;max-height: 710px;overflow-y: auto;}
.btn-layerClose {cursor:pointer;font-size:23px;color:#000;box-sizing:border-box;}
.btn-layerClose > span {vertical-align: middle;}
.pop-btns {height:50px;background-color: #f6f6f6;border-radius: 0 0 5px 5px;justify-content: flex-end;padding-right: .5em;position: absolute;bottom: 0;width: 100%;z-index:2;}
@media screen and (max-width: 900px) {
	.pop-layer {width: 90%;}
}





/* tab style ********************************************************************************************************************/
/* 
사용 시 .nav-tabs(기본 스타일) 기본으로 넣어주고 
.nav-tabsSt1 .nav-tabsSt2 등 넣어주면 스타일 적용됨 

[html코드]
<ul class="nav-tabs">
	<li><a href="javascript:void(0);" id="tab_a" class="tab active">a</a></li>
	<li><a href="javascript:void(0);" id="tab_b" class="tab">b</a></li>
	<li><a href="javascript:void(0);" id="tab_c" class="tab">c</a></li>
</ul>
<div class="tab-content active" id="section_a">a
</div><!-- \\tab_a -->
<div class="tab-content" id="section_b">b
</div><!-- \\tab_b -->
<div class="tab-content" id="section_c">c
</div><!-- \\tab_c -->

[js 코드]
$(".tab").click(function(){
  $iid = $(this).attr("id").split("_").pop();
  currentTab = $iid;

  $(".tab-content").hide();
  $("#section_"+$iid).show();

  $(".tab").attr("class","tab");
  $(this).attr("class","tab active");
});
*/

/* tab 레이아웃 */
.top_wrap .navTabsCloseBtn {font-size: 10px !important; cursor: pointer; margin-left: 6px; font-style: normal; line-height: 20px; font-family: inherit; position: relative; top: 9px; color: #A49FBA; -webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0; float: right; line-height: 1; text-shadow: 0 1px 0 #fff; background: #D8D5E7; border-radius: 50%; padding: 2px; font-weight: 600; position: absolute; right: 2px; z-index: 1;}
.top_wrap .navTabsCloseBtn:hover {color: red !important; font-weight: 700;}
.nav-tabs {width: 100%; border: 0; overflow: hidden; height: 35px; top: 0; position: relative;}
.nav-tabs>li {float: left; display: inline-block; }
.nav-tabs>li>a { color: #B8B5C7; font-size: 13px; display: inline-block; margin: 0; margin-right: 5px; position: relative;}
.tab-content {display: none;}
.tab-content.active {display: block;}

/* nav-tabsSt1 */
.nav-tabsSt1:after {content: ''; display: block; width: 100%; height: 1px; background-color: #E8E8F6; position: absolute; bottom: 0; left: 0;}
.nav-tabsSt1>li:first-child a {padding: 0 15px !important;}
.nav-tabsSt1>li {padding-top: 5px !important;}
.nav-tabsSt1>li>a {padding-top: 5px; padding-bottom: 5px; color: #B8B5C7; padding: 0 15px 0 15px; line-height: 30px; border-left: 1px solid #e2e2eb; border-top: 1px solid #e2e2eb; border-right: 1px solid #e2e2eb; border-radius: 10px 10px 0 0; background: #FAFAFE; font-weight: 500;}
.nav-tabsSt1>li>a:before {content: ''; border-bottom: 28px solid #e8e8f6; border-right: 14px solid transparent; display: inline-block; position: absolute; right: -13px; bottom: 0;}
.nav-tabsSt1>li>a:after {content: ''; border-bottom: 28px solid #fafafe; border-right: 15px solid transparent; display: inline-block; position: absolute; right: -13px; bottom: 0;}
.nav-tabsSt1 li a.active {color: var(--blue); font-weight: 600; background: #fff; box-shadow: 5px 3px 10px rgb(125 127 174 / 29%); z-index: 1;}
.nav-tabsSt1 li a.active .navTabsCloseBtn {color: #666666;}
.nav-tabsSt1 li a.active:after {border-bottom-color: #fff;}
.nav-tabsSt1 li a .navTabsCloseBtn:hover {background: #ff9800; color: #fff !important;}

/* nav-tabsSt2 */
.nav-tabsSt2 {height: auto;}
.nav-tabsSt2:after {content: ''; display: block; width: 100%; height: 1px; background-color: #E8E8F6; position: absolute; bottom: 0; left: 0;}
.nav-tabsSt2>li>a {padding: 10px 15px;border:0;border-radius: 0;box-shadow: none !important;background:transparent;font-size: 1rem;}
.nav-tabsSt2 li a.active {background:transparent;color: var(--black);font-weight:500;}
.nav-tabsSt2>li>a:before,
.nav-tabsSt2 li a.active:after,
.nav-tabsSt2>li>a:after {display: none;}
.nav-tabsSt2 li a.active:after {content:'';position:absolute;width: 100%;height: 4px;background-color: var(--black);display:block;bottom:0;left:0;border:0;right:auto;}

/* nav-tabsSt3 */
.nav-tabsSt3 {width: auto;height:30px;border:1px solid var(--blue);border-radius:3px !important;}
.nav-tabsSt3 li {height:100%;}
.nav-tabsSt3 li a {padding:0 .5em;background-color:#fff;display:inline-flex;justify-content: center;align-items: center;width:100%;height:100%;}
.nav-tabsSt3 li a.active {background-color:var(--blue);color: var(--white);font-weight:500;border-right: 1px solid #2148b1;}
.nav-tabsSt3 li:last-child a.active {border-right: 0;}

/* nav-tabsSt4 */
.nav-tabsSt4 {height: 56px;}
.nav-tabsSt4 li {width: 50%;height: 100%;}
.nav-tabsSt4 li a {display: block;width: 100%;height: 100%;margin-right: 0;background-color: #F4F5F9;border: 1px solid #E0E3EB;border-width: 1px 0 1px 1px;font-size: 1.2rem;display: inline-flex;justify-content: center;align-items: center;}
.nav-tabsSt4 li:last-child a {border-right-width:1px;}
.nav-tabsSt4 li a.active {background-color: var(--white);color: var(--black);border-bottom-width: 0;}

/* search_wrap style ********************************************************************************************************************/
/*
.search_wrap를 공통으로 무조건 써주고, 
search_st1 search_st2 등 스타일 넣어주기

[html]
<div class="search_wrap search_st1">
    <input type="text" class="" id="" placeholder="캠페인을 검색해 주세요." name="keyword">
    <button type="submit" class="ic"><span class="material-symbols-outlined">search</span><span class="hide">검색</span></button>
</div><!-- \\search_wrap -->
*/
.search_wrap {display: flex;align-items: center;}
.search_wrap select {appearance: auto;min-width: 130px;max-width: 130px;}
.search_wrap input[type="text"] {min-width: 200px;max-width: 200px;}
.search_wrap input[type="text"],
.search_wrap input[type="password"],
.search_wrap input[type="tel"],
.search_wrap input[type="number"],
.search_wrap input[type="price"],
.search_wrap input[type="search"],
.search_wrap input[type="email"],
.search_wrap input[type="time"],
.search_wrap input[type="month"],
.search_wrap input[type="date"],
.search_wrap input[type="url"],
.search_wrap input[type="image"],
.search_wrap input[type="button"],
.search_wrap input[type="submit"],
.search_wrap input[type="reset"],
.search_wrap input[type="file"],
.search_wrap input[type="price"],
.search_wrap input[type="button"],
.search_wrap input[type="submit"],
.search_wrap input[type="reset"]{padding: 0;width: auto;}
/* input 모바일 일때 width 100% */
@media screen and (max-width: 900px) {
	.search_wrap {flex-direction: column;}
	.search_wrap input[type="text"],
	.search_wrap input[type="password"],
	.search_wrap input[type="tel"],
	.search_wrap input[type="number"],
	.search_wrap input[type="price"],
	.search_wrap input[type="search"],
	.search_wrap input[type="email"],
	.search_wrap input[type="time"],
	.search_wrap input[type="month"],
	.search_wrap input[type="date"],
	.search_wrap input[type="url"],
	.search_wrap input[type="image"],
	.search_wrap input[type="button"],
	.search_wrap input[type="submit"],
	.search_wrap input[type="reset"],
	.search_wrap input[type="file"],
	.search_wrap input[type="price"],
	.search_wrap input[type="button"],
	.search_wrap input[type="submit"],
	.search_wrap input[type="reset"],
	.search_wrap select {margin: 0 0 .2em 0 !important;}
	
	.search_wrap.search_st1,
	.search_wrap.search_st2 {flex-direction: row;}
}
/* search_st1 

[html]
<div class="search_wrap search_st1">
    <input type="text" class="" id="" placeholder="캠페인을 검색해 주세요." name="keyword">
    <button type="submit" class="ic"><span class="material-symbols-outlined">search</span><span class="hide">검색</span></button>
</div><!-- \\search_wrap -->
*/
.search_st1 {height: 36px;border-bottom: 2px solid var(--black);}
.search_st1 input[type="text"],
.search_st1 input[type="password"],
.search_st1 input[type="tel"],
.search_st1 input[type="number"],
.search_st1 input[type="price"],
.search_st1 input[type="search"],
.search_st1 input[type="email"],
.search_st1 input[type="time"],
.search_st1 input[type="month"],
.search_st1 input[type="date"],
.search_st1 input[type="url"],
.search_st1 input[type="image"],
.search_st1 input[type="button"],
.search_st1 input[type="submit"],
.search_st1 input[type="reset"],
.search_st1 input[type="file"],
.search_st1 input[type="price"],
.search_st1 input[type="button"],
.search_st1 input[type="submit"],
.search_st1 input[type="reset"],
.search_st1 select {border:0 !important;width: calc(100% - 40px) !important;min-width: auto !important;max-width: none !important;}
.search_st1 button {width: 40px;display: inline-flex;align-items: center;justify-content: center;}
.search_st1 .ic {color: var(--black);font-size: 20px;}
/* search_st2 

[html]
<div class="search_wrap search_st2 mb5">
    <input type="text" class=" id=" "="" placeholder="캠페인을 검색해 주세요." name="keyword">
    <button type="submit" class="ic"><span class="material-symbols-outlined">search</span><span class="hide">검색</span></button>
</div>
*/
.search_st2 {border-radius: 3px;border: 1px solid #000;}
.search_st2 button {width: 40px;display: inline-flex;align-items: center;justify-content: center;}
.search_st2 input[type="text"],
.search_st2 input[type="password"],
.search_st2 input[type="tel"],
.search_st2 input[type="number"],
.search_st2 input[type="price"],
.search_st2 input[type="search"],
.search_st2 input[type="email"],
.search_st2 input[type="time"],
.search_st2 input[type="month"],
.search_st2 input[type="date"],
.search_st2 input[type="url"],
.search_st2 input[type="image"],
.search_st2 input[type="button"],
.search_st2 input[type="submit"],
.search_st2 input[type="reset"],
.search_st2 input[type="file"],
.search_st2 input[type="price"],
.search_st2 input[type="button"],
.search_st2 input[type="submit"],
.search_st2 input[type="reset"] {border:0 !important;width: calc(100% - 40px) !important;min-width: auto !important;max-width: none !important;}
.search_st2 input[type='text']:focus {border:0 !important;box-shadow: none;}
/* search_st3 
[html]
<div class="search_wrap search_st3 mb10 box_st2 bg_skyBlueLight"><!-- bg 빼고 싶으면 box_st2 bg_skyBlueLight 클래스 빼주기  -->
	<select name="searchBbscate_tcd" id="searchBbscate_tcd" onchange="" valign="bottom" align="absmiddle" title="분류"></select>
	<select name="searchCondition" id="searchCondition" title="검색조건선택">
		<option value="title">제목</option>
		<option value="context">내용</option>
	</select>
	<input id="searchKeyword" type="text" value="" name="searchKeyword" title="검색어를 입력해주세요" placeholder="검색어를 입력해주세요">
	<button onclick="" class="bg_blue btn font_white"><span class="material-symbols-outlined">search</span>검색</button>
</div>
*/
.search_st3 input[type="text"],
.search_st3 input[type="password"],
.search_st3 input[type="tel"],
.search_st3 input[type="number"],
.search_st3 input[type="price"],
.search_st3 input[type="search"],
.search_st3 input[type="email"],
.search_st3 input[type="time"],
.search_st3 input[type="month"],
.search_st3 input[type="date"],
.search_st3 input[type="url"],
.search_st3 input[type="image"],
.search_st3 input[type="button"],
.search_st3 input[type="submit"],
.search_st3 input[type="reset"],
.search_st3 input[type="file"],
.search_st3 input[type="price"],
.search_st3 input[type="button"],
.search_st3 input[type="submit"],
.search_st3 input[type="reset"],
.search_st3 select {margin: 0 .1em;font-size: .95rem;}
.search_st3 .btn {height: 34px;}
@media screen and (max-width: 900px) {
	.search_wrap.search_st3 .btn {width: 100%;}
}


/* 최근검색어, 자동검색 autocomplete_list
[html]
<div class="search_wrap search_st2 border_r_0">
    <input type="text" class="search_autocomplete" id="" autocomplete="off" placeholder="메세지 통합검색" name="keyword">
    <button type="submit" class="ic"><span class="material-symbols-outlined">search</span><span class="hide">검색</span></button>
	<div class="autocomplete_list">
		<span class="tit mb5">최근 검색어</span>
		<div class="recent_list mb10">
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
			<span class="recent_ic btn btn_ss btn_hover_none bg_grayLight font_black">기획부서장<span class="material-symbols-outlined delete_ic ml3">close</span></span>
		</div>
		<span class="tit mb5">연관 검색어</span>
		<ul class="relation_list">
			<li><a href="javascript:void(0);" class="ellipsis txt">위기상황</a><span class="material-symbols-outlined delete_ic">close</span></li>
			<li><a href="javascript:void(0);" class="ellipsis txt">위기상황</a><span class="material-symbols-outlined delete_ic">close</span></li>
			<li><a href="javascript:void(0);" class="ellipsis txt">위기상황</a><span class="material-symbols-outlined delete_ic">close</span></li>
		</ul>
	</div>
</div>

[js]
//검색창 자동검색
$('.autocomplete_list').hide();
$('.search_autocomplete').on('click', function () {
    $('.autocomplete_list').show();
});
$(document).on('click', function (e) {
    if (!$(e.target).closest('.search_wrap').length) {
        $('.autocomplete_list').hide();
    }
});
$('.search_wrap > .ic').on('click', function () {
    $('.autocomplete_list').hide();
});
$('.autocomplete_list').on('click', '.delete_ic', function () {
    $(this).closest('.recent_ic, li').remove();
});
*/

.autocomplete_list {padding: .5em;position: absolute;top:44px;left:0;width: 100%;z-index:1;background-color: var(--white);box-shadow:0 3px 6px rgba(104 112 138 / 30%);}
.autocomplete_list .tit {display: block;margin: 0;font-weight: 600;color: var(--black);font-size: .85rem;vertical-align: -webkit-baseline-middle;}
.autocomplete_list .relation_list .delete_ic {cursor:pointer;background-color: var(--grayLight);color: var(--black);font-size:14px;width:18px;height: 18px;border-radius: 30px;display: inline-flex;align-items: center;justify-content: center;position: absolute;right: .5em;top: 50%;transform: translateY(-50%);opacity: .6;}
.autocomplete_list .relation_list > li {border-bottom: 1px solid #e8e8e8;margin-bottom: .3em;padding-bottom: .3em;position: relative;}
.autocomplete_list .relation_list > li .txt {font-size: .9rem;width: calc(100% - 30px);}
.autocomplete_list .relation_list > li:last-child {border-bottom: 0;margin-bottom: 0;padding-bottom: 0;}
.autocomplete_list .relation_list > li:hover a {font-weight: 500;}
.autocomplete_list .relation_list > li:hover .delete_ic {opacity: 1;}

.autocomplete_list .recent_list {display: flex;flex-direction: row;flex-wrap: wrap;gap: .2em;}
.autocomplete_list .recent_list .recent_ic {cursor:pointer;margin: 0;}
.autocomplete_list .recent_list .delete_ic {cursor:pointer;font-size:14px;opacity: .6;}
.autocomplete_list .recent_list .recent_ic:hover .delete_ic {opacity: 1;}