@charset "UTF-8";





.wrap {  position: relative; min-width: 128rem; min-height: 100vh; }

/* login */
.login { background-color: #F5F7FA; }
.login > .login_box { position: absolute; top: 50%; left: 50%; padding: 4rem; border: 0.1rem solid #ededef; box-sizing: border-box; background-color: #fff; transform: translate(-50%, -50%); }
.login > .login_box > h1 { width: 100%; height: 3.2rem; margin-bottom: 4rem;  background-image: url("/resources/images/logo.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; }
.login > .login_box > input { display: block; width: 28rem; height: 4rem; padding: 0 1rem 0 1.6rem; border: 0.1rem solid #ededef; box-sizing: border-box; margin-bottom: 1rem; font-size : 1.6rem; background-color: #fff; background-size: 4rem; background-position: left center; background-repeat: no-repeat; transition: all 300ms ease; }
.login > .login_box > input:hover,
.login > .login_box > input:focus { border: 0.1rem solid #4C7BE0; }
.login > .login_box > input::placeholder { color : #aaa; }
.login > .login_box > input.input_pw { margin-bottom: 4rem; }
.login > .login_box > button { width: 100%; height: 5rem; font-size: 1.6rem; font-weight: 600; color: #fff; background-color: #4F68A1; transition: all 300ms ease; }
.login > .login_box > button:hover,
.login > .login_box > button:focus { color: #ededef; background-color: #304E90; }


/* admin */
.admin input[type="text"] { min-width: 24rem; height : 4rem; border: 0.1rem solid #ededef; padding: 0 1rem 0 1rem; box-sizing: border-box; font-size: 1.4rem; transition: all 300ms ease;}
.admin select { min-width: 12rem; height: 4rem; border: 0.1rem solid #ededef; padding: 0 3.6rem 0 1rem; box-sizing: border-box; background-image: url("/resources/images/select.svg"); background-size: 1.6rem; background-position: right 1rem center; background-repeat: no-repeat; font-size: 1.4rem; transition: all 300ms ease;}
.admin input:hover,
.admin select:hover,
.admin input:focus,
.admin select:focus { border-color : #4C7BE0; }
.admin .btn_color_01 { background-color: #4F68A1; color: #fff; transition: all 300ms ease; }
.admin .btn_color_01:hover,
.admin .btn_color_01:focus { color: #ededef; background-color: #304E90; }
.admin .btn_color_02 { background-color: #98A7C8; color: #fff; transition: all 300ms ease; }
.admin .btn_color_02:hover,
.admin .btn_color_02:focus { color: #ededef; background-color: #808da8; }
.admin .btn_m { min-width: 10rem; height: 4rem; padding: 0 1rem; box-sizing: border-box; font-size: 1.4rem; font-weight: 600;}
.admin .btn_l { min-width: 12rem; height: 4rem; padding: 0 2rem; box-sizing: border-box; font-size: 1.4rem; font-weight: 600;}

/* header */
.admin > .header { display: flex; width: 100%; height: 4rem; padding: 0 2rem; justify-content: space-between; background-color: #304E90; }
.admin > .header > h1 { height: 0; box-sizing: border-box; font-size: 1.6rem; font-weight : 500; line-height: 4rem; color: #fff; }
.admin > .header > button { width: 4rem; height: 100%; background-image: url("/resources/images/logout_btn.svg"); background-size: 1.8rem; background-repeat: no-repeat; background-position: center; transition: all 300ms ease; }
.admin > .header > button:hover,
.admin > .header > button:focus { transform: translateY(10%); opacity: 0.5;}

/* category */
.admin > .category { position: fixed; z-index: 1; top: 4rem; left: 0; width: 100%; height: 4rem; box-sizing: border-box; background-color: #4F68A1; }
.admin > .category > ul { display: flex; }
.admin > .category > ul > li { width: 10rem; line-height: 4rem; font-size: 1.5rem; font-weight: 700; text-align: center; color: #fff; cursor: pointer; }
.admin > .category > ul > li.act { color: #304E90; background-color: #fff; }

/* content */
.admin > .content { width: 100%; max-width: unset; height: auto; padding-top: 8rem;}
.admin > .content > h2 { width: 100%; height: 4rem; padding: 0 2rem; box-sizing: border-box; border-bottom: 0.1rem solid #ededef; line-height: 4rem; font-size: 1.4rem; font-weight: 600; }
.admin > .content .list { display: none; width: 100%; height: auto; padding: 2rem; box-sizing: border-box; }
.admin > .content .list.act { display: block; }
.admin > .content .list > p { margin-bottom: 2rem; font-size: 1.4rem; }
.admin > .content .list > p > span { color: #4C7BE0; }
.admin > .content .list > .list_header { display: flex; width: 100%; margin-bottom: 1rem; justify-content: space-between; }
.admin > .content .list > .list_header > .list_search { display: flex; }
.admin > .content .list > .list_header > .list_search > select,
.admin > .content .list > .list_header > .list_search > input { margin-right: 0.5rem; }
.admin > .content .list > .list_header > .list_search > .search_btn { width: 4rem; height: 4rem; border: 0.1rem solid #ededef; background-color: #F5F7FA; background-image: url("/resources/images/search.svg"); background-position: center; background-size: 1.6rem; background-repeat: no-repeat; transition: all 300ms ease;}
.admin > .content .list > .list_header > .list_search > .search_btn:hover,
.admin > .content .list > .list_header > .list_search > .search_btn:focus { border-color: #4C7BE0; background-image: url("/resources/images/search_hover.svg");}

/* table */
.admin .table_wrap { border: 0; }
.admin .table_wrap .table { width: 100%; border: 0.1rem solid #ededef; box-sizing: border-box; table-layout: fixed; border-collapse: collapse; background-color: #FAFBFD; }
.admin .table_wrap .table > thead { height: 3rem; background-color: #98A7C8; }
.admin .table_wrap .table > thead th { font-size: 1.4rem; font-weight: 600; text-align: center; color: #fff; }
.admin .table_wrap .table > thead tr:hover { background-color: #98A7C8;}
.admin .table_wrap .table > tbody tr { border-bottom: 0.1rem solid #ededef; transition: all 300ms ease; }
.admin .table_wrap .table > tbody tr:hover { background-color: #F2F3F6; cursor: pointer; }
.admin .table_wrap .table > tbody td { height: 4rem; padding: 0 1rem; border-right: 0.1rem solid #ededef; box-sizing: border-box; font-size: 1.6rem; font-weight: 200; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.admin .table_wrap .table + .empty_list { position: relative; width: 100%; height: 40rem; border: 0.1rem solid #ededef; border-top: 0; box-sizing: border-box; background-color: #FAFBFD; }
.admin .table_wrap .table + .empty_list > p { position: absolute; top: 50%; left: 50%; font-size: 1.6rem; font-weight: 200; color: #555; transform: translate(-50%, -50%); }

/* paging */
.admin .paging { display: block; margin-top: 2rem; }
.admin .paging ul { display: flex; justify-content: center;}
.admin .paging ul li { width: 3rem; height: 3rem; }
.admin .paging ul li button {  width: 100%; height: 100%; padding: 0.4rem 0; box-sizing: border-box; border: 0.1rem solid #ededef; font-size: 1.2rem; text-align: center; color: #aaa; cursor: pointer; transition: all 300ms ease; }
.admin .paging ul li:hover button { background-color: #eee; }
.admin .paging ul li.act button { border-color: #304E90; background-color: #304E90; color : #fff; }
.admin .paging ul li.prev button,
.admin .paging ul li.next button { background-image: url("/resources/images/select.svg"); background-size: 1.2rem; background-position: center; background-repeat: no-repeat; }
.admin .paging ul li.prev button { transform: rotate(90deg); }
.admin .paging ul li.next button { transform: rotate(-90deg); }
.admin .paging ul li button:disabled { opacity: 0.5; cursor: unset; }
.admin .paging ul li:hover button:disabled { background-color: #fff; }

/* detail */
.admin .detail { width: 100%; padding: 2rem; box-sizing: border-box; }
.admin .detail .input_box { display: flex; width: 100%; margin-bottom: 2rem; align-items: center; }
.admin .detail .input_box label { width: 15rem; padding-right: 0.5rem; box-sizing: border-box; font-size: 1.4rem; }
.admin .detail .input_box input { width: calc(100% - 15rem); }
.admin .detail .input_box.date input[type="text"] { width: calc(100% -10rem); background-color: #FAFBFD; font-weight: 200; color: #aaa; }
.admin .detail .input_box.textediter { align-items: flex-start; }
.admin .detail .input_box.textediter > div { width: calc(100% - 15rem); height: 50rem; border: 0.1rem solid #ededef; box-sizing: border-box; }
.admin .detail .input_box .file_wrap { display: flex; flex-grow: 1; }
.admin .detail .input_box .file_wrap .file { width: 0; opacity: 0; }
.admin .detail .input_box .file_wrap .file_name { width: calc(100% - 10rem); height: 4rem; padding: 0.8rem 1rem; border: 0.1rem solid #ededef; box-sizing: border-box; }
.admin .detail .input_box .file_wrap .file_name > p { display: flex; font-size: 1.4rem; line-height: 2.4rem; gap: 1.2rem; }
.admin .detail .input_box .file_wrap .file_name > p > button { width: 2.4rem; height: 2.4rem; border: 0.1rem solid #ededef; background-image: url("/resources/images/close.svg"); background-size: 1.4rem; background-position: center; background-repeat: no-repeat; background-color: #F5F7FA; transition: all 300ms ease; }
.admin .detail .input_box .file_wrap .file_name > p > button:hover,
.admin .detail .input_box .file_wrap .file_name > p > button:focus { border: 0.1rem solid #4C7BE0; background-color: #eee; }
.admin .detail .input_box .file_wrap .btn_file { width: 10rem; height: 4rem; padding: 0; border: 0.1rem solid #ededef; border-left : 0.1rem solid transparent; box-sizing: border-box; text-align: center; line-height: 4rem; background-color: #F5F7FA; cursor: pointer; transition: all 300ms ease; }
.admin .detail .input_box .file_wrap .btn_file:hover,
.admin .detail .input_box .file_wrap .btn_file:focus { border: 0.1rem solid #4C7BE0; background-color: #eee;}
.admin .detail .flex_box { display: flex; justify-content: space-between; }
.admin .detail .flex_box > .input_box { width: calc(50% - 2rem); }
.admin .detail .flex_box > .input_box input,
.admin .detail .flex_box > .input_box select { width: calc(100% - 15rem); }

/* btn_area */
.admin .btn_area { display: flex; margin-top: 4rem; justify-content: center; }
.admin .btn_area > button { margin-right: 1rem; }
.admin .btn_area > button:last-child { margin-right: 0; }