/* 관리자 - 공통 ================================================================================== */ .machine_m {padding:0 5px !important;line-height:28px !important;min-height:28px !important;min-width:40px !important;margin-left:2px;} .machine_text_deco01 {text-decoration:line-through !important;} /* 관리자 - 정렬버튼 ================================================================================== */ .gsearch_box .sort_btn {position:relative; display: inline-block; cursor: pointer; text-align:center; white-space:nowrap; vertical-align:middle; border-radius:2px; padding: 0 14px; line-height:32px; border:1px solid #c5c5c5; background:#fff;color:#959595; font-size:0.9em; } .gsearch_box .sort_btn i {color:#959595; } .gsearch_box .sort_btn.on, .gsearch_box .sort_btn.on i {color:var(--color1);} /* 관리자 - 장비 타임테이블 ================================================================================== */ .machine_timetable_wrap {position:relative;background:#ffffff;border:1px solid #ddd;padding:15px 24px;height:180px;} .machine_timetable_wrap .groups {position:absolute;height:70px;width:1500px;z-index:66;} .machine_timetable_wrap .groups ul {margin-left:-15px;width:100%;} .machine_timetable_wrap .groups li {float:left;height:68px;font-weight:500;} .machine_timetable_wrap .bars {position:absolute;margin:28px 0 0 0;width:1500px;z-index:33;} .machine_timetable_wrap .bars li {float:left;padding:20px 0 0 0;} .machine_timetable_wrap .bars p {text-align:center;padding:8px 0;} .machine_timetable_wrap .bars .bar_c1 {border-top:1px solid #fa711a;border-bottom:1px solid #fa711a;background:#fc902b;height:20px;} .machine_timetable_wrap .bars .bar_c2 {border-top:1px solid #ababab;border-bottom:1px solid #ababab;background:#c2c2c2;height:20px;} .machine_timetable_wrap .bars .borders {border-left:1px solid #ddd;} .machine_timetable_wrap .bars .borders:last-child {border-right:1px solid #ddd;} .machine_timetable_wrap .barbt {position:relative;top:48px;border:1px solid #e5e5e5;background:#f2f2f2;height:20px;} /* 관리자 - 장비 예약현황 ================================================================================== */ .machine_daybold {position:relative;top:-6px;margin:0 0 5px 0; } .machine_daybold span {padding:8px 18px 11px 18px;line-height:45px; font-size:20px;font-weight:600;border:1px dashed #bbb;border-top:0;border-left:0; } .machine_member_daybox {padding:7px 5px;border-top:1px solid #efefef; } .machine_member_daybox:after {content:""; display:block; clear:both;} .machine_member_wrap li:first-child {border-top:0;} .machine_member_bg {margin-bottom: 2px;background: #edeff3;border: 1px solid #96afd8;padding:6px 4px;position:relative; } .machine_member_bg:after {content:""; display:block; clear:both;} .machine_member_bg .name {flex:2;color: #4776c4;line-height:30px;font-size:1.05rem;font-weight:500;text-indent:0;cursor:pointer;} .machine_member_bg .name:hover {text-decoration:underline;} .machine_member_bg.end .name {color: #8f8f8f;} .machine_member_bg.end {background: #edeff3;border: 1px solid #dadada; } .mcalendar_adminmachine {position:absolute;z-index:2;} .mcalendar_adminyear {position:relative;text-align:center; color:#000; margin:20px 0; } .mcalendar_adminyear span {font-size:2.8em; transition:all 0.3s ease;} .mcalendar_adminyear select {border:0; cursor:pointer; font-size:2.2em; font-weight:500;} .mcalendar_adminyear select option {text-align:center; font-size: 1.1rem;} .mcalendar_adminyear .arrow {position:absolute;top:-3px;left:0;width:100%;z-index:1;} .mcalendar_adminyear .arrow a {position:absolute;display:block; top:8px;width:40px; height:40px; border:1px solid #b5b5b5; cursor:pointer; background:#fff; opacity:0.6; border-radius:50px; transition:all 0.3s ease;} .mcalendar_adminyear .arrow span {position:absolute;top:14px;display:inline-block; width:10px;height:10px;border:solid #333; border-width:2px 2px 0 0; transition:all 0.3s ease;} .mcalendar_adminyear .arrow a:hover {opacity:1;} .mcalendar_adminyear .arrow .prev {left:calc(50% - 175px); } .mcalendar_adminyear .arrow .prev span {transform: rotate(-135deg); left:16px;} .mcalendar_adminyear .arrow .next {right:calc(50% - 175px); } .mcalendar_adminyear .arrow .next span {transform: rotate(45deg); right:16px;} /* 리스트 ================================================================================== */ .machine_listbox {position:relative; display: grid; grid-template-columns:repeat(3, 1fr); gap:2em; transition: all 0.3s ease;} .machine_listbox:after {content:''; display:block; clear:both;} .machine_listbox li {position:relative; max-width:350px;width:100%; overflow:hidden; border:1px solid #ddd; border-radius:6px; } .machine_listbox figure {position:relative; width:100%; aspect-ratio: 4 / 2.4; overflow: hidden; } .machine_listbox figure img {width:100%; height:100%; object-fit:cover; transition: all 0.5s ease;} .machine_listbox em {position:absolute; z-index:1; left:-15px; top:20px; font-size:0.95em; display:inline-block; min-width:80px; line-height: 36px; font-style:normal; text-align: center;color:#fff;} .machine_listbox .ing {background:#e94d6a;} .machine_listbox .acc {color:#e94d6a; border:1px solid #e94d6a; background:#fff;} .machine_listbox .end {background:#737171;} .machine_listbox .cont {padding:20px 20px 100px 20px; } .machine_listbox .tit {font-size:1.15em; line-height:1.3;font-weight:700; color:#000; transition: all 0.3s ease;} .machine_listbox .tit span {display:block; color:#777; font-weight:600;font-size:0.75em; padding-top:10px; } .machine_listbox dl {position:relative;font-size:0.9em; display: grid; grid-template-columns:80px auto; gap:3px 10px; } .machine_listbox dl dt {position:relative; color:#333; padding-left:10px;} .machine_listbox dl dt::before {position:absolute; content:''; left:1px; top:12px; width:3px; height:3px; background:#555; border-radius:5px; } .machine_listbox dl dt::after {position:absolute; content:''; right:0; top:5px; width:1px; height:17px; background:rgb(0,0,0,0.15);} .machine_listbox dl dd {color:#808080; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .machine_listbox .btn {position:absolute;bottom:25px; left:50%; transform: translateX(-50%); min-width:160px;text-align:center; color:#fff;font-weight:500; font-size:0.9em; line-height:48px; background:#666; border-radius:50px; } .machine_listbox .more {position:relative; display:inline-block; top:4px; margin-left:13px; width:20px; height:20px; background:#fff; border-radius:50%;cursor:pointer;} .machine_listbox .more:after {position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:10px; height:2px; background:#888;} .machine_listbox .more:before {position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:2px; height:10px; background:#888;} .machine_listbox li:hover {border:1px solid var(--color1); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.0);} .machine_listbox li:hover figure img {transform: scale(1.07);} .machine_listbox li:hover .btn {background:var(--color1); color:#fff;} .machine_listbox li:hover .more::after {background:var(--color1); } .machine_listbox li:hover .more::before {background:var(--color1); } .machine_nolist {text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:100px 0; color:#999;} @media screen and (max-width:1024px) { .machine_listbox { gap:1.5em; } .machine_listbox em {font-size:0.85em; line-height:30px; min-width:68px; left:-10px; top:15px;} .machine_nolist {padding:60px 0;} .machine_listbox .cont {padding:20px 20px 90px 20px; } .machine_listbox .btn { line-height:45px; } } @media screen and (max-width:800px) { .machine_listbox { grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); } .machine_listbox .cont {padding:15px 15px 90px 15px; } .machine_listbox .btn {bottom:20px; } } @media screen and (max-width:600px) { .machine_listbox li {max-width:100% ;} .machine_listbox .tit {font-size:1.1em;} } /* 뷰페이지 ================================================================================== */ .machine_view_wrap {position:relative; margin-bottom:40px;} .machine_view_wrap .top_box {position:relative; display:grid; grid-template-columns: auto 45% ;gap:40px; padding:35px; border:10px solid #eee; } .machine_view_wrap .top_box::after {position:absolute;content:''; top:-10px; left:-10px; width:30px; height:30px; border-left:10px solid var(--color1); border-top:10px solid var(--color1); } .machine_view_wrap .top_box figure { overflow:hidden; } .machine_view_wrap .top_box figure img {width:100%;height:100%;object-fit:cover; } .machine_view_wrap .top_box .inner {position:relative; } .machine_view_wrap .top_box .inner .tit {position:relative;font-size:1.05em; font-weight:600; color:var(--color1); letter-spacing:-1px;line-height:1.4;padding:5px 0 15px 0;border-bottom:1px solid #dfdfdf; margin-bottom:25px; } .machine_view_wrap .top_box .inner .tit strong {display:block;font-size:1.65em; color:#000; font-weight:bold;} .machine_view_wrap .top_box .inner .txt dl {position:relative;padding:0 0 10px 0; display: grid; grid-template-columns:115px auto; gap:10px; } .machine_view_wrap .top_box .inner .txt dl dt {position:relative;color:#333; padding-left:33px; } .machine_view_wrap .top_box .inner .txt dl dd {color:#777; } .machine_view_wrap .top_box .inner .txt dl dt i {position:absolute; display:inline-block; top:1px;left:0; width:25px; height:25px;line-height:25px; background:#444; border-radius:50%;color:#fff; font-size:0.6em; text-align:center; margin:0 10px 0 0;} .machine_view_wrap .top_box .inner .txt dl dt::after {position:absolute; content:''; right:0; top:5px; width:1px; height:0.9em; background:#e0e0e0; } .machine_contentbox {position:relative; background:var(--color5); padding:30px 40px; } .machine_contentbox .tit {position:relative; font-weight:700;font-size:1.2em; color:#000; padding:0 0 15px 22px; } .machine_contentbox .tit::before {position:absolute; content:''; top:5px; left:0; width:8px; height:8px; border:4px solid var(--color1); border-radius:50%; } .machine_contentbox .box { } @media screen and (max-width:1300px) { .machine_view_wrap .top_box { gap:30px; } .machine_contentbox { padding:35px; } .machine_view_wrap .top_box .inner .tit strong {font-size:1.65em; } .machine_view_wrap .top_box .inner dl {padding:3px 0;} } @media screen and (max-width:1200px) { .machine_view_wrap .top_box { grid-template-columns: auto 42% ; padding:30px; } .machine_contentbox { padding:30px; } } @media screen and (max-width:1024px) { .machine_view_wrap .top_box { padding:25px;} .machine_view_wrap .top_box .inner .tit { padding: 0 0 15px 0; margin-bottom:20px; } .machine_view_wrap .top_box .inner .tit strong {font-size:1.6em; } .machine_view_wrap .top_box .inner .txt dl { grid-template-columns:105px auto; } .machine_contentbox {padding:30px; } .machine_contentbox .tit::before { top:3px; } } @media screen and (max-width:800px) { .machine_view_wrap .top_box { border-width:6px;padding:20px; grid-template-columns: repeat(1, 1fr);border-width:8px;} .machine_view_wrap .top_box::after { top:-8px; left:-8px; width:24px; height:24px; border-left:8px solid var(--color1); border-top:8px solid var(--color1); } .machine_view_wrap .top_box figure {order:1;} .machine_view_wrap .top_box .inner {order:2;} .machine_view_wrap .top_box .inner .tit { font-size:1em;padding: 0 0 13px 0; } .machine_view_wrap .top_box .inner .tit strong {font-size:1.5em; } .machine_contentbox {padding:25px; } .machine_contentbox .tit {font-size:1.15em;padding:0 0 15px 18px; } .machine_contentbox .tit::before { top:5px; width:7px; height:7px; border-width:3px ; } } @media screen and (max-width:600px) { .machine_view_wrap .top_box { gap:20px; } .machine_view_wrap .top_box .inner .tit { font-size:0.95em; margin-bottom:17px; } .machine_view_wrap .top_box .inner .txt dl {font-size:0.9em; padding:0 0 4px 0; grid-template-columns:75px auto; } .machine_view_wrap .top_box .inner .txt dl dt { padding-left:10px; } .machine_view_wrap .top_box .inner .txt dl dt i { display:none; } .machine_view_wrap .top_box .inner .txt dl dt::before {position:absolute; content:''; left:0; top:8px; width:3px; height:3px; background:#888; } .machine_contentbox {padding: 20px;} } .machine_view_calendar {position:relative; margin:0 0 50px 0; display:block;} .machine_view_calendar .rt2 {position:relative; padding:20px 0 0 0;} .machine_view_wrap h5 span {float:right; font-size:15px; color:#006edd; padding-right:2px;} @media screen and (max-width:1400px) { .machine_view_calendar {display:block;} } /* 달력 묶음 박스 ============================*/ .machine_calendar_wrap {position:relative; border:1px solid #ccc; padding:30px;background:#fff; } .machine_calendar_box {display: grid; grid-template-columns: auto 48.5%; gap:3%;} /* 달력 묶음 박스 ============================*/ /* 달력 연월 화살표 ============================*/ .machine_calendar_sel {position:absolute; width:calc(100% - 60px); top:20px;text-align:center;overflow:hidden; line-height:50px; display: flex; flex-flow:wrap;justify-content: space-between; } .machine_calendar_sel a:first-child {left:0;} .machine_calendar_sel a:last-child {right:0;} .machine_calendar_sel span {display:inline-block;padding:0 ; vertical-align:middle; font-weight:600;} .machine_calendar_sel i {vertical-align:middle;font-size:1.25em;color:#898a8e; opacity:0.6;} .machine_calendar_sel i:hover {opacity:1;} @media screen and (max-width:1200px) { .machine_calendar_wrap { padding:20px; } .machine_calendar_box { grid-template-columns: auto 49%; gap:2%;} .machine_calendar_sel { width:calc(100% - 40px); top:10px;} } @media screen and (max-width:1024px) { .machine_calendar_sel { top:5px;} } @media screen and (max-width:800px) { .machine_calendar_wrap { padding:12px 0; background:#fff; border-left:0; border-right:0;} .machine_calendar_sel { width:96%; left:2%; top:0 ;} .machine_calendar_sel i { font-size:1.15em;} } /* 달력 연월 화살표 ============================*/ /* 달력 연월 ============================*/ .machine_calendar_top {text-align:center;overflow:hidden; /* border:1px solid #d2d2d2; border-top:1px solid #252525; border-bottom:0; */ margin-bottom:17px; } .machine_calendar_top span {padding:0 6px;font-size:1.2em; color:#222; vertical-align:middle; font-weight:600;} .machine_calendar_top i {vertical-align:middle;} @media screen and (max-width:800px) { .machine_view_photo {grid-template-columns:auto;gap:0px;} .machine_calendar_top span {font-size:1.15em;} } @media screen and (max-width:600px) { .machine_calendar_top {margin-bottom:10px;} .machine_calendar_top span {font-size:1.05em;} } /* 달력 연월 ============================*/ /* 달력 날짜 테이블 ============================*/ .machine_table {border-collapse:collapse; width:100%; table-layout:fixed; border-radius:0; overflow:hidden;} .machine_table thead th {background:#fff; color:#222; border-top:1px solid #ddd; border-bottom:1px solid #ddd; font-size:0.8em; line-height:38px; } .machine_table thead th:first-child {color:#ff5d31; border-left:0 solid #ddd; } .machine_table thead th:last-child {color:#4c94ff; border-right:0 solid #ddd; } .machine_table tbody td {font-size:0.85em; background:#ffffff; border:1px solid #e9e9e9; text-align:center; padding:0px; cursor:pointer;} .machine_table tbody td:first-child {border-left:0;} .machine_table tbody td:last-child {border-right:0;} .machine_table tbody td .wrap {position:relative; min-height:60px;} .machine_table tbody td .days {text-align:center; font-size:0.85em; height:30px; padding:4px 0 0 0;} .machine_table tbody td .wrap p {background:#999;color:#fff;border-radius:30px;padding:4px 2px;font-size:0.8em; line-height:1.2em; text-align:center;margin:0 5px;} .machine_table tbody td.adm {vertical-align:top; line-height:30px !important;} .machine_table i {display:none;} .machine_table tbody td:hover {background:#fef7c0;} .machine_table tbody td .wrap .dateLabel {position: absolute;top:30px; left:5px; background:#ffe033;color: #000;border-radius:30px;padding:4px 2px;font-size:0.8em; width:calc(100% - 10px); line-height:1.2em; text-align:center; z-index: 1;} /* 시작일 종료일 스타일 */ .machine_table tbody td .wrap .dateLabel.start { } .machine_table tbody td .wrap .dateLabel.end { } .machine_table .selday, .machine_table .selday:hover {background:#006edd;} .machine_table .selday .days {color:#fff;} .machine_table .selday p {display:block; background:#fff !important; color:#000 !important;} .machine_table .selday i {display:inline-block; margin-right:5px; font-size:12px; vertical-align:middle;} .machine_table .notday {background:#f9f9f9;} .machine_table .notday .days {position:relative;color:#bbb; } .machine_table .notday .days::before {position:absolute;content:'';top: 17px; left: calc(50% - 9px); width:18px;border-top:1px solid #bbb; } .machine_table .notday p {color:#ccc; text-decoration:line-through;} .machine_table .notday:hover {background:#f9f9f9; cursor:auto;} .machine_table .today {background:#fff;} .machine_table .today p {color:#f66000;} .machine_table .today i {display:none;} .machine_table .redday {color:#ff5d31 !important;} .machine_table .blueday {color:#4c94ff !important;} .machine_table .usedday {background:#ffcccc !important;} .machine_table .redday.days::before { border-top:1px solid #ff5d31 !important; } .machine_table .blueday.days::before { border-top:1px solid #4c94ff !important; } .machine_table_btm {border-bottom:0 solid #ddd; padding:15px 0 0 0; font-size:0.9em; color:#333;text-align:center;} .machine_table_btm em {background:#fff; display:inline-block; width:13px; height:13px; border:1px solid #d2d2d2; margin:0 5px 0 0; vertical-align:middle;} .machine_table_btm em.disable {background:#f4f4f4; margin-left:10px;} .machine_table_btm em.already {background:#006edd; border-color:#006edd; margin-left:10px;} .machine_table_btm em.namhour {background:#666666; border-color:#666666; margin-left:10px;} @media screen and (max-width:1024px) { .machine_table thead th {line-height:40px; } .machine_table tbody td .wrap {min-height:60px;} .machine_table tbody td .days { padding:3px 0;} .machine_table .notday .days::before { top: 15px; left:calc(50% - 8px);width:16px; } } @media screen and (max-width:680px) { .machine_table tbody td .wrap {min-height:40px;} .machine_table tbody td .wrap p {display:none;/*border-radius:100%;width:100%;aspect-ratio:1/1; padding:0;display: flex; flex-direction: column; justify-content:center; align-items:center;*/} .machine_table tbody td .wrap p span {display:none;} .machine_table tbody td .wrap .dateLabel.end {top:unset; bottom:0; } .machine_table tbody td .wrap .dateLabel.start { display:none;} /* 시작일 종료일 가림 */ .machine_table tbody td .wrap .dateLabel.end {display:none;} /* 시작일 종료일 가림 */ } @media screen and (max-width:480px) { .machine_table tbody td {padding:1px; font-size:0.8em; } .machine_table tbody td .wrap {min-height:30px;} .machine_table .notday .days::before { top: 14px; } } /* 달력 날짜 테이블 ============================*/ .machine_table_time {background:#fff;border:1px solid #ccc; padding: 0 20px 20px 20px;margin-top: 20px;} .machine_table_time .tits {padding: 20px 0 10px 5px; color:#111111; font-weight:bold; } .machine_table_time .tits .fr {font-size:0.85em; color:#666; } .machine_table_time ul {overflow:hidden; position:relative; display:grid; grid-template-columns:repeat(4, 1fr);gap:5px 5px; } .machine_table_time li {position:relative; background:#f8f9fb; border:1px solid #dfdfdf; border-radius:3px; font-weight:500; padding:9px 12px; font-size:0.9em; cursor:pointer;} .machine_table_time li span {font-size:0.85em; color:#2780ed;} .machine_table_time li em {position:absolute; right:10px; top:50%; display:inline-block; font-size:11px; color:#999; width:24px;height:24px; line-height:22px; border-radius:100%; text-align:center; border:1px solid #d1d1d1;background:#fff;transform: translateY(-50%); } .machine_table_time li:hover {border-color:#4d95dd;} .machine_table_time .on {background:#eaeef5; border-color:#4d95dd;} /*.machine_table_time li:hover em, */ .machine_table_time .on em {background:#006edd; color:#fff; border-color:#006edd;} .machine_table_time .off {text-decoration:line-through; color:#bbb; background:#f8f8f9; font-weight:300;} .machine_table_time .off span {color:#bbb; text-decoration:auto; } .machine_table_time .off em {display:none;} .machine_table_time .off:hover {background:#f8f8f9; cursor:auto; color:#bbb; font-weight:300;} .machine_table_time .nolist {border:0; padding:70px 0 60px 0;} .machine_sin_time { background:var(--color2);padding:20px 0 20px 0 ;width:100%;text-align:center; color:#fff;font-weight:500; font-size:1.1em;} .machine_sin_time strong {font-size:1.9em;font-weight:700;color:#ffee2e;} /* 따라다니는 총 시간 ================ */ .machine_quick {display:none; position:absolute; top:20px; right:-100px; width:80px; padding:20px 0 0 0; z-index:990; } .machine_quick .box {position:relative; width:80px; height:80px; text-align:center; color:#fff; font-size:0.8em; font-weight:bold; line-height:1.4em; background:var(--gra1); background-size:500%; border-radius:50%; display: flex; flex-direction: column; justify-content:center; align-items:center; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.23); } .machine_quick .box p {font-weight:bold; } .machine_quick .box span {display:block; font-size:1.65em; font-weight:800; color:#ffee2e;} @media screen and (max-width:1620px) { .machine_quick {display:none !important; } } /* 따라다니는 총 시간 ================ */ @media screen and (max-width:800px) { .machine_table_time ul {grid-template-columns:repeat(3, 1fr);} .machine_table_time li { padding:8px 10px; font-size:0.9em; } .machine_table_time li em { right:10px; color:#999; width:22px;height:22px; line-height:20px; } .machine_sin_time { padding:15px 0 ; font-size:1em;} } @media screen and (max-width:600px) { .machine_table_time { padding: 0 15px 15px 15px; } .machine_table_time .tits {padding: 15px 0 10px 5px; } .machine_table_time ul {grid-template-columns:repeat(2, 1fr);} } @media screen and (max-width:480px) { .machine_table_time { padding: 0 12px 12px 12px; } .machine_table_time ul { gap: 4px ;} .machine_table_time li { padding:5px 8px; font-size:0.85em; } .machine_table_time li em { right:8px; width:20px;height:20px; line-height:18px; } } /* 동의화면 ================================================================================== */ .machine_agreebox {position:relative;border:1px solid #dfdfdf; background:#fff;} .machine_agreebox .textarea_form {border-color:#fff; font-size:0.9em;padding:20px; height:230px;} .machine_agreebox .bottom {position:relative;background:#f4f5f7; text-align:center; padding:18px 0; font-size:0.95em; color:#000; } .machine_agreebox .bottom input[type="checkbox"] {display: none;} .machine_agreebox .bottom input[type="checkbox"] + label {position: relative;padding-left:40px; cursor: pointer;display: inline-block; } .machine_agreebox .bottom input[type="checkbox"] + label:before {content: '';position: absolute;left: 0;top:-1px;border:1px solid #ddd; border-radius:50%; width:30px; height:30px; background: url('../img/checkbox.png') no-repeat #fff; background-size: contain;} .machine_agreebox .bottom input[type="checkbox"]:checked + label:before {background: url('../img/checkbox_on.png') no-repeat var(--color1); border-color:var(--color1); background-size:contain; } @media screen and (max-width:1024px) { .machine_agreebox .textarea_form {height:200px;} .machine_agreebox .bottom input[type="checkbox"] + label {padding-left:37px;} .machine_agreebox .bottom input[type="checkbox"] + label:before {width:28px; height: 28px;} } /* 장비신청현황 mypage ================================================================================== */ .machine_mylist_wrap {position:relative;border-top:2px solid #333; } .machine_mylist_wrap li {position:relative; padding:20px 0; border-bottom:1px solid #dfdfdf;} .machine_mylist_wrap li a {position:relative;display:grid; grid-template-columns:21% auto;gap:40px; } .machine_mylist_wrap li figure {border:1px solid #eaeaea; overflow:hidden; } .machine_mylist_wrap li figure img {width:100%; height:100%; object-fit:cover;} .machine_mylist_wrap li .inner {position:relative;display:grid; grid-template-columns: auto 100px; } .machine_mylist_wrap li .cont {position:relative; } .machine_mylist_wrap li .cont .tit {font-size:1.3em; font-weight:700; color:#111;padding:5px 0 15px 0;} .machine_mylist_wrap li:hover .cont .tit {color:var(--color1); } .machine_mylist_wrap li .cont .txt {} .machine_mylist_wrap li .cont .txt dl {position:relative;font-size:0.95em; display:grid; grid-template-columns:90px auto;gap:10px; } .machine_mylist_wrap li .cont .txt dl dt {position:relative; padding:0 0 2px 13px;} .machine_mylist_wrap li .cont .txt dl dt::before {position:absolute; content:''; left:2px; top:9px; width:3px; height:3px; background:#666; border-radius:50%;} .machine_mylist_wrap li .cont .txt dl dt::after {position:absolute; content:''; right:0; top:4px; width:1px; height:1em; background:#dfdfdf;} .machine_mylist_wrap li .cont .txt dl dd {position:relative; color:#666; } .machine_mylist_wrap li .date {position:relative;font-size:0.95em;display: flex; flex-direction: column; justify-content:center; align-items:center;} .machine_mylist_wrap li .comment {display:none; position:relative; grid-column: 1 / 3; grid-row: 2 / 3; background:#f9f6ec;padding: 20px;font-size:0.9em; color:var(--point2); margin-top:15px;} .machine_mylist_wrap li .comment span {display:inline-block;background:#888; color:#fff;padding:0 10px;border-radius:2px; margin-right:10px; } @media screen and (max-width:1400px) { .machine_mylist_wrap li a { gap:30px; } .machine_mylist_wrap li .cont .txt dl {line-height:1.4; } } @media screen and (max-width:1024px) { .machine_mylist_wrap li a { gap:25px; } .machine_mylist_wrap li .cont .tit {font-size:1.25em; padding:5px 0 10px 0;} .machine_mylist_wrap li .cont .txt dl { grid-template-columns:80px auto; } .machine_mylist_wrap li .cont .txt dl dt::before { top:8px; } } @media screen and (max-width:600px) { .machine_mylist_wrap li a { grid-template-columns:1fr;gap: 0px; } .machine_mylist_wrap li .inner { grid-template-columns: auto 80px; } .machine_mylist_wrap li figure {display:none;} .machine_mylist_wrap li .cont {padding:0 0 0 10px; } .machine_mylist_wrap li .cont .tit {font-size:1.2em; padding:0 0 10px 0;} .machine_mylist_wrap li .cont .txt dl dt::before { top:7px; width:3px; height:3px; } } @media screen and (max-width:480px) { .machine_mylist_wrap li .cont {padding:0 0 0 5px; } .machine_mylist_wrap li .cont .tit {font-size:1.15em; } .machine_mylist_wrap li .cont .txt dl {font-size:0.9em; grid-template-columns:70px auto; gap:8px; } .machine_mylist_wrap li .cont .txt dl dt { padding:0 0 0 10px;} .machine_mylist_wrap li .cont .txt dl dt::before {left:0; } .machine_mylist_wrap li .comment { padding: 15px;} } /* 장비신청현황 mypage ================================================================================== */ /* 장비신청현황 mypage view ================================================================================== */ .machine_myview_wrap {position:relative; display:grid; grid-template-columns:40% auto;gap:30px; border:10px solid #eee; padding:35px; margin-bottom:40px; } .machine_myview_wrap::after {position:absolute;content:''; top:-10px; left:-10px; width:30px; height:30px; border-left:10px solid var(--color1); border-top:10px solid var(--color1); } .machine_myview_wrap figure {} .machine_myview_wrap figure img {width:100%;height:100%; object-fit:cover;} .machine_myview_wrap .cont {position:relative; } .machine_myview_wrap .cont .tit {position:relative;font-size:1.45em; font-weight:bold; color:#111;padding:10px 0 20px 0;} .machine_myview_wrap .cont .txt {} .machine_myview_wrap .cont .txt dl {position:relative;font-size:0.95em; display:grid; grid-template-columns:95px auto;gap:10px; } .machine_myview_wrap .cont .txt dl dt {position:relative; padding:0 0 4px 15px;} .machine_myview_wrap .cont .txt dl dt::before {position:absolute; content:''; left:3px; top:9px; width:3px; height:3px; background:#666; border-radius:50%;} .machine_myview_wrap .cont .txt dl dt::after {position:absolute; content:''; right:0; top:5px; width:1px; height:1em; background:#e3e3e3;} .machine_myview_wrap .cont .txt dl dd {position:relative; color:#666; } .machine_myview_wrap .cont .comment {background:#f9f6ec;padding:20px; margin-top:15px;} .machine_myview_wrap .cont .comment dl { } .machine_myview_wrap .cont .comment dl dt { color:var(--point1);font-weight:bold; } .machine_myview_wrap .cont .comment dl dd {padding:10px 0 0 0; font-size:0.95em; } @media screen and (max-width:1024px) { .machine_myview_wrap { padding:25px;margin-bottom:30px; } } @media screen and (max-width:800px) { .machine_myview_wrap { grid-template-columns:1fr;gap:20px; border-width:8px;padding:22px; } .machine_myview_wrap::after {width:24px; height:24px;top:-8px; left:-8px;border-left:8px solid var(--color1); border-top:8px solid var(--color1); } .machine_myview_wrap .cont .tit { font-size:1.3em; padding:10px 0 15px 0;} .machine_myview_wrap .cont .txt dl { grid-template-columns:85px auto; } .machine_myview_wrap .cont .txt dl dt { padding:0 0 2px 13px;} } /* 예약 정보 ================================================================================== */ .machine_memberview_infowrap {position:relative;} .machine_memberview_infowrap .datebox {position:relative; margin-bottom:15px; padding: 25px ;background:var(--color2); border-radius:6px; } .machine_memberview_infowrap .datebox ul {position:relative;display:grid; grid-template-columns:auto 25% 25%; gap:10px; } .machine_memberview_infowrap .datebox ul li {position:relative; color:#fff; padding-left:13px; font-size:0.9em; } .machine_memberview_infowrap .datebox ul li::before {position:absolute; content:''; display:block; left:0; top:12px; width:3px; height:3px; background:#fff; border-radius:50%;} .machine_memberview_infowrap .datebox ul li b {font-size:1.2em; color:#ffcc00;} @media screen and (max-width:1024px) { .machine_memberview_infowrap .datebox { padding: 20px 25px ;} } @media screen and (max-width:800px) { .machine_memberview_infowrap .datebox ul { grid-template-columns:repeat(1, 1fr) ; gap:0;} .machine_memberview_infowrap .datebox { padding: 20px ;} } /* 장비신청현황 mypage view ================================================================================== */ /* 관리자 페이지 : 예약정보 수정 ================================================================================== */ .machine_memberform_infowrap {position:relative;display: flex; flex-direction: column; justify-content:center; gap:10px;} .machine_memberform_infowrap .timebox {position:relative;border-bottom:1px dashed #ddd; padding-bottom:15px; } .machine_memberform_infowrap .timebox:last-child {border:0; } .machine_memberform_infowrap .timebox .date {position:relative; padding:0 0 10px 0; font-size:1.1em; font-weight:500; } .machine_memberform_infowrap .timebox .date .fr {font-size:0.95em;} .machine_memberform_infowrap .timebox ul {position:relative; display: grid; grid-template-columns: repeat(8, 1fr); gap:5px; } .machine_memberform_infowrap .timebox ul li {position:relative; border:1px solid #ddd; text-align:center; background:#f5f5f5; padding:6px 0; } .machine_sin_time02 { background:#1946b9;padding:13px ;width:100%;text-align:center; color:#fff;font-weight:500; font-size:1.1em; } .machine_sin_time02 strong {font-size:1.7em;font-weight:700;color:#ffee2e;} /* 관리자 페이지 : 예약정보 수정 ================================================================================== */