<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";


@font-face { 
  font-family:'Pretandard';  font-style:normal;  font-weight: 300; 
  src:  url(fonts/Pretendard-Light.woff2) format('woff2'),   url(fonts/Pretendard-Light.woff) format('woff')
}

@font-face { 
  font-family:'Pretandard';  font-style:normal;  font-weight: 400; 
  src:  url(fonts/Pretendard-Regular.woff2) format('woff2'),   url(fonts/Pretendard-Medium.woff) format('woff')
}

@font-face { 
  font-family:'Pretandard';  font-style:normal;  font-weight: 500; 
  src:  url(fonts/Pretendard-Medium.woff2) format('woff2'),   url(fonts/Pretendard-Medium.woff) format('woff')
}

@font-face { 
  font-family:'Pretandard';  font-style:normal;  font-weight: 600; 
  src:  url(fonts/Pretendard-SemiBold.woff2) format('woff2'),   url(fonts/Pretendard-SemiBold.woff) format('woff')
}


@font-face { 
  font-family:'Pretandard';  font-style:normal;  font-weight: 700; 
  src:  url(fonts/Pretendard-Bold.woff2) format('woff2'),   url(fonts/Pretendard-Bold.woff) format('woff')
}


@font-face { 
  font-family:'Montserrat';  font-style:normal;  font-weight: 300;  unicode-range: U+0041-005A, U+0061-007A, U+0030-0039; 
  src:  url(fonts/Montserrat-Light.ttf) format('ttf')
}

@font-face { 
  font-family:'Montserrat';  font-style:normal;  font-weight: 500;  unicode-range: U+0041-005A, U+0061-007A, U+0030-0039; 
  src:  url(fonts/Montserrat-Medium.ttf) format('ttf')
}

@font-face { 
  font-family:'Montserrat';  font-style:normal;  font-weight: 400;  unicode-range: U+0041-005A, U+0061-007A, U+0030-0039; 
  src:  url(fonts/Montserrat-Regular.ttf) format('ttf')
}

@font-face { 
  font-family:'Montserrat';  font-style:normal;  font-weight: 600;  unicode-range: U+0041-005A, U+0061-007A, U+0030-0039; 
  src:  url(fonts/Montserrat-SemiBold.ttf) format('ttf')
}

@font-face { 
  font-family:'Montserrat';  font-style:normal;  font-weight: 700;  unicode-range: U+0041-005A, U+0061-007A, U+0030-0039; 
  src:  url(fonts/Montserrat-Bold.ttf) format('ttf')
}

:root {
   

  --body-font-family  : "Montserrat", "Pretandard", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --body-font-size    : 16px;
  --body-font-weight  : 400;
  --body-line-height  : 1.2;
  --body-letterspacing:-0.01rem;
  --body-bg           : #fff;
  --body-color        :#333333;

  --ts-ease:all 0.5s ease;
  
  --dimd              :rgba(0,0,0,0.5);
  
  --white             :#ffffff;
  --black             :#000000;

  --bon-basic         :#3AD3CD;
  --bon-basic-hover   :#009A94;
  --bon-point         :#3A9DBC;
  --bon-point-hover   :#00779C;
  --bon-dark          :#476771;
  --bon-dark-hover    :#20596B;
  
  --bon-blue    	  :#4287f5;
  --bon-blue-hover    :#00337C;
  
  --bon-black         :#2B2B2B;
  --bon-black-hover   :#000000;
  --bon-black2        :#1A1A1A;
  --bon-text          :#333333;
  --bon-gray-text     :#888888;
  --bon-border        :#C4C4C4;
  --bon-border2       :#EBEBEB;
  --bon-gray          :#A3A3A3;
  --bon-scroll        :#D9D9D9;
  --bon-th-bg         :#FAFAFA;

  --bon-th            :#F1F6F6;
  --bon-tbl-border    :#E8E8E8;
  
  --bon-orange        :#FFAF96;
  --bon-red    	      :#f78f88;
  --bon-red-hover     :#EE5454;  
     

  --w-l               :300;
  --w-m               :500;
  --w-r               :400;
  --w-sb              :600;
  --w-b               :700;

  --max-width         :1600px;
  --min-width         :1600px;

}



*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizign:border-box;
  letter-spacing:-0.05rem;
  backface-visibility:hidden;
  image-rendering: -webkit-optimize-contrast;
}

html,body {
  margin        : 0 auto;
  padding       : 0;
  font-family   : var(--body-font-family);
  font-size     : var(--body-font-size);
  font-weight   : var(--body-font-weight);
  line-height   : var(--body-line-height);
  color         : var(--body-color);
  letter-spacing: var(--body-letterspacing);
  background    :var(--body-bg);
  -webkit-text-size-adjust: 100%;
  position:relative;  scroll-behavior: smooth;  width:100%;  height:100%;
  
}

