/* 공통 */
.project_wrap { width:100%; min-width:1024px; height:100vh; margin:0 auto; display:flex; }
.button_box { display:flex; gap:10px; }
button { min-width:100px; height:40px; padding:0 15px; border:1px solid #ddd; border-radius:5px; background:#fff; }
button:hover { background:#f9f9f9; }
button.main { border:0; color:#fff; background:#6639E5; }
button.main:hover { background:#5529d1; }
button.low { height:36px; }
button.barcodeScan { background:#000; color:#fff; }
.dropdown { display:inline-block; }
.dropdown button { min-width:140px; height:36px; padding:0 10px; text-align:left; font-weight:400; border:1px solid #ddd; border-radius:5px; display:flex; align-items:center; justify-content:space-between; background:none; }
.dropdown .dropdown-menu { width:100%; min-width:auto; padding:0; overflow:auto; max-height:277px; }
.dropdown .dropdown-menu li a { color:#475569; }
.dropdown .dropdown-menu li .dropdown_list { width:100%; padding:10px; border-radius:5px; display:flex; align-items:center; cursor:pointer; }
.dropdown .dropdown-menu li .dropdown_list:hover { font-weight:500; background:#eaeef3; }
.check_box { position:relative; }
.check_box input { display:none; }
.check_box label::after { content:''; display:block; width:15px; height:15px; border:1px solid #acb4bc; border-radius:3px; position:absolute; top:50%; left:0; transform:translateY(-50%); background:#fff; }
.check_box input:checked + label::after { border:0; background:#6639E5; }
.check_box input:checked + label::before { content:''; display:block; width:5px; height:7px; border-bottom:2px solid #fff; border-right:2px solid #fff; position:absolute; top:7px; left:5px; transform:translateY(-50%) rotate(45deg); z-index:1; }
.red_color { color:#EF4444!important; }
/*pagination*/
.table_btm nav { text-align:center; flex:1 1 auto; display:inline-block; }
.pagination { margin:25px 0 0 0; }
.pagination>li>a, .pagination>li>span { border-radius:5px; color:inherit; border:0; background-color:#fff; }
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {background-color:#6639E5; border-color:#6639E5;}
.pagination>li>a:hover, .pagination>li>span:hover { color:#6639E5; background:#e8ecff; }

/* aside */
aside { width:230px; height:100%; padding:0 20px; border-right:1px solid #e2e8f0; }
aside .top_box { height:85px; display:flex; align-items:center; justify-content:center; flex-direction:row-reverse; gap:5px; }
aside .top_box .logo { font-size:22px; font-weight:700; }
aside .top_box .fare { padding:3px 8px; border-radius:3px; font-size:12px; font-weight:700; color:#6639E5; background:#e8ecff; display:inline-block; }
aside nav { height:calc(100% - 110px); /*margin-top:20px;*/ overflow-y:auto; -ms-overflow-style:none; }
aside nav::-webkit-scrollbar{ display:none; }
aside nav ul li { margin-top:10px; }
aside nav ul li span { color:#9ba9bd; }
aside nav ul li:first-child { margin:0; }
aside nav ul li button.sub_btn { width:100%; height:40px; padding:0 15px; line-height:40px; border:0; display:flex; align-items:center; justify-content:space-between; background:none; }
aside nav ul li button.sub_btn .icon_box { width:22px; height:22px; display:inline-block; }
aside nav ul li button.sub_btn .icon_box svg { fill:#9ba9bd; vertical-align:top; }
aside nav ul li button.sub_btn.active .icon_box svg { fill:#6639E5; }
aside nav ul li button.sub_btn:hover .icon_box svg { fill:#6639E5; }
aside nav ul li.active button.sub_btn .icon_box svg { fill:#6639E5; }
aside nav ul li.active button.sub_btn { background:#e8ecff; }
aside nav ul li.active button.sub_btn span { color:#6639E5; font-weight:700; }
aside nav ul li button.sub_btn.open .arrow { background-position:-25px 0; }
aside nav ul li button.sub_btn.open:hover .arrow { background-position:-25px -25px; }
aside nav ul li.active button.sub_btn .arrow { background-position:0 -25px; }
aside nav ul li.active button.sub_btn:hover .arrow { background-position:0 -25px; }
aside nav ul li.active button.sub_btn.open .arrow { background-position:-25px -25px; }
aside nav ul li.active button.sub_btn.open:hover .arrow { background-position:-25px -25px; }
aside nav ul li button.sub_btn div { display:flex; align-items:center; gap:10px; font-weight:400; }
aside nav ul li button.sub_btn .arrow { width:25px; height:25px; display:inline-block; background:url('/image/aside.svg')no-repeat 0 0; }
aside nav ul li button.sub_btn:hover .arrow { background-position:0 -25px; }
aside nav ul li button.sub_btn:hover span { color:#6639E5; }
aside nav ul li a { width:100%; height:40px; padding:0 15px; line-height:40px; border-radius:10px; display:flex; align-items:center; gap:10px; }
aside nav ul li a .icon_box { width:22px; height:22px; display:inline-block; }
aside nav ul li a .icon_box svg { fill:#9ba9bd; vertical-align:top; }
aside nav ul li a:hover .icon_box svg { fill:#6639E5; }
aside nav ul li.active a .icon_box svg { fill:#6639E5; }
aside nav ul li a:hover span { color:#6639E5; }
aside nav ul li.active > a { background:#e8ecff; }
aside nav ul li.active > a .text_box { color:#6639E5; font-weight:700; }
aside nav ul li ul { display:none; }
aside nav ul li.active ul.in { display:block; }
aside nav ul li ul li { padding-left:32px; }
aside nav ul li ul li.active > a { background:none; }
aside nav ul li ul li:first-child { margin-top:10px; }
aside nav ul li button.open + ul { display:block; }
aside nav ul li button.open img { transform:rotate(-90deg); }
aside.small { width:62px; padding:0 10px; }
aside.small .top_box { justify-content:center; }
aside.small .top_box .fare { display:none; }
aside.small .top_box .logo span { display:none; }
aside.small .top_box .toggle_btn img { transform:rotate(0); }
aside.small nav ul li button.sub_btn { padding:0 10px; }
aside.small nav ul li a { padding:0 10px; }
aside.small nav ul li a .text_box { display:none; }
aside.small nav ul li div .text_box { display:none; }
aside.small nav ul li button.sub_btn .arrow { display:none; }
aside.small nav ul li button.sub_btn img { display:none; }
aside.small ~ main { width:calc(100% - 61px); }

/* main */
main { width:calc(100% - 230px); height:100%; }
.use_product { display:flex; gap:10px; flex:1 1 auto; justify-content:flex-end; }
.use_product li:not(.fare) { padding:0 10px; line-height:28px; color:#6639E5; font-weight:700; border-radius:5px; background:#e8ecff; }
.use_product li.member { color:#EF4444; background:#FEE2E2; }
.use_product li.fare button { min-width:auto; height:40px; padding:0 10px; font-weight:500; display:flex; align-items:center; }
.use_product li.fare button span { width:25px; height:25px; margin-right:3px; display:inline-block; background:url('/image/iconBox.svg')no-repeat -25px -25px; }
main .top_box { height:70px; padding:0 20px; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
main .top_box .toggle_btn { min-width:auto; height:auto; padding:0; border:1px solid #e2e8f0; border-radius:5px; background:#fff; }
main .top_box .toggle_btn img { transform:rotate(180deg); }
main .top_box .toggle_btn.small img { transform:rotate(0deg); }
main .top_box div { display:flex; gap:20px; }
main .top_box div ul.right_btn { display:flex; align-items:center; gap:20px; }
main .top_box div ul.right_btn li .guide_btn { display:flex; align-items:center; }
main .top_box div ul.right_btn li .guide_btn span { width:25px; height:25px; margin-right:3px; display:inline-block; background:url('/image/iconBox.svg')no-repeat 0 -25px; }
main .top_box div ul.right_btn li .notifi_btn { width:25px; min-width:auto; height:25px; padding:0; border:0; position:relative; background:url('/image/iconBox.svg')no-repeat -50px -25px; }
main .top_box div ul.right_btn li .notifi_btn.on::after { content:''; display:block; width:5px; height:5px; border-radius:999px; position:absolute; top:0; right:0; background:#ef4444; }
main .top_box .dropdown button { width:35px; min-width:auto; height:35px; padding:0; font-weight:500; border:0; border-radius:500px; display:flex; justify-content:space-between; align-items:center; overflow:hidden; }
main .top_box .dropdown button img { width:100%; }
main .top_box .dropdown button span { margin-left:10px; }
main .top_box .dropdown .dropdown-menu { min-width:200px; left:auto; right:0; }
main .top_box .dropdown .dropdown-menu li.user { padding:0 10px; margin:10px 0; line-height:30px; font-weight:500; display:flex; align-items:center; gap:10px; }
main .top_box .dropdown .dropdown-menu li.user div { width:35px; height:35px; border-radius:999px; overflow:auto; }
main .top_box .dropdown .dropdown-menu li.user div img { width:100%; height:100%; object-fit:cover; }
main .top_box .dropdown .dropdown-menu li a span { width:22px; height:22px; margin-right:5px; display:inline-block; background:url('/image/myIcon.svg')no-repeat; background-size:44px; }
main .top_box .dropdown .dropdown-menu li.account a span { background-position:-22px 0; }
main .btm_box { height:calc(100vh - 70px); padding:20px; overflow:auto; background:#f1f5f9; position:relative; }
main .btm_box .title { margin-bottom:30px; font-size:18px; font-weight:700; }
main .btm_box h3 { font-size:20px; font-weight:700; }
main .btm_box p.sub { width:100%; margin-top:5px; font-size:14px; color:#64748B; display:block; word-break:keep-all; }
main .btm_box .back_btn { height:auto; padding:0; margin-bottom:20px; border:0; display:flex; align-items:center; }
main .btm_box .back_btn img { transform:rotate(180deg); }
main .btm_box .back_btn:hover { background:none; }
main .btm_box > div { height:calc(100% - 42px); margin-top:20px; padding:20px; border-radius:5px; box-shadow:0 2px 5px rgba(0,0,0,0.06); background:#fff; }
main .btm_box .table_wrap { overflow-x:auto; overflow-y:hidden; }
main .btm_box .table_box { padding:0;  gap:20px; box-shadow:none; background:none; }
main .btm_box .table_box .label { padding:15px 20px; font-size:15px; font-weight:600; }
main .btm_box .table_box .button_box { padding:10px 0; justify-content:flex-end; }
main .btm_box .table_box table { table-layout:fixed; }
main .btm_box .table_box table tr { height:40px; border-top:1px solid #e2e8f0; }
main .btm_box .table_box table tr:first-child { border:0; }
main .btm_box .table_box table tr:last-child { border-bottom:1px solid #e2e8f0; }
main .btm_box .table_box table tr th { padding:0 10px; font-weight:500; color:#64748b; position:sticky; top:0; background:#f1f5f9; z-index:1; }
main .btm_box .table_box table tr th:first-child { padding-left:20px; }
main .btm_box .table_box table tr th:last-child { padding-right:20px; }
main .btm_box .table_box table tr td { padding:0 10px; }
main .btm_box .table_box table tr td:first-child { padding-left:20px; }
main .btm_box .table_box table tr td:last-child { padding-right:20px; }
main .btm_box .table_box table tr td p { width:100%; }
main .btm_box .table_box table tr td p.overflow { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
main .btm_box .table_box table tr td a { width:100%; color:#0257AC; }
main .btm_box .table_box table tr td a:hover { text-decoration:underline; }
main .btm_box .table_box table tr td p.no_cont { width:100%; max-width:none; padding:80px 0; font-weight:500; text-align:center; }
main .btm_box .table_box table tr td .photo { width:30px; height:30px; border-radius:5px; background:#ddd; overflow:hidden; }
main .btm_box .table_box table tr td .photo img { width:100%; height:100%; object-fit:cover; }
main .btm_box .table_box table tr td .delete_btn { min-width:auto; width:22px; height:22px; padding:0; border:0; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#D9D9D9; }
main .btm_box .table_box table tr td .delete_btn span { width:18px; height:18px; display:inline-block; background:url('/image/iconBox.svg')no-repeat 0 -36px; background-size:72px; }
main .btm_box .table_box .table_btm { display:flex; justify-content:flex-end; align-items:center; position:relative; }
main .btm_box .table_box .table_btm .button_box { position:absolute; top:0; right:0; }
main .btm_box .basic .table_box { height:calc(100% - 36px); }
main .btm_box .basic .table_box .table_wrap { height:calc(100% - 56px); border-bottom:1px solid #e2e8f0; border-top:1px solid #e2e8f0; overflow:auto; }
main .btm_box ul.info_list { width:50%; }
main .btm_box ul.info_list li { margin-bottom:25px; }
main .btm_box ul.info_list li:last-child { margin-bottom:0; }
main .btm_box ul.info_list li > div { display:flex; }
main .btm_box ul.info_list li .label { margin-bottom:8px; font-weight:500; text-align:left; display:block; }
main .btm_box ul.info_list li label { width:100%; font-weight:500; position:relative; display:block; }
main .btm_box ul.info_list li input:not([type='checkbox']) { width:100%; height:40px; padding:0 10px; border:1px solid #ddd; border-radius:5px; }
main .btm_box ul.info_list li input[type='password'] { width:calc(100% - 115px); }
main .btm_box ul.info_list li button { height:40px; margin-left:10px; padding:0; }
main .btm_box .main_button_box { height:auto; min-height:auto; padding:0 20px 0 0; display:flex; justify-content:flex-start; gap:10px; box-shadow:none; background:none; }
main .btm_box .search_box { position:relative; }
main .btm_box .search_box input { width:100%; height:36px; padding:0 10px 0 35px; border:1px solid #ddd; border-radius:5px; }
main .btm_box .search_box button { min-width:auto; height:auto; border:0; padding:0; position:absolute; top:50%; left:10px; transform:translateY(-50%); }
main .btm_box .search_box button img { width:20px; }
main .btm_box .calendar_box { display:flex; align-items:center; gap:5px; }
main .btm_box .calendar_box .date_box { width:140px; height:36px; border:1px solid #ddd; border-radius:5px; position:relative; }
main .btm_box .calendar_box .date_box input { width:100%; height:100%; padding:0 10px 0 35px; color:#1E293B; border:0; box-shadow:none; background:none; }
main .btm_box .calendar_box .date_box button { min-width:auto; height:auto; padding:0; border:0; position:absolute; top:50%; left:10px; transform:translateY(-50%); }
main .btm_box .calendar_box .date_box button img { width:20px; }
.datepicker table tr td.active.active { background:#5529d1 !important; }
main .btm_box .filter_box { display:flex; flex-wrap:wrap; gap:10px; }
main .btm_box .filter_box .search_box input { width:200px; }
main .btm_box .filter_box .button_box button { height:36px; }
main .btm_box .filter_box .label { margin-bottom:8px; font-weight:500; text-align:left; display:block; }

@media only screen and (max-width:1040px){
    main .btm_box .filter_box .button_box button { width:90px; min-width:90px; }
}  

@media only screen and (max-width:1024px){
    button { height:34px; }
    button.low { height:34px; }
    .dropdown button { min-width:130px; height:34px; }
    .dropdown .dropdown-menu { max-height:145px; }
    .pagination { margin-top:20px; }
    main .btm_box h3 { font-size:18px; line-height:20px; }
    main .btm_box .search_box input { height:34px; }
    aside .top_box .logo { font-size:20px; }
    aside { width:200px; }
    main { width:calc(100% - 200px); }
    main .btm_box > div { height:calc(100% - 40px); }
    main .btm_box ul.info_list { width:100%; }
    main .btm_box ul.info_list li input:not([type='checkbox']) { height:34px; }
    main .btm_box ul.info_list li button { height:34px; }
    main .btm_box .basic .table_box { height:calc(100% - 34px); }
    main .btm_box .basic .table_box .table_wrap { height:calc(100% - 54px); }
    main .btm_box .filter_box .search_box input { width:190px; }
    main .btm_box .filter_box .button_box button { width:90px; min-width:90px; height:34px; }
    main .btm_box .calendar_box .date_box { width:130px; height:34px; }
}