@charset "utf-8";


:root {
    /* Primary Color */
    --primary-10: #D9E2FF;
    --primary-20: #7EA3FF;
    --primary-30: #4F7BFF; /* PRIMARY */
    --primary-40: #3A5AD9;
    --primary-50: #2F4FAF;

    /* Secondary Color */
    --secondary-green: #70D44B;
    --secondary-gray: #5B6670;
    /* 그레이 스케일 */
    --pure-white: #fff;
    --pure-black: #000;

    --gray-10: #e9ecef;
    --gray-20: #dee2e6;
    --gray-30: #ced4da;
    --gray-40: #adb5bd;
    --gray-50: #868e96;
    --gray-60: #495057;
    --gray-70: #212529;

    /* 배경컬러 */
    --bbg-10: #F8FAFF;
    --bbg-20: #F3F6FF;

    --wbg-10: #f8f9fa;
    --wbg-20: #f1f3f5;

    /* 상태 */
    --success-10:#e9faf4;
    --success-20:#8be4d0;
    --success-30:#26bf9b; /*default*/
    --success-40:#189977;
    --success-50:#0f6a55;

    --error-10:#fff1ed;
    --error-20:#f8c2b3;
    --error-30:#ff5b3b; /*default*/
    --error-40:#ba3a23;
    --error-50:#871e12;

    --caution-10:#fffbef;
    --caution-20:#fff1c9;
    --caution-30:#fcd535; /*default*/
    --caution-40:#c99d00;
    --caution-50:#9b7c00;

    /* 타이포 */
    --font-sans:"Pretendard", sans-serif;
    --default-fs:1rem; /*16px*/
    --fs-12:0.75rem;
    --fs-14:0.875rem;
    --fs-18:1.125rem;
    --fs-20:1.25rem;
    --fs-24:1.5rem;
    --fs-28:1.75rem;
    --fs-36:2.25rem;
    --fs-40:2.375rem;

    --default-lh:150%;
    --lh-100:100%;
    --lh-180:180%;

}

/* COMMON MARGIN */
.mg_none{margin:0 !important;}

.mg_t0{margin-top:0 !important;}
.mg_t5{margin-top:5px !important;}
.mg_t10{margin-top:10px !important;}
.mg_t15{margin-top:15px !important;}
.mg_t20{margin-top:20px !important;}
.mg_t25{margin-top:25px !important;}
.mg_t30{margin-top:30px !important;}
.mg_t35{margin-top:35px !important;}
.mg_t40{margin-top:40px !important;}
.mg_t45{margin-top:45px !important;}
.mg_t50{margin-top:50px !important;}
.mg_t60{margin-top:60px !important;}
.mg_t70{margin-top:70px !important;}
.mg_t80{margin-top:80px !important;}
.mg_t90{margin-top:90px !important;}
.mg_t100{margin-top:100px !important;}

.mg_b0{margin-bottom:0 !important;}
.mg_b5{margin-bottom:5px !important;}
.mg_b10{margin-bottom:10px !important;}
.mg_b15{margin-bottom:15px !important;}
.mg_b20{margin-bottom:20px !important;}
.mg_b25{margin-bottom:25px !important;}
.mg_b30{margin-bottom:30px !important;}
.mg_b40{margin-bottom:40px !important;}
.mg_b45{margin-bottom:45px !important;}
.mg_b50{margin-bottom:50px !important;}
.mg_b60{margin-bottom:50px !important;}
.mg_b70{margin-bottom:70px !important;}
.mg_b80{margin-bottom:80px !important;}

.mg_r0{margin-right:0 !important;}
.mg_r5{margin-right:5px !important;}
.mg_r10{margin-right:10px !important;}
.mg_r20{margin-right:20px !important;}
.mg_r30{margin-right:30px !important;}
.mg_r40{margin-right:40px !important;}

.mg_l0{margin-left:0 !important;}
.mg_l5{margin-left:5px !important;}
.mg_l10{margin-left:10px !important;}
.mg_l20{margin-left:20px !important;}
.mg_l30{margin-left:30px !important;}
.mg_l40{margin-left:40px !important;}
.mg_l50{margin-left:50px !important;}
.mg_l60{margin-left:60px !important;}