h1,h2,h3,h4,h5,h6
{
  margin: 0;
  padding: 0;
  font-family: var(--body-font-family);
  font-weight: var(--w-sb);
  line-height: 1.2;

}

body.no_scroll{overflow:hidden}
h4{font-weight:var(--w-sb); } /*서브 tit*/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }

div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{ margin: 0; padding: 0; border: 0; font-size: var(--body-font-size); font-family: var(--body-font-family); vertical-align: baseline; font-style:normal }


ol, ul, dl { list-style: none; margin:0; padding:0; }

table { border-collapse: collapse; border-spacing: 0; }
table th,table td{ display:table-cell;vertical-align: middle;}

a { color: inherit; text-decoration: none; outline: none; object-fit: contain; font-weight:inherit; font-size:inherit; transition:0.4s ease}
a:hover, a:active { color: inherit; }

button{border:0; cursor:pointer; color:inherit; font:inherit; margin:0; padding:0; }
button:hover{border:0; padding:0; margin:0}



.blind,iframe{overflow:hidden}
.blind{position:absolute;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px}

.d_flex{display:flex}
.fd_r{flex-direction:row}
.fd_c{flex-direction:column}
.fw_w{flex-wrap:wrap}
.fw_nw{flex-wrap:nowrap}
.jc_fs{justify-content:flex-start !important}
.jc_fe{justify-content:flex-end !important}
.jc_c{justify-content:center}
.jc_sb{justify-content:space-between !important}
.ai_c{align-items:center}
.ai_fs{align-items:flex-start !important}
.ai_sb{justify-content:space-between}

.modal_not_scroll{position:fixed;overflow:hidden;width:100%;height:100%;}
.dimd{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dimd);z-index:1;font-size:0}
img{width:100%; max-width:100%; padding:0; margin:0; font-size:0}
figure{padding:0; margin:0; font-size:0}

/*component*/
input, select, textarea {
  border:1px solid var(--bon-border); 
  margin:0; padding:0;
  color:var(--bon-text); font-size:15px; font-family: var(--body-font-family); font-weight:var(--w-m);
  vertical-align:middle; background:var(--white);
  outline:none; border-radius: 3px;
}


.wd100, .block{width:100%}

.checkbox_wr,
.radiobox_wr{display:flex; justify-content: flex-start; align-items: center; column-gap: 30px;}
input[type="checkbox"].chk_box{display: none;}
input[type="checkbox"].chk_box + label{position:relative;display:flex;justify-content: flex-start; align-items: center;cursor:pointer}
input[type="checkbox"].chk_box + label .check_box{ width:24px; height:24px; background:url("../images/checkbox_bg.png") no-repeat center / 24px ; margin-right:10px; display:inline-block;}
input[type="checkbox"].chk_box + label .check_txt{ display:inline-flex; font-weight:var(--w-sb)}
input[type="checkbox"].chk_box + label .check_txt em{ color:var(--bon-red)}
input[type="checkbox"]:checked.chk_box + label{position:relative}
input[type="checkbox"]:checked.chk_box + label .check_box{ background:url("../images/checkbox_on_bg.png") no-repeat center / 24px; }
input[type="checkbox"]:checked.chk_box + label .check_txt{}

input[type="checkbox"].chk_single{display: none;}
input[type="checkbox"].chk_single + label{ width:24px; height:24px; background:url("../images/checkbox_bg.png") no-repeat center / 24px ; display:inline-block; border:0; cursor:pointer}
input[type="checkbox"]:checked.chk_single + label{ width:24px; height:24px; background:url("../images/checkbox_on_bg.png") no-repeat center / 24px ; display:inline-block;}


input[type="radio"].radio_box{display: none;}
input[type="radio"].radio_box + label{position:relative;display:flex;justify-content: flex-start; align-items: center;cursor:pointer}
input[type="radio"].radio_box + label .rdo_box{ width:24px; height:24px; background:url("../images/radio_bg.png") no-repeat center / 24px ; margin-right:10px; display:inline-block;}
input[type="radio"].radio_box + label .rdo_txt{ display:inline-flex; font-weight:var(--w-sb)}
input[type="radio"]:checked.radio_box + label{position:relative}
input[type="radio"]:checked.radio_box + label .rdo_box{ background:url("../images/radio_on_bg.png") no-repeat center / 24px; }
input[type="radio"]:checked.radio_box + label .rdo_txt{}
input[type="radio"]:disabled.radio_box + label .rdo_box{ background:url("../images/radio_disabled_bg.png") no-repeat center / 24px}
input[type="radio"]:checked:disabled.radio_box + label .rdo_box{ background:url("../images/radio_on_disabled_bg.png") no-repeat center / 24px}


