/* 관리자 - 공통 ================================================================================== */ .room_m {padding:0 5px !important;line-height:28px !important;min-height:28px !important;min-width:40px !important;margin-left:2px;} .room_text_deco01 {text-decoration:line-through !important;} .room_graybox {font-size:0.9em;} /* 관리자 - 정렬버튼 ================================================================================== */ .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);} /* 관리자 - 시설 타임테이블 ================================================================================== */ .room_timetable_wrap {position:relative;background:#ffffff;border:1px solid #ddd;padding:15px 24px;height:180px;} .room_timetable_wrap .groups {position:absolute;height:70px;width:1500px;z-index:66;} .room_timetable_wrap .groups ul {margin-left:-15px;width:100%;} .room_timetable_wrap .groups li {float:left;height:68px;font-weight:500;} .room_timetable_wrap .bars {position:absolute;margin:28px 0 0 0;width:1500px;z-index:33;} .room_timetable_wrap .bars li {float:left;padding:20px 0 0 0;} .room_timetable_wrap .bars p {text-align:center;padding:8px 0;} .room_timetable_wrap .bars .bar_c1 {border-top:1px solid #fa711a;border-bottom:1px solid #fa711a;background:#fc902b;height:20px;} .room_timetable_wrap .bars .bar_c2 {border-top:1px solid #ababab;border-bottom:1px solid #ababab;background:#c2c2c2;height:20px;} .room_timetable_wrap .bars .timetable_border {border-left:1px solid #ddd;} .room_timetable_wrap .bars .timetable_border:last-child {border-right:1px solid #ddd;} .room_timetable_wrap .barbt {position:relative;top:48px;border:1px solid #e5e5e5;background:#f2f2f2;height:20px;} /* 장비신청현황 mypage ================================================================================== */ .room_mylist_wrap {position:relative;border-top:2px solid #333; } .room_mylist_wrap li {position:relative; padding:20px 0; border-bottom:1px solid #dfdfdf;} .room_mylist_wrap li a {position:relative;display:grid; grid-template-columns:21% auto;gap:40px; } .room_mylist_wrap li figure {border:1px solid #eaeaea;} .room_mylist_wrap li .inner {position:relative;display:grid; grid-template-columns: auto 100px; } .room_mylist_wrap li .cont {position:relative; } .room_mylist_wrap li .cont .tit {font-size:1.3em; font-weight:bold; color:#111;padding:5px 0 15px 0;} .room_mylist_wrap li:hover .cont .tit {color:var(--color1); text-decoration:underline;} .room_mylist_wrap li .cont .txt {} .room_mylist_wrap li .cont .txt dl {position:relative;font-size:0.95em; display:grid; grid-template-columns:90px auto;gap:10px; } .room_mylist_wrap li .cont .txt dl dt {position:relative; padding:0 0 2px 13px;} .room_mylist_wrap li .cont .txt dl dt::before {position:absolute; content:''; left:2px; top:9px; width:4px; height:4px; background:var(--color1); border-radius:50%;} .room_mylist_wrap li .cont .txt dl dt::after {position:absolute; content:''; right:0; top:4px; width:1px; height:0.8em; background:#e3e3e3;} .room_mylist_wrap li .cont .txt dl dd {position:relative; color:#666; } .room_mylist_wrap li .date {position:relative;font-size:0.95em;display: flex; flex-direction: column; justify-content:center; align-items:center;} .room_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;} .room_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) { .room_mylist_wrap li a { gap:30px; } .room_mylist_wrap li .cont .txt dl {line-height:1.4; } } @media screen and (max-width:1024px) { .room_mylist_wrap li a { gap:25px; } .room_mylist_wrap li .cont .tit {font-size:1.25em; padding:5px 0 10px 0;} .room_mylist_wrap li .cont .txt dl { grid-template-columns:80px auto; } .room_mylist_wrap li .cont .txt dl dt::before { top:8px; } } @media screen and (max-width:600px) { .room_mylist_wrap li a { grid-template-columns:1fr;gap: 0px; } .room_mylist_wrap li .inner { grid-template-columns: auto 80px; } .room_mylist_wrap li figure {display:none;} .room_mylist_wrap li .cont {padding:0 0 0 10px; } .room_mylist_wrap li .cont .tit {font-size:1.2em; padding:0 0 10px 0;} .room_mylist_wrap li .cont .txt dl dt::before { top:7px; width:3px; height:3px; } } @media screen and (max-width:480px) { .room_mylist_wrap li .cont {padding:0 0 0 5px; } .room_mylist_wrap li .cont .tit {font-size:1.15em; } .room_mylist_wrap li .cont .txt dl {font-size:0.9em; grid-template-columns:70px auto; gap:8px; } .room_mylist_wrap li .cont .txt dl dt { padding:0 0 0 10px;} .room_mylist_wrap li .cont .txt dl dt::before {left:0; } .room_mylist_wrap li .comment { padding: 15px;} } /* 장비신청현황 mypage view ================================================================================== */ .room_myview_wrap {position:relative; display:grid; grid-template-columns:35% auto;gap:30px; padding:20px 0;border-top:2px solid var(--color1) !important; border-bottom:1px solid #ddd;margin-bottom:40px; } .room_myview_wrap figure {} .room_myview_wrap figure img {width:100%;height:100%; object-fit:cover;} .room_myview_wrap .cont {position:relative; padding:10px 0 ; } .room_myview_wrap .cont .tit {position:relative;font-size:1.4em; font-weight:bold; color:#111;padding:10px 0 20px 0;} .room_myview_wrap .cont .txt {} .room_myview_wrap .cont .txt dl {position:relative;font-size:0.95em; display:grid; grid-template-columns:90px auto;gap:10px; } .room_myview_wrap .cont .txt dl dt {position:relative; padding:0 0 4px 15px;} .room_myview_wrap .cont .txt dl dt::before {position:absolute; content:''; left:2px; top:9px; width:4px; height:4px; background:var(--color1); border-radius:50%;} .room_myview_wrap .cont .txt dl dt::after {position:absolute; content:''; right:0; top:6px; width:1px; height:0.8em; background:#e3e3e3;} .room_myview_wrap .cont .txt dl dd {position:relative; color:#666; } .room_myview_wrap .cont .comment {background:#f9f6ec;padding:20px; margin-top:15px;} .room_myview_wrap .cont .comment dl { } .room_myview_wrap .cont .comment dl dt { color:var(--point1);font-weight:bold; } .room_myview_wrap .cont .comment dl dd {padding:10px 0 0 0; font-size:0.95em; } @media screen and (max-width:1024px) { .room_myview_wrap .cont .tit { font-size:1.3em; } } @media screen and (max-width:800px) { .room_myview_wrap .cont .tit { font-size:1.25em; padding:10px 0 15px 0;} } @media screen and (max-width:600px) { .room_myview_wrap { grid-template-columns:1fr;gap:20px;padding:20px ; border:1px solid #dfdfdf; } .room_myview_wrap figure {max-width:400px; margin:auto;} .room_myview_wrap .cont { padding: 0 ; } .room_myview_wrap .cont .txt dl { grid-template-columns:80px auto; } .room_myview_wrap .cont .txt dl dt { padding:0 0 2px 13px;} .room_myview_wrap .cont .txt dl dt::before { left:2px; width:3px; height:3px;} } /* 예약 정보 ================================================================================== */ .room_memberview_infowrap {position:relative;} .room_memberview_infowrap .datebox {position:relative; margin-bottom:15px; padding: 25px ;background:#1946b9; border-radius:10px; } .room_memberview_infowrap .datebox ul {position:relative;display:grid; grid-template-columns:auto 25% 25%; gap:10px; } .room_memberview_infowrap .datebox ul li {position:relative; color:#fff; padding-left:13px; font-size:0.9em; } .room_memberview_infowrap .datebox ul li::before {position:absolute; content:''; display:block; left:0; top:12px; width:3px; height:3px; background:#fff; border-radius:50%;} .room_memberview_infowrap .datebox ul li b {font-size:1.2em; color:#ffcc00;} @media screen and (max-width:1024px) { .room_memberview_infowrap .datebox { padding: 20px 25px ;} } @media screen and (max-width:800px) { .room_memberview_infowrap .datebox ul { grid-template-columns:repeat(1, 1fr) ; gap:0;} .room_memberview_infowrap .datebox { padding: 20px ;} } /* 관리자 - 시설 예약현황 ================================================================================== */ .room_daybold {position:relative;top:-6px;margin:0 0 5px 0; } .room_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; } .room_member_daybox {padding:7px 5px;border-top:1px solid #efefef; } .room_member_daybox:after {content:""; display:block; clear:both;} .room_member_wrap li:first-child {border-top:0;} .room_member_bg {margin-bottom: 2px;background: #edeff3;border: 1px solid #96afd8;padding:6px 4px;position:relative; /* display: flex;justify-content: space-between; */ } .room_member_bg:after {content:""; display:block; clear:both;} .room_member_bg .name {flex:2;color: #4776c4;line-height:30px;font-size:1.05rem;font-weight:500;text-indent:0;cursor:pointer;} .room_member_bg .name:hover {text-decoration:underline;} .room_member_bg.end .name {color: #8f8f8f;} .room_member_bg.end { background: #edeff3;border: 1px solid #dadada; } .rcalendar_adminroom {position:absolute;z-index:2;} .rcalendar_adminyear {position:relative;text-align:center; color:#000; height:40px;margin:25px 0 ; } .rcalendar_adminyear span {font-size:2.8em; transition:all 0.3s ease;} .rcalendar_adminyear select {border:0; cursor:pointer; font-size:2.2em; font-weight:500;} .rcalendar_adminyear select option {text-align:center; font-size: 1.1rem;} .rcalendar_adminyear .arrow {position:absolute;top:4px;left:0;width:100%;z-index:1;} .rcalendar_adminyear .arrow a {position:absolute;display:block; top:0;width:40px; height:40px; border:1px solid #b5b5b5; cursor:pointer; background:#fff; opacity:0.6; border-radius:50px; transition:all 0.3s ease;} .rcalendar_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;} .rcalendar_adminyear .arrow a:hover {opacity:1;} .rcalendar_adminyear .arrow .prev {left:calc(50% - 175px); } .rcalendar_adminyear .arrow .prev span {transform: rotate(-135deg); left:16px;} .rcalendar_adminyear .arrow .next {right:calc(50% - 175px); } .rcalendar_adminyear .arrow .next span{transform: rotate(45deg); right:16px;} /* 리스트 ================================================================================== */ .room_listbox {position:relative; display: grid; grid-template-columns: repeat(3, 1fr); gap:30px 20px; transition: all 0.3s ease;} .room_listbox:after {content:''; display:block; clear:both;} .room_listbox li {position:relative; overflow:hidden; border:1px solid #cfcfcf; border-radius:10px; } .room_listbox figure {position:relative; width:100%; aspect-ratio: 4 / 2.4; overflow: hidden; } .room_listbox figure img {width:100%; height:100%; object-fit:cover; transition: all 0.5s ease;} .room_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;} .room_listbox .ing {background:#e94d6a;} .room_listbox .acc {color:#e94d6a; border:1px solid #e94d6a; background:#fff;} .room_listbox .end {background:#737171;} .room_listbox .cont {padding:25px 25px 75px 25px; } .room_listbox .tit {font-size:1.2em; line-height:1.3;font-weight:600; letter-spacing: -1px; color:#000; margin-bottom:10px; transition: all 0.3s ease;} .room_listbox .tit span {display:block; color:var(--color1); font-weight:bold;font-size:0.75em; } .room_listbox dl {position:relative;font-size:0.9em;letter-spacing: -1px; display: grid; grid-template-columns:80px auto; gap:3px 10px; } .room_listbox dl dt {position:relative; color:#333; padding-left:10px;} .room_listbox dl dt::before {position:absolute; content:''; left:1px; top:12px; width:3px; height:3px; background:#555; border-radius:5px; } .room_listbox dl dt::after {position:absolute; content:''; right:0; top:5px; width:1px; height:17px; background:rgb(0,0,0,0.15);} .room_listbox dl dd {color:#808080; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .room_listbox .btn {position:absolute;bottom:0; width:100%;text-align:center; color:#888;font-weight:500; font-size:0.95em; letter-spacing: -1px; border-top:1px solid #ebe8e8; line-height:55px; transition: all 0.5s ease;} .room_listbox .more {position:relative; display:inline-block; top:6px; margin-left:13px; width:26px; height:26px; background:var(--color1); border-radius:50%;cursor:pointer;} .room_listbox .more:after {position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:13px; height:2px; background:#fff;} .room_listbox .more:before {position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:2px; height:13px; background:#fff;} .room_listbox li:hover {border:1px solid var(--color1); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);} .room_listbox li:hover figure img {transform: scale(1.05);} .room_listbox li:hover .btn {background:var(--color1); color:#fff;} .room_listbox li:hover .more {background:rgb(255,255,255,0.4); } .room_nolist {text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:100px 0; color:#999;} @media screen and (max-width:1200px) { .room_listbox .cont {padding:20px 20px 70px 20px; } .room_listbox .btn {line-height:52px; } } @media screen and (max-width:1024px) { .room_listbox { gap:20px;} .room_listbox em {font-size:0.85em; line-height:30px; min-width:68px; left:-10px; top:15px;} .room_nolist {padding:60px 0;} } @media screen and (max-width:800px) { .room_listbox {grid-template-columns: repeat(2, 1fr); gap:20px;} } @media screen and (max-width:600px) { .room_listbox {grid-template-columns: repeat(1, 1fr);} .room_listbox .tit {font-size:1.15em;} } /* 뷰페이지 ================================================================================== */ .room_view_wrap {position:relative; margin-bottom:40px;} .room_view_wrap .top_box {position:relative; display:grid; grid-template-columns: auto 45% ;gap:20px; padding:30px; border:7px solid var(--color1);border-radius:50px 0 0 0 ; } .room_view_wrap .top_box figure { overflow:hidden; } .room_view_wrap .top_box figure img {width:100%;height:100%;object-fit:cover; } .room_view_wrap .top_box .inner {position:relative; padding:0 20px; } .room_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:10px 0 15px 0;border-bottom:1px solid #dbdbdb; margin-bottom:25px; } .room_view_wrap .top_box .inner .tit strong {display:block;font-size:1.65em; color:#1b2f55; font-weight:bold;} .room_view_wrap .top_box .inner .txt dl {position:relative;padding:0 0 10px 0; display: grid; grid-template-columns:115px auto; gap:10px; } .room_view_wrap .top_box .inner .txt dl dt {position:relative;color:#333; padding-left:33px; } .room_view_wrap .top_box .inner .txt dl dd {color:#777; } .room_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:var(--color1);border-radius:50%;color:#fff; font-size:0.6em; text-align:center; margin:0 10px 0 0;} .room_view_wrap .top_box .inner .txt dl dt::after {position:absolute; content:''; right:0; top:5px; width:1px; height:0.9em; background:#e0e0e0; } .room_view_wrap .btn_box {padding-top:15px; } .room_view_wrap .btn_m {position:relative; display: inline-block; cursor: pointer; text-align:center; border-radius:5px; padding: 0 15px;line-height:40px; border:1px solid rgb(0,0,0,0.1); background:#278adf;color:#fff; font-size:0.95em; transition:all 0.4s ease; } .room_view_wrap .btn_m i {margin-left:10px; } .room_view_wrap .btn_m:hover {background:#444; } .room_contentbox {position:relative; background:var(--color5); padding:30px 40px; } .room_contentbox .tit {position:relative; font-weight:700;font-size:1.2em; color:#000; padding:0 0 15px 22px; } .room_contentbox .tit::before {position:absolute; content:''; top:5px; left:0; width:8px; height:8px; border:4px solid var(--color1); border-radius:50%; } .room_contentbox .box { } @media screen and (max-width:1300px) { .room_view_wrap .top_box { padding:25px; gap:40px; } .room_contentbox { padding:35px; } .room_view_wrap .top_box .inner .tit strong {font-size:1.65em; } .room_view_wrap .top_box .inner dl {padding:3px 0;} } @media screen and (max-width:1200px) { .room_view_wrap .top_box { padding:20px; gap:10px;border-radius:40px 0 0 0 ; } .room_contentbox { padding:30px; } } @media screen and (max-width:1024px) { .room_view_wrap .top_box { border-width:6px; border-radius:35px 0 0 0 ; } .room_view_wrap .top_box .inner { padding:10px; } .room_view_wrap .top_box .inner .tit { padding:0 0 10px 0; margin-bottom:15px; } .room_view_wrap .top_box .inner .tit strong {font-size:1.6em; } .room_view_wrap .top_box .inner .txt dl { grid-template-columns:105px auto; } .room_contentbox {padding:30px; } .room_contentbox .tit::before { top:3px; } } @media screen and (max-width:800px) { .room_view_wrap .top_box { border-radius:30px 0 0 0 ; grid-template-columns: repeat(1, 1fr); } .room_view_wrap .top_box figure {order:1;} .room_view_wrap .top_box .inner {order:2;} .room_view_wrap .top_box .inner .tit { font-size:1em;padding: 0 0 10px 3px;} .room_view_wrap .top_box .inner .tit strong {font-size:1.5em; } .room_contentbox {padding:25px; } .room_contentbox .tit {font-size:1.15em;padding:0 0 15px 18px; } .room_contentbox .tit::before { top:5px; width:7px; height:7px; border-width:3px ; } .room_view_wrap .btn_m { padding: 0 12px;line-height:36px; } } @media screen and (max-width:600px) { .room_view_wrap .top_box {padding:20px; border-width:5px; gap:20px; } .room_view_wrap .top_box .inner { padding:0; } .room_view_wrap .top_box .inner .tit { font-size:0.95em;margin-bottom:10px; } .room_view_wrap .top_box .inner .txt dl {padding:0 0 6px 0; grid-template-columns:85px auto; } .room_view_wrap .top_box .inner .txt dl dt { padding-left:10px; } .room_view_wrap .top_box .inner .txt dl dt i { display:none; } .room_view_wrap .top_box .inner .txt dl dt::before {position:absolute; content:''; left:0; top:8px; width:3px; height:3px; background:#888; } .room_contentbox {padding: 20px;} } .room_view_calendar {position:relative; margin:0 0 50px 0; display:block;} .room_view_calendar .rt2 {position:relative; padding:20px 0 0 0;} .room_view_wrap h5 span {float:right; font-size:15px; color:#006edd; padding-right:2px;} @media screen and (max-width:1400px) { .room_view_calendar {display:block;} } /* 달력 묶음 박스 ============================*/ .room_calendar_wrap {position:relative; border:1px solid #ccc; padding:30px;background:#fff; } .room_calendar_box {display: grid; grid-template-columns: auto 48.5%; gap:3%;} /* 달력 묶음 박스 ============================*/ /* 달력 연월 화살표 ============================*/ .room_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; } .room_calendar_sel a:first-child {left:0;} .room_calendar_sel a:last-child {right:0;} .room_calendar_sel span {display:inline-block;padding:0 ; vertical-align:middle; font-weight:600;} .room_calendar_sel i {vertical-align:middle;font-size:1.25em;color:#898a8e; opacity:0.6;} .room_calendar_sel i:hover {opacity:1;} @media screen and (max-width:1200px) { .room_calendar_wrap { padding:20px; } .room_calendar_box { grid-template-columns: auto 49%; gap:2%;} .room_calendar_sel { width:calc(100% - 40px); top:10px;} } @media screen and (max-width:1024px) { .room_calendar_sel { top:5px;} } @media screen and (max-width:800px) { .room_calendar_wrap { padding:12px 0; background:#fff; border-left:0; border-right:0;} .room_calendar_sel { width:96%; left:2%; top:0 ;} .room_calendar_sel i { font-size:1.15em;} } /* 달력 연월 화살표 ============================*/ /* 달력 연월 ============================*/ .room_calendar_top {text-align:center;overflow:hidden; /* border:1px solid #d2d2d2; border-top:1px solid #252525; border-bottom:0; */ margin-bottom:17px; } .room_calendar_top span {padding:0 6px;font-size:1.2em; color:#222; vertical-align:middle; font-weight:600;} .room_calendar_top i {vertical-align:middle;} @media screen and (max-width:800px) { .room_view_photo {grid-template-columns:auto;gap:0px;} .room_calendar_top span {font-size:1.15em;} } @media screen and (max-width:600px) { .room_calendar_top {margin-bottom:10px;} .room_calendar_top span {font-size:1.05em;} } /* 달력 연월 ============================*/ /* 달력 날짜 테이블 ============================*/ .room_table {border-collapse:collapse; width:100%; table-layout:fixed; border-radius:0; overflow:hidden;} .room_table thead th {background:#fff; color:#222; border-top:1px solid #ddd; border-bottom:1px solid #ddd; font-size:0.8em; line-height:38px; } .room_table thead th:first-child {color:#ff5d31; border-left:0 solid #ddd; } .room_table thead th:last-child {color:#4c94ff; border-right:0 solid #ddd; } .room_table tbody td {font-size:0.85em; background:#ffffff; border:1px solid #e9e9e9; text-align:center; padding:0px; cursor:pointer;} .room_table tbody td:first-child {border-left:0;} .room_table tbody td:last-child {border-right:0;} .room_table tbody td .wrap {position:relative; min-height:60px;} .room_table tbody td .days {text-align:center; font-size:0.85em; height:30px; padding:4px 0 0 0;} /* .room_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;} */ .room_table tbody td .wrap p {position: relative;background: #999; color: #fff; border-radius: 30px; padding: 4px 2px; font-size: 0.8em; line-height: 1.2em; text-align: center; margin: 0px 5px; display: inline-block; overflow: hidden; border: none; cursor: pointer; min-width: 80px;} .room_table tbody td .wrap p::before {content: '';position: absolute;top: 0;left: 0;width: var(--progress-width, 0%);height: 100%;background: #ff8400;transition: width 0.3s ease;z-index: 1;border-radius: 30px;} .room_table tbody td .wrap p span {position: relative;z-index: 2;color: inherit;transition: color 0.3s ease;} .room_table tbody td.adm {vertical-align:top; line-height:30px !important;} .room_table i {display:none;} .room_table tbody td:hover {background:#fef7c0;} .room_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;} /* 시작일 종료일 스타일 */ .room_table .today {background:#fff; } .room_table .today p {color:#f66000;} .room_table .today i {display:none;} .room_table .selday, .room_table .selday:hover {background:#006edd;} .room_table .selday .days {color:#fff;} .room_table .selday p {display:block; background:#fff !important; color:#000 !important;} .room_table .selday i {display:inline-block; margin-right:5px; font-size:12px; vertical-align:middle;} .room_table .selday .wrap p::before { background: #ffa800; } .room_table .notday {background:#f9f9f9;} .room_table .notday .days {position:relative;color:#bbb; } .room_table .notday .days::before {position:absolute;content:'';top: 17px; left: calc(50% - 9px); width:18px;border-top:1px solid #bbb; } .room_table .notday p {color:#ccc; text-decoration:line-through;} .room_table .notday:hover {background:#f9f9f9; cursor:auto;} .room_table .redday {color:#ff5d31 !important;} .room_table .blueday {color:#4c94ff !important;} .room_table .usedday {background:#ffcccc !important;} .room_table .redday.days::before { border-top:1px solid #ff5d31 !important; } .room_table .blueday.days::before { border-top:1px solid #4c94ff !important; } .room_table_btm {border-bottom:0 solid #ddd; padding:15px 0 0 0; font-size:0.9em; color:#333;text-align:center;} .room_table_btm em {background:#fff; display:inline-block; width:13px; height:13px; border:1px solid #d2d2d2; margin:0 5px 0 0; vertical-align:middle;} .room_table_btm em.disable {background:#f4f4f4; margin-left:10px;} .room_table_btm em.already {background:#006edd; border-color:#006edd; margin-left:10px;} .room_table_btm em.namhour {background:#666666; border-color:#666666; margin-left:10px;} @media screen and (max-width:1024px) { .room_table thead th {line-height:40px; } .room_table tbody td .wrap {min-height:60px;} .room_table tbody td .days { padding:3px 0;} .room_table .notday .days::before { top: 15px; left:calc(50% - 8px);width:16px; } } @media screen and (max-width:680px) { .room_table tbody td .wrap {min-height:40px;} .room_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;*/} .room_table tbody td .wrap p span {display:none;} .room_table tbody td .wrap .dateLabel.end {top:unset; bottom:0; } .room_table tbody td .wrap .dateLabel.start { display:none;} /* 시작일 종료일 가림 */ .room_table tbody td .wrap .dateLabel.end {display:none;} /* 시작일 종료일 가림 */ } @media screen and (max-width:480px) { .room_table tbody td {padding:1px; font-size:0.8em; } .room_table tbody td .wrap {min-height:30px;} .room_table .notday .days::before { top: 14px; } } /* 달력 날짜 테이블 ============================*/ .room_table_time {background:#fff;border:1px solid #ccc; padding: 0 20px 20px 20px;margin-top: 20px;} .room_table_time .tits {padding: 20px 0 10px 5px; color:#111111; font-weight:bold; } .room_table_time .tits .fr {font-size:0.85em; color:#666; } .room_table_time ul {overflow:hidden; position:relative; display:grid; grid-template-columns:repeat(4, 1fr);gap:5px 5px; } .room_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;} .room_table_time li span {font-size:0.85em; color:#2780ed;} .room_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%); } .room_table_time li:hover {border-color:#4d95dd;} .room_table_time .on {background:#eaeef5; border-color:#4d95dd;} /*.room_table_time li:hover em, */ .room_table_time .on em {background:#006edd; color:#fff; border-color:#006edd;} .room_table_time .off {text-decoration:line-through; color:#bbb; background:#f8f8f9; font-weight:300;} .room_table_time .off span {color:#bbb; text-decoration:auto; } .room_table_time .off em {display:none;} .room_table_time .off:hover {background:#f8f8f9; cursor:auto; color:#bbb; font-weight:300;} .room_table_time .nolist {border:0; padding:70px 0 60px 0;} .room_sin_time { background:var(--color1);padding:20px 0 20px 0 ;width:100%;text-align:center; color:#fff;font-weight:500; font-size:1.1em;} .room_sin_time strong {font-size:1.9em;font-weight:700;color:#ffee2e;} /* 따라다니는 총 시간 ================ */ .room_quick {display:none; position:absolute; top:20px; right:-100px; width:80px; padding:20px 0 0 0; z-index:990; } .room_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:600%; 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); } .room_quick .box p {font-weight:bold; } .room_quick .box span {display:block; font-size:1.65em; font-weight:800; color:#ffee2e;} @media screen and (max-width:1620px) { .room_quick {display:none !important; } } /* 따라다니는 총 시간 ================ */ @media screen and (max-width:800px) { .room_table_time ul {grid-template-columns:repeat(3, 1fr);} .room_table_time li { padding:8px 10px; font-size:0.9em; } .room_table_time li em { right:10px; color:#999; width:22px;height:22px; line-height:20px; } .room_sin_time { padding:15px 0 ; font-size:1em;} } @media screen and (max-width:600px) { .room_table_time { padding: 0 15px 15px 15px; } .room_table_time .tits {padding: 15px 0 10px 5px; } .room_table_time ul {grid-template-columns:repeat(2, 1fr);} } @media screen and (max-width:480px) { .room_table_time { padding: 0 12px 12px 12px; } .room_table_time ul { gap: 4px ;} .room_table_time li { padding:5px 8px; font-size:0.85em; } .room_table_time li em { right:8px; width:20px;height:20px; line-height:18px; } } /* 동의화면 ================================================================================== */ .room_agreebox {position:relative;border:1px solid #dfdfdf; background:#fff;} .room_agreebox .textarea_form {border-color:#fff; font-size:0.9em;padding:20px; height:230px;} .room_agreebox .bottom {position:relative;background:#f4f5f7; text-align:center; padding:18px 0; font-size:0.95em; color:#000; } .room_agreebox .bottom input[type="checkbox"] {display: none;} .room_agreebox .bottom input[type="checkbox"] + label {position: relative;padding-left:40px; cursor: pointer;display: inline-block; } .room_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;} .room_agreebox .bottom input[type="checkbox"]:checked + label:before {background: url('../img/checkbox_on.png') no-repeat #3d89f6; border-color:#3d89f6; background-size:contain; } @media screen and (max-width:1024px) { .room_agreebox .textarea_form {height:200px;} .room_agreebox .bottom input[type="checkbox"] + label {padding-left:37px;} .room_agreebox .bottom input[type="checkbox"] + label:before {width:28px; height: 28px;} } /* 사용자 상세화면 ================================================================================== */ .room_memberview_infobox {position:relative;display:grid; grid-template-columns:60% auto; gap:40px;} @media screen and (max-width:580px) { .room_memberview_infobox {grid-template-columns:auto;gap:20px;} }