/* 관리자 - 공통 ================================================================================== */ .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;} .room_hcol1 {width:25%;} .room_gcol1 {width:20%;} /* 관리자 - 정렬버튼 ================================================================================== */ .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;} /* 관리자 - 시설 예약현황 ================================================================================== */ .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(auto-fit, minmax(270px, 1fr)); gap:1.5em; transition: all 0.3s ease;} .room_listbox:after {content:''; display:block; clear:both;} .room_listbox li {position:relative; border:1px solid #ddd;} .room_listbox figure {width:100%; aspect-ratio:6 / 4; overflow:hidden; } .room_listbox figure img {width:100%; height:100%; object-fit:cover; transition: all 0.5s ease;} .room_listbox .cont {padding:30px 30px 35px 30px;} .room_listbox .tit {font-family:'S-Core Dream'; font-size:1.1em; font-weight:500; letter-spacing: -1px; line-height:1.5; color:#222; margin-bottom:12px;} .room_listbox dl {font-size:0.9em; letter-spacing: -1px; display: grid; grid-template-columns:95px auto; gap:3px 10px;} .room_listbox dl dt {font-family:'S-Core Dream'; font-weight:400; color:#333;} .room_listbox dl dt i {margin-right:7px; font-size:19px; opacity:0.6; vertical-align:middle;} .room_listbox dl dd {color:#808080; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .room_listbox .more {position:absolute; right:0; bottom:0; width:40px; line-height:40px; text-align:center; background:#e6e6e6; border-radius:10px 0 0 0; font-size:0.8em;} .room_listbox li:hover {border-color:var(--color1);} .room_listbox li:hover figure img {transform: scale(1.05);} .room_listbox li:hover .more {background:var(--color1); color:#fff;} .room_listbox li:hover .more i {transform:rotate(180deg); transition: all 0.2s;} @media screen and (max-width:1024px) { .room_listbox .cont {padding:20px;} .room_listbox .tit {margin-bottom:7px;} .room_listbox dl {grid-template-columns:80px auto; gap:2px 10px;} .room_listbox dl dt i {font-size:18px; margin-right:5px;} .room_listbox .more {width:32px; line-height:32px;} } /* 뷰페이지 ================================================================================== */ .room_view_top2 {position:relative; /* display:flex; gap:4%; */ padding:30px 40px ;margin-bottom:30px; border-radius:1.5em 0; transition:all 0.3s ease;} .room_view_top2::before {position:absolute;content:''; left:0;top:0; width:100%;height:100%; border-radius:1.5em 0;background:var(--color1); opacity:0.055;} .room_view_top2::after {position:absolute;content:''; left:0;top:0; width:100%;height:100%; border-radius:1.5em 0;border:4px solid var(--color1); opacity:0.08;} .room_view_top2 .img {display:none; width:45%; aspect-ratio:6 / 4; border:1px solid #eaeaea; overflow:hidden;} .room_view_top2 .img img {width:100%; height:100%; object-fit:cover;} .room_view_top2 .inner {/*flex:2; */ } .room_view_top2 .inner .tit {font-family:'S-Core Dream'; font-size:1.4em; font-weight:500; color:#222; letter-spacing:-1px;line-height:1.3; padding-bottom:12px;margin:0 0 15px 0; border-bottom:1px dashed #ddd; } .room_view_top2 .inner dl {display:flex; gap:12px; padding:3px 0; } .room_view_top2 .inner dt {position:relative;text-align:center; font-family:'S-Core Dream'; font-weight:400; min-width:130px;letter-spacing:-1px;line-height:1.2; height:34px; font-size:0.9em; padding:7px 8px;border-radius:3px; border:1px solid #ddd; background:#fff; color:#222;} .room_view_top2 .inner dt i {display:none; margin-right:8px; font-size:20px; vertical-align:middle; opacity:0.5;} .room_view_top2 .inner dd {flex:2; font-size:0.95em;color:#777; padding-top:4px;line-height:1.3;} .room_view_top2 .inner dd p {} .room_view_top2 .inner dd p + p {padding-top:3px;} .room_view_top2 .inner dd p b {color:#444; font-size:0.85em; font-family:'S-Core Dream'; } .room_contentbox {font-size:0.95em; background:#f4f5f8; padding:30px 30px 40px 30px; margin-bottom:40px;} @media screen and (max-width:1024px) { .room_view_top2 {display:block; padding:25px 30px;} .room_view_top2 .img {width:100%;} .room_view_top2 .inner {padding:0 5px;} .room_view_top2 .inner .tit {font-size:1.2em; margin:0 0 10px 0;} .room_view_top2 .inner dl {font-size:0.9em; padding:2px 0; gap:10px; } .room_view_top2 .inner dt {min-width:110px; height:30px; } .room_view_top2 .inner dt i {font-size:17px;} .room_contentbox {padding:15px 20px;} } @media screen and (max-width:768px) { .room_view_top2 { padding:25px 20px ; border-radius:1.2em 0;} .room_view_top2::before { border-radius:1.2em 0; } .room_view_top2::after { border-radius:1.2em 0;border-width:3px;} .room_view_top2 .inner .tit { padding-bottom:12px; margin:0 0 12px 0; } .room_view_top2 .inner dt {min-width:90px; font-size:0.85em; } /* .room_view_top2 .inner dl { padding:4px 0; } .room_view_top2 .inner dt {min-width:initial; padding:0 10px 0 10px; font-weight:500;border:0; background:none; line-height:1.3;font-size:0.9em; height:initial;} .room_view_top2 .inner dt::before {position:absolute;content:''; left:0;top:6px; width:3px;height:3px; background:var(--color1); border-radius:3px; } .room_view_top2 .inner dt::after {position:absolute;content:':'; right:0;top:0; width:1px;height:1em; } .room_view_top2 .inner dd { padding-top:0;} */ } @media screen and (max-width:580px) { .room_view_top2 { padding:22px 16px ; } } /* .room_view_calendar {position:relative; margin:0 0 50px 0; display:grid;grid-template-columns:46% 50%; gap:4%;} .room_view_wrap h5 span {float:right; font-size:15px; color:#006edd; padding-right:2px;} .room_view_wrap .cont {margin-bottom:40px; line-height:1.6;} .room_calendar_top {text-align:center;overflow:hidden; background:var(--color1); height:52px; line-height:46px;} .room_calendar_top span {font-family:'S-Core Dream'; padding:0 5px; color:#fff; line-height:150%; vertical-align:middle; } .room_calendar_top i {vertical-align:middle; color:#fff; opacity:0.5;} .room_calendar_top i:hover {opacity:1;} @media screen and (max-width:1024px) { .room_view_calendar {display:block; margin-bottom:20px;} .room_view_calendar .rt2 {margin-top:20px;} .room_calendar_top {height:46px; line-height:42px;} } @media screen and (max-width:768px) { .room_view_wrap .wrap {margin-bottom:20px;} .room_view_photo {grid-template-columns:auto;gap:0px;} } .room_table {border-collapse:collapse; width:100%; table-layout:fixed; } .room_table thead th {background:#ffffff;border:1px solid #dddddd; color:#4e4e4e; line-height:46px; font-weight:500;} .room_table thead th:first-child {color:#f64a1b;} .room_table thead th:last-child {color:#397fe7;} .room_table tbody td {background:#ffffff; border:1px solid #dddddd; line-height:46px; text-align:center; padding:0px 5px; cursor:pointer;} .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 .selday, .room_table .selday:hover {background:#006edd;} .room_table .selday p {display:inline-block; color:#fff; line-height:32px; padding:0 5px;} .room_table .selday i {display:inline-block; margin-right:5px; font-size:12px; vertical-align:middle;} .room_table .notday {background:#f8f8f9;} .room_table .notday p {color:#ccc; text-decoration:line-through;} .room_table .notday:hover {background:#f8f8f9; cursor:auto;} .room_table .today {background:#fff;} .room_table .today p {color:#f66000;} .room_table .today i {display:none;} .room_table .redday {color:#f64a1b;} .room_table .blueday {color:#397fe7;} .room_table .usedday {background:#ffcccc !important;} .room_table_btm {border:1px solid #ddd; border-top:0; padding:12px 10px; 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_time {overflow:hidden; position:relative; display:grid; grid-template-columns:repeat(2, 1fr);gap:5px 5px; margin-bottom:20px;} .room_table_time li {position:relative; background:#fff; border:1px solid #dbdbdb; border-radius:3px; font-weight:500; padding:12px 15px; height:52px; font-size:0.95em; cursor:pointer;} .room_table_time li span {font-size:0.85em; color:#2780ed;} .room_table_time li em {position:absolute; right:15px; display:inline-block; font-size:11px; color:#999; width:25px; line-height:20px; border-radius:100%; text-align:center; border:2px solid #d1d1d1;} .room_table_time li:hover, .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;} @media screen and (max-width:1024px) { .room_table thead th, .room_table tbody td {line-height:42px; font-size:0.95em;} } @media screen and (max-width:580px) { .room_table_time {grid-template-columns:none; gap: 5px 0;} .room_table tbody td {padding:0px;} } */ /* 달력 묶음 박스 ============================*/ .room_view_calendar {position:relative; margin:0 0 40px 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 #ddd; 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 .wrap2 {position:relative; min-height:35px;} .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 !important;} .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 #ddd; padding: 0 20px 20px 20px;margin-top:10px;} .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.95em;padding:20px; height:230px;} .room_agreebox .bottom { position:relative;background:#f4f5f7; text-align:center; padding:12px; 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_signwrap .signbox {position:relative; background:#e7ebf1;height:80px;line-height:80px;} .room_signwrap .signbox2 {text-align:center;width:300px;position:relative;margin:0 auto;} .room_signwrap canvas {position:absolute;border:2px dotted #ff3300;top:10px;right:10px;} .room_signwrap img {position:absolute;top:10px;right:10px;} .room_signwrap .signbox .ab_m {position:absolute; right:20px; bottom:20px;} /* 사용자 상세화면 ================================================================================== */ .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;} } /* 사용자 스케줄 ================ */ .rcalendar_year {position:relative;text-align:center; color:#000; margin:0 0 15px 0 ; display: flex; justify-content:center; align-items:center; } .rcalendar_year span {font-size:1.8em; transition:all 0.3s ease;} .rcalendar_year select {border:0; cursor:pointer; font-size:1.5em; color:#000; font-weight:bold; min-width:initial;line-height:initial; border:0 solid #fff; border-radius:0 !important; padding: 0 6px ; background-image: none; } .rcalendar_year select:hover {text-decoration:underline; } .rcalendar_year select option { font-size: 0.95rem; } .rcalendar_year .arrow {position:absolute;top:2px;left:0;width:100%;z-index:1;} .rcalendar_year .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_year .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_year .arrow a:hover {opacity:1;} .rcalendar_year .arrow .prev {left:calc(50% - 175px); } .rcalendar_year .arrow .prev span {transform: rotate(-135deg); left:16px;} .rcalendar_year .arrow .next {right:calc(50% - 175px); } .rcalendar_year .arrow .next span{transform: rotate(45deg); right:16px;} @media screen and (max-width:1024px) { .rcalendar_year select {font-size:1.4em; } .rcalendar_year .arrow .prev {left:calc(50% - 150px); } .rcalendar_year .arrow .next {right:calc(50% - 150px); } } .room_schedule_list_help {position:relative; display: flex; flex-flow:wrap; justify-content: space-between; margin-bottom:15px; } .room_schedule_list_help p {font-size:0.9em; color:#888; } .room_schedule_list_help .memo {font-size:0.85em; color:#888; } .room_schedule_list_help button {width:15px; height:15px; } .room_schedule_list_wrap {position:sticky; display:block; width:100%; overflow-x:auto; padding-top:5px; padding-bottom:20px; -webkit-overflow-scrolling: touch; } .room_schedule_list_wrap .schedule_table {min-width:800px; } .schedule_table {position:relative; border-collapse:collapse; width:100%; table-layout:fixed; border-top:1px solid #313131; } .schedule_table thead th {position:relative; font-family: 'S-Core Dream'; font-weight:500; color:#111; background:#F3F3F3; line-height:1.2; padding:15px 0; letter-spacing:-1px; border-bottom:1px solid #e2e2e2;border-right:1px solid #e2e2e2; text-align:center; border-top:1px solid #313131; font-size:0.85em; } .schedule_table thead th:last-child {border-right-width:0 ;} .schedule_table .bdr {border-right:1px solid #e2e2e2 !important;} .schedule_table tbody th {font-family: 'S-Core Dream';font-size:0.9em; padding:10px 5px; border-right:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; color:#222; background:#fafafa; letter-spacing:-1px;} .schedule_table tbody th:last-child {border-right-color:#fafafa;} .schedule_table tbody th span {font-size:0.85em; color:#777;} .schedule_table tbody td {padding: 10px 5px; font-size:0.9em; line-height:1.2;word-break:break-all; border-left:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; color:#666;} .schedule_table tbody td:first-child {border-left-color:#fff;} .schedule_table tbody tr:hover td {background:#f4f5f8;} /* 오버했을때 바탕색 변경 */ .schedule_table .wroom01 {width:250px; } .schedule_table .ab_m {line-height:32px !important; } .schedule_table .room_td_tippy {font-size:0.85em;padding:0 8px; overflow: hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; } .schedule_table .schedule_sticky1 {position:sticky; left:0; z-index:2} @media screen and (max-width:1024px) { .schedule_table .wroom01 {width:220px; } .schedule_table thead th { padding:10px 5px; } .schedule_table tbody th, .schedule_table tbody td {padding: 8px 5px; } .schedule_table .ab_m {line-height:28px !important; } } /* 사용자 스케줄 ================ */