input.input_n,
input[type="text"].input_n,
input[type="number"].input_n,
input[type="password"].input_n{ height:36px; padding:0 15px}
input.input_n.tar{ text-align: right;}

input.input_rate{ height:47px; text-align: center; font-size:20px; font-weight:var(--w-sb)}

input.input_n_rvs,
input[type="text"].input_n_rvs,
input[type="password"].input_n_rvs{ height:36px; padding:0 1px; text-align: center; border:0; font-size:var(--body-font-size)}

input[type="text"].input_m,
input[type="password"].input_m{ width:310px; height:56px; padding:0 15px; border-radius: 10px;}

input[type="text"]::placeholder,
input[type="password"]::placeholder{ color:var(--bon-border); }
input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder{ color:var(--bon-border); }
input[type="text"]::-ms-input-placeholder,
input[type="password"]::-ms-input-placeholder{ color:var(--bon-border);  }
input[type="text"]:focus,
input[type="password"]:focus{border-color:var(--bon-point); color:var(--bon-point)}

input[type="text"].input_n_rvs:focus,
input[type="password"].input_n_rvs:focus{border:1px solid var(--bon-border); color:var(--bon-text)}

input[type="text"]:disabled,input[type="password"]:disabled{ background:var(--bon-gray-text); border-color:var(--bon-gray-text); color:var(--white); opacity: 0.3;}


select{
  height:36px;  padding:0 30px 0 15px; 
       -o-appearance: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background:var(--white) url("/images/ic_slt_arrow.png") no-repeat calc(100% - 6px ) center / 24px;
  }

select::-ms-expand{display:none}
select option{color:var(--bon-text)}
select:focus{border-color:var(--bon-point); color:var(--bon-point)}

select.no_br{border-color:var(--white)}
select.tbl_slt{padding-left:10px}

textarea.textar{ padding:15px; resize: none; border-radius: 5px;}
textarea.textar:focus{border-color:var(--bon-point); color:var(--bon-text)}

.datebox_wr{display:flex; justify-content: flex-start; align-items: center; column-gap: 10px;}
.datebox_wr span{ font-weight:var(--w-m); }

[id^=datepicker]{ width:135px}
.ui-datepicker-trigger,
.ui-datepicker-trigger:hover{width:38px; height:36px; background:url("../images/ic_cal.png") no-repeat center / 38px 36px ; font-size:0}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {	top: inherit !important; }


.numbox_wr { position: relative; display:flex; justify-content: flex-start; align-items: center; border:1px solid var(--bon-border); border-radius: 3px; height:36px }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{  -webkit-appearance: none;  margin: 0; }
input[type=number]{  -moz-appearance: textfield; }
.numbox_wr input { width: 75px; height: 34px;  line-height: 1.65;  display: inline-flex;  padding: 0 0 0 15px;  margin: 0; border:0}
.numbox_nav {  position: relative;  height: 34px; width:24px; }
.numbox_nav .num_button {  position: relative;  cursor: pointer;  width:24px; -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  -o-user-select: none;  user-select: none; font-size:0}
.numbox_nav .num_button.up { position: absolute; height: 17px; top: 0px; background:url("../images/btn_input_num_up.png") no-repeat center / cover}
.numbox_nav .num_button.down { position: absolute; bottom: 0px; height: 17px; background:url("../images/btn_input_num_down.png") no-repeat center / cover}




/*icon*/
i{display:inline-flex; justify-content: center; align-items: center; background-position:center; background-size:cover; background-repeat: no-repeat; font-size:0; transition:0.4s ease }
i.right{margin-left:10px}
i.left{margin-right:10px}

[class*=ic_]    { width:24px; height:24px;}
.ic_arrow       { width:34px; background-image: url("../images/ic_arrow.png");}
.ic_login_blue  { background-image: url("../images/ic_login_blue.png");}
.ic_login_w     { background-image: url("../images/ic_login_w.png");}
.ic_login       { background-image: url("../images/ic_login.png");}
.ic_logout      { background-image: url("../images/ic_logout.png");}
.ic_logout_w    { background-image: url("../images/ic_logout_w.png");}
.ic_file        { background-image: url("../images/ic_file.png");}
.ic_info        { background-image: url("../images/ic_info.png");}
.ic_join        { background-image: url("../images/ic_join.png");}
.ic_join_w      { background-image: url("../images/ic_join_w.png");}
.ic_password    { background-image: url("../images/ic_password.png");}
.ic_mypage      { background-image: url("../images/ic_mypage.png");}
.ic_mypage_w    { background-image: url("../images/ic_mypage_w.png");}
.ic_phone       { background-image: url("../images/ic_phone.png");}
.ic_print       { background-image: url("../images/ic_print.png");}
.ic_print_w     { background-image: url("../images/ic_print_w.png");}
.ic_sch         { background-image: url("../images/ic_sch.png");}
.ic_save_w      { background-image: url("../images/ic_save_w.png");}
.ic_sch_blue    { background-image: url("../images/ic_sch_blue.png");}
.ic_scroll      { background-image: url("../images/ic_scroll.png");}
.ic_sms         { background-image: url("../images/ic_sms.png");}
.ic_mail        { background-image: url("../images/ic_mail.png");}
.ic_arrow_down_w{ background-image: url("../images/ic_arrow_down_w.png");}
.ic_mem_cash    { background-image: url("../images/ic_mem_cash.png");}
.ic_mem_cash_a  { background-image: url("../images/ic_mem_cash_arrow.png");}

