@charset "utf-8";
:root { 
    --black: #222222; 

    --gray-05: #fbfbfb; 
    --gray-10: #f5f5f5; 
    --gray-20: #e8e8e8; 
    --gray-30: #cccccc; 
    --gray-40: #aaaaaa; 
    --gray-60: #999999; 
    --gray-70: #888888; 
    --gray-80: #555555;
 
    --primary: #1a5ab2; 
    --error: #ff4d4f;
}

/* hide */
.hide { display: none !important; } 

/* gap */
.mt0 { margin-top: 0 !important; } 
.mt04 { margin-top: 4px !important; } 
.mt08 { margin-top: 8px !important; } 
.mt12 { margin-top: 12px !important; } 
.mt16 { margin-top: 16px !important; } 
.mt24 { margin-top: 24px !important; } 
.mt36 { margin-top: 36px !important; } 
.mt48 { margin-top: 48px !important; } 
.mb0 { margin-bottom: 0 !important; } 

/*? btn */
.btn { font-weight: 500; border-radius: 4px; display: inline-block; } 
.btn.type_primary { color: #ffffff; background: var(--primary); } 
.btn.type_gray { color: var(--black); background: var(--gray-20); } 



/*! ─────────────────── loading ─────────────────── */
#loading { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); overflow: hidden; z-index: 3000; } 
#loading .loading_wrap { position: fixed; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: auto; min-width: 380px; text-align: center; padding: 16px; z-index: 3000; overflow: hidden; } 
#loading .loading_wrap h2 { position: relative; font-size: 38px; font-weight: 700; color: #ffffff; line-height: 40px; letter-spacing: -1px; display: inline-block; margin-bottom: 32px; } 
#loading .loading_wrap h2::before,
#loading .loading_wrap h2::after { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 8px; background: url(../image/icon/icon_dot.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; } 
#loading .loading_wrap h2::before { left: -100px; } 
#loading .loading_wrap h2::after { right: -100px; } 
#loading .loading_wrap p { font-size: 28px; font-weight: 400; color: #ffffff; line-height: 38px; letter-spacing: -1px; } 

/*! ─────────────────── Popup ─────────────────── */
#popup { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 2000; }
#popup .popup_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }
#popup .popup_wrap { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; padding: 48px 24px 30px; background: #ffffff; border-radius: 12px; z-index: 3000; overflow: hidden; }
#popup .popup_wrap.type_full { top: 0; width: 100%; height: 100vh; border-radius: 0; }
#popup .popup_wrap.type_center { top: 50%; transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 432px; height: fit-content; }
#popup .popup_wrap.type_toast { bottom: -100%; height: fit-content; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: bottom 0.5s; }
#popup.on .popup_wrap.type_toast { bottom: 0; }
#popup .popup_title { font-size: 20px; font-weight: 700; color: var(--black); line-height: 28px; text-align: center; margin-bottom: 8px; }
#popup .popup_text { font-size: 16px; font-weight: 400; color: var(--gray-80); line-height: 24px; text-align: center; margin-bottom: 16px; }
#popup .popup_btn_box { display: flex; justify-content: space-between; padding-top: 24px; }
#popup .popup_btn_box .btn { width: 100%; font-size: 14px; font-weight: 500; line-height: 48px; text-align: center; }
#popup .popup_btn_box .btn + .btn { margin-left: 8px; }

/*! ─────────────────── Layout ─────────────────── */
html,body { background: #ffffff; } 
#wrap { position: relative; } 
#header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; padding: 18px 5%; background: #ffffff; border-bottom: 1px solid var(--gray-20); z-index: 100;} 
#header .header_inner { display: flex; align-items: center; justify-content: space-between; background-color: #fff;}
#header .header_left {display: flex; align-items: center; padding-left: 160px;}
#header .header_left {margin-left: 30px;}
#header .header_left button {position: relative; display: inline-block; padding: 4px 24px; min-width: 100px; background: none; margin-right: 12px;}
#header .header_left button::after {content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--primary); transition: all 0.3s;}
#header .header_left button:hover::after {width: 100%;}
#header .header_left button:last-child { margin-right: 0; }
#header .header_right a { color: var(--gray-80); font-size: 14px; display: inline-block;}
#header .header_right .join::before {content: "|"; display: inline-block; font-size: 14px; color: var(--gray-80); margin: 0 6px;}
#header .header_right .mymenu {padding: 4px 14px; border-radius: 4px; font-size: 14px; margin-left: 8px;}
#header #logo { position: absolute; top: 18px; left: 5%; display: inline-block; } 
#header #logo a { width: 160px; height: 24px; background: url(../image/logo.svg) no-repeat left center; background-size: contain; text-indent: -9999px; overflow: hidden; display: inline-block; } 
#header .btn_mo_menu { position: absolute; top: 18px; right: 5%; display: none; width: 24px; height: 24px; background: url(../image/icon_menu_hamburger.svg) no-repeat center center; background-size: contain;}
#container { position: relative; padding-top: 60px; overflow: hidden; } 
#container section { position: relative; } 
#footer { width: 100%; background: #222; } 
#footer h2 { font-size: 30px; font-weight: 700; color: #fff; } 
#footer ul { display: flex; flex-wrap: wrap; max-width: 500px; margin-top: 24px; } 
#footer ul li { font-size: 14px; font-weight: 400; color: #ffffff; line-height: 18px; margin-bottom: 8px; } 
#footer ul li::before { width: 1px; height: 11px; background: var(--gray-40); content: ''; display: inline-block; vertical-align: -1px; margin: 0 8px; } 
#footer ul li:nth-of-type(1):before,
#footer ul li:nth-of-type(4):before { display: none; } 
#footer .copyright { font-size: 14px; font-weight: 400; color: var(--gray-40); margin-top: 16px; } 

.inner { width: 80%; max-width: 1200px; margin: 0 auto; padding: 60px 0; } 
.inner.cont_box {padding: 60px 0 60px 300px; position: relative;}
.sub_top { padding: 40px 0 0; background: rgba(26, 90, 178, 0.1); } 
.sub_title { font-size: 3.6rem; font-weight: 700; color: var(--black); line-height: 80px; } 

.pager_box { display: flex; align-items: center; justify-content: center; margin-top: 16px; } 
.pager_box a { width: 34px; height: 34px; text-align: center; padding-left: 1px; border-radius: 50%; display: inline-block; overflow: hidden; margin: 0 2px; transition: all 0.1s ease-in-out; } 
.pager_box > a { text-indent: -9999px; } 
.pager_box > .btn_prev { background: url(../image/btn_pg_prev.svg) no-repeat center center; background-size: 22px; } 
.pager_box > .btn_next { background: url(../image/btn_pg_next.svg) no-repeat center center; background-size: 22px; } 
.pager_box .pager_number { display: flex; align-items: center; } 
.pager_box .pager_number > a { min-width: 34px; font-size: 15px; font-weight: 700; color: var(--gray-40); line-height: 34px; } 
.pager_box .pager_number > a:hover { color: var(--black); } 
.pager_box .pager_number > a.active { color: #ffffff; background: var(--primary); } 

.nav_box > .btn { font-size: 16px; line-height: 42px; padding: 0 48px; margin: 0 4px; }
.edit_box {display: inline-block; width: 100%; margin-bottom: 20px;}
.edit_box:hover a {background: rgba(26, 90, 178, 0.1);}
.edit_box > a { font-size: 14px; line-height: 36px; padding: 0 24px; width: 100%; text-align: center; transition: all 0.3s;} 

.empty_box { width: 100%; text-align: center; padding: 100px 0; border-bottom: 1px solid var(--gray-20); } 
.empty_box p { font-size: 16px; font-weight: 500; color: var(--gray-40); } 

/* form */
.input_box { position: relative; } 
.form_label { font-size: 16px; font-weight: 700; color: var(--black); line-height: 24px; display: block; margin-bottom: 8px; } 
.form_label em { font-size: 13px; font-weight: 400; color: var(--gray-70); display: inline-block; }
.form_input { width: 100%; height: 40px; font-size: 14px; font-weight: 400; line-height: 20px; padding: 0 16px; border: 1px solid var(--gray-20); border-radius: 6px; transition: all 0.1s ease-in-out; } 
.form_input::placeholder { color: var(--gray-70); }
.form_input:focus { border: 1px solid var(--gray-40); } 
.form_textarea { width: 100%; height: 120px; font-size: 14px; font-weight: 400; line-height: 20px; padding: 16px; border: 1px solid var(--gray-20); border-radius: 6px; resize: none; transition: all 0.1s ease-in-out; } 
.form_textarea:focus { border: 1px solid var(--gray-40); } 
.error_message { display: none; font-size: 14px; font-weight: 400; color: var(--error); padding-top: 4px; } 

.form_input.error,
.form_textarea.error { border: 1px solid var(--error); } 
.error ~ .error_message { display: block; } 

.check_box { display: inline-block; }
.check_box input + label { font-size: 16px; font-weight: 500; color: var(--black); line-height: 24px; display: inline-block; cursor: pointer; }
.check_box input + label .icon_chkbox { width: 24px; height: 24px; background: #ffffff; border: 1px solid var(--gray-20); border-radius: 3px; display: inline-block; vertical-align: -7px; margin-right: 4px; transition: all 0.1s ease-in-out; }
.check_box input + label:hover .icon_chkbox { border: 1px solid var(--gray-40); }
.check_box input:checked + label .icon_chkbox { background: url(../image/icon_check_w.svg) no-repeat center center, var(--primary); background-size: 16px; border: 1px solid var(--primary); }
/*! ─────────────────── Layout ─────────────────── */



/** ─────────────────── aside ─────────────────── */
.aside {position: absolute; left: 0px; padding: 12px 20px; background: var(--gray-05); width: 250px; border-radius: 8px; height: 530px;}
.aside .aside_tit { padding: 8px; color: var(--black); display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.aside .aside_tit .arrow {display: inline-block; width: 10px; height: 10px; background: url(../image/icon_arrow_down.svg) no-repeat center center; transition: all 0.3s;}
.aside .aside_list {padding: 8px; margin-bottom: 8px;}
.aside .aside_list:last-child { margin-bottom: 0;}
.aside .aside_list .sub_menu {font-size: 14px; padding-top: 12px;}
.aside .aside_list.on .aside_tit .arrow { transform: rotate(180deg);}
.aside .aside_list .sub_menu button {display: inline-block; width: calc(100% - 30px); font-size: 14px; color: #444; text-align: left; background: none; transition: all 0.3s;}
.aside .aside_list .sub_menu button:hover {color: #000; text-decoration: underline;}
.aside .aside_list .sub_menu .count{display: flex; align-items: center; justify-content: center; color: #fff; background-color: var(--primary); border-radius: 50%; width: 22px; height: 22px; font-size: 14px;}
.aside li .sub_menu > li {display: flex; align-items: center; justify-content: space-between; padding: 8px; cursor: pointer; min-height: 38px;}

/*! ─────────────────── aside ─────────────────── */



/** ─────────────────── list ─────────────────── */
.board_list_top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; } 
.board_list_top .calendar_box {display: flex; align-items: center; gap: 8px; }
.board_list_top .calendar_box input {padding: 8px; font-size: 14px; border: 1px solid var(--gray-20); border-radius: 6px; display: inline-block; width: 150px;}
.board_list_top input {padding: 8px; font-size: 14px; border: 1px solid var(--gray-20); border-radius: 6px; display: inline-block;}
.board_list_top .select_box { width: 90px; font-size: 14px; font-weight: 400; line-height: 34px; padding: 0 32px 0 8px; background: url(../image/icon_arrow_down.svg) no-repeat calc(100% - 8px) center; background-size: 16px; border: 1px solid var(--gray-20); border-radius: 6px; display: inline-block; } 
.board_list_top .select_box:focus { border: 1px solid var(--gray-40); } 
.board_list_top .search_box { position: relative; display: inline-block;} 
.board_list_top .search_box .input_search { height: 36px; font-size: 14px; font-weight: 400; line-height: 20px; padding: 0 44px 0 12px; border: 1px solid var(--gray-20); border-radius: 6px; } 
.board_list_top .search_box .input_search:focus { border: 1px solid var(--gray-40); } 
.board_list_top .search_box .btn_search { position: absolute; right: 12px; top: 7px; width: 20px; height: 20px; background: url(../image/btn_search.svg) no-repeat center center; background-size: contain; text-indent: -9999px; opacity: 0.8; overflow: hidden; z-index: 1; } 


.board_list_wrap .board_inner {overflow: auto; display: flex; flex-direction: column; overflow-x: auto; overflow-y: hidden; white-space: nowrap;}
.board_list_wrap .w80 { width: 80px; } 
.board_list_wrap .w120 {width: 120px;} 
.board_list_wrap .w200 { width: 260px;}
.board_list_wrap .thead .th {display: inline-block; font-size: 18px; font-weight: 700; color: var(--black); line-height: 24px; text-align: center; padding: 16px; background: var(--gray-05);  border-top: 2px solid var(--black); border-bottom: 1px solid var(--gray-20);}
.board_list_wrap .tbody .td { display: inline-block; font-size: 15px; font-weight: 400; color: var(--gray-80); line-height: 24px; text-align: center; padding: 16px;  background: #ffffff; border-bottom: 1px solid var(--gray-20); } 
.board_list_wrap .tbody .td.subject { text-align: left; } 
.board_list_wrap .tbody .td.subject a { width: 100%; font-size: 16px; font-weight: 700; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 
.board_list_wrap .tbody .td.subject a:hover { color: var(--primary); } 
.board_list_wrap .tbody .td.subject .icon_new { width: 36px; height: 20px; font-size: 10px; font-weight: 500; color: #ffffff; line-height: 19px; text-align: center; background: var(--primary); border-radius: 4px; display: inline-block; vertical-align: 2px; margin-left: 4px; } 
/** ─────────────────── list ─────────────────── */


/** ─────────────────── write ─────────────────── */
.board_write_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; } 
.board_write_wrap > * { width: 100%; margin-bottom: 24px; } 
.board_write_wrap .half { width: calc(50% - 12px); } 
.board_write_wrap .upload_box ul { display: flex; flex-wrap: wrap; }
.board_write_wrap .upload_box ul li { position: relative; width: calc(25% - 18px); background: var(--gray-05); border: 1px solid var(--gray-20); border-radius: 6px; z-index: 0; margin-bottom: 8px; margin-right: 24px; }
.board_write_wrap .upload_box ul li:last-of-type { margin-right: 0; }
.board_write_wrap .upload_box ul li .file_name { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 400; color: var(--black); background: transparent; z-index: -1; }
.board_write_wrap .upload_box ul li .btn_upload { display: block; width: 100%; height: 38px; background: url(../image/icon_plus.svg) no-repeat center center; background-size: 20px; text-indent: -9999px; overflow: hidden; cursor: pointer; }
.board_write_wrap .upload_box ul li .btn_delete { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: url(../image/icon_delete.svg) no-repeat center center; background-size: 18px; text-indent: -9999px; overflow: hidden; opacity: 0.5; }
.board_write_wrap .terms_text_wrap { width: 100%; height: 150px; padding: 16px; border: 1px solid var(--gray-20); border-radius: 4px; overflow-y: scroll; margin-top: 8px; } 
.board_write_wrap .terms_text_wrap p { font-size: 14px; font-weight: 400; color: var(--gray-80); line-height: 20px; word-break: keep-all; }
.calendar_box {display: flex; align-items: center; gap: 12px; } 
.calendar_box input {padding: 8px; font-size: 14px; border: 1px solid var(--gray-20); border-radius: 6px; display: inline-block; width: 50%; min-width: 140px;}
.board_write_wrap .select_box { width: 270px; font-size: 14px; font-weight: 400; line-height: 34px; padding: 0 32px 0 8px; background: url(../image/icon_arrow_down.svg) no-repeat calc(100% - 8px) center; background-size: 16px; border: 1px solid var(--gray-20); border-radius: 6px; display: inline-block; } 
.board_write_wrap .select_box:focus { border: 1px solid var(--gray-40); } 
.board_write_wrap .search_box { position: relative; display: inline-block; margin-left: 4px; } 
.board_write_wrap .search_box .input_search { height: 36px; font-size: 14px; font-weight: 400; line-height: 20px; padding: 0 44px 0 12px; border: 1px solid var(--gray-20); border-radius: 6px; } 
.board_write_wrap .search_box .input_search:focus { border: 1px solid var(--gray-40); } 
.board_write_wrap .search_box .btn_search { position: absolute; right: 12px; top: 7px; width: 20px; height: 20px; background: url(../image/btn_search.svg) no-repeat center center; background-size: contain; text-indent: -9999px; opacity: 0.8; overflow: hidden; z-index: 1; } 
/** ─────────────────── write ─────────────────── */

/*  ─────────────────── media query ───────────────────  */
@media (max-width: 1300px) {
    #header {flex-direction: column; align-items: flex-start; transition: all 0.5s;}
    #header.on {height: 250px;}
    #header .header_inner {position: fixed; top: 60px; left: 0; width: 100%; padding-top: 40px; flex-direction: column; align-items: flex-start; background-color: #fff; padding: 0 5%;}
    #header .header_inner { display: none;}
    #header .header_left {flex-direction: column; align-items: flex-start; margin-left: 0; padding-left: 0; width: 100%;}
    #header .header_left button {width: 100%; text-align: left; min-width: unset; padding: 8px;}
    #header .header_left button:hover {color: var(--primary);}
    #header .header_left button::after {display: none;}
    #header .header_right {display: flex; align-items: center; justify-content: flex-end; width: 100%;}
    #header .btn_mo_menu {display: block;}

    .inner {width: 100%; padding: 60px 20px;}
    .inner.cont_box { padding: 150px 20px 60px;}
    
    .aside {top: 30px; left: 20px; background: none; height: fit-content; width: 100%; padding: 12px 0; z-index: 2;}
    .aside ul {display: flex; align-items: flex-start; width: 100%; gap: 8px;}
    .aside .aside_list {position: relative; width: 160px; border-radius: 8px; border: 1px solid var(--gray-30); margin: 0; background: #fff;}
    .aside .aside_list.on {height: 214px; background-color: #fff;}
    .aside .aside_list.on:nth-child(2) {height: 250px;}
    .aside .aside_list .sub_menu {background-color: #fff;}

    .edit_box {width: 160px; margin-bottom: 10px;}

    .board_list_top {flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 12px;}
    .board_list_top .right {display: flex; align-items: center; flex-wrap: wrap; gap: 8px;}
    .board_list_top .right .edit_box {margin-left: 0;}
    .board_list_top .select_box {width: 160px;}
    .board_list_top .calendar_box input {width: 160px;}

    .board_write_wrap .input_box.half {width: 100%;}
    .board_write_wrap .calendar_box input {max-width: 250px;}
    .board_write_wrap .select_box {width: 100%;}
}