/* COMMON PADDING */
.pd_none{padding: 0 !important;}
.pd_a10{padding:10px !important;}
.pd_a20{padding:20px !important;}

.pd_t0{padding-top:0px !important;}
.pd_t10{padding-top:10px !important;}
.pd_t15{padding-top:15px !important;}
.pd_t20{padding-top:20px !important;}
.pd_t25{padding-top:25px !important;}
.pd_t30{padding-top:30px !important;}
.pd_t40{padding-top:40px !important;}
.pd_t45{padding-top:45px !important;}
.pd_t50{padding-top:50px !important;}
.pd_t150{padding-top:150px !important;}

.pd_b0{padding-bottom:0px !important;}
.pd_b10{padding-bottom:10px !important;}
.pd_b15{padding-bottom:15px !important;}
.pd_b20{padding-bottom:20px !important;}
.pd_b25{padding-bottom:25px !important;}
.pd_b30{padding-bottom:30px !important;}
.pd_b40{padding-bottom:40px !important;}
.pd_b45{padding-bottom:45px !important;}
.pd_b50{padding-bottom:50px !important;}
.pd_b70{padding-bottom:70px !important;}
.pd_b150{padding-bottom:150px !important;}

.pd_l10{padding-left:10px !important;}
.pd_l15{padding-left:15px !important;}
.pd_l20{padding-left:20px !important;}
.pd_l30{padding-left:30px !important;}
.pd_l40{padding-left:40px !important;}
.pd_l45{padding-left:45px !important;}
.pd_l50{padding-left:50px !important;}

.pd_r10{padding-right:10px !important;}
.pd_r15{padding-right:15px !important;}
.pd_r20{padding-right:20px !important;}
.pd_r30{padding-right:30px !important;}
.pd_r40{padding-right:40px !important;}
.pd_r45{padding-right:45px !important;}
.pd_r50{padding-right:50px !important;}

/* text-align */
.ta_c{text-align: center !important;}
.ta_l{text-align: left !important;}
.ta_r{text-align: right !important;}

/* align-items */
.al_fls{align-items:flex-start !important;}

/* width */
.w5{width: 5% !important;}
.w10{width: 10% !important;}
.w15{width: 15% !important;}
.w20{width: 20% !important;}
.w23{width: 23% !important;}
.w25{width: 25% !important;}
.w30{width: 30% !important;}
.w35{width: 35% !important;}
.w40{width: 40% !important;}
.w45{width: 45% !important;}
.w49{width: 49% !important;}
.w50{width: 50% !important;}
.w55{width: 55% !important;}
.w60{width: 60% !important;}
.w65{width: 65% !important;}
.w70{width: 70% !important;}
.w75{width: 75% !important;}
.w80{width: 80% !important;}
.w85{width: 85% !important;}
.w90{width: 90% !important;}
.w95{width: 95% !important;}
.w100{width: 100% !important;}

/* font-color */
.font-white{color: #fff !important;}
.font-black{color: #333 !important;}
.font-blue{color: var(--primary-30) !important;}
.font-red{color: var(--error-30) !important;}
.font-mint{color: #009999 !important;}
.font-gray{color:#ccc !important;}

/* bg */
.bg_white{background-color:#fff !important;}

/* font-weight */
.bold{font-weight:700 !important;}

/* line-height */
.l100{line-height:var(--lh-100);}
.l150{line-height:var(--default-lh);}
.l180{line-height:var(--lh-180);}

.title_h1{font-size: var(--fs-40);font-weight: 700;}
.title_h2{font-size: var(--fs-36);font-weight: 700;}
.title_h3{font-size: var(--fs-28);font-weight: 700;}
.title_h4{font-size: var(--fs-24);font-weight: 700;}
.title_h5{font-size: var(--fs-20);font-weight: 700;}

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

.body_txt100{font-size:var(--default-fs);font-weight:400;color:var(--gray-60);line-height:var(--lh-100);}
.default_body_txt{font-size:var(--default-fs);font-weight:400;color:var(--gray-60);line-height:var(--default-lh);margin-bottom:16px;}
.body_txt180{font-size:var(--default-fs);font-weight:400;color:var(--gray-60);line-height:var(--lh-180);}

/* 버튼 */
.cta-lg{background-color: var(--primary-30);height: 56px;border-radius: 10px;color: var(--pure-white);font-size: var(--default-fs);font-weight: 700;padding: 0 18px;transition: all 0.3s;}
.cta-lg:hover{background-color: var(--primary-50);}
.cta-lg:disabled{background-color: var(--gray-30);}
.cta-md{background-color: var(--primary-30);height: 48px;border-radius: 8px;color: var(--pure-white);font-size: var(--default-fs);font-weight: 700;padding: 0 16px;transition: all 0.3s;}
.cta-md:hover{background-color: var(--primary-50);}
.cta-md:disabled{background-color: var(--gray-30);}
.cta-sm{background-color: var(--primary-30);height: 40px;border-radius: 6px;color: var(--pure-white);font-size: var(--fs-14);font-weight: 700;padding: 0 12px;transition: all 0.3s;}
.cta-sm:hover{background-color: var(--primary-50);}
.cta-sm:disabled{background-color: var(--gray-30);}
.cta-xs{background-color: var(--primary-30);height: 34px;border-radius: 4px;color: var(--pure-white);font-size: var(--fs-14);font-weight: 700;padding: 0 10px;transition: all 0.3s;}
.cta-xs:hover{background-color: #375FCC;}
.cta-xs:disabled{background-color: var(--gray-30);}
.l-btns-lg{background-color: var(--pure-white);height: 56px;font-size: var(--default-fs);border-radius: 10px;font-weight: 500;padding: 0 18px;transition: all 0.3s;border: 1px solid var(--gray-30);}
.l-btns-lg:hover{border: 1px solid var(--gray-70);}
.l-btns-lg:disabled{border: 1px solid var(--gray-30);}
.l-btns-md{background-color: var(--pure-white);height: 48px;font-size: var(--default-fs);border-radius: 8px;font-weight: 500;padding: 0 16px;transition: all 0.3s;border: 1px solid var(--gray-30);}
.l-btns-md:hover{border: 1px solid var(--gray-70);}
.l-btns-md:disabled{border: 1px solid var(--gray-30);}
.l-btns-sm{background-color: var(--pure-white);height: 40px;font-size: var(--fs-14);border-radius: 6px;font-weight: 500;padding: 0 12px;transition: all 0.3s;border: 1px solid var(--gray-30);}
.l-btns-sm:hover{border: 1px solid var(--gray-70);}
.l-btns-sm:disabled{border: 1px solid var(--gray-30);}
.l-btns-xs{background-color: var(--pure-white);height: 34px;font-size: var(--fs-14);border-radius: 4px;font-weight: 500;padding: 0 10px;transition: all 0.3s;border: 1px solid var(--gray-30);}
.l-btns-xs:hover{border: 1px solid var(--gray-70);}
.l-btns-xs:disabled{border: 1px solid var(--gray-30);}

.ico_go_link{display:flex;gap:8px;align-items:center;}
.ico_go_link::before{content:'';width:20px;height:20px;background:url(../images/tabler-icon-copy.png);}
/* 체크박스 */
.chk-lg{position:relative;}
.chk-lg>input[type="checkbox"]{width: 24px;height: 24px;border: 1px solid var(--gray-30);border-radius: 6px;position:absolute;top:50%;left:0;transform:translateY(-50%);}
.chk-lg>input[type="checkbox"]:checked + label{font-weight: 700;color: var(--pure-black);}
.chk-lg>label{color: var(--gray-60);font-size: var(--default-fs);font-weight: 400;padding-left:32px;}
.chk-lg>label:disabled{color: var(--gray-50);}
.chk-lg:hover>input[type="checkbox"]{border: 1px solid var(--gray-60);}
.chk-lg:hover>label{font-weight: 600;color: var(--pure-black);}
.chk-md{display: inline-flex;gap: 6px;align-items: center;}
.chk-md>input[type="checkbox"]{width: 20px;height: 20px;border: 1px solid var(--gray-30);border-radius: 4px;}
.chk-md>label{color: var(--gray-60);font-size: var(--fs-14);font-weight: 400;}
.chk-md>label:disabled{color: var(--gray-50);}
.chk-md:hover>input[type="checkbox"]{border: 1px solid var(--gray-60);}
.chk-md>input[type="checkbox"]:checked + label{font-weight: 700;color: var(--pure-black);}
.chk-md:hover>label{font-weight: 600;color: var(--pure-black);}
/* 라디오버튼 */
.radio-lg{display: inline-flex;align-items: center;}
.radio-lg:hover>label{font-weight: 600;color: var(--pure-black);}
.radio-lg:hover>label::before{border-color:var(--gray-60);}
.radio-lg>input[type="radio"]{width: 0px;height: 0px;border:none;}
.radio-lg>input[type="radio"]:checked + label{color: var(--pure-black);font-weight: 600;}
.radio-lg>input[type="radio"]:checked + label::before{border:none;background-color:var(--primary-30);}
.radio-lg>input[type="radio"]:checked + label::after{background-color:#fff;top:7px;left:7px;}
.radio-lg>input[type="radio"]:disabled + label{color: var(--gray-50);}
.radio-lg>input[type="radio"]:disabled + label::before{background-color:var(--gray-10);}
.radio-lg>input[type="radio"]:disabled + label::after{background-color:var(--gray-30);}
.radio-lg>label{font-size: var(--default-fs);position:relative;padding-left:32px;color:var(--gray-60);}
.radio-lg>label::before{content:'';display:block;width:24px;height:24px;border-radius:50%;background-color:#fff;border:1px solid var(--gray-30);position:absolute;top:0;left:0;}
.radio-lg>label::after{content:'';display:block;width:10px;height:10px;border-radius:50%;background-color:var(--gray-20);position:absolute;top:8px;left:8px;}
.radio-lg>label:hover{font-weight: 600;color: var(--pure-black);}
.radio-md{display: inline-flex;align-items: center;}
.radio-md:hover>label{font-weight: 600;color: var(--pure-black);}
.radio-md:hover>label::before{border-color:var(--gray-60);}
.radio-md>input[type="radio"]{width: 0px;height: 0px;border:none;}
.radio-md>input[type="radio"]:checked + label{color: var(--pure-black);font-weight: 600;}
.radio-md>input[type="radio"]:checked + label::before{border:none;background-color:var(--primary-30);}
.radio-md>input[type="radio"]:checked + label::after{background-color:#fff;top:6px;left:6px;}
.radio-md>input[type="radio"]:disabled + label{color: var(--gray-50);}
.radio-md>input[type="radio"]:disabled + label::before{background-color:var(--gray-10);}
.radio-md>input[type="radio"]:disabled + label::after{background-color:var(--gray-30);}
.radio-md>label{font-size: var(--fs-14);position:relative;padding-left:26px;color:var(--gray-60);}
.radio-md>label::before{content:'';display:block;width:20px;height:20px;border-radius:50%;background-color:#fff;border:1px solid var(--gray-30);position:absolute;top:0;left:0;}
.radio-md>label::after{content:'';display:block;width:8px;height:8px;border-radius:50%;background-color:var(--gray-20);position:absolute;top:7px;left:7px;}

/* 탭메뉴 */
.tab_menu{display: flex;padding: 4px;border-radius: 12px;border: 1px solid var(--gray-20);background-color: var(--wbg-10);width: 100%;margin-top:24px;}
.tab_menu>li{flex:1;}
.tab_menu>li>a{padding: 8px 16px;border-radius: 8px;display: block;color: var(--gray-60);font-size: var(--default-fs);font-weight: 500;width: 100%;height: 44px;display: flex;align-items: center;justify-content: center;text-align:center;}
.tab_menu>li.on>a{border: 1px solid var(--primary-40);background-color: var(--primary-30);color: var(--pure-white);}
/* 텍스트박스 */
.ipt-md{height: 48px;padding: 0 16px;font-size: var(--default-fs);border: 1px solid var(--gray-30);border-radius: 8px;}
.ipt-md:focus{outline: none;border: 1px solid var(--gray-70);}
.ipt-md:disabled{background-color: var(--wbg-10);}
.ipt-sm{height: 48px;padding: 0 12px;font-size: var(--fs-14);border: 1px solid var(--gray-30);border-radius: 6px;}
.ipt-sm:disabled{background-color: var(--wbg-10);}
.ipt-sm:focus{outline: none;border: 1px solid var(--gray-70);}

/* 선택 */
select{-webkit-appearance:none; /* for chrome */ -moz-appearance:none; /*for firefox*/appearance:none;background:url(../images/tabler-icon-chevron-down.svg) no-repeat 90% 50% #fff;background-size:20px 20px;}
select::-ms-expand{display:none;/*for IE10,11*/}
.select-md{width: 160px;height: 48px;padding: 0 16px;font-size: var(--default-fs);border-radius: 8px;border: 1px solid var(--gray-30);}
.select-md:disabled{background-color: var(--wbg-10);}
.select-md>option{font-size: var(--default-fs);}
.select-sm{width: 120px;height: 40px;padding: 0 12px;font-size: var(--fs-14);border-radius: 6px;border: 1px solid var(--gray-30);}
.select-sm:disabled{background-color: var(--wbg-10);}
.select-sm>option{font-size: var(--fs-14);}

/* table */
.tb_type01{border-top:1px solid #000;}
.tb_type01 th{background-color:var(--wbg-10);border-right:1px solid var(--gray-20);border-bottom:1px solid var(--gray-20);padding:12px 0px;font-size:var(--default-fs);font-weight:700;color:var(--gray-70);}
.tb_type01 th:last-child{border-right:none;}
.tb_type01 td{background-color:#fff;text-align:center;padding:16px 10px;border-right:1px solid var(--gray-20);border-bottom:1px solid var(--gray-20);font-weight:400;font-size:var(--default-fs);color:var(--gray-60);}
.tb_type01 td[rowspan], .tb_type01 th[rowspan] {border-right: 1px solid var(--gray-20);border-left: 1px solid var(--gray-20);}
.tb_type01 tr > *:last-child {border-right: none;}
.tb_type01 th:first-child, .tb_type01 td:first-child {border-left: none;}

.notice-table{border-top:2px solid #000;}
.notice-table>tbody>tr:hover{background-color:var(--wbg-10);}
.notice-table>tbody>tr:hover .board_title{color:var(--primary-40);font-weight:700;}
.notice-table th{padding:12px 16px;font-size:var(--default-fs);font-weight:700;border-bottom:1px solid var(--gray-60);}
.notice-table td{padding: 31px 16px; text-align:center;border-bottom:1px solid var(--gray-20);}
.notice-table td .poster, .notice-table td .viewers{display:flex;gap:6px;color:var(--gray-60);justify-content:center;align-items:center;}
.notice-table .board_num{font-size:var(--default-fs);color:var(--gray-70);font-weight:500;}
.notice-table .board_title{font-size:var(--default-fs);color:var(--gray-70);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notice-table .poster::before{content:'';display:block;width:20px;height:20px;background:url(../images/tabler-icon-user.png) no-repeat;}
.notice-table .viewers::before{content:'';display:block;width:20px;height:20px;background:url(../images/tabler-icon-eye.png) no-repeat;}
.notice-table .edit_date{color:var(--gray-60);}

/* 에러 페이지 */
.err-img{margin-bottom:24px;}
.error-tit{font-size:28px;margin-bottom:12px;}
.error-txt{font-size:var(--default-fs);color:var(--gray-60);margin-bottom:60px;}
.error-btn{display:inline-flex;justify-content:center;align-items:center;width:200px;height:56px;}


@media print {
    body * {
        visibility: hidden;
    }

    .contents, .contents * {
        visibility: visible;
        width:100%;
    }

    /* 프린트할 때 #root를 화면 좌측 상단에 정렬 */
    .contents {
        position: absolute;
        left: 0;
        top: 0;
        width:100%;
    }
}