h3.guide_tit{font-size:30px; font-weight:var(--w-b); margin-bottom:30px; padding:0 30px}
.guide_cont{display:flex; margin-bottom:30px; column-gap: 30px; row-gap: 20px; padding:0 30px; flex-wrap: wrap; }

/*button*/
.btn{display:flex; justify-content: center; align-items: center; flex-shrink: 0; transition:0.4s linear}
.btn:hover i{transform:translateX(5px)}

.btn.tn{font-size:15px; font-weight:var(--w-sb);padding:0 15px; border-radius: 5px; height:30px; line-height:28px}
.btn.tgl{font-size:16px; font-weight:var(--w-sb);padding:0 15px 0 20px; border-radius: 5px; height:40px; line-height:40px}
.btn.tgl:hover i{ transform:translate(0, 3px)}
.btn.tgl.is_active{}
.btn.tgl.is_active i{ transform:rotate(180deg)}
.btn.tgl.is_active:hover i{ transform:rotate(180deg) translate(0, 3px)}

.btn.mid{font-size:16px; font-weight:var(--w-sb);padding:0 20px 0 15px; border-radius: 5px; height:40px; line-height:40px}
.btn.mid i{ margin-right:6px }
.btn.mid:hover i{ transform:translate(0,-3px) }

.btn.nm{font-size:16px; font-weight:var(--w-m);padding:0 20px; border-radius: 3px; height:41px; line-height:39px}
.btn.sm{font-size:15px; font-weight:var(--w-m);padding:0 10px 0 10px; border-radius: 3px; height:36px; line-height:34px}
.btn.sm_period{ font-size:15px; font-weight:var(--w-r);padding:0 15px; border-radius: 5px; height:36px; line-height:34px; border:1px solid var(--bon-border); background:var(--white)}
.btn.sm_period.pt{ color:var(--bon-red)}
.btn.sm_period:hover{ color:var(--bon-point-hover)}
.btn.lg{font-size:20px; font-weight:var(--w-sb);padding:0 35px; border-radius: 10px; height:64px; line-height:62px}
.btn.round{font-size:16px; font-weight:var(--w-sb);padding:0 24px; border-radius: 24px; height:47px; line-height:45px}
.btn.round_mem{font-size:14px; font-weight:var(--w-sb);padding:0 14px; height:45px; line-height:45px; background:var(--bon-point); color:var(--white); column-gap: 6px;}
.btn[class*=mn_board_]{ height:26px; line-height:26px; padding:0 10px; border-radius: 13px; font-size:14px; font-weight:var(--w-sb);}
.btn.mn_board_w{background:var(--white); color:var(--bon-point)}
.btn.mn_board_g{background:rgba(58,211,205,0.5); color:var(--white)}

.btn[class*=shadow]{height:74px; line-height:72px; background:var(--white);box-shadow:4px 4px 10px rgba(0,0,0,0.15); border:1px solid var(--bon-black); color:var(--bon-text); transition:0.4s ease}
.btn[class*=shadow]:hover{border-color:var(--bon-point-hover); transform:translateY(-3px)}
.btn.shadow_gray{border-color:var(--bon-border); color:var(--bon-point)}
.btn.shadow_gray2{border-color:var(--bon-border); color:var(--bon-text); flex-direction: column; padding:0; width:180px; height:115px; line-height:1}
.btn.shadow_gray2:hover i{transform:translateY(-5px)}
.btn.shadow_gray3{border:2px solid var(--bon-point);; color:var(--bon-text); flex-direction: column; padding:0; width:180px; height:128px; line-height:1}
.btn.shadow_gray3:hover i{transform:translateY(-5px)}
.btn.shadow_br{border:2px solid var(--bon-black); font-weight:var(--w-b);}
.btn.shadow_br2{border:2px solid var(--bon-point); font-weight:var(--w-b); color:var(--bon-point)}




.b_type_br          { border:1px solid var(--bon-black); color:var(--bon-black); background:var(--white)}
.b_type_br:hover    { border:1px solid var(--bon-point); color:var(--bon-black-hover)}
.b_type_br_p        { border:1px solid var(--bon-point); color:var(--bon-point); background:var(--white)}
.b_type_br_p:hover  { border:1px solid var(--bon-point-hover); color:var(--bon-point-hover)}
.b_type_br_p2       { border:2px solid var(--bon-point); color:var(--bon-point); background:var(--white)}
.b_type_br_p2:hover { border:2px solid var(--bon-point-hover); color:var(--bon-point-hover)}
.nm.b_type_br_p2    { line-height:37px }
.sm.b_type_br_p2    { line-height:32px }
.lg.b_type_br_p2    { line-height:60px }
.b_type_point       { border:1px solid var(--bon-point); color:var(--white); background:var(--bon-point)}
.b_type_point:hover { border:1px solid var(--bon-point-hover); color:var(--white); background:var(--bon-point-hover)}
.b_type_dark        { border:1px solid var(--bon-dark); color:var(--white); background:var(--bon-dark)}
.b_type_dark:hover  { border:1px solid var(--bon-dark-hover); color:var(--white); background:var(--bon-dark-hover)}
.b_type_black       { border:1px solid var(--bon-black); color:var(--white); background:var(--bon-black)}
.b_type_black:hover { border:1px solid var(--bon-black-hover); color:var(--white); background:var(--bon-black-hover)}
.b_type_black2      { border:1px solid var(--bon-border); color:var(--bon-text); background:var(--white)}
.b_type_black2:hover{ border:1px solid var(--bon-point); }
.b_type_basic       { border:1px solid var(--bon-basic); color:var(--white); background:var(--bon-basic);}
.b_type_basic:hover { border:1px solid var(--bon-basic-hover); color:var(--white); background:var(--bon-basic-hover);}
.b_type_blue        { border:1px solid var(--bon-blue);  color:var(--white); background:var(--bon-blue)}
.b_type_blue:hover  { border:1px solid var(--bon-blue-hover);  color:var(--white); background:var(--bon-blue-hover)}
.b_type_gray        { border:1px solid var(--bon-gray-text); color:var(--white); background:var(--bon-gray-text)}
.b_type_gray:hover  { border:1px solid var(--bon-black-hover); background:var(--bon-black-hover);}
.b_type_gray2       { border:1px solid var(--bon-border); color:var(--bon-border); background:var(--white)}
.b_type_gray2:hover { border:1px solid var(--bon-black-hover); color:var(--bon-black-hover);}
.b_type_red        { border:1px solid var(--bon-red);  color:var(--white); background:var(--bon-red)}
.b_type_red:hover  { border:1px solid var(--bon-red-hover);  color:var(--white); background:var(--bon-red-hover)}

.round_mem.round_start  { padding-left:20px; border-radius: 24px 0 0 24px; }
.round_mem.round_mid    { }
.round_mem.round_end    { padding-right:20px; border-radius: 0 24px 24px 0; }

.sm_period.sm_start     { border-radius: 5px 0 0 5px !important; border-right:0}
.sm_period.sm_mid       { border-radius: 0 !important; border-right:0}
.sm_period.sm_end       { border-radius: 0 5px 5px 0 !important; }

button:disabled,
a:disabled,
button:disabled:hover,
a:disabled:hover     { border:1px solid var(--bon-gray-text); color:var(--white); background:var(--bon-gray-text); opacity:0.3}
button:disabled:hover i,
a:disabled:hover i    { transform:unset}
button[class*=b_type_br]:disabled     { border:1px solid var(--bon-gray-text); color:var(--bon-gray-text); background:var(--white); opacity:0.3}


/*board-index*/
.board_pagination{ margin:50px auto 0; display:flex; justify-content: center; align-items: center;}
.board_pagination [class*=page_b_]{ width:24px; height:24px; background-repeat: no-repeat; background-position: center; background-size:cover; font-size:0; position:relative}
.board_pagination .page_b_first{ background-image:url("../images/btn_board_first.png")}
.board_pagination .page_b_first:hover:after{ content:""; width:100%; height:1px; position:absolute; left:0; bottom:0; background:var(--bon-basic); display:block }
.board_pagination .page_b_prev{ background-image:url("../images/btn_board_prev.png"); margin-right:10px}
.board_pagination .page_b_prev:hover:after{ content:""; width:100%; height:1px; position:absolute; left:0; bottom:0; background:var(--bon-basic); display:block }
.board_pagination .page_b_next{ background-image:url("../images/btn_board_prev.png"); transform:rotate(180deg); margin-left:10px}
.board_pagination .page_b_next:hover:after{ content:""; width:100%; height:1px; position:absolute; left:0; top:0; background:var(--bon-basic); display:block }
.board_pagination .page_b_end{ background-image:url("../images/btn_board_first.png"); transform:rotate(180deg)}
.board_pagination .page_b_end:hover:after{ content:""; width:100%; height:1px; position:absolute; left:0; top:0; background:var(--bon-basic); display:block }
.board_pagination .page{ min-width:40px; display:flex; justify-content: center; align-items: center; height:24px; line-height:24px; padding:0 10px; font-weight:var(--w-sb); }
.board_pagination .page:hover,
.board_pagination .page_current{ color:var(--bon-point); font-weight:var(--w-b) }


/* modal */
#ui-datepicker-div{z-index:10000 !important}
.modal_wr{width:870px; height:700px; max-height:calc(100vh - 40px); background:var(--white); border-radius:15px; box-shadow:4px 4px 20px rgba(0,0,0,0.1); z-index:100; position:relative; overflow: hidden; transition:.3s ease; visibility: hidden; padding:52px 0 30px 0; transform: scale(0.6);}
.modal_wr.size_sm{width:710px; }
.modal_wr.size_auto{ height:auto}
.modal_wr.is_active{ visibility: visible; opacity: 1; transform: scale(1);}
.modal_wr:before{content:""; width:100%; height:20px; display:block; background:var(--bon-basic); position:absolute; top:0; left:0}
.modal_wr .modal_hd{width:100%; height:40px; display:flex; justify-content: space-between; align-items: center; margin-bottom:30px; padding:0 30px}
.modal_wr .modal_hd p{ font-size:28px; font-weight:var(--w-m); color:var(--bon-black2)}
.modal_wr .modal_hd .btn_md_close{ width:40px; height:40px; background:url("../images/btn_md_close.png") no-repeat center / cover; font-size:0; transition:0.4s ease}
.modal_wr .modal_hd .btn_md_close1{ width:40px; height:40px; background:url("../images/btn_md_close.png") no-repeat center / cover; font-size:0; transition:0.4s ease}
/*.modal_wr .modal_hd .btn_md_close:hover{ transform: rotate(180deg);}*/
.modal_wr .modal_bd{ width:calc(100% - 50px); height:calc(100% - 102px); overflow-y:auto; margin:0 20px 0 30px; overflow-x:hidden; padding-right:10px}
.modal_wr .modal_bd::-webkit-scrollbar{ width:10px; background:var(--bon-scroll); border-radius: 5px; }
.modal_wr .modal_bd::-webkit-scrollbar-thumb{ border-radius: 5px; background:var(--bon-point);}

.modal_wrap{width:100%; height:100%; position:fixed; top:0; left:0;  background:var(--dimd); display:flex; justify-content: center; align-items: center; visibility: hidden; transition:0.4s ease; opacity:0}
.modal_wrap.is_active{visibility: visible; opacity:1; z-index:10000;}

/*win*/
.win_wrap{width:100%; height:100%; background:var(--white); display:flex; justify-content: flex-start; align-items: flex-start;}
.win_wrap .modal_bd{ width:calc(100% - 50px); height:auto; overflow-y:hidden; margin:0 30px; padding-right:0}
.win_wrap .win_wr{width:100%; min-width:600px; height:auto; max-height:unset; background:var(--white); border-radius:0; box-shadow:unset; transition:unset; visibility: visible; padding:52px 0 30px 0; transform: unset}

.win_wrap .win_wr{width:870px; height:auto; background:var(--white); z-index:100; position:relative; overflow: hidden; padding:52px 0 30px 0; }
.win_wrap .win_wr:before{content:""; width:100%; height:20px; display:block; background:var(--bon-basic); position:absolute; top:0; left:0}
.win_wrap .win_wr .modal_hd{width:100%; height:40px; display:flex; justify-content: space-between; align-items: center; margin-bottom:30px; padding:0 30px}
.win_wrap .win_wr .modal_hd p{ font-size:28px; font-weight:var(--w-m); color:var(--bon-black2)}
.win_wrap .win_wr .modal_bd{ width:calc(100% - 50px); height:auto; margin:0 30px; overflow-x:hidden; }
.win_wrap .win_wr .tbl2 .tr2 .th{border-bottom:0 !important; width:12rem !important}
.win_wrap .win_wr .tbl2 .tr2 .td{width:calc((100% - 24rem) / 2) !important; border-bottom:0 !important}
.win_wrap.md_bill .bill_inr {justify-content: space-between !important; flex-direction: row !important;}
.win_wrap.md_bill .bill_inr .bill {flex-shrink: 0;}
.win_wrap.md_item .tbl2 {border-top: 2px solid var(--bon-point) !important;}
.win_wrap.md_item .tbl2 .tr{border-bottom: 1px solid var(--bon-tbl-border) !important; }
.win_wrap.md_item .tbl2:nth-of-type(-n+2) .th{width:12rem !important; background: var(--bon-th);color: var(--bon-black);height: 48px;word-break: keep-all;text-align: left;padding: 0 10px;font-weight: var(--w-m);}
.win_wrap.md_item .tbl2:nth-of-type(-n+2) .td{width:calc(100% - 12rem) !important; background: var(--white);height: auto;min-height: 48px;padding: 6px 10px;text-align: center;font-weight: var(--w-m);}
.win_wrap.md_item .td .input_n {width:300px !important}
.win_wrap.md_item .td span + .btn {margin-left:12px !important; width:auto !important; margin-top:0}
.win_wrap[class*=md_] .btn_wr button.fix_w{width:140px}

.win_wrap.md_bill .win_wr{width:100%; min-width:500px; }
.win_wrap.md_item .win_wr{width:100%; min-width:600px; }
.win_wrap.md_percent_money .win_wr{width:100%; min-width:560px; }
.win_wrap.md_percent_money .tbl{width:100%}
.win_wrap.md_percent_money .tbl2 .tr{ flex-direction: row; border-bottom: 1px solid var(--bon-tbl-border);}
.win_wrap.md_percent_money .tbl2 .th{width:12rem !important; background: var(--bon-th);  color: var(--bon-black); height: 48px; word-break: keep-all; text-align: left; padding: 0 10px; font-weight: var(--w-m);}
.win_wrap.md_percent_money .tbl2 .td{width:calc(100% -  12rem) !important; background: var(--white);height: auto;min-height: 48px;padding: 6px 10px;text-align: center;font-weight: var(--w-m);}
.win_wrap.md_percent_money .tbl2 .td .input_n { width:200px}
.win_wrap.md_percent_money .tbl2 .td select { width:200px}
.win_wrap.md_percent .win_wr{width:100%; min-width:500px; }
.win_wrap.md_percent .tbl{width:100%}


/*guide*/
.guide_wr{ display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 28px; padding:0 48px; margin-top:45px}
.guide_wr.lPd0{ padding-left:0; }
.guide_wr &gt; h3{ font-size:24px; font-weight:var(--w-b); color:var(--bon-black2);}
.guide_wr .guide_ul{ width:100%; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 10px;}
.guide_wr .guide_ul li{ height:24px; line-height:24px; position:relative; font-weight:var(--w-m); padding-left:30px }
.guide_wr .guide_ul li span{ display:inline; color:var(--bon-point)}
.guide_wr .guide_ul li strong{ display:inline-flex; font-weight:var(--w-sb)}
.guide_wr .guide_ul li:before{ content:""; width:24px; height:24px; background:url("../images/ic_info.png") no-repeat center / cover; display:inline-flex; position:absolute; top:0; left:0}
.guide_wr .guide_ul li.sm_lst{ height:20px; line-height:20px; padding-left:44px; font-size:14px }
.guide_wr .guide_ul li.sm_lst:before{ content:"-"; width:24px; height:24px; background:none; display:inline-flex; position:absolute; top:0; left:30px}

.guide_wr.mdPd{ padding:0; margin-top:30px; row-gap: 20px; }
.guide_wr.mdPd &gt; h3{ font-size:20px;}

/*title*/
.tit_wr{ width:100%; border-bottom:1px solid var(--bon-black); padding:0 0 20px 0; display:flex; justify-content: space-between; align-items: flex-start;}
.tit_wr h3{ font-size:32px; font-weight:var(--w-m); color:var(--bon-black2)}

.tit_mem_wr{ width:100%; border-bottom:1px solid var(--bon-scroll); padding:0 0 20px 0; display:flex; justify-content: space-between; align-items: center;}
.tit_mem_wr h3{ font-size:28px; font-weight:var(--w-b); color:var(--bon-black2)}
.tit_mem_wr .step_ul{ display:flex; justify-content: flex-end; align-items: center;}
.tit_mem_wr .step_ul li{ height:24px; display:flex; justify-content: flex-end; align-items: center; position:relative; color:var(--bon-border); padding-right:26px; padding-left:5px}
.tit_mem_wr .step_ul li:last-child{ padding-right:0}
.tit_mem_wr .step_ul li:not(:last-child):after{ content:""; width:24px; height:24px; background:url("../images/ic_step.png") no-repeat center / cover; position:absolute; right:0; top:0; display:flex; font-size:0}
.tit_mem_wr .step_ul li.is_active{ color:var(--bon-blue); font-weight:var(--w-sb);}
.tit_mem_wr .step_ul li:not(:last-child).is_active:after{ content:""; width:24px; height:24px; background:url("../images/ic_step_on.png") no-repeat center / cover; }


/*table*/
.tbl_top_btn_wr{width:100%; display:flex; justify-content: space-between; align-items: center; margin:20px 0 15px 0}
.tbl_inr{width:100%; display:block; overflow-x:auto; overflow-y:auto; max-height:300px; padding-right:10px} /*스크롤 y축 추가 2024-01-27*/
.tbl_inr::-webkit-scrollbar{ width:8px; height:10px; background:var(--bon-scroll); border-radius: 5px; }
.tbl_inr::-webkit-scrollbar-thumb{ border-radius: 5px; background:var(--bon-point);}

.tbl{ width:100%; border-collapse: collapse; border-top:2px solid var(--bon-point)}
.tbl.has_scroll{ } /*스크롤 클래스 추가 2024-01-27*/
.tbl.wd_auto{ width:2150px; margin-bottom:20px }
.tbl thead th{ background:var(--bon-th); color:var(--bon-black); height:48px; word-break: keep-all;}
.tbl thead th[rowspan=2]{ height:80px}
.tbl thead th.ht40{ height:40px}
.tbl thead tr,
.tbl tbody tr{ border-bottom:1px solid var(--bon-tbl-border)}
.tbl thead th:not(:last-child),
.tbl tbody td:not(:last-child){ border-right:1px solid var(--bon-tbl-border)}
.tbl.has_scroll tbody{ max-height:50px; overflow-y:auto } /*스크롤 클래스 추가 2024-01-27*/
.tbl tbody td{ background:var(--white); height:48px; min-height:48px; padding:6px 0; text-align: center; font-weight:var(--w-m); color:var(--bon-black)}
.tbl tbody td.tar{ text-align: right; padding-right:10px;}
.tbl tbody td.tal{ text-align: left; padding-right:10px; padding-left:10px}
[class*=tbl] .total_price{ font-size:20px; color:var(--bon-red)}
[class*=tbl] .total_price strong{ font-size:inherit; color:inherit; font-weight:var(--w-b)}
.tbl tbody td button{ margin:0 auto}
.tbl tbody td select,
.tbl tbody td input[type=text]{ width:100%}
.tbl tbody td.inp_align { }
.tbl tbody td input[type=number]{ width:100%}

.tbl2{ width:100%; border-collapse: collapse; border-top:2px solid var(--bon-point)}
.tbl2.sch_mg{ margin-top:30px }
.tbl2 .tr,
.tbl2 .tr{ border-bottom:1px solid var(--bon-tbl-border); display:flex; justify-content: flex-start; align-items: center;}
.tbl2 .th{ background:var(--bon-th); color:var(--bon-black); height:48px; word-break: keep-all; text-align: left; padding:0 10px; font-weight:var(--w-m)}
.tbl2 .td{ background:var(--white); height:auto; min-height:48px; padding:6px 10px; text-align: center; font-weight:var(--w-m)}
.tbl2 .th,
.tbl2 .td:not(:last-child){ border-right:1px solid var(--bon-tbl-border)}

.tbl2 .th{width:140px; display:inline-flex; justify-content: flex-start; align-items: center;}
.tbl2 .th.align_c{justify-content: center;}
.tbl2 .td{width:calc(100% - 140px); display:inline-flex; justify-content: flex-start; align-items: center;}
.tbl2 .tr2 .td{width:calc((100% - 280px) / 2)}
.tbl2 .tr3{}
.tbl2 .tr3 .th{width:140px; justify-content: center;}
.tbl2 .tr3 .td:nth-last-of-type(1){width:630px}
.tbl2 .tr3 .td{width:calc((100% - 1070px) / 2)}
.tbl2 .td strong{font-weight:var(--w-sb); color:inherit}
.tbl2 .td strong.font_b{font-size:20px}
.tbl2 .td.clr_r{ color:var(--bon-red)}

.tbl3{ width:100%; border-top:2px solid var(--bon-point); display:flex; justify-content: flex-start; align-items: flex-start;}
.tbl3 li{ display:flex; flex-direction: column; justify-content: flex-start;  border-bottom:1px solid var(--bon-tbl-border);}
.tbl3 li .th,
.tbl3 li .td{ display:flex; justify-content: center; align-items: center;}
.tbl3 li:nth-child(1){ width:16%}
.tbl3 li:nth-child(2){ width:12%}
.tbl3 li:nth-child(3){ width:23.4%}
.tbl3 li:nth-child(4){ width:16%}
.tbl3 li:nth-child(5){ width:32.6%}
.tbl3 .th{ background:var(--bon-th); color:var(--bon-black); height:48px; word-break: keep-all; text-align: left; padding:0 10px; font-weight:var(--w-sb); border-bottom:1px solid var(--bon-tbl-border);}
.tbl3 .td{ background:var(--white); height:auto; min-height:48px; padding:6px 10px; text-align: center; font-weight:var(--w-m)}
.tbl3 li:not(:last-child){ border-right:1px solid var(--bon-tbl-border)}



td.no_txt_td{height:100px !important; color:var(--bon-gray-text) !important } /*작성글이 없을 때*/


/*스크롤가이드*/
.scroll_inr{ display:none; }</pre></body></html>