/*# sourceURL=/page/connectplace/css/layout.css */ /*@ sourceURL=/page/connectplace/css/layout.css */ @charset "utf-8"; /* common */ html.hidden {overflow-y: hidden;} #wrapper {height: 100%;} .page_wrap {height: 100%; position: relative;} /* color */ .bc_blue {background-color: #0172e2;} .bc_gray {background-color: #eaebee;} /* icon */ .ico_arrow-down {background-image: url(../images/icon/ico_arrow-down.png); background-repeat: no-repeat; background-position: center;} .ico_board {background-image: url(../images/icon/ico_board.png); background-repeat: no-repeat; background-position: center; background-size: 23px;} .ico_censor {background-image: url(../images/icon/ico_censor.png); background-repeat: no-repeat; background-position: center; background-size: 23px;} .ico_floor {background-image: url(../images/icon/ico_floor.png); background-repeat: no-repeat; background-position: center; background-size: 15px;} .ico_IPphone {background-image: url(../images/icon/ico_IPphone.png); background-repeat: no-repeat; background-position: center; background-size: 23px;} .ico_monitor {background-image: url(../images/icon/ico_monitor.png); background-repeat: no-repeat; background-position: center; background-size: 20px;} .ico_office {background-image: url(../images/icon/ico_office.png); background-repeat: no-repeat; background-position: center; background-size: 15px;} .ico_phone {background-image: url(../images/icon/ico_phone.png); background-repeat: no-repeat; background-position: center; background-size: 17px;} .ico_policy {background-image: url(../images/icon/ico_policy.png); background-repeat: no-repeat; background-position: center; background-size: 28px;} .ico_projector {background-image: url(../images/icon/ico_projector.png); background-repeat: no-repeat; background-position: center; background-size: 20px;} .ico_scent {background-image: url(../images/icon/ico_scent.png); background-repeat: no-repeat; background-position: center; background-size: 23px;} .ico_seating {background-image: url(../images/icon/ico_seating.png); background-repeat: no-repeat; background-position: center; background-size: 30px;} .ico_setting {background-image: url(../images/icon/ico_setting.png); background-repeat: no-repeat; background-position: center; background-size: 20px;} .ico_statistics {background-image: url(../images/icon/ico_statistics.png); background-repeat: no-repeat; background-position: center; background-size: 26px;} .ico_user-wh {background-image: url(../images/icon/ico_user-wh2.png); background-repeat: no-repeat; background-position: center; background-size: 24px;} .ico_user-gr {background-image: url(../images/icon/ico_user-gr.png); background-repeat: no-repeat; background-position: center; background-size: 24px;} .ico_video {background-image: url(../images/icon/ico_video.png); background-repeat: no-repeat; background-position: center; background-size: 23px;} .ico_visitor {background-image: url(../images/icon/ico_visitor.png); background-repeat: no-repeat; background-position: center; background-size: 27px;} .ico_chair {background-image: url(../images/icon/ico_chair.png); background-repeat: no-repeat; background-position: center; background-size: 27px;} .ico_chair_wh {background-image: url(../images/icon/ico_chair_wh.png); background-repeat: no-repeat; background-position: center; background-size: 27px;} .ico_mail {background-image: url(../images/icon/ico_mail_gr.png); background-repeat: no-repeat; background-position: center; background-size: 27px;} .ico_person {background-image: url(../images/icon/ico_person.png); background-repeat: no-repeat; background-position: center; background-size: 27px;} .ico_twopeople {background-image: url(../images/icon/ico_twopeople.png); background-repeat: no-repeat; background-position: center; background-size: 27px;} .ico_peoples {background-image: url(../images/icon/ico_peoples.png); background-repeat: no-repeat; background-position: center; background-size: 27px;} .ico_home_wh {background-image: url(../images/icon/ico_home_wh.png); background-repeat: no-repeat; background-position: center; background-size: 20px;} .ico_mark_wh {background-image: url(../images/icon/ico_mark_wh.png); background-repeat: no-repeat; background-position: center; background-size: 20px;} /* button */ button.bg_blue {background-color: #1382f4; color: #fff; font-weight: 700; border: 2px solid #1382f4; transition: all 0.3s;} button.bg_blue:hover {background-image: linear-gradient(to top, #1382f5, #3695fa); box-shadow: 0px 8px 7px 0 rgba(0, 0, 0, 0.02); transition: all 0.1s; border-color: #3695fa;} button.bg_sky {background-color: #59a7f7; color: #fff; font-weight: 700; transition: all 0.2s ease-in-out;} button.bg_sky:hover {background-image: linear-gradient(to top, #59a7f7, #68b2fc); transition: all 0.2s ease-in-out;} button.bg_navy {background-color: #0f447c; color: #fff; font-weight: 700; transition: all 0.2s ease-in-out;} button.bg_navy:hover {background-color: #06315f; transition: all 0.2s ease;} button.bg_gray {background-color: #828eac; color: #fff; font-weight: 700; transition: all 0.2s ease-in-out;} button.bg_gray:hover {background-color: #5f6d91; transition: all 0.2s ease;} button.bg_dark {background-color: #4c5266; color: #fff; font-weight: 700; transition: all 0.2s ease-in-out;} button.bg_dark:hover {background-color: #3a3f52; transition: all 0.2s ease;} button.line_blue {border: 2px solid #1382f4; color: #1382f4; font-weight: 700; transition: all 0.2s ease-in-out;} button.line_blue:hover{opacity: 0.8;transition: all 0.2s ease} button.accordion-btn {float: right; text-indent: -9999px; background-image: url(../images/icon/ico_arrow-down_gr.png); background-repeat: no-repeat; background-position: center; background-size: contain; width: 13px;} button.accordion-btn.active {transform: rotate(180deg);} /* table */ .tbl-origin {width: 100%;table-layout: fixed; word-break: keep-all; text-align: center;} .tbl-origin th, .tbl-origin td {border: 1px solid #f0f0f0;} .tbl-origin th {height: 50px; background-color:#e8f3ff; font-size: 17px; font-weight: 600; color: #5f6b8b; letter-spacing: -0.17px;} .tbl-origin td {height: 90px; font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -0.16px;} /* calendar css */ .input_group .ui-widget.ui-widget-content {top: 40px !important; left: 45px !important;} .datepicker-style .ui-widget.ui-widget-content {top: 45px !important; left: 0px !important;} /* HEADER */ header{position:fixed;z-index:100;width:100%;height:100px;background-color:#fff;} .inner_header {width:100%;height:100px;padding:0 40px;background-color:#fff;box-sizing: border-box;margin: 0 auto;z-index: 90;position: relative;justify-content: center; border-bottom: 1px solid #EBEAEF;} .inner_header .hd_group{width: 100%; position: relative; align-items: center;} /* HEADER LOGO */ .inner_header h1{display:inline-block;width:200px;margin:auto 0;} .inner_header h1 a{display:block; width: 100%;} .inner_header h1 a img{width: 100%;} /* load animation */ @keyframes fadeInUp { 0% {opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px);} 100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);} } @keyframes fadeInDown { 0% {opacity: 0; -webkit-transform: translate(-50%, -55%); transform: translate(-50%, -55%);} 100% {opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} } .animated{animation-duration: 0.6s; -webkit-animation-duration: 0.6s; animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-timing-function: ease-in-out;} .animated.delay{animation-delay: 0.3s;} .fadeInUp {animation-name: fadeInUp; -webkit-animation-name: fadeInUp;} .fadeInDown {animation-name: fadeInDown; -webkit-animation-name: fadeInDown;} @media screen and (max-width:1400px) { .inner_header h1 {width: 150px;} } /* HEADER GNB */ .inner_header .gnb{position: relative;z-index:30;width:50%;min-width:900px;height:100%;margin:0 auto; text-align: center;} .inner_header .gnb>ul{width: 100%;height: 100%;} .inner_header .gnb>ul>li{position: relative;z-index:30;float:left;width:16.666%;height:100%;line-height: 99px;} .inner_header .gnb>ul>li>a{font-size: 18px;} .inner_header .gnb>ul>li>a:hover{color: #1382f4;} .inner_header .gnb .main_mn{position: relative;z-index:30;display:block;width:100%;height:100%;line-height: 99px;font-size:18px;font-weight:bold;background-color:#fff;color: #333333;} .inner_header .gnb .main_mn::after{position:absolute;top:37px;left:115px;display:none;content:'';width:7px;height:6px;} .inner_header .gnb li:hover .main_mn:after{display:block;} /* .inner_header .gnb li:hover .sub_mn{background-color: #fff;} .inner_header .gnb li:hover .sub_mn a{color:#000;} */ .inner_header .gnb .sub_mn{position:absolute;top:-500px;left:0;width:100%;height:360px;padding-top:30px;border-top: 1px;} .inner_header .gnb .sub_mn li{height: 38px;} .inner_header .gnb .sub_mn li a{font-size:16px;color: #000;font-weight: 500;} .inner_header .gnb .sub_mn li a:hover{border-bottom: 1px solid #1382f4; color: #1382f4;} #bg{position:absolute;z-index:10;top:-500px;left:0;width:100%;min-height:325px;background-color: #fff; animation: all 0.3s; opacity: 0.9;} /* HEADER UI */ .inner_header .ui_group {gap: 11px;} .inner_header .ui_group li a {font-size: 14px;color: #6c6e75;letter-spacing: -1px; font-weight: 500;} .inner_header .ui_group li a:hover {color: #1382f4;} /* FOOTER */ footer {margin-top: 70px;} footer .inner_footer {max-width: 1300px; justify-content: space-between;margin: 0 auto;align-items: center;} footer .inner_footer .copyright {color: #fff; opacity: 50%; font-weight: 400;} /* ------------------------------------------------------ PAGE CSS ---------------------------------------------------------*/ /* ------------------------------------------------------ MAIN CSS ---------------------------------------------------------*/ /* MAIN */ #main {padding-top: 100px; background-color: #eaebee; padding-bottom: 35px; min-height: 100%;} #main .main_wrap {max-width: 1300px; margin: 0 auto; padding-top: 40px;} #main .user_info {gap: 20px;} #main .user_info > div {background-color: #fff;} #main .user_info .profile {width: 50%; height: 120px;align-items: center;position: relative;} #main .user_info .profile .user_img {width: 80px; height: 80px; border-radius: 40px; background-color: #b9bfd0; margin-left: 30px; margin-right: 40px; text-align: center; line-height: 8; overflow: hidden;} #main .user_info .profile .user {position: relative;padding-right: 75px;} #main .user_info .profile .user::after {content: '';width: 0px; height: 100px; border-right: 1px dashed #b6b7bc; position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0.5;} #main .user_info .profile .user span {color: #4c5266;font-size: 16px;font-weight: 600;letter-spacing: -1px;background-color: #eaebee;padding: 5px 18px;display: inline-block;margin-bottom: 5px;} #main .user_info .profile .user p {font-size: 20px;font-weight: bold;} #main .user_info .profile .user strong {color: #1382f4;font-weight: bold;} #main .user_info .profile .user em {color: #000;font-weight: bold;} #main .user_info .office_info {margin-left: 30px;} #main .user_info .office_info>div {display: flex; flex-flow: row nowrap; align-items: center; margin-bottom: 5px;} #main .user_info .office_info .ico {width: 15px; height: 15px; display: inline-block; background-size: cover; vertical-align: middle; margin-right: 10px;} #main .user_info .office_info span {color: #4c5266;min-width: 30px;display: inline-block; margin-right: 5px;} #main .user_info .office_info .select_area{ position: relative; min-width: 120px; width: auto; max-width: 150px;} #main .user_info .office_info .select_area button{ position: initial; background: none; text-indent: 0; border-radius: 0;} #main .user_info .office_info .select_area .select_box { width: 100%; height: 25px; padding: 0 20px 0 5px; font-size: 16px; line-height: 1.5%; color: #4c5266; font-weight:600; background-color: #fff; border-bottom: 1px solid #C4C4C4; box-sizing: border-box; cursor: pointer; text-align: left; background: url("../images/icon/ico_arrow-down_gr.png") center right 5px no-repeat; background-size: 12px; /* 말줄임 */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #main .user_info .office_info .select_area .select_box:hover, #main .user_info .office_info .select_area .select_box:focus{border-bottom: 1px solid #59a7f7;} #main .user_info .office_info .select_area ul{ display: none; position: absolute; width: 100%; max-height: 220px; overflow: hidden; overflow-y: auto; top: 32px; left: 0; border: 1px solid #e5e5e5; z-index: 10; box-sizing: border-box; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15); background: #ffffffe5;} #main .user_info .office_info .select_area ul::-webkit-scrollbar {width: 5px;} #main .user_info .office_info .select_area ul::-webkit-scrollbar-track {background: transparent; border-radius:3px;} #main .user_info .office_info .select_area ul::-webkit-scrollbar-thumb {background: #dcdfe6; border-radius:3px;} #main .user_info .office_info .select_area ul::-webkit-scrollbar-thumb:hover {background: #e9e9e9;} #main .user_info .office_info .select_area .select_box.active { background: url(../images/icon/ico_arrow-up_gr.png) center right 5px no-repeat; background-size: 12px;} #main .user_info .office_info .select_area .select_box.active + ul{ display: block !important; } #main .user_info .office_info .select_area ul li { padding: 5px 0; box-sizing: border-box;} #main .user_info .office_info .select_area ul li.point button::after{display: inline-block; content: "★"; font-size: 14px; margin-left: 3px; color: #1382f4} #main .user_info .office_info .select_area ul li button { width: 100%; padding: 0 5px; border: none; cursor: pointer; text-align: left; text-indent: 0; word-break: keep-all; line-height: 1.3;} #main .user_info .office_info .select_area ul li:hover:not(ul li:first-child), #main .user_info .office_info .select_area ul li:focus:not(ul li:last-child){ background-color: #e4f1ff; color: #151515;} #main .user_info .office_info .select_area ul li:first-child{padding: 0 5px; font-size: 14px; text-align: left;width: 100%; height: 25px;line-height: 25px; background-color: #1382f4d5; color: #fff; border: 0;} #main .user_info .profile button {position: absolute; top: 10px; right: 10px;width: 30px;height: 30px;background-color: #eaebee;text-indent: -9999px;background-image: url(../images/icon/ico_setting.png);background-position: center; background-repeat: no-repeat; background-size: 20px; border-radius: 9px;} #main .user_info .total_reserve {width: 50%; height: 120px;align-items: center; padding: 0 30px;} #main .user_info .total_reserve .reserve_main h3 {font-size: 22px;} #main .user_info .total_reserve .reserve_main h3 span {font-weight: 700; color: #1382f4;} #main .user_info .total_reserve .reserve_main h3 em {font-weight: 600; font-size: 30px; color: #1382f4;} #main .user_info .total_reserve .reserve_main .tag {color: #4c5266;font-size: 14px;font-weight: 600;letter-spacing: -1px;background-color: #eaebee;padding: 5px 18px;display: inline-block;margin-right: 5px; margin-top: 5px;} #main .user_info .total_reserve .reserve_main .recent_seat {color: #1382f4; font-weight: 500;} #main .user_info .total_reserve .reserve_main span {font-weight: 500;} #main .user_info .total_reserve .button_wrap {margin-left: auto; gap: 5px;} #main .user_info .total_reserve .button_wrap button {width: 100px; height: 80px;} /* MAIN RESERVATION LIST */ #main .main_box_wrap {margin-top: 30px;} #main .main_box_wrap .box_tit {font-size: 22px; color: #333333; font-weight: 700;margin-bottom: 15px;} #main .main_box_wrap .box_tit span {color: #1382f4; font-weight: 700;} #main .main_box_wrap .calendar_wrap {display: flex; align-items: center; justify-content: center;background-color: #59a7f7;height: 50px;position: relative;} #main .main_box_wrap .calendar_wrap input {border: none; margin: 0 10px; background-color: inherit; text-align: center; color: #fff; font-size: 18px !important; font-weight: 600; max-width: 170px; cursor: pointer;} #main .main_box_wrap .calendar_wrap .date-display {margin: 0 20px; cursor: pointer;color: #fff;font-size: 18px;font-weight: 600;} #main .main_box_wrap .calendar_wrap button {width: 10px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: contain; text-indent: -9999px; cursor: pointer;} #main .main_box_wrap .calendar_wrap button:hover, #main .main_box_wrap .calendar_wrap input:hover{opacity: 0.85;} #main .main_box_wrap .calendar_wrap button.prevBtn {background-image: url(../images/icon/ico_arrow_L_wh.png);} #main .main_box_wrap .calendar_wrap button.nextBtn {background-image: url(../images/icon/ico_arrow_R_wh.png);} #main .main_box_wrap .calendar_wrap .ui-datepicker {position: absolute; top: 50px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 1000 !important;} #main .main_box_wrap .calendar_wrap button:disabled{cursor: initial; opacity: 0.5;} #main .main_box_wrap .box_content {background-color: #fff; padding: 17px 30px; align-items: center;} #main .main_box_wrap .box_content:hover:has(.left) {cursor: pointer;} #main .main_box_wrap .box_content:not(#main .main_box_wrap .box_content:first-child){margin-top: 1px;} #main .main_box_wrap .box_content .left {align-items: center; position: relative; padding-right: 20px; min-width: 25%;} #main .main_box_wrap .box_content .left::after {content: '';width: 0px; height: 100px; border-right: 1px dashed #b6b7bc; position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0.5;} #main .main_box_wrap .box_content .left .place_img {min-width: 140px; height: 100px; position: relative; background-color: #6c6e75;} #main .main_box_wrap .box_content .left .place_img img {width: 100%; height: 100%;} #main .main_box_wrap .box_content .left .place_img span {position: absolute; width: 100%; background-color: rgba(90, 102, 129, 0.77); color: #fff; text-align: center; bottom: 0; left: 0;} #main .main_box_wrap .box_content .left .place_info {margin-left: 25px; max-width: 120px;} #main .main_box_wrap .box_content .left .place_info span {color: #fff; background-color: #5a6681; padding: 5px 10px; font-size: 14px; font-weight: 600; white-space: nowrap;} #main .main_box_wrap .box_content .left .place_info h5 {font-size: 24px; font-weight: 700; color: #333333; word-break: keep-all; line-height: 1.2; margin: 5px 0;} #main .main_box_wrap .box_content .left .place_info p {font-weight: 500; color: #333333;} #main .main_box_wrap .box_content .left .place_info p em {font-weight: 500; color: #0172e2;} #main .main_box_wrap .box_content .right {position: relative; margin-left: 25px; padding-right: 170px; align-items: center; width: 100%; justify-content: start;} #main .main_box_wrap .box_content .right .period {position: relative; padding-left: 30px;min-width: 31%;} #main .main_box_wrap .box_content .right .period::before {position: absolute; content: ''; width: 18px; height: 39px; background: url(../images/icon/ico_arrow-down.png) no-repeat center/cover; left: 0; top: 50%; transform: translateY(-50%);} #main .main_box_wrap .box_content .right .period .inform {position: absolute; top: -25px; left: 30px; font-weight: 500; color: #1cb8f2;} #main .main_box_wrap .box_content .right .period .inform em {font-weight: 600;} #main .main_box_wrap .box_content .right .period p {font-size: 18px; color: #4c5266; font-weight: 500;} #main .main_box_wrap .box_content .right .period p span {margin-right: 10px; font-weight: 500;} #main .main_box_wrap .box_content .right .period p.end {font-weight: 700; margin-top: 5px;} #main .main_box_wrap .box_content .right .period p.end span {font-weight: 700;} #main .main_box_wrap .box_content .right .place_device {gap: 10px; margin-left: 5%;} #main .main_box_wrap .box_content .right .place_device li {text-align: center;} #main .main_box_wrap .box_content .right .place_device li p {font-weight: 600; color: #1382f4;font-size: 14px; letter-spacing: -0.2px;} #main .main_box_wrap .box_content .right .place_device .ico_wrap {width: 45px; height: 45px; border-radius: 50%; background-color: #d0e6fd; margin: 0 auto 9px;} #main .main_box_wrap .box_content .right .place_device .ico_wrap img {width: 20px;} #main .main_box_wrap .box_content .right .button_wrap {position: absolute; right: 0; flex-direction: column; height: 80px; gap: 5px;} #main .main_box_wrap .box_content .right .button_wrap button {width: 150px; height: 100%;} #main .main_box_wrap .box_content .no_reservation {width: 100%; text-align: center;} #main .main_box_wrap .box_content .no_reservation:hover{cursor: initial;} #main .main_box_wrap .box_content .no_reservation h5 {font-size: 18px; font-weight: 500; color: #4c5266; letter-spacing: -0.18px; margin-bottom: 12px;} #main .main_box_wrap .box_content .no_reservation h5 span {font-weight: 500; font-size: 18px; color: #4c5266; letter-spacing: -0.18px;} #main .main_box_wrap .box_content .no_reservation button {background-color: #59a7f7; border-radius: 3px; width: 150px; height: 38px; color: #fff; font-weight: 700; letter-spacing: -0.96px; transition: all 0.2s ease-in;} #main .main_box_wrap .box_content .no_reservation button:hover {background-color: #1683f5; transform: all 0.2s ease;} #main .main_box_wrap .box_content .no_reservation button span {font-weight: 700;} #main .board_area {gap: 20px; margin-top: 20px;} #main .board_area > div {width: calc(50% - 10px); background-color: #fff; padding: 30px 35px 35px; max-height: 260px; box-sizing: border-box; } #main .board_area > div .list_tit {overflow: hidden; padding-bottom: 20px; border-bottom: 1px dashed rgba(182, 183, 188, 0.54);} #main .board_area > div .list_tit h4 {color: #333333; font-size: 22px; letter-spacing: -1.32px; font-weight: 700; float: left;} #main .board_area > div .list_tit a {width: 10px; height: 33px;;float: right; text-indent: -9999px; background-image: url(../images/icon/ico_arrow_R_gr.png); background-repeat: no-repeat; background-size: contain; background-position: center;} #main .board_area > div .list_tit a:hover{opacity: 0.8;} #main .board_area > div ul {margin-top: 20px; max-height: 125px; min-height: 80px; box-sizing: border-box; overflow: hidden;} #main .board_area > div ul li a {font-weight: 500; color: #4c5266;} #main .board_area > div ul.notice li {margin-bottom: 10px;} #main .board_area > div ul.notice li a {position: relative; padding-left: 15px; padding-right: 7%; display: block; width: 100%; box-sizing: border-box; transition: all 0.3s; position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} #main .board_area > div ul.notice li a:hover {color: #1382f4; transition: all 0.3s;} #main .board_area > div ul.notice li a::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: #a3a5ad; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: all 0.3s;} #main .board_area > div ul.notice li a:hover::before {background-color: #1382f4; transition: all 0.3s;} #main .board_area > div ul.notice li span {position: absolute; right: 0; top: 0;} #main .board_area > div ul.qna > li {overflow: hidden; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;} #main .board_area > div ul.qna > li:last-child {margin-bottom: 0px;} #main .board_area > div ul.qna > li > a {position: relative; display: inline-block; transition: all 0.3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #main .board_area > div ul.qna > li > a:hover {color: #1382f4; transition: all 0.3s;} #main .board_area > div ul.qna > li > a > span {font-size: 24px; font-weight: 600;} #main .board_area > div ul.noInfo {display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap: 10px; padding-top: 15px; box-sizing: border-box;} #main .board_area > div ul.noInfo > li{ text-align: center; font-size: 16px; color: #6c6e7550; line-height: 20px; font-weight: 500;} #main .board_area > div ul.noInfo > li > img{display: inline-block; width: 30px; opacity: 0.3;} #main .quick_menu {gap: 20px; overflow: hidden; width: 100%; margin-top: 30px; margin-bottom: 70px; box-sizing: border-box;} #main .quick_menu > li {min-width: calc(25% - 20px); width:50%; height: 100px; background-color: #fff;} #main .quick_menu > li > a {display: flex; padding: 35px 50px 35px 60px; align-items: center; background-image: url(../images/icon/ico_arrow_R_gr.png); background-repeat: no-repeat; background-size: 10px; background-position-x: calc(100% - 50px); background-position-y: 50%;} #main .quick_menu > li > a:hover {box-shadow: 2px 2px 5px #a9abaf50; transition: all 0.2s ease; background-position-x: calc(100% - 40px); background-position-y: 50%;} #main .quick_menu > li i {width: 30px; height: 30px; display: inline-block; margin-right: 20px;} #main .quick_menu > li span {font-size: 18px; font-weight: 600; color: #4c5266; letter-spacing: -1.08px;} #main footer .logo {width: 250px;} #main footer .logo img {width: 100%;} #main footer .copyright {color: #abaeb8;} /* MAIN 페이지 hover 이벤트 */ #main .main_box_wrap .box_content:hover {background-color: #F6FAFF; cursor: pointer;} #main .main_box_wrap .box_content:has(.no_reservation):hover {background-color: #Fff; cursor: initial;} #main .main_box_wrap .box_content:hover .left .place_info span{background-color: #454f68; transition: all 0.2s ease;} #main .main_box_wrap .box_content:hover .left .place_img span {background-color: #454f68; transition: all 0.2s ease;} #main .main_box_wrap .box_content:hover .right .period::before{background: url(../images/icon/ico_arrow-down-sky.png) no-repeat center/cover; transform: translateY(-30%); transition: all 0.2s ease;} #main .main_box_wrap .box_content:hover .right .period p.end{color: #151515; transition: all 0.1s ease; transition-delay: 0.2s;} /* MAIN 페이지 회의실 예약 내역 */ #main .main_box_wrap .box_content .box-detail-info {margin-left: 5%; max-width: 480px; min-width: 480px;} #main .main_box_wrap .box_content .box-detail-info .place_device{ margin-left: 0;} #main .main_box_wrap .box_content .box-detail-info .place_device ul {gap: 12px; justify-content: start;} #main .main_box_wrap .box_content .box-detail-info .place_device li {text-align: center;} #main .main_box_wrap .box_content .box-detail-info .place_device li .ico_wrap {width: 30px; height: 30px; border-radius: 50%; background-color: #d0e6fd; background-size: 50%; margin:0;} #main .main_box_wrap .box_content .box-detail-info .title {font-size: 20px; color:#4c5266; font-weight: 600; text-align-last: left; margin-top: 10px; box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} /* ------------------------------------------------------ CONTAINER CSS ---------------------------------------------------------*/ .container {height: 100vh; position: relative; overflow: hidden; padding-top: 100px; display: flex;} .container .container_inner {position: relative; height: 100%; overflow-y: auto; transition: all 0.3s ease; width: 100%;} .container .container_inner::-webkit-scrollbar {width: 0px;} /* ------------------------------------------------------ ASIDE CSS ---------------------------------------------------------*/ .aside {width: 475px; position: absolute; background-color: #fff; box-shadow: -3.6px 7.1px 7px 0 rgba(0, 0, 0, 0.14); transition: all 0.5s ease; right: -475px;} .aside_wrap {height: calc(100vh - 100px); overflow-y: auto;} .aside_wrap::-webkit-scrollbar {width: 8px;} .aside_wrap::-webkit-scrollbar-track {background: #fff; border-radius: 4.5px;} .aside_wrap::-webkit-scrollbar-thumb {background: #dcdfe6; border-radius: 4.5px;} .aside_wrap::-webkit-scrollbar-thumb:hover {background: #e9e9e9;} .aside.open {right: 0px; transition: all 0.5s ease;} .aside.closed {right: -475px; transition: all 0.5s ease;} .aside.noScroll .aside_wrap{overflow-y: hidden;}/* aside영역 전체 스크롤 안되도록,좌석/회의실/락커 등 예약리스트 나올 때 */ .aside_info {background-image: linear-gradient(to top, #1382f5, #5aa7f7); padding: 10px 25px 20px;} .aside_info.visit {padding: 10px 25px;} .aside_info > div {color: #fff; align-items: center; padding: 10px 0;} .aside_info > div span {font-size: 22px; font-weight: 400; margin-left: 33px;} .aside_info > div span em {font-weight: 400;} .aside_info > div span.medium {font-weight: 400;} .aside_info > div span.medium em {font-weight: 500;} .aside_info > div span.label {font-size: 24px; margin-right: 23px;} .aside_info > div span.floor {font-size: 42px; font-weight: 600;} .aside_info h5.tit {font-size: 20px; font-weight: 500; letter-spacing: -1.2px; min-width: 108px;} .aside_info .select_wrap {border-bottom: 1px solid rgba(999, 999, 999, 0.2);} .aside_info.visit .select_wrap:last-child {border: none;} .aside_info .ly_flx .aside-select-btn {width: 11px; height: 10px; background-image: url(../images/icon/ico_triangle_down.svg); background-repeat: no-repeat; background-position: center; background-size: 100%;} .aside_info .ly_flx .aside-select-btn.on {transform: rotate(180deg);} .aside_info .ly_flx a {color: #fff; margin-left: auto; font-size: 16px; width: 140px; height: 40px; box-sizing: border-box; border: 1px solid #fff; border-radius: 3px; font-weight: bold; letter-spacing: -0.96px; text-align: center; line-height: 40px; transition: all 0.3s;} .aside_info .ly_flx a:hover {background-color: #0f447c; border: 1px solid #0f447c; transition: all 0.2s ease-in-out;} .aside_info .quick_booking {display: flex; align-items: center; background-color: #fff; width: 100%; height: 55px; justify-content: center; gap: 10px; margin-top: 5px; transition: all 0.3s ease-in;} .aside_info .quick_booking:hover {border-radius: 32px; transition: all 0.3s;} .aside_info .quick_booking i {width: 26px; height: 26px; display: inline-block; background-image: url(../images/icon/ico_mark.png); background-size: cover;} .aside_info .quick_booking span {font-size: 24px; color: #398bdf; font-weight: 700;} /* aisde 셀렉트 박스 공용 */ .aside-select-box {position: relative; display: flex; align-items: center;} .aside-select-box .label {cursor: pointer;} .aside-select-list {display: none; position: absolute; width: 100%; top: calc(100% + 10px); left: 0; padding: 0; box-sizing: border-box; box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.14); border-radius: 6px; background-color: #fff; z-index: 10;} .aside-select-list::before {content: ''; position: absolute; border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid transparent; top: -20px; left: 50%; transform: translate(-50%); width: 0px; height: 0px;} .aside-select-btn.on+.aside-select-list {display: block;} .aside-select-list li {width: 100%; height: 47px; box-sizing: border-box;} .aside-select-list li button {width: 100%; height: 100%; background-color: #fff; color: #333; font-size: 16px; font-weight: 500; cursor: pointer; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center; border-radius: 6px;} .aside-select-list li button:hover, .aside-select-list li button:focus {background-color: rgba(0,0,0,0.05); color: #1382f4;} .aside-select-box.no-select .label{cursor: default;} .aside-select-box.no-select .aside-select-btn{display: none;} .aside-select-box.no-select .aside-select-list{display: none;} .aside_inner {padding: 20px 22px 50px; box-sizing: border-box; width: 100%; min-height: 550px;} .aside_search {width: 100%; margin-bottom: 10px;} .aside_search .date {background-color: #e6f0ff; padding: 15px 15px 15px 55px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background-image: url(../images/icon/ico_arrow-down-sky.png); background-repeat: no-repeat; background-position-x: 15px; background-position-y: 50%; box-sizing: border-box; width: 100%;} .aside_search .box {display: flex; align-items: center; width: 100%;} .aside_search .box.end .label {font-weight: 700;} .aside_search .date .label {min-width: 32px; margin-right: 15px; font-size: 18px; font-weight: 500; color: #4c5266;} .aside_search .date .input_group {display: flex; align-items: center; width: 100%; gap: 10px; position: relative;} .aside_search .date .input_group input {border: none; font-size: 16px; padding: 0px 15px; color: #5f6b8b; cursor: pointer; height: 44px;} .aside_search .date .input_group input::placeholder {font-size: 16px; color: #5f6b8b} .aside_search .date .input_group .date_input {width: 65%; background-image: url(../images/icon/ico_calendar.png); background-repeat: no-repeat; background-position-y: 50%; background-position-x: calc(100% - 10px);} .aside_search .date .input_group .time_input {width: 35%; background-image: url(../images/icon/ico_time.png); background-repeat: no-repeat; background-position-y: 50%; background-position-x: calc(100% - 10px);} .aside_search .date .input_group .ui-datepicker {top: 45px !important; left: 0 !important; right: 0 !important;} .aside_search .filter-btn {margin: 15px auto; width: 40px; height: 20px; display: block; font-size: 0; background-image: url(../images/icon/ico_arrow-down_gr.png); background-position: center; background-size: 20px; background-repeat: no-repeat; background-color: #fff;} .aside_search .filter-btn.active {transform: rotate(180deg);} .aside_search .filter {display: none; position: relative;} .aside_search .filter.active {display: block;} .aside_search .filter .box {margin-bottom: 13px;} .aside_search .filter .box:lang{margin-bottom: 0;} .aside_search .filter .tit {min-width: 110px; margin-right: 18px; display: flex; align-items: center; color: #606c8c; letter-spacing: -0.96px; font-weight: 600;} .aside_search .filter i {width: 15px; height: 15px; display: inline-block; margin-right: 7px; background-repeat: no-repeat; background-position: center; background-size: contain;} .aside_search .filter ul {display: flex; width: 100%; gap: 5px;} .aside_search .filter ul li {width: 100%;} .aside_search .filter ul li button {font-weight: 700; height: 34px; width: 100%; color: #606c8c; background-color: #f5f5f5;} .aside_search .filter ul li button:hover{opacity: 0.8;} .aside_search .filter ul li button.on {color: #fff; background-color: #59a7f7;} .aside_search .filter ul li button.on:hover{opacity: 1;cursor: initial;} .aside_search .filter ul li strong {font-weight: 700;} .aside_search .filter ul li p {display: inline-block;} .seat_list_wrap {height: 255px; overflow-y: auto; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 20px 0;} /* 검색영역 닫혀있을 때 : .filter */ .aside.noScroll .seat_list_wrap { height: calc(100vh - 600px); overflow-y: scroll; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 10px 0 0;} .aside.noScroll .seat_list_wrap .seat_list li:last-child .seat_item{border-bottom: 0;} .aside.locker.noScroll .seat_list_wrap { height: calc(100vh - 560px);} .aside.sleepCapsul.noScroll .seat_list_wrap { height: calc(100vh - 350px);} .seat_list_wrap::-webkit-scrollbar {width: 8px;} .seat_list_wrap::-webkit-scrollbar-track {background: #fff; border-radius: 4.5px;} .seat_list_wrap::-webkit-scrollbar-thumb {background: #dcdfe6; border-radius: 4.5px;} .seat_list_wrap::-webkit-scrollbar-thumb:hover {background: #e9e9e9;} .seat_list li:last-child {border-bottom: none;} .seat_list .seat_item {display: flex; align-items: center; width: 100%; padding: 5px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1);} .seat_list .seat_item .seat_img {display: flex; align-items: center; margin-right: 30px; width: 140px; height: 100px; position: relative;} .seat_list .seat_item .seat_img img {width: 100%;} .seat_list .seat_item .seat_img span {position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; line-height: 100px; background-color: rgba(0, 0, 0, 0.5); font-size: 18px; color: #fff; font-weight: 400; letter-spacing: -0.18px;} .seat_list .seat_item .seat_info > span {font-size: 14px; color: #fff; background-color: #0f447c; padding: 5px 10px; margin-bottom: 5px; display: inline-block;} .seat_list .seat_item .seat_info h5 {font-size: 20px; color: #333333; font-weight: 600; display: inline-block; margin-right: 15px;} .seat_list .seat_item .seat_info p {font-size: 16px; color: #888; display: inline-block;} .seat_list .seat_item .seat_info p em {color: #1382f4; font-weight: 400; margin-right: 5px;} .seat_list .seat_item .seat_info p span {font-weight: 400; color: #333333;} .aside_button {position: absolute; top: 50%; left: -38px; transform: translateY(-50%);} .aside_button button {background: #b8bfd0; width: 38px; height: 76px; border-radius: 38px 0 0 38px; box-shadow: 1.5px 5.8px 7px 0 rgba(0, 0, 0, 0.09); background-image: url(../images/icon/ico_arrow_L_wh.png); background-repeat: no-repeat; background-position: center; background-size: 10px;} .aside_button button.on {background-image: url(../images/icon/ico_arrow_R_wh.png);} .aside.room-rsv .aside_search .filter {display: block; margin-top: 15px;} /* 예약내역 상세보기 ASIDE */ .aside.detail .aside_info {padding: 10px 25px 20px;} .aside.detail .aside_info .select_wrap {padding: 10px 0px;} .aside.detail .aside_info .select_wrap:last-child {border-bottom: none; padding-bottom: 0;} .aside.detail .aside_info > div.time-box{padding-bottom: 0px;} .aside.detail .aside_info > div.time-box li:not(.aside.detail .aside_info > div.time-box li:last-child){margin-bottom: 5px;} .aside.detail .aside_info .time-box {align-items: center;} .aside.detail .aside_info .time-box ul {position: relative; margin-left: 33px; padding-left: 30px;} .aside.detail .aside_info .time-box ul::after{position: absolute; display: inline-block; width: 20px;height: 60px; left: 0px; top: 0; opacity: 0.7; content: ""; background-image: url(../images/icon/ico_arrow-down-sky.png); background-size: 17px; background-repeat: no-repeat; background-position: top 50% left 0; } .aside.detail .aside_info .time-box ul li {font-size: 18px; font-weight: 500;} .aside.detail .aside_info .time-box ul li span{margin: 0; font-size: 18px; margin-left: 10px;} .aside.detail .room-info .tit {font-size: 22px; font-weight: bold; color: #1382f4; margin-bottom: 10px;} .aside.detail .room-info .img-box {width: 100%; max-height: 275px; overflow: hidden; margin-bottom: 40px;} .aside.detail .room-info .img-box img {width: 100%;} .aside.detail .room-info .room-name {font-size: 22px; font-weight: bold; color: #333333; text-align: center;} .aside.detail .room-info .room-seat {font-size: 16px; font-weight: 400; color: #1382f4; letter-spacing: -0.16px; text-align: center; margin-bottom: 24px;} .aside.detail .room-info .room-device {display: flex; gap: 12px; justify-content: center; padding-bottom: 40px; border-bottom: 1px solid #f0f0f0;} .aside.detail .room-info .room-device li {text-align: center;} .aside.detail .room-info .room-device li .ico_wrap {width: 43px; height: 43px; border-radius: 50%; background-color: #e4e5e8; margin: 0 auto 9px;} .aside.detail .room-info .room-device li.on .ico_wrap {background-color: #d0e6fd;} .aside.detail .room-info .room-device li p {font-weight: 500; color: #a3a9bb; font-size: 12.5px;} .aside.detail .room-info .room-device li.on p {font-weight: 700; color: #1382f4;} .aside.detail .room-info .btn_wrap {margin-top: 30px; gap: 10px;flex-flow: row wrap ; } .aside.detail .btn_wrap button {height: 50px; border-radius: 3px; font-size: 18px;} .aside.detail .btn_wrap button.half { width: 50%; width: calc((100% - 10px) / 2);} .aside.detail .btn_wrap button.full {width: 100%;} .aside.detail .room-info .btn_wrap button i {width: 17px; height: 17px; display: inline-block; background-size: contain; margin-bottom: -2px; margin-right: 5px;} /* 좌석, 회의실 예약현황 ASIDE */ .aside.state .aside_info {padding: 10px 25px 20px;} .aside.state .aside_info > div {border-top: 1px solid rgba(999, 999, 999, 0.2); border-bottom:0px;} .aside.state .aside_info > div.time-box{padding-bottom: 0px;} .aside.state .aside_info > div.time-box li:not(.aside.state .aside_info > div.time-box li:last-child){margin-bottom: 5px;} .aside.state .aside_info > div:first-child {border-top: none;} .aside.state .aside_info > div > a {color: #fff; margin-left: auto; font-size: 16px; width: 140px; height: 40px; box-sizing: border-box; border: 1px solid #fff; border-radius: 3px; font-weight: bold; letter-spacing: -0.96px; text-align: center; line-height: 40px;} .aside.state .aside_info .time-box {align-items: center;} .aside.state .aside_info .time-box ul {position: relative; margin-left: 33px; padding-left: 30px;} .aside.state .aside_info .time-box ul::after{position: absolute; display: inline-block; width: 20px;height: 60px; left: 0px; top: 0; opacity: 0.7; content: ""; background-image: url(../images/icon/ico_arrow-down-sky.png); background-size: 17px; background-repeat: no-repeat; background-position: top 50% left 0; } .aside.state .aside_info .time-box ul li {font-size: 18px; font-weight: 500;} .aside.state .aside_info .time-box ul li span{margin: 0; font-size: 18px; margin-left: 10px;} .aside.state .aside_inner {min-height: unset;} .aside.state .aside_inner .room-info .tit {font-size: 22px; font-weight: bold; color: #1382f4; margin-bottom: 10px;} .aside.state .aside_inner .room-info .img-box {width: 100%; max-height: 275px; overflow: hidden; margin-bottom: 40px;} .aside.state .aside_inner .room-info .img-box img {width: 100%;} .aside.state .aside_inner .room-info .room-name {font-size: 22px; font-weight: bold; color: #333333; text-align: center;} .aside.state .aside_inner .room-info .room-seat {font-size: 16px; font-weight: 400; color: #1382f4; letter-spacing: -0.16px; text-align: center; margin-bottom: 24px;} .aside.state .aside_inner .room-info .room-device {display: flex; gap: 12px; justify-content: center;} .aside.state .aside_inner .room-info .room-device li {text-align: center;} .aside.state .aside_inner .room-info .room-device li .ico_wrap {width: 43px; height: 43px; border-radius: 50%; background-color: #e4e5e8; margin: 0 auto 9px;} .aside.state .aside_inner .room-info .room-device li.on .ico_wrap {background-color: #d0e6fd;} .aside.state .aside_inner .room-info .room-device li p {font-weight: 500; color: #a3a9bb; font-size: 12.5px;} .aside.state .aside_inner .room-info .room-device li.on p {font-weight: 700; color: #1382f4;} .aside.state .aside_inner .room-info .btn_wrap {margin-top: 30px; gap: 10px;flex-flow: row wrap ; } .aside.state .my_seat {margin-bottom: 30px;} .aside.state .my_seat .seat_item {display: flex; align-items: center;} .aside.state .my_seat .seat_img {position: relative; width: 140px; height: 100px;} .aside.state .my_seat .seat_img img {width: 100%; height: 100%;} .aside.state .my_seat .seat_img span {position: absolute; width: 100%; background-color: rgba(90, 102, 129, 0.77); color: #fff; text-align: center; bottom: 0; left: 0; right: 0;} .aside.state .my_seat .seat_info {margin-left: 25px;} .aside.state .my_seat .seat_info .tag {color: #fff; background-color: #0f447c; padding: 2px 7px; font-size: 14px; font-weight: 600; display: inline-block; margin-bottom: 3px;} .aside.state .my_seat .seat_txt {display: flex; align-items: center; margin-bottom: 5px;} .aside.state .my_seat .seat_txt h5 {font-size: 20px; font-weight: bold; letter-spacing: -1.2px; color: #333; margin-right: 15px;} .aside.state .my_seat .seat_txt p {font-size: 16px; color: #333; font-weight: 400;} .aside.state .my_seat .seat_txt p em {color: #1382f4; font-weight: 400; letter-spacing: -0.16px;} .aside.state .my_seat .seat_device li {float: left; display: flex; align-items: center; margin-right: 20px;} .aside.state .my_seat .seat_device li:last-child {margin-right: 0px;} .aside.state .my_seat .seat_device li .ico_wrap {width: 30px; height: 30px; border-radius: 100%; background-color: #d0e6fd; background-size: 15px; margin-right: 5px;} .aside.state .my_seat .seat_device li p {font-size: 14px; font-weight:500; color: #1382f4;} .aside.state .btn_wrap {padding: 30px 0 35px; border-top: 1px solid #f0f0f0; flex-wrap: wrap; gap: 10px;} .aside.state .btn_wrap button {height: 50px; border-radius: 3px; font-size: 18px;} .aside.state .btn_wrap div {width: 100%;} .aside.state .btn_wrap div button:only-child, .aside.state .btn_wrap button.home {width: 100%;} .aside.state .btn_wrap div button:not(:only-child), .aside.state .btn_wrap div button + button {width: calc((100% - 10px) / 2);} .aside.state .btn_wrap button.home i {width: 17px; height: 17px; display: inline-block; background-size: contain; margin-bottom: -2px; margin-right: 5px;} .aside.state .btn_wrap button.half { width: 50%; width: calc((100% - 10px) / 2);} .aside.state .btn_wrap button.full {width: 100%;} .aside.state .room-info .btn_wrap button i {width: 17px; height: 17px; display: inline-block; background-size: contain; margin-bottom: -2px; margin-right: 5px;} /* 좌석/회의실 배치도 ASIDE */ .aside.chart .aside_wrap {height: calc(100vh - 100px);} .aside.chart .aside_info {padding-bottom: 10px;} .aside.chart .aside_info .select_wrap:last-child {border: none;} .aside.chart .btn_wrap {position: absolute; left: 0; bottom: 20px; right: 0; flex-wrap: wrap; padding: 0 20px; gap: 10px;} .aside.chart .btn_wrap button {width: 100%; border-radius: 3px; box-shadow: 7.4px 3px 7px 0 rgba(0, 0, 0, 0.02); height: 50px; font-size: 18px;} .aside.chart .btn_wrap button.bg_blue i {width: 18px; height: 21px; background-position: center; background-size: contain; background-repeat: no-repeat; display: inline-block; vertical-align: sub; margin-right: 5px;} /* 컨디셔닝센터 ASIDE */ .aside.conditioning .aside_inner {min-height: unset;} .aside.conditioning .seat_list_wrap {height: 440px; padding-top: 0px;} .aside.conditioning .seat_list .seat_item .seat_info h5 {font-weight: bold; font-size: 22px;} .aside.conditioning .aside_info {padding: 10px 25px 10px;} .aside.conditioning .aside_info .time-box {align-items: flex-start;} .aside.conditioning .aside_info .time-box p {font-size: 18px; font-weight: bold; padding-left: 30px; background-repeat: no-repeat; background-position: top 50% left 0; background-image: url(../images/icon/ico_calendar_wh.png); background-size: 17px; margin-left: 32px;} .aside.conditioning .seat_list_wrap {border-top: none;} .aside.conditioning .seat_list .seat_item .seat_info p {display: block;} /* 수면캡슐 ASIDE */ .aside.sleepCapsul .aside_inner {min-height: unset;} .aside.sleepCapsul .seat_list_wrap {height: 440px; padding-top: 0px;} .aside.sleepCapsul .seat_list .seat_item .seat_info h5 {font-weight: bold; font-size: 22px;} .aside.sleepCapsul .aside_info {padding: 10px 25px 10px;} .aside.sleepCapsul .aside_info .time-box {align-items: flex-start;} .aside.sleepCapsul .aside_info .time-box p {font-size: 18px; font-weight: bold; line-height: 30px; padding-left: 30px; background-repeat: no-repeat; background-position: top 50% left 0; background-image: url(../images/icon/ico_calendar_wh.png); background-size: 17px; margin-left: 32px;} .aside.sleepCapsul .seat_list_wrap {border-top: none;} .aside.sleepCapsul .seat_list .seat_item .seat_info p {display: block;} /* 스마트시스템 ASIDE */ .aside.smart .aside_info {padding: 10px 25px 0;} .aside.smart .aside_info .select_wrap:last-child {border-bottom: none;} .aside.smart .aside_info .select_wrap .usage_wrap {display: flex;flex-flow: row nowrap; align-items: bottom; justify-content: start; margin-left: 33px; gap: 25px;} .aside.smart .aside_info .select_wrap .usage_wrap li{display: flex; flex-flow: column nowrap; align-items: center; gap: 5px; font-size: 16px;} .aside.smart .aside_info .select_wrap .usage_wrap li span{margin: 0; font-weight: bold; font-size: 35px;line-height: 1.2;} .aside.smart .aside_info .select_wrap .usage_wrap li:not(.aside.smart .aside_info .select_wrap .usage_wrap li:first-child){padding-left: 25px; border-left: 1px solid rgba(999, 999, 999, 0.2);} .aside.smart .aside_cont {padding-bottom: 50px;} .aside.smart .title {margin: 25px 0 15px; font-size: 22px; font-weight: bold; color: #1382f4; padding: 0 25px;} .aside.smart .list li {background-color: #f7f7f9; display: flex; padding-left: 30px; align-items: center; height: 80px;} .aside.smart .list li .img-box {width: 56px; height: 56px; border-radius: 11px; background-color: #fff; margin-right: 25px; background-position: center; background-repeat: no-repeat;} .aside.smart .list.toilet li {height: 100px;} .aside.smart .list.toilet li .img-box {width: 70px; height: 70px;} .aside.smart .list li:nth-child(even) {background-color: #fff;} .aside.smart .list li:nth-child(even) .img-box {background-color: #f7f7f9;} .aside.smart .list li:last-child {border-bottom: 1px solid #f0f0f0;} .aside.smart .list li.align-start {align-items: start;} .aside.smart .list li.align-start p {font-size: 14px; font-weight: 400; color: #4c5266; letter-spacing: -0.7px; margin-top: 15px;} .aside.smart .list li .txt-box p {font-size: 18px; font-weight: bold; color: #5a6681; letter-spacing: -1.08px;} .aside.smart .list li .txt-box p > span{display: block; font-size: 16px; color: #1382f4; font-weight: bold;} .aside.smart .list li .txt-box span {font-size: 14px; font-weight: 400; color: #4c5266; letter-spacing: -0.7px;} .aside.smart .list li .img-box.scent1 {background-image: url(../images/icon/ico_scent_01.png); background-size: 28px;} .aside.smart .list li .img-box.scent2 {background-image: url(../images/icon/ico_scent_02.png); background-size: 22px;} .aside.smart .list li .img-box.scent3 {background-image: url(../images/icon/ico_scent_03.png); background-size: 35px;} .aside.smart .list li .img-box.scent4 {background-image: url(../images/icon/ico_scent_04.png); background-size: 23px;} .aside.smart .list li .img-box.air1 {background-image: url(../images/icon/ico_air_01.png); background-size: 30px;} .aside.smart .list li .img-box.air2 {background-image: url(../images/icon/ico_air_02.png); background-size: 23px;} .aside.smart .list li .img-box.air3 {background-image: url(../images/icon/ico_air_03.png); background-size: 31px;} .aside.smart .list li .img-box.toilet1 {background-image: url(../images/icon/ico_toilet_01.png); background-size: 70px; background-position: left top;} .aside.smart .list li .img-box.toilet2 {background-image: url(../images/icon/ico_toilet_02.png); background-size: 70px; background-position: left top;} .aside.smart .list li .img-box.toilet3 {background-image: url(../images/icon/ico_toilet_03.png); background-size: 70px; background-position: left top;} .aside.smart .list li .img-box.toilet4 {background-image: url(../images/icon/ico_toilet_04.png); background-size: 70px; background-position: left top;} .aside.smart .list li .img-box.toilet5 {background-image: url(../images/icon/ico_toilet_05.png); background-size: 70px; background-position: left top;} .aside.smart .list li .img-box.toilet6 {background-image: url(../images/icon/ico_toilet_06.png); background-size: 70px; background-position: left top;} .aside.smart .card {display: flex; flex-wrap: wrap; padding: 0 23px; gap: 10px;} .aside.smart .card li {width: calc((100% - 10px) / 2); border-radius: 11px; text-align: center; padding: 15px 5px;} .aside.smart .card li .kor {font-size: 18px; font-weight: bold; letter-spacing: -1.08px; line-height: 17px;} .aside.smart .card li .eng {font-size: 14px; font-weight: 400;} .aside.smart .card li .efficacy {font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -0.96px;} .aside.smart .card li.color1 {background-color: #ddf7de;} .aside.smart .card li.color1 .kor, .aside.smart .card li.color1 .eng {color: #5a935c;} .aside.smart .card li.color2 {background-color: #f2f7dd;} .aside.smart .card li.color2 .kor, .aside.smart .card li.color2 .eng {color: #9ea96e;} .aside.smart .card li.color3 {background-color: #f7eadd;} .aside.smart .card li.color3 .kor, .aside.smart .card li.color3 .eng {color: #a68666;} .aside.smart .card li.color4 {background-color: #deddf7;} .aside.smart .card li.color4 .kor, .aside.smart .card li.color4 .eng {color: #8d8bbd;} .aside.smart .card.air li .kor {font-size: 18px;} .aside.smart .card.air li .eng {font-weight: 500;} .aside.smart .card.air li .level {font-weight: 400; font-size: 14px; letter-spacing: -0.84px; background-color: #fff; padding: 5px 0;} .aside.smart .card.air li .level span {margin: 0 3px;} .aside.smart .card.air li .level span.type1 {color: #1382f4; font-weight: 600;} .aside.smart .card.air li .level span.type2 {color: #12b37c; font-weight: 500;} .aside.smart .card.air li.color1 {background-color: rgba(35, 145, 196, 0.1);} .aside.smart .card.air li.color1 .kor, .aside.smart .card.air li.color1 .eng {color: #1285b3;} .aside.smart .card.air li.color2 {background-color: rgba(238, 115, 115, 0.1);} .aside.smart .card.air li.color2 .kor, .aside.smart .card.air li.color2 .eng {color: #d24d4d;} .aside.smart .card.air li.color3 {background-color: rgba(185, 192, 63, 0.1);} .aside.smart .card.air li.color3 .kor, .aside.smart .card.air li.color3 .eng {color: #99aa2f;} .aside.smart .card.air li.color4 {background-color: rgba(247, 189, 48, 0.1);} .aside.smart .card.air li.color4 .kor, .aside.smart .card.air li.color4 .eng {color: #daa31d;} .aside.smart .pgraph {font-size: 18px; font-weight: 400; color: #5a6681; letter-spacing: -1.08px; padding: 0 25px; line-height: 26px; margin-bottom: 20px;} .aside.smart .pgraph strong {font-weight: 400; color: #2087f5; letter-spacing: -1.08px;} .aside.smart .pgraph strong span {letter-spacing: normal;} .aside.smart .txt-area {font-size: 14px; font-weight: 400; color: #4c5266; letter-spacing: -0.7px; line-height: 24px; padding: 30px 25px; background-color: rgba(184, 191, 208, 0.1); margin-bottom: 20px;} .aside.smart .img-area {padding: 0 25px; margin-bottom: 20px;} .aside.smart .img-area img {width: 100%;} /* ------------------------------------------------------ 좌석 예약 ---------------------------------------------------------*/ .container .desk_head {position: relative; margin-top: 20px; padding: 0 40px;} .container .desk_head h1 {font-size: 36px; font-weight: 600; color: #4c5266; letter-spacing: -2.16px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0;} .container .map {height: calc(100% - 95px); overflow: hidden;} .container .map img{margin: 30px auto; display: block;} .container .map iframe {position: relative; width: 100%; height: 100%;} /* 좌석 예약 팝업 */ .pop-desk-rsv-bg {display: none; position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: 100%; -webkit-transition: none; transition: none;} .pop-desk-rsv {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.9); box-shadow: 1.9px 7.8px 7px 0 rgba(0, 0, 0, 0.08); z-index: 77777;} .pop-desk-rsv-bg.active, .pop-desk-rsv.active {display: block;} .pop-desk-close {position: absolute; top: 20px; right: 20px; width: 16px; height: 16px; font-size: 0; background-image: url(../images/icon/ico_close.png); background-position: center; background-repeat: no-repeat; background-size: cover;} .pop-desk-info {padding: 25px; display: flex;} .pop-desk-box {display: flex; align-items: center; border-right: 1px dashed #b6b7bc; padding-right: 30px; margin-right: 30px;} .pop-desk-img {width: 140px; height: 100px; position: relative;} .pop-desk-img img {width: 100%; height: 100%;} .pop-desk-img span {position: absolute; width: 100%; background-color: rgba(90, 102, 129, 0.77); color: #fff; text-align: center; bottom: 0; left: 0; right: 0;} .pop-desk-txt {margin-left: 25px; text-align: left;} .pop-desk-txt span {color: #fff; background-color: #5a6681; padding: 5px 10px; font-size: 14px; font-weight: 600;} .pop-desk-txt h5 {font-size: 24px; font-weight: 700; color: #333333;} .pop-desk-txt p {font-weight: 500; color: #333333;} .pop-desk-txt p em {font-weight: 500; color: #1382f4;} .pop-desk-device {display: flex; align-items: center; gap: 12px;} .pop-desk-device li {text-align: center;} .pop-desk-device li .ico_wrap {background-color: #d0e6fd; width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 9px;} .pop-desk-device li p {font-weight: 700; color: #1382f4;} .pop-desk-bottom {padding: 12px 11px 23px 35px; background-color: #f5f5f5; display: flex;} .pop-desk-date-box {display: flex; align-items: center;} .pop-desk-date-box.input_group {margin-bottom: 5px; position: relative;} .pop-desk-date-label {font-size: 16px; font-weight: 600; color: #606c8c; letter-spacing: -0.96px; margin-right: 15px; min-width: 30px;} .pop-desk-input {height: 38px; background-color: #fff; border: none; background-repeat: no-repeat; background-position: top 50% right 12px; background-size: 20px; font-size: 16px; font-weight: 400; color: #5f6b8b; box-sizing: border-box; cursor: pointer;} .pop-desk-input.datepicker {background-image: url(../images/icon/ico_calendar.png); padding: 0 15px; max-width: 236px;} .pop-desk-input.timepicker {background-image: url(../images/icon/ico_time.png); padding-left: 15px; max-width: 103px;} .pop-desk-input:disabled {opacity: .5; cursor: default;} .pop-desk-date-box span {font-size: 16px; color: #5f6b8b; margin: 0 10px;} .pop-desk-rsv-button {margin-left: 20px;} .pop-desk-rsv-button button {width: 144px; height: 80px; border-radius: 4px; background-image: linear-gradient(to top, #1382f4, #82bffe); color: #fff; font-size: 18px; font-weight: bold; letter-spacing: -1.08px;} .pop-desk-rsv-button button:hover {background-image: linear-gradient(to top, #1683f5, #1683f5) !important; transition: all 0.4s ease;} .container .floor_btn_wrap {position: absolute; top: 0; right: 80px;} .container .floor_btn_wrap .swiper {overflow: hidden;} .container .floor_btn_wrap ul {display: flex; align-items: center; gap: 15px; max-width: 295px;} .container .floor_btn_wrap ul::-webkit-scrollbar {width: 0;} .container .floor_btn_wrap ul li {width: 60px !important; height: 60px !important;} .container .floor_btn_wrap ul li button {width: 60px; height: 60px; color: #fff; font-size: 22px; font-weight: 500; background-color: #606c8c; border-radius: 10px;} .container .floor_btn_wrap ul li button.on {background-image: linear-gradient(to top, #1382f4, #3695fa);} .container .floor_btn_wrap .swiper-button-next {right: -30px !important;} .container .floor_btn_wrap .swiper-button-prev {left: -40px !important;} .container .floor_btn_wrap ul li button.on:hover{background-image: linear-gradient(to top, #1683f5, #1683f5) !important; transition: all 0.4s ease;} .container .floor_btn_wrap ul li button:hover{background-image: linear-gradient(to top, #606c8c, #495576) !important; transition: all 0.4s ease;} .container .desk_head.state h1{padding-left: 30px;} .container .desk_head.state .prev-btn {position: absolute; left: 40px; top: 17px; font-size: 0; width: 14px; height: 20px; background: url(../images/icon/ico_arrow_L_gr.png) no-repeat center / contain; margin-right: 15px;} /* 좌석 배치도 */ .container .seatChart {text-align: center; height: calc(100% - 95px); overflow: hidden;} .container .seatChart img{margin: 30px auto; display: block;} /* 좌석 예약 설정/정보 팝업 */ .pop-desk-rsv {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.9); box-shadow: 1.9px 7.8px 7px 0 rgba(0, 0, 0, 0.08);} .pop-desk-rsv .pop-close {width: 16px; height: 16px; background: url(../images/icon/ico_close.png) no-repeat center/cover; position: absolute; top: 20px; right: 20px; transform: translateY(-50%); text-indent: -99999px;font-size: 0; -webkit-transition: all .4s; transition: all .4s;} .pop-desk-rsv .pop-close:hover {cursor: pointer; -webkit-transform: translateY(-50%) rotate(180deg);transform: translateY(-50%) rotate(180deg);} .pop-desk-rsv .pop-desk-info {padding: 25px; display: flex;} .pop-desk-rsv .pop-desk-info .pop-desk-box {display: flex; align-items: center; border-right: 1px dashed #b6b7bc; padding-right: 30px; margin-right: 30px;} .pop-desk-rsv .pop-desk-box .pop-desk-img {width: 140px; height: 100px; position: relative;} .pop-desk-rsv .pop-desk-box .pop-desk-img > img {width: 100%; height: 100%; margin: 0;} .pop-desk-rsv .pop-desk-box .pop-desk-img > span {position: absolute; left: 0; right: 0; width: 100%; background-color: rgba(90, 102, 129, 0.77); color: #fff; text-align: center; bottom: 0;} .pop-desk-rsv .pop-desk-box .pop-desk-txt {margin-left: 25px; text-align: left;} .pop-desk-rsv .pop-desk-box .pop-desk-txt > span {color: #fff; background-color: #5a6681; padding: 5px 10px; font-size: 14px; font-weight: 600;} .pop-desk-rsv .pop-desk-box .pop-desk-txt > h5 {font-size: 24px; font-weight: 700; color: #333333;} .pop-desk-rsv .pop-desk-box .pop-desk-txt > p {font-weight: 500; color: #333333;} .pop-desk-rsv .pop-desk-box .pop-desk-txt > p > em {font-weight: 500; color: #1382f4;} .pop-desk-rsv .pop-desk-device {display: flex; align-items: center; gap: 12px;} .pop-desk-rsv .pop-desk-device li {text-align: center;} .pop-desk-rsv .pop-desk-device li > div {background-color: #e4e5e8;width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 9px; background-repeat: no-repeat; background-position: center;} .pop-desk-rsv .pop-desk-device li.on > div {background-color: #d0e6fd;} .pop-desk-rsv .pop-desk-device li > p {font-weight: 500; color: #a3a9bb;} .pop-desk-rsv .pop-desk-device li.on > p {font-weight: 700; color: #1382f4;} .pop-desk-rsv .pop-desk-device li > .ico_monitor {background-image: url(../images/icon/ico_monitor.png); background-size: 20px;} .pop-desk-rsv .pop-desk-device li > .ico_IPphone {background-image: url(../images/icon/ico_monitor.png); background-size: 23px;} .pop-desk-rsv .pop-desk-bottom {padding: 12px 11px 23px 35px; background-color:#f5f5f5; display: flex;} .pop-desk-rsv .pop-desk-date-box {display: flex; align-items: center;} .pop-desk-rsv .pop-desk-date-box.input_group {display: flex; align-items: center; margin-bottom: 5px; position: relative;} .pop-desk-rsv .pop-desk-date-box .pop-desk-date-label {font-size: 16px; font-weight: 600; color: #606c8c; letter-spacing: -0.96px; margin-right: 15px; min-width: 30px;} .pop-desk-rsv .pop-desk-date-box .pop-desk-date-input.date_input {cursor: pointer; height: 38px; background-color: #fff; border: none; background-image: url(../images/icon/ico_calendar.png); background-repeat: no-repeat; background-position: top 50% right 12px; background-size: 20px; padding: 0 15px; font-size: 16px; font-weight: 400; color: #5f6b8b; max-width: 236px; box-sizing: border-box;} .pop-desk-rsv .pop-desk-date-box .pop-desk-time-input.time_input {cursor: pointer; height: 38px; background-color: #fff; border: none; background-image: url(../images/icon/ico_time.png); background-repeat: no-repeat; background-position: top 50% right 12px; background-size: 20px; padding-left: 15px; font-size: 16px; font-weight: 400; color: #5f6b8b; max-width: 103px; box-sizing: border-box;} .pop-desk-rsv .pop-desk-date-box > span{font-size: 16px; color: #5f6b8b; margin: 0 10px;} .pop-desk-rsv .pop-desk-rsv-button {margin-left: 20px;} .pop-desk-rsv .pop-desk-rsv-button button{width: 144px; height: 80px; border-radius: 4px; background-image: linear-gradient(to top, #1382f5, #3695fa); color: #fff; font-size: 18px; font-weight: bold; letter-spacing: -1.08px; transition: all 0.2s ease;} /* ------------------------------------------------------ 회의실 예약 ---------------------------------------------------------*/ .meetingroom h1 {font-size: 32px; color: #4c5266; font-weight: 600; margin-top: 10px; padding:0px 40px 10px; border-bottom: 1px solid #f0f0f0;} .meetingroom_head {display: flex; margin-top: 25px; margin-bottom: 25px; align-items: center; justify-content: space-between; padding: 0 40px;} .meetingroom .meetingroom_calendar {display: flex; align-items: center; justify-content: center;position: relative;} .meetingroom .meetingroom_calendar input {cursor: pointer; border: none; background-color: inherit; text-align: center; font-size: 22px; font-weight: 600; max-width: 170px; color: #5a6681; margin: 0 35px;} .meetingroom .meetingroom_calendar .date-display {margin: 0 20px; cursor: pointer;color: #fff;font-size: 18px;font-weight: 600;} .meetingroom .meetingroom_calendar button {width: 36px; height: 36px; background-position: center; background-repeat: no-repeat; background-size: 13px; text-indent: -9999px; box-shadow: 1px 3.9px 7px 0 rgba(0, 0, 0, 0.14); border-radius: 3px;} .meetingroom .meetingroom_calendar button.prevBtn {background-image: url(../images/icon/ico_arrow_L_gr.png);} .meetingroom .meetingroom_calendar button.nextBtn {background-image: url(../images/icon/ico_arrow_R_gr.png);} .meetingroom .meetingroom_calendar .ui-datepicker {position: absolute; top: 50px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 1000 !important;} .meetingroom_head ul:not(.select-list) li {float: left; position: relative; margin-right: 18px; font-weight: 600; color: #606c8c; letter-spacing: -0.96px; padding-left: 22px;} .meetingroom_head ul:not(.select-list) li::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px;} .meetingroom_head ul li:nth-child(1):before {background-color: #838EAC;} .meetingroom_head ul li:nth-child(2):before {background-color: #fff; border: 1px solid #d9d9d9;} .meetingroom_head ul li:nth-child(3):before {background-color: #1a84f4;} .schedule_btn_box_calendar button {background-color: #606c8c; color: #fff; font-size: 20px; font-weight: 700; width: 70px; border-radius: 3px; height: 40px; margin-right: 10px;} .schedule_btn_box_calendar button.active {background-color: #59a7f7; box-shadow: 7.4px 3px 7px 0 rgba(0, 0, 0, 0.11);} /* 회의실 예약 hover 이벤트, disabled */ .meetingroom .meetingroom_calendar input:hover{color: #222;} .schedule_btn_box_calendar button:hover{background-color: #343f5b;} .schedule_btn_box_calendar button.active:hover{background-color: #3e95ec;} .meetingroom .meetingroom_calendar button:hover{box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.30);} .meetingroom .meetingroom_calendar button:disabled{cursor: initial; opacity: 0.5;} .meetingroom .meetingroom_calendar button:disabled:hover{box-shadow: 1px 3.9px 7px 0 rgba(0, 0, 0, 0.14); cursor: initial;} /* 회의실 예약 일간 */ .meetingroom#type1 .meetingroom_body {padding: 0 30px; box-sizing: border-box;} .meetingroom_body ul li {margin-bottom: 30px;} .meetingroom_body ul li > div {border-bottom: 1px solid #f0f0f0;} .meetingroom_body ul li .meetingroom_item_info {position: relative; display: table-cell; width: 250px; vertical-align: middle; padding-left: 40px; box-sizing: border-box; background-color: #f5f5f5;} .meetingroom_body ul li .meetingroom_item_info .ly_flx > div {width: 50%;} .meetingroom_body ul li .meetingroom_item_info .device_list {display: flex; gap: 4px;} .meetingroom_body ul li .meetingroom_item_info .device_list li {text-align: center;} .meetingroom_body ul li .meetingroom_item_info .device_list li .ico_wrap {width: 30px; height: 30px; border-radius: 100%; margin: 0 auto 2px; background-color: #fff; background-size: 17px;} .meetingroom_body ul li .meetingroom_item_info .device_list li .ico_wrap.ico_twopeople {background-size: 22px;} .meetingroom_body ul li .meetingroom_item_info .device_list li .ico_wrap.ico_peoples {background-size: 20px;} .meetingroom_body ul li .meetingroom_item_info .device_list li.on .ico_wrap {background-color: #d0e6fd;} .meetingroom_body ul li .meetingroom_item_info .device_list li p {font-size: 12px; font-weight: 500; letter-spacing: -0.72px; color: #5b6884;} .meetingroom_body ul li .meetingroom_item_info .device_list li.on p {font-weight: bold;color: #1382f4;} .meetingroom_body ul li .meetingroom_item_info .name {font-size: 22px; color: #333333; letter-spacing: -1.32px; font-weight: 700; margin-bottom: 5px;} .meetingroom_body ul li .meetingroom_item_info .seat {font-size: 22px; color: #1382f4; letter-spacing: -1.32px; font-weight: 500;} .meetingroom_body ul li .meetingroom_item_info .info_btn {position: absolute; bottom: 0; right: 0; background-color: #828eac; color: #fff; width: 64px; height: 24px; font-size: 14px; text-align: center; font-weight: 600; line-height: 24px;} .meetingroom_body ul li .meetingroom_item_info .info_btn button {width: 100%; height: 100%;} .meetingroom_body ul li .meetingroom_item_tbl {display: table-cell; vertical-align: middle;} .meetingroom_body ul li .meetingroom_item_tbl table {display: table; width: 100%; height: 130px; table-layout: fixed; border-right: 1px solid #ddd;} .meetingroom_body ul li .meetingroom_item_tbl table th {text-align: center; background-color: #e8f3ff; color: #5f6b8b; font-size: 14px; font-weight: 400; letter-spacing: -0.14px; height: 40px;} .meetingroom_body ul li .meetingroom_item_tbl table td {padding: 0px;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell {background: #fff; border-left: 1px solid #f0f0f0; position: relative; height: 100%; background: #f5f5f5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation {width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; cursor: pointer;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation span {font-size: 14px; letter-spacing: -0.14px; color: #fff; font-weight: 600;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation.Impossible {background-color: #dcdfe6; cursor: default;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation.Impossible.time {background-color: #dcdfe6;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation.Impossible.lock {background-color: #828eac;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation.Impossible.lock span {width: 20px; height: 20px; background-image: url(../images/icon/ico_lock_wh.png); background-repeat: no-repeat; background-position: center; background-size: contain;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation.Impossible.others {background-color: #838EAC;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation.Impossible.others.repeat {background-image: url(../images/icon/ico_repeat-wh.png); background-repeat: no-repeat; background-size: 11px; background-position: bottom 5px right 5px;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation:hover {background-color: #f5f5f5;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation.Impossible:hover {background-color: #838EACaa;} .meetingroom_body ul li .meetingroom_item_tbl table td .meet_cell .reservation.Impossible.lock:hover {background-color: #828eac;} .meetingroom_body ul li .meetingroom_item_tbl table td.ui-selected .meet_cell .reservation {background-color: #1a84f4;} #divReservationButtonArea {position: absolute; display: block; top: -9999px; left: -9999px;} #divReservationButtonArea button.add_btn {width: 100px; height: 40px; background-color: #343f5b; color: #fff; border-radius: 3px; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); z-index: 9; font-weight: 700; letter-spacing: -0.96px;} #divReservationButtonArea button.add_btn:hover{background-color: #26314b;} #currPos::before {content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0px; height: 0px; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 10px solid #59a7f7;} /* 회의실 예약 주간 */ .weekView-Date {display: inline-block; margin: 0 40px; font-size: 22px; color: #5a6681; font-weight: 600;} .meetingroom-weekview {width: 100%; height: 100%; padding: 0 40px 30px;} .meetingroom-weekview-calendar {width: 100%; height: 100%; border-bottom: 1px solid #f0f0f0;} .meetingroom-weekview-calendar-date {width: 100%; font-weight: 700; font-size: 18px; color: #5f6b8b; background-color: #e8f3ff; height: 58px; display: flex; justify-content: center; align-items: center; border: 0px;} .meetingroom-weekview .meetingroom-weekview-calendar-date:nth-child(2) {background-color: #fed3d3; color: #d51f20;} .weekview-meetingroom-list div {width: 100%; height: 135px; border-top: 1px solid #f0f0f0; background-color: #fff; color: #444; font-size: 18px; font-weight: 700; text-align: center; display: flex; justify-content: center; align-items: center; box-sizing: border-box; word-break: break-all; border-right: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0;} .WeekView-Basic-Component {border: 1px solid #f0f0f0; position: relative; font-size: 18px; height: 135px; overflow: hidden; box-sizing: border-box;} .WeekView-Basic-Component .list_hide_box {height: 112px; overflow: hidden; padding: 10px;} .WeekView-Basic-Component ul li {text-overflow: ellipsis; overflow: hidden; margin-bottom: 7px; padding: 4px 25px; white-space: nowrap; border-radius: 3px; background-color: #828eac; color: #fff; text-align: center; font-weight: 400; height: 44px; box-sizing: border-box; font-size: 14px; letter-spacing: -0.42px; line-height: 8px;} .WeekView-Basic-Component ul li span {display: block; font-size: 14px; font-weight: 600;} .WeekView-Basic-Component ul li.my_rsv {background-color: #1a84f4;} .WeekView-Basic-Component .alarm {background-color: #606c8c; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -0.42px; text-align: center; cursor: pointer;} .WeekView-Basic-Component .alarm i {width: 10px; height: 10px; display: inline-block; background: url(../images/icon/ico_hamburger-wh.png) no-repeat center/cover;} /* 회의실 예약 월간 */ .meetingroom#type4 .meetingroom_head {justify-content: center;} .meetingroom#type4 .meetingroom_head .schedule_btn_box_calendar {margin-right: auto;} .meetingroom#type4 .meetingroom_head > ul {margin-left: auto;} .monthView-Date {display: inline-block; margin: 0 40px; font-size: 22px; color: #5a6681; font-weight: 600;} .suncolor {color: #d51f20 !important;} .meetingroom-monthview {width: 100%; height: 100%; padding: 0 40px 30px;} .meetingroom-monthview-calendar .meetingroom-weekview-calendar-date.suncolor {background-color: #fed3d3;} .meetingroom-monthview-calendar .WeekView-Basic-Component:not(.impossible) {cursor: pointer;} .meetingroom-monthview-calendar .WeekView-Basic-Component.impossible {background-color: #dcdfe6;} .meetingroom-monthview-calendar .WeekView-Basic-Component .date {font-size: 16px; font-weight: 400; color: #5f6b8b; padding: 5px 10px 0px;} .meetingroom-monthview-calendar .WeekView-Basic-Component .list_hide_box {padding: 0 10px; height: 84px; overflow: hidden;} .meetingroom-monthview-calendar .WeekView-Basic-Component ul li {height: 38px; padding: 0 25px; background-color: #dcdfe6; color: #606c8c;} .meetingroom-monthview-calendar .WeekView-Basic-Component ul li.my_rsv {background-color: #1a84f4; color: #fff;} /* 회의실 배치도 */ .container .room_head {position: relative; padding: 0 40px; margin-top: 20px;} .container .room_head h1 {font-size: 36px; font-weight: 600; color: #4c5266; letter-spacing: -2.16px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0;} .container .room_head.state h1{padding-left: 30px;} .container .room_head.state .prev-btn {position: absolute; left: 40px; top: 17px; font-size: 0; width: 14px; height: 20px; background: url(../images/icon/ico_arrow_L_gr.png) no-repeat center / contain; margin-right: 15px;} .container .roomChart {text-align: center; height: calc(100% - 95px); overflow: hidden;} .container .roomChart img{margin: 30px auto; display: block;} /* ------------------------------------------------------ MODAL CSS ---------------------------------------------------------*/ /* modal */ .modal {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .modal .seat_info {display: flex; align-items: center;} .modal .seat_info .seat_img {width: 140px; height: 100px; position: relative; margin-right: 20px;} .modal .seat_info .seat_img img {width: 100%;} .modal .seat_info .seat_img span {position: absolute; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, 0.7); color: #fff; font-weight: 500; left: 0; right: 0; text-align: center; padding: 2px 0;} .modal .seat_info .seat_place {border-right: 1px dashed #b6b7bc; padding-right: 30px;} .modal .seat_info .seat_place span {display: inline-block; padding: 5px 10px; background-color: #5a6681; color: #fff; font-size: 14px; font-weight: 600;} .modal .seat_info .seat_place h5 {color: #333333; font-weight: 700; font-size: 24px;} .modal .seat_info .seat_place p {font-weight: 400; color: #333333;} .modal .seat_info .seat_place p em {color: #1382f4;} .modal .seat_info .device_list {gap: 16px; display: flex; padding-left: 30px;} .modal .seat_info .device_list li {text-align: center;} .modal .seat_info .device_list li p {font-weight: 500; color: #a3a9bb;} .modal .seat_info .device_list li.on p {font-weight: 700; color: #1382f4;} .modal .seat_info .device_list li .ico_wrap {width: 46px; height: 46px; border-radius: 50%; background-color: #e4e5e8; margin: 0 auto 9px;} .modal .seat_info .device_list li.on .ico_wrap {background-color: #d0e6fd;} /* ------------------------------------------------------ POPUP CSS ---------------------------------------------------------*/ /* 공통 영역 */ .layer-pop-wrap .layer-pop-bg {display: none; position: fixed; left: 0; top: 0; z-index: 88888; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); -webkit-transition: none; transition: none;} .layer-pop-wrap .layer-pop-area {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; width: 450px; -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3); box-shadow: 7.4px 3px 7px 0 rgba(0, 0, 0, 0.08); background: #fff; overflow-y: auto; max-height: 100%;} .layer-pop-wrap .layer-pop-area::-webkit-scrollbar {width: 0px;} .layer-pop-wrap .layer-pop-bg.active, .layer-pop-wrap .layer-pop-area.active {display: block;} .layer-pop-wrap .layer-pop-area .pop-head {overflow: hidden; position: relative; padding-left: 40px; background: #4c5266;} .layer-pop-wrap .layer-pop-area .pop-head h2 {font-size: 20px; font-weight: bold; color: #fff; line-height: 60px;} .layer-pop-wrap .layer-pop-area .pop-head .pop-close {width: 16px; height: 16px; background: url(../images/icon/ico_close_w.png) no-repeat center/cover;position: absolute; top: 50%; right: 40px; transform: translateY(-50%); text-indent: -99999px; -webkit-transition: all .4s; transition: all .4s;} .layer-pop-wrap .layer-pop-area .pop-head .pop-close:hover {cursor: pointer; -webkit-transform: translateY(-50%) rotate(180deg);transform: translateY(-50%) rotate(180deg);} .layer-pop-wrap .layer-pop-area .pop-cont {padding: 30px 40px; -webkit-box-sizing: border-box; box-sizing: border-box;} .layer-pop-wrap .layer-pop-area .pop-cont .tit{display: block;margin-bottom: 10px; font-size: 20px; font-weight: 500; text-align: center; word-break: keep-all; color: #222;} .layer-pop-wrap .layer-pop-area .pop-cont .txt-p{display: block; font-size: 20px; font-weight: 500; padding: 10px 20px; text-align: center; word-break: keep-all; color: #1382f4;} .layer-pop-wrap .layer-pop-area .pop-cont .txt{font-size: 18px; font-weight: 500; padding: 10px 20px; text-align: center; word-break: keep-all; line-height: 30px;} .pop-btn-area {padding: 20px 0 0; text-align: center;} .pop-btn-area button.popbtn {height: 40px; width: 160px; font-size: 18px; color: #fff; background-color: #0f447c; font-weight: bold; border-radius: 3px; transition: all 0.2s ease-in-out;} .pop-btn-area button.popbtn:hover {background-color: #06315f; transition: all 0.2s ease;} .pop-btn-area button.popbtn.gr {background-color: #828eac; transition: all 0.2s ease-in-out;} .pop-btn-area button.popbtn.gr:hover {background-color: #5f6d91; transition: all 0.2s ease;} /* 최근 방문자 목록 팝업 */ .layer-pop-wrap .layer-pop-area .pop-cont span.sub_txt{display:block; width: 100%; text-align: left; font-size: 14px; color: #999; margin-bottom: 5px;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap{box-sizing: border-box;-webkit-box-sizing: border-box; max-height: 300px; overflow-y: scroll; border-top: 1px solid #0f447c80; border-bottom: 1px solid #0f447c80;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap::-webkit-scrollbar {width: 7px;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap::-webkit-scrollbar-thumb {background-color: #dcdfe6;;border-radius: 4.5px;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap::-webkit-scrollbar-track {background-color: #efefef; border-radius: 4.5px;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li {position: relative; padding: 10px 0; border-bottom: 1px solid #d5d5d5; padding-right: 80px;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li:last-child {border-bottom: 0px;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li .list-info {display: flex; align-items: center; font-size: 20px; color: #222; font-weight: 600;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li .list-info::before{display: inline-block; width: 10px; height: 10px; content: ""; background-color: #1382f4; margin-right: 10px;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li .list-info > span { display: inline-block; color: #1382f4; font-size: 16px; margin-left: 5px;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li .list-info > em { display: inline-block; color: #777; font-size: 16px; margin-left: 5px;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li .list-info2 {display: flex; align-items: center; flex-flow: row wrap; font-size: 16px; color: #777;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li .list-info2 > span {display: inline-block; margin-left: 5px; } .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li .list-info3 {font-size: 15px; color: #aaa; font-weight: 300;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li .list-info3 > span {display: inline-block; margin-left: 5px;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li button{ position: absolute; right: 10px; top: 50%; margin-top: -15px; display: block; width: 70px; height: 30px; border-radius: 30px; box-sizing: border-box; text-align: center; font-size: 16px; color: #Fff; background: #0f447c;} .layer-pop-wrap .layer-pop-area .pop-cont .list-wrap li button:hover{opacity: 0.8;} /* 빠른 회의실 예약 팝업 */ #quickMeeting {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 1.9px 7.8px 7px 0 rgba(0, 0, 0, 0.08);} #quickMeeting .pop-head .pop-close{right: 20px;} #quickMeeting .pop-cont{padding: 0;} .rsv-quick {padding: 25px 40px; display: flex; align-items: center;} .rsv-quick .pop-room-box {display: flex; align-items: center; margin-right: 40px;} .rsv-quick .pop-room-img {width: 140px; height: 100px; position: relative;} .rsv-quick .pop-room-img > img{width: 100%; height: 100%;} .rsv-quick .pop-room-txt{margin-left: 25px; text-align: left;} .rsv-quick .pop-room-txt > div{font-size: 20px; color: #828eac; font-weight: 600; margin-bottom: 10px;} .rsv-quick .pop-room-txt h5{font-size: 24px; font-weight: 700; color: #333333; margin-bottom: 5px;} .rsv-quick .pop-room-txt h5 > span{display: inline-block; margin-left: 10px; font-size: 16px; font-weight: 400; color: #1382f4;} .rsv-quick .pop-room-txt p{font-weight: 400; color: #777;} .layer-pop-wrap .quick-pop-bottom {padding: 12px 11px 12px 35px; background-color:#f5f5f5; display: flex; align-items: center; justify-content: space-between;} .layer-pop-wrap .quick-pop-bottom .pop-quick-date .pop-quick-notice{font-size: 14px; font-weight: 500; color: #59a7f7; letter-spacing: -0.84px; margin-bottom: 8px;} .layer-pop-wrap .quick-pop-bottom .pop-quick-date-box{display: flex; align-items: center; margin-bottom: 5px; position: relative;} .layer-pop-wrap .quick-pop-bottom .pop-quick-date-box .pop-quick-date-label{font-size: 16px; font-weight: 600; color: #606c8c; letter-spacing: -0.96px; margin-right: 15px; min-width: 30px;} .layer-pop-wrap .quick-pop-bottom .pop-quick-date-box .pop-quick-date-input{height: 38px; background-color: #fff; border: none; background-image: url(../images/icon/ico_calendar.png); background-repeat: no-repeat; background-position: top 50% right 12px; background-size: 20px; padding: 0 15px; font-size: 16px; font-weight: 400; color: #5f6b8b; max-width: 236px; box-sizing: border-box;} .layer-pop-wrap .quick-pop-bottom .pop-quick-date-box > span{font-size: 16px; color: #5f6b8b; margin: 0 10px;} .layer-pop-wrap .quick-pop-bottom .pop-quick-date-box .pop-quick-time-input{height: 38px; background-color: #fff; border: none; background-image: url(../images/icon/ico_time.png); background-repeat: no-repeat; background-position: top 50% right 12px; background-size: 20px; padding-left: 15px; font-size: 16px; font-weight: 400; color: #5f6b8b; max-width: 103px; box-sizing: border-box;} .layer-pop-wrap .quick-pop-bottom .pop-btn{margin-left: 20px; margin-top: 20px;} .layer-pop-wrap .quick-pop-bottom .pop-btn button{width: 144px; height: 80px; border-radius: 4px; background-image: linear-gradient(to top, #1382f5, #3695fa); color: #fff; font-size: 18px; line-height: 25px; font-weight: bold; letter-spacing: -1.08px; transition: all 0.2s ease;} .layer-pop-wrap .quick-pop-bottom .pop-btn button:hover{background-image: linear-gradient(to top, #1683f5, #1683f5);} #quick-rsv-fail .pop-quick-rsv-cont .txt{margin:0 auto; padding :0 0 10px;} #quick-rsv-fail .pop-quick-rsv-cont .img-wrap {width: 48px; margin: 0 auto 10px;} #quick-rsv-fail .pop-quick-rsv-cont .img-wrap img {width: 100%;} /* 빠른좌석 예약 팝업 */ #quickDesk {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 1.9px 7.8px 7px 0 rgba(0, 0, 0, 0.08);} #quickDesk .pop-head .pop-close{right: 20px;} #quickDesk .pop-cont{padding: 0;} #quick-rsv-complete .pop-quick-rsv-cont .txt{margin:0 auto; padding :0 0 10px;} #quick-rsv-complete .pop-quick-rsv-cont .img-wrap {width: 48px; margin: 0 auto 10px;} #quick-rsv-complete .pop-quick-rsv-cont .img-wrap img {width: 100%;} /* 예약된 회의 목록 팝업 */ .rsv-list .tit {font-size: 22px; color: #5a6681; font-weight: 600; text-align: center; width: 100%; margin-bottom: 30px;} .rsv-list .tit span {display: block; color: #1382f4; font-weight: 600;} .rsv-list table {text-align: center;} .rsv-list table th {background-color: #e8f3ff; font-size: 17px; font-weight: 600; color: #5f6b8b; padding: 6px 0;} .rsv-list table td {background-color: #fff; font-size: 16px; font-weight: 400; color: #4c5266; padding: 12px 0; border: 1px solid #f0f0f0;} /* 상세보기 팝업 */ .room-detail .room-info .tit {font-size: 24px; color: #000; font-weight: bold; text-align: center;} .room-detail .tit span {font-size: 18px; color: #1382f4; font-weight: 600;} .room-detail .room-device-list {margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 12px;} .room-detail .room-device-list li .ico_wrap {width: 46px; height: 46px; border-radius: 50%; background-color: #eaebee; margin: 0 auto;} .room-detail .room-device-list li.on .ico_wrap {background-color: #d0e6fd;} .room-detail .room-device-list li p {font-size: 14px; font-weight: 500; color: #5b6884;} .room-detail .room-device-list li.on p {color: #1382f4; font-weight: bold;} .room-detail .room-info {background-color: #f5f5f5; padding: 30px 0;} .room-detail .room-img {display: flex; align-items: center; gap: 20px; padding: 30px 40px 0;} .room-detail .room-img .room-location {width: 50%;} .room-detail .room-img .room-location .location_box {height: 220px; width: 100%; border: 1px solid #efefef; overflow: hidden;} .room-detail .room-img .room-location .location_box img {width: 100%;} .room-detail .room-img .room-images {width: 50%;} .room-detail .room-img .room-images .img_box {height: 220px; width: 100%; border: 1px solid #efefef; position: relative; overflow: hidden;} .room-detail .room-img .room-images .img_box img {height: 100%; position: absolute;} .room-detail .room-img .tit {font-size: 17px; font-weight: bold; color: #5f6b8b; margin-bottom: 10px; display: block;} /* 회의실 위치보기 팝업 */ .location-detail .room-info .tit {font-size: 25px; color: #333; font-weight: bold; text-align: center; margin-bottom: 0 !important;} .location-detail .room-info {background-color: #eef4fc; padding: 10px 0;} .location-detail .room-img {position: relative; display: flex; align-items: center; gap: 20px; padding: 20px 40px 10px; box-sizing: border-box;width: 100%; margin: 0 auto; border-bottom: 1px solid #f0f0f0;} .location-detail .room-img img{display: inline-block; width: 100%;} .location-detail .room-img .location{position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 10px; height: auto; padding: 10px 20px; background-color: #555555f1; border-radius:50px; color: #fff; text-align: center; font-size: 16px;} .location-detail .room-img .location > img{width: auto; height: 20px;opacity: 0.9;} .location-detail .room-img .location.woman{top: 52%; left: 13%;} .location-detail .room-img .location.man{top: 28%; left: 16%;} /* 참석자 추가 팝업 */ .attendees-add {padding-bottom: 20px; box-sizing: border-box;} .attendees-add + .pop-btn-area {border-top: 1px solid #f0f0f0; margin-left: 40px; margin-right: 40px;} .attendees-add-search {width: 55%; padding: 30px 40px; background-color: #fff; box-sizing: border-box;} .attendees-add-search-input {padding-bottom: 20px; border-bottom: 1px solid #f0f0f0;} .attendees-add-search-input .search-top {align-items: center; justify-content: space-between; margin-bottom: 10px;} .attendees-add-search-input .search-top span {font-size: 19px; font-weight: bold; color: #5a6681;} .attendees-add-search-input .search-top ul li {float: left; margin-right: 10px;} .attendees-add-search-input .search-top ul li a {font-size: 16px; font-weight: 500; color: #4c5266; border: 1px solid #dcdfe6; border-radius: 3px; padding: 5px 10px;} .attendees-add-search-input .search-top ul li.active a {font-weight: bold; color: #1382f4; border-color: #1382f4;} .attendees-add-search-input .search-top ul li:nth-child(2) {margin-right: 0;} .attendees-add-search-input .search-area .search-input {width: 100%; display: none;} .attendees-add-search-input .search-area .search-input.active {display: block;} .attendees-add-search-input input::placeholder {color: #4c5266; font-weight: 400;} .attendees-add-search-input .type1 select {height: 44px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px 0 7px; font-size: 16px; color: #4c5266; float: left; width: 34%; margin-right: 1%; background-color: #f5f5f5; border: none; background-image: url(../images/icon/ico_triangle_down_b.svg); background-repeat: no-repeat; background-position: top 50% right 20px; font-weight: 400;} .attendees-add-search-input .type1 span {position: relative; float: left; width: 65%; -webkit-box-sizing: border-box; box-sizing: border-box;} .attendees-add-search-input .type1 input {height: 44px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; font-size: 16px; color: #4c5266; background-color: #f5f5f5; border: none; font-weight: 400;} .attendees-add-search-input .type1 button {position: absolute; right: 20px; width: 17px; height: 44px; background: url(../images/icon/ico_search.png) no-repeat 50%; text-indent: -9999px; background-size: 17px;} .attendees-add-search-input .type2 input {display: block; height: 44px; width: 80%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 5px; font-size: 16px; color: #4c5266; border: none; background-color: #f5f5f5; float: left;} .attendees-add-search-input .type1 select:focus,.attendees-add-search-input .type1 input:focus, .attendees-add-search-input .type2 input:focus {outline: 1px solid #1382f4cc; box-sizing: border-box;} .attendees-add-search-input .type2 button {width: 20%; height: 44px; text-indent: 0; font-size: 16px; font-weight: 400; line-height: 44px; text-align: center; color: #fff; background-color: #0f447c;} .attendees-add-search-list {margin-top: 20px;} .attendees-add-search-list h3 {font-size: 19px; font-weight: bold; color: #5a6681; margin-bottom: 10px;} .attendees-add-search-list .meeting-list table {text-align: center;} .attendees-add-search-list .meeting-list table th {background-color: #f5f5f5; font-size: 17px; font-weight: 600; color: #5f6b8b; height: 40px; border: 1px solid #f0f0f0;} .attendees-add-search-list .meeting-list table td {background-color: #fff; font-size: 16px; font-weight: 400; color: #4c5266; height: 40px; border: 1px solid #f0f0f0;} .attendees-add-search-list .none-meeting {text-align: center; padding: 70px 0; border: 1px solid #f0f0f0; font-size: 16px; font-weight: 400; color: #4c5266;} .attendees-add-list {width: 45%; padding: 30px 40px; box-sizing: border-box; background-color: #e8f3ff60;} .attendees-add-list h3 {font-size: 19px; color: #1382f4; font-weight: bold; border-bottom: 1px solid #5a6681; padding-bottom: 10px;} .attendees-add-list ul li {padding: 20px 10px; border-bottom: 1px solid rgba(35, 42, 51, .2);} .attendees-add-list ul li .user-item {display: flex;} .attendees-add-list ul li .user-img {width: 48px; height: 48px; background-color: #fff; border-radius: 100%; margin-right: 20px; overflow: hidden;} .attendees-add-list ul li .user-img img {width: 100%; height: 100%; object-fit: cover; display: block;} .attendees-add-list ul li .user-img.outside {background-color: #b9bfd0; text-align: center;} .attendees-add-list ul li .user-img.outside span {color: #fff; font-size: 16px; font-weight: 600; line-height: 48px;} .attendees-add-list ul li .user-info p {font-size: 17px; font-weight: 600;} .attendees-add-list ul li .user-info .name {color: #000;} .attendees-add-list ul li .user-info .team {color: #5f6b8b;} /* 방문자 예약 상세보기 페이지 */ .top-title {margin-bottom: 30px; display: flex; align-items: center;} .top-title h2 {font-size: 36px; font-weight: 600; color: #4c5266; letter-spacing: -2.16px;} .top-title .history-btn {height: 36px; background-color: #e8f3ff; font-size: 16px; font-weight: 400; color: #4c5266; border-radius: 3px; padding: 0 15px 0 40px; background-image: url(../images/icon/ico_ago.png); background-repeat: no-repeat; background-position: top 50% left 15px; background-size: 17px; margin-left: auto;} .top-title .history-btn strong {font-weight: bold;} .top-title .prev-btn {font-size: 0; width: 14px; height: 20px; background: url(../images/icon/ico_arrow_L_gr.png) no-repeat center/contain; margin-right: 15px;} .top-title .btn-area {margin-left: auto;} .top-title .btn-area button {width: 100px; height: 40px; border-radius: 3px; box-shadow: 7.4px 3px 7px 0 rgba(0, 0, 0, 0.11); font-size: 20px; font-weight: bold; color: #fff;} .sub-title {padding-top: 30px; border-top: 1px solid #f0f0f0; margin-bottom: 30px; display: flex; align-items: center; position: relative;} .sub-title h3 {font-size: 22px; font-weight: bold; color: #1382f4;} .sub-title .checkbox {margin-left: auto;} .sub-title .checkbox input {display: none;} .sub-title .checkbox .txt { font-weight: 400; color: #5a6681; font-size: 15px; letter-spacing: -0.9px; position: relative; padding-left: 25px; cursor: pointer;} .sub-title .checkbox input + label::before {position: absolute; content: ''; width: 16px; height: 16px; background-color: #fff; border-radius: 6px; border: 2px solid #e6e9f0; background-image: url(../images/icon/ico_check_y.png); background-position: center; background-size: 13px 11px; background-repeat: no-repeat; left: 0; top: 50%; transform: translateY(-50%);} .sub-title .checkbox input:checked + label::before {position: absolute; content: ''; width: 16px; height: 16px; background-color: #48a7f5; border-color: #48a7f5; border-radius: 6px; background-image: url(../images/icon/ico_check_y.png); background-position: center; background-size: 13px 11px; background-repeat: no-repeat; left: 0; top: 50%; transform: translateY(-50%);} .sub-title .talk {margin-left: auto; font-size: 15px; font-weight: 400; color: #5a6681; letter-spacing: -0.9px; padding-left: 21px; position: relative; cursor: pointer;} .sub-title .talk::before {content: ''; width: 16px; height: 16px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-image: url(../images/icon/ico_info.png); background-position: center; background-repeat: no-repeat; background-size: cover;} .sub-title .talk:hover + .alarm_talk {display: block;} .sub-title .alarm_talk {display: none; position: absolute; padding: 20px 20px; border-radius: 25px; background-color: #f5f5f5; box-sizing: border-box; top: 60px; right: 0px; z-index: 10;} .sub-title .alarm_talk .text {text-align: center; line-height: 23px; font-size: 16px; font-weight: 500; margin-bottom: 10px; color: #4c5266;} .small-title {margin-bottom: 5px;} .small-title h5 {font-size: 19px; font-weight: bold; letter-spacing: -0.19px; color: #5a6681;} .visit_wrap {max-width: 1300px; margin: 0 auto; padding: 30px 0;} .visit_wrap .top-title {align-items: flex-end;} .visit_wrap .btn_wrap {padding-top: 20px; text-align: center;} .visit_wrap .btn_wrap button {width: 160px; height: 40px; border-radius: 3px; background-color: #4c5266; font-size: 18px; font-weight: bold; color: #fff; letter-spacing: -1.08px;} .visit_wrap .btn_wrap button:last-child {background-color: #59a7f7;} .visit_wrap .input-box > ul {display: flex; margin-bottom: 20px; flex-wrap: wrap;} .visit_wrap .input-box > ul:last-child {margin-bottom: 30px;} .visit_wrap .input-box > ul > li {display: flex; align-items: center; width: 33%;} .visit_wrap .input-box > ul > li .label {min-width: 70px; margin-right: 7px; color: #5a6681; font-size: 16px; font-weight: bold; letter-spacing: -0.16px;} .visit_wrap .input-box > ul > li .label span {color: #1382f4;} .visit_wrap .input-box > ul > li input:not(.date_input, .time_input) {width: 266px; max-width: 266px;} .visit_wrap .input-box > ul > li input.date_input {width: 187px; max-width: 187px;} .visit_wrap .input-box > ul > li input.time_input {width: 103px; max-width: 103px;} .visit_wrap .input-box > ul > li input.double {width: 507px !important; max-width: 507px !important;} .visit_wrap .input-box.border {border: 1px solid #f0f0f0; padding: 20px; position: relative;} .visit_wrap .input-box.border ul:nth-child(2) {margin-bottom: 0;} .visit_wrap .input-box.border > ul > li {width: unset; margin-right: 30px;} .visit_wrap .input-box.border > ul > li input {width: 200px; max-width: 223px;} .visit_wrap .input-box.border .resend_box {text-align: center; position: absolute; top: 50%; transform: translateY(-50%); right: 35px;} .visit_wrap .input-box.border + .input-box.border {margin-top: 20px;} .visit_wrap .input-box.border .delete_wrap {position: absolute; bottom: 0; right: 0;} .visit_wrap .input-box.border .delete-btn {color: #fff; background-color: #b8bfd0; width: 47px; height: 26px; font-size: 16px; font-weight: 500;} .search-input {display: block; position: relative;} .search-input .search-icon {width: 17px; height: 44px; position: absolute; top: 0; right: 20px; background: url(../images/icon/ico_search.png) no-repeat 50%; text-indent: -9999px; z-index: 0;background-size: 17px;} .input-style {height: 44px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; font-size: 16px; color: #4c5266; border: none; background-color: #f0f6ff;} .input-style::placeholder {font-size: 16px; font-weight: 400; color: #4c5266;} .input-style:focus, .datepicker-style .date_input:focus, .datepicker-style .time_input:focus {outline: 1px solid #1382f4;} .datepicker-style {display: flex; position: relative; gap: 10px;} .datepicker-style .date_input {height: 44px; width: 65%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 15px; font-size: 16px; color: #5f6b8b; border: none; background-color: #f0f6ff; background-image: url(../images/icon/ico_calendar.png); background-repeat: no-repeat; background-position: top 50% right 10px; background-size: 21px;} .datepicker-style .time_input {width: 35%; height: 44px; background-image: url(../images/icon/ico_time.png); background-repeat: no-repeat; background-position: top 50% right 10px; background-color: #f0f6ff; background-size: 20px; border: none; padding: 0 15px; font-size: 16px; color: #5f6b8b;} .select-style {height: 44px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; font-size: 16px; color: #4c5266; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../images/icon/ico_triangle_down_b.svg); background-repeat: no-repeat; background-position: right 20px top 50%; background-color: #f0f6ff; background-size: 10px;} .send_btn {display: flex; justify-content: center; gap: 5px; margin-bottom: 10px;} .send_btn li {width: 30px; height: 30px; border-radius: 100%; float: left;} .send_btn li:nth-child(1) {background-color: #fae300; background-image: url(../images/icon/ico_kakao.png); background-position: center; background-repeat: no-repeat; background-size: 18px;} .send_btn li:nth-child(2) {background-color: #28a7e1; background-image: url(../images/icon/ico_mail.png); background-position: center; background-repeat: no-repeat; background-size: 12px;} .resend_btn {font-size: 16px; font-weight: bold; letter-spacing: 0.96px; border-radius: 3px; background-color: #0f447c; width: 145px; height: 35px; color: #fff; margin: 0 auto;} /* 방문자 예약하기 페이지 */ .applicant-info .tit {font-size: 20px; font-weight: bold; letter-spacing: -1.2px; color: #1382f4; margin-bottom: 20px;} .applicant-info .box {background-color: #f1f8ff; flex-direction: column; align-items: center; padding: 22px 0 30px;} .applicant-info .box .img_wrap {width: 80px; height: 80px; background-color: #b9bfd0; border-radius: 100%; margin-bottom: 17px; overflow: hidden;} .applicant-info .box .img_wrap.none_img {background-image: url(../images/icon/ico_user-wh.png); background-repeat: no-repeat; background-size: cover; background-position: center;} .applicant-info .box .txt_wrap {text-align: center;} .applicant-info .box .txt_wrap h5 {font-size: 20px; font-weight: bold; color: #333; letter-spacing: -1.2px;} .applicant-info .box .txt_wrap h5 span {font-weight: bold; color: #1382f4; letter-spacing: -1.2px;} .applicant-info .box .txt_wrap p {font-size: 17px; font-weight: 600; color: #5f6b8b; letter-spacing: -1.02px;} .applicant-info .ul_wrap {justify-content: center; margin: 20px 0;} .applicant-info ul {display: flex; flex-direction: column; align-items: flex-start;} .applicant-info ul li {text-align: center; font-size: 17px; font-weight: 600; color: #000;} .applicant-info ul li span {font-size: 16px; letter-spacing: -0.96px; color: #4c5266; font-weight: 500; display: inline-block; margin-right: 17px;} .applicant-info ul li span i {width: 14px; height: 14px; display: inline-block; background-size: contain; vertical-align: middle; margin-right: 5px;} .applicant-info .btn_wrap {padding-top: 18px; border-top: 1px solid rgba(35, 42, 51, .2); gap: 10px;} .applicant-info .btn_wrap button {width: 50%; height: 50px; color: #fff; font-size: 18px; font-weight: bold; letter-spacing: -1.08px; border-radius: 3px; background-color: #59a7f7} .applicant-info .btn_wrap button:last-child {background-color: #0f447c;} .visit_wrap .btn-area {display: flex; justify-content: space-between; margin-bottom: 20px;} .visit_wrap .btn-area button {font-size: 14px; letter-spacing: -0.84px; font-weight: 500; border-radius: 3px; color: #fff; height: 33px; padding-left: 34px; padding-right: 14px; background-repeat: no-repeat; background-position: top 50% left 14px;} .visit_wrap .btn-area button:hover{opacity: 0.8;} .visit_wrap .btn-area button.ex-upload {background-color: #207346; background-image: url(../images/icon/ico_excel_wh.png); background-size: 15px;} .visit_wrap .btn-area button.ex-download {background-color: #4c5266; background-image: url(../images/icon/ico_download_wh.png); background-size: 13px;} .visit_wrap .btn-area button.vistors-list {background-color: #fff; color: #1382f4; background-image: url(../images/icon/ico_list_bl.png); border: 2px solid #1382f4; background-size: 10px;} .visit_wrap .btn-area button.vistors-add {background-color: #1382f4; background-image: url(../images/icon/ico_user2_wh.png); background-size: 12px;} .tbl-style.border td .delete-btn {background-color: #b8bfd0; color: #fff; font-size: 16px; font-weight: 500; width: 47px; height: 26px;} /* 나의 방문 예약 현황 페이지 */ .mylist {border-top: 1px solid #f0f0f0; padding-top: 30px;} .mylist .search-area {display: flex; justify-content: space-between; align-items: center;} .mylist .search-area .total {font-size: 22px; font-weight: 600; letter-spacing: -1.32px; color: #333333;} .mylist .search-area .total span {font-size: 30px; color: #1382f4; font-weight: 600;} .mylist .search-area select {width: 187px; height: 44px; background-color: #f5f5f5; padding:0 20px; border: none; background-image: url(../images/icon/ico_triangle_down_b.svg); background-repeat: no-repeat; background-size: 10px; background-position: top 50% right 20px; font-size: 16px; font-weight: 400; color: #4c5266;} .mylist .search-area .search-box {position: relative; display: inline-block;} .mylist .search-area .search-box input {width: 298px; height: 44px; border: none; background-color: #f0f6ff; font-size: 16px; font-weight: 400; color: #4c5266; padding: 0 20px;} .mylist .search-area .search-box input::placeholder {color: #4c5266; font-size: 16px; font-weight: 400;} .mylist .search-area .search-box button {position: absolute; top: 50%; right: 20px; text-indent: -9999px; width: 17px; height: 17px; background: url(../images/icon/ico_search.png) no-repeat center/cover; transform: translateY(-50%);} .mylist .tbl-wrap {border-top: 1px solid #4c5266; margin-top: 30px;} .mylist .tbl-wrap table td button {display: block; width: 144px; height: 33px; border-radius: 3px; margin: 0 auto;} .mylist .tbl-wrap table td button + button {margin-top: 5px;} /* 좌석 예약내역 페이지 */ .list_wrap {max-width: 1300px; margin: 0 auto; padding: 25px 0;} .rsv-list-wrap {border-top: 1px solid #5a6681; width: 100%; overflow-x: auto;} .rsv-list-wrap::-webkit-scrollbar {width: 0px;} .rsv-list.room {min-width: 1300px;} .rsv-list td {border: 1px solid #f0f0f0; padding: 20px 0; text-align: center;} .rsv-list th {border: 1px solid #f0f0f0; padding: 20px 0; text-align: center; background: #f5f5f5;} .rsv-list.past td {padding: 14px 0; max-height: 73px;} .rsv-list.past th {padding: 14px 0; max-height: 73px;} .rsv-list .box-img {width: 140px; height: 100px; position: relative; margin: 0 auto;} .rsv-list .box-img img {width: 100%; height: 100%;} .rsv-list .box-img span {position: absolute; width: 100%; background-color: rgba(90, 102, 129, 0.77); color: #fff; text-align: center; bottom: 0; left: 0;} .rsv-list .box-info {text-align: center;} .rsv-list .box-info span {color: #fff; background-color: #5a6681; padding: 5px 10px; font-size: 14px; font-weight: 600;} .rsv-list .box-info span.over{background-color: #cd2027;} .rsv-list .box-info h5 {font-size: 24px; font-weight: 700; color: #333333;} .rsv-list .box-info p {font-weight: 500; color: #333333; font-size: 18px;} .rsv-list .box-info p em {font-weight: 500; color: #1382f4;} .rsv-list .box-time {position: relative; display: inline-block; text-align: left;} .rsv-list .box-time::before {position: absolute; content: ''; width: 18px; height: 39px; background: url(../images/icon/ico_arrow-down.png) no-repeat center / cover; left: -30px; top: 50%; transform: translateY(-50%);} .rsv-list .box-time p {font-size: 16px; color: #4c5266; font-weight: 400;} .rsv-list .box-time p span {margin-right: 10px; font-weight: 500;} .rsv-list .box-time p em {color: #1382f4; margin-right: 5px;} .rsv-list .box-time p.end {font-weight: bold;} .rsv-list .box-time p.end span {font-weight: bold;} .rsv-list .box-time p.end em {font-weight: bold;} .rsv-list .box-time p.end.over em{color: #d51f20;} .rsv-list .inform {color: #1cb8f2; font-size: 16px; font-weight: 400; display: inline-block; margin-left: -20px; margin-bottom: 5px;} .rsv-list .inform em {font-weight: 600;} .rsv-list .box-device ul {gap: 12px; justify-content: start; padding: 0 30px;} .rsv-list .box-device li {text-align: center;} .rsv-list .box-device li .ico_wrap {width: 46px; height: 46px; border-radius: 50%; background-color: #e4e5e8; margin: 0 auto 9px;} .rsv-list .box-device li.on .ico_wrap {background-color: #d0e6fd;} .rsv-list .box-device li p {font-weight: 500; color: #a3a9bb; font-size: 14px;} .rsv-list .box-device li.on p {font-weight: 700; color: #1382f4;} .rsv-list .box-btn .button_wrap {flex-direction: column; height: 80px; gap: 5px; align-items: center;} .rsv-list .box-btn .button_wrap button {width: 150px; height: 100%; border-radius: 3px;} .rsv-list .rsv-num {font-size: 16px; font-weight: bold; letter-spacing: -0.16px; color: #4c5266;} .rsv-list .rsv-type {display: flex; align-items: center; justify-content: center;} .rsv-list .rsv-type .ico_wrap {width: 44px; height: 44px; border-radius: 100%; background-position: center; background-repeat: no-repeat; margin-right: 10px;} .rsv-list .rsv-type p {font-weight: bold; letter-spacing: -0.16px; font-size: 16px;} .rsv-list .rsv-type.seat .ico_wrap {background-image: url(../images/icon/ico_chair_blue.png); background-size: 18px; background-color: #e8f3fe;} .rsv-list .rsv-type.seat p {color: #1a86f5;} .rsv-list .rsv-type.room .ico_wrap {background-image: url(../images/icon/ico_room.png); background-size: 18px; background-color: #f2f3f6;} .rsv-list .rsv-type.room p {color: #193867;} .rsv-list .rsv-type.locker .ico_wrap {background-image: url(../images/icon/ico_locker.png); background-size: 16px; background-color: rgba(39, 91, 196, 0.1);} .rsv-list .rsv-type.locker p {color: #275bc4;} .rsv-list .rsv-type.visit .ico_wrap {background-image: url(../images/icon/ico_visit.png); background-size: 19px; background-color: rgba(85, 90, 212, 0.1);} .rsv-list .rsv-type.visit p {color: #555ad4;} .rsv-list .rsv-date span {font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #4c5266; display: inline-block;} .rsv-list .rsv-date span.date {margin-right: 20px;} .rsv-list .rsv-name {text-align: left; padding-left: 45px;} .rsv-list .rsv-name span {font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #4c5266; display: inline-block;} .rsv-list .rsv-situation {width: 120px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; font-weight: bold; letter-spacing: -0.96px; color: #fff; background-color: #828eac; border-radius: 20px; margin: 0 auto;} .rsv-list .rsv-situation.noshow {color: #d51f20; background-color: #fed3d3;} /* 좌석/회의실 예약내역 페이지 hover 이벤트 */ .top-title .history-btn:hover{opacity: 0.8;} .rsv-list tr:hover {background-color: #F6FAFF; cursor: pointer;} .rsv-list tr:hover .box-info span{background-color: #454f68; transition: all 0.2s ease;} .rsv-list tr:hover .box-info span.over{background-color: #d51f20;} .rsv-list tr:hover .box-img span{background-color: #454f68; transition: all 0.2s ease;} .rsv-list tr:hover .box-time::before{background: url(../images/icon/ico_arrow-down-sky.png) no-repeat center/cover; transform: translateY(-40%); transition: all 0.2s ease;} .rsv-list tr:hover .box-time p.end{color: #151515; transition: all 0.1s ease; transition-delay: 0.2s;} /* 회의실 예약 내역 상세 */ .rsv-list .box-detail-info .box-device ul {gap: 12px; justify-content: start; padding: 0 30px;} .rsv-list .box-detail-info .box-device li {text-align: center; display: none;} .rsv-list .box-detail-info .box-device li.on {display: block;} .rsv-list .box-detail-info .box-device li.on .ico_wrap {width: 30px; height: 30px; border-radius: 50%; background-color: #d0e6fd; background-size: 50%; margin:0;} .rsv-list .box-detail-info .title {font-size: 20px; color:#4c5266; font-weight: 600; text-align-last: left; padding:0 30px; margin-top: 10px; box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} /* 회의실 예약 내역 상세 */ .rsv-list .box-detail-info .box-device ul {gap: 12px; justify-content: start; padding: 0 30px;} .rsv-list .box-detail-info .box-device li {text-align: center; display: none;} .rsv-list .box-detail-info .box-device li.on {display: block;} .rsv-list .box-detail-info .box-device li.on .ico_wrap {width: 30px; height: 30px; border-radius: 50%; background-color: #d0e6fd; background-size: 50%; margin:0;} .rsv-list .box-detail-info .title {font-size: 20px; color:#4c5266; font-weight: 600; text-align-last: left; padding:0 30px; margin-top: 10px; box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} /* 수면캡슐 예약 내역 */ .rsv-list .box-time p.end em {font-weight: 400;} .rsv-list .box-period {text-align: left; display: inline-block;} .rsv-list .box-period span {font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #1382f4;} .rsv-list .box-period span.title {width: 60px; font-weight: bold; display: inline-block; margin-right: 15px; color: #4c5266;} /* 예약내역 상세보기 */ .reservation_detail_wrap {max-width: 1300px; margin: 0 auto; padding: 30px 0;} .reservation_detail_wrap .top-title {align-items: center;} .reservation_detail_wrap .top-title .breadcrumb {margin-left: auto;} .reservation_detail_wrap .btn_wrap {padding-top: 20px; text-align: center;} .reservation_detail_wrap .btn_wrap button {width: 160px; height: 40px; border-radius: 3px; background-color: #4c5266; font-size: 18px; font-weight: bold; color: #fff; letter-spacing: -1.08px;} .reservation_detail_wrap .btn_wrap button:last-child {background-color: #59a7f7;} .reservation_detail_wrap .input-box {padding: 0 10px;} .reservation_detail_wrap .input-box > ul {display: flex; margin-bottom: 20px; flex-wrap: wrap;} .reservation_detail_wrap .input-box > ul:last-child {margin-bottom: 30px;} .reservation_detail_wrap .input-box.border > ul {margin-bottom: 0px;} .reservation_detail_wrap .input-box > ul li {display: flex; align-items: center; margin-right: 40px;} .reservation_detail_wrap .input-box > ul li .label {min-width: 60px; margin-right: 7px; color: #5a6681; font-size: 16px; font-weight: bold; letter-spacing: -0.16px;} .reservation_detail_wrap .input-box > ul li .label span {color: #1382f4;} .reservation_detail_wrap .input-box > ul li .width1 {width: 187px;} .reservation_detail_wrap .input-box > ul li .width2 {width: 223px;} .reservation_detail_wrap .input-box > ul li .width3 {width: 337px;} .reservation_detail_wrap .input-box > ul li .width4 {width: 427px;} .reservation_detail_wrap .input-box > ul li input.time {background-image: url(../images/icon/ico_time.png); background-position: top 50% right 10px; background-size: 20px; background-repeat: no-repeat;} .reservation_detail_wrap .input-box > ul li input.double {width: 507px !important; max-width: 507px !important;} .reservation_detail_wrap .input-box > ul li .select_box select:nth-child(1) {width: 187px;} .reservation_detail_wrap .input-box > ul li .select_box select:nth-child(2) {width: 103px;} .reservation_detail_wrap .input-box.border {border: 1px solid #f0f0f0; padding: 20px; position: relative;} .reservation_detail_wrap .input-box.border ul:nth-child(2) {margin-bottom: 0;} .reservation_detail_wrap .input-box.border .resend_box {text-align: center; position: absolute; top: 50%; transform: translateY(-50%); right: 35px;} .reservation_detail_wrap .input-box.border + .input-box.border {margin-top: 10px; margin-bottom: 30px;} .reservation_detail_wrap .input-box.border .delete_wrap {position: absolute; bottom: 0; right: 0;} .reservation_detail_wrap .input-box.border .delete-btn {color: #fff; background-color: #b8bfd0; width: 47px; height: 26px; font-size: 16px; font-weight: 500;} .reservation_detail_wrap .img-layout {overflow: hidden; box-sizing: border-box; margin-top: 10px; margin-bottom: 30px;} .reservation_detail_wrap .img-layout li {float: left; width: 130px; height: 95px; border: 1px solid #f0f0f0; background-color: #fff; margin-right: 10px; cursor: pointer;} .reservation_detail_wrap .img-layout li.on {border-color: #1382f4;} .reservation_detail_wrap .img-layout li .img-wrap {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;} .reservation_detail_wrap .img-layout li:nth-child(1) .img-wrap img {max-width: 89px;} .reservation_detail_wrap .img-layout li:nth-child(2) .img-wrap img {max-width: 65px;} .reservation_detail_wrap .img-layout li:nth-child(3) .img-wrap img {max-width: 91px;} .reservation_detail_wrap .IOT-box-wrap {padding: 20px; border: 1px solid #f0f0f0; display: flex; align-items: center; margin-bottom: 10px;} .reservation_detail_wrap .IOT-box-wrap span {font-size: 16px; font-weight: bold; letter-spacing: -0.16px; color: #5a6681; margin-right: 40px;} .reservation_detail_wrap .IOT-box-wrap .box {width: 130px; height: 80px; border-radius: 3px; background-color: #f5f5f5; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px; cursor: pointer;} .reservation_detail_wrap .IOT-box-wrap .box.on {background-color: #e8f3ff;} .reservation_detail_wrap .IOT-box-wrap .box .box-img {display: flex; align-items: center; height: 40px;} .reservation_detail_wrap .IOT-box-wrap#meeting-type .box:nth-child(2) .box-img img {width: 28px;} .reservation_detail_wrap .IOT-box-wrap#meeting-type .box:nth-child(3) .box-img img {width: 28px;} .reservation_detail_wrap .IOT-box-wrap#meeting-type .box:nth-child(4) .box-img img {width: 25px;} .reservation_detail_wrap .IOT-box-wrap#meeting-type .box:nth-child(5) .box-img img {width: 19px;} .reservation_detail_wrap .IOT-box-wrap#meeting-type .box:nth-child(6) .box-img img {width: 24px;} .reservation_detail_wrap .IOT-box-wrap#scent-type .box:nth-child(2) .box-img img {width: 28px;} .reservation_detail_wrap .IOT-box-wrap#scent-type .box:nth-child(3) .box-img img {width: 20px;} .reservation_detail_wrap .IOT-box-wrap#scent-type .box:nth-child(4) .box-img img {width: 29px;} .reservation_detail_wrap .IOT-box-wrap#scent-type .box:nth-child(5) .box-img img {width: 23px;} .reservation_detail_wrap .IOT-box-wrap#scent-type .box {width: 160px;} .reservation_detail_wrap .IOT-box-wrap .box .box-txt {font-size: 14px; font-weight: 600; color: #4c5266; letter-spacing: -0.98px;} .reservation_detail_wrap .btn-area {margin-left: auto;} .reservation_detail_wrap .btn-area button {font-size: 14px; letter-spacing: -0.84px; font-weight: 500; border-radius: 3px; color: #fff; height: 33px; padding-left: 34px; padding-right: 14px; background-repeat: no-repeat; background-position: top 50% left 14px;} .reservation_detail_wrap .btn-area button.vistors-list {background-color: #fff; color: #1382f4; background-image: url(../images/icon/ico_list_bl.png); border: 2px solid #1382f4; background-size: 10px;} .reservation_detail_wrap .btn-area button.vistors-add {background-color: #1382f4; background-image: url(../images/icon/ico_user2_wh.png); background-size: 12px;} .reservation_detail_wrap .repeat-rsv {margin-left: 15px;} .reservation_detail_wrap .repeat-rsv p {font-size: 14px; font-weight: 500; color: #1984f4; letter-spacing: -0.84px;} .reservation_detail_wrap .repeat-txt {margin-left: 15px; padding-left: 20px; background: url(../images/icon/ico_repeat-b.png) no-repeat top 50% left 0; background-size: 11px; font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -0.16px;} /* 반복예약 팝업 */ .layer-pop-wrap .layer-pop-area#repeatRsv .pop-cont {padding: 0px; padding-bottom: 40px;} .pop-repeat-rsv {padding: 0px 25px 0 40px; box-sizing: border-box;} .pop-repeat-rsv #ui-datepicker-div {position: absolute !important; top: 40px !important;} .pop-repeat-rsv .input-list > li {display: flex; align-items: center; padding: 20px 0; box-sizing: border-box; border-bottom: 1px solid #f0f0f0;} .pop-repeat-rsv .input-list > li .label {font-size: 19px; font-weight: bold; color: #5a6681; letter-spacing: -0.19px; margin-right: 23px; height: 44px; line-height: 44px; min-width: 65px;} .pop-repeat-rsv .input-list .list1 .datepicker-style {width: 100%;} .pop-repeat-rsv .input-list .list1 .datepicker-style .date_input {width: 187px;} .pop-repeat-rsv .input-list .list2 {align-items: flex-start;} .pop-repeat-rsv .input-list .list2 input {width: 100px; height: 44px; background-color: #f0f6ff; border: none; font-size: 16px; font-weight: 400; color: #5f6b8b; letter-spacing: -0.16px; box-sizing: border-box; text-align: center;} .pop-repeat-rsv .input-list .list2 input::placeholder {font-size: 16px; font-weight: 400; color: #5f6b8b; letter-spacing: -0.16px;} .pop-repeat-rsv .input-list .list2 .select-box {width: 100px; background-image: unset; padding: unset; text-align: center;} .pop-repeat-rsv .input-list .list2 .select-box .btn-select {text-align: center;} .pop-repeat-rsv .input-list .list2 .checkBox {display: inline-block; margin-left: 20px;} .pop-repeat-rsv .input-list .list2 .checkBox input[type="checkbox"] {display: none;} .pop-repeat-rsv .input-list .list2 .checkBox .checkBox-txt {font-weight: 400; color: #5a6681; font-size: 15px; letter-spacing: -0.9px; position: relative; padding-left: 25px;} .pop-repeat-rsv .input-list .list2 .checkBox input + label::before {position: absolute; content: ''; width: 16px; height: 16px; background-color: #fff; border: 1px solid #5a6681; background-image: url(../images/icon/ico_check_y.png); background-position: center; background-size: 13px 11px; background-repeat: no-repeat; left: 0; top: 50%; transform: translateY(-50%);} .pop-repeat-rsv .input-list .list2 .checkBox input:checked + label::before {position: absolute; content: ''; width: 16px; height: 16px; background-color: #5a6681; background-image: url(../images/icon/ico_check_y.png); background-position: center; background-size: 13px 11px; background-repeat: no-repeat; left: 0; top: 50%; transform: translateY(-50%);} .pop-repeat-rsv .input-list .list2 .week-list {display: flex; gap: 10px; margin-top: 20px;} .pop-repeat-rsv .input-list .list2 .week-list li {width: 37px; height: 37px; border-radius: 3px; border: 1px solid #e5e6e9; background-color: #fff; font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #5f6b8b; text-align: center; line-height: 37px; cursor: pointer;} .pop-repeat-rsv .input-list .list2 .week-list li.on {background-color: #59a7f7; color: #fff;} .pop-repeat-rsv .input-list .list3 input {width: 187px; height: 44px; background-color: #f5f5f5; border: none; font-size: 16px; font-weight: 400; color: #5f6b8b; letter-spacing: -0.16px; padding: 0 15px; box-sizing: border-box;} .pop-repeat-rsv .input-list .list3 input::placeholder {font-size: 16px; font-weight: 400; color: #5f6b8b; letter-spacing: -0.16px;} .pop-repeat-rsv .txt-box {width: 100%; background: #f5f5f5; font-size: 16px; font-weight: 400; letter-spacing: -1.12px; color: #4c5266; padding: 27px 10px; box-sizing: border-box; text-align: center; margin-top: 20px;} /* 중복예약알림 팝업 */ .pop-duplicate-rsv .img-box {width: 54px; margin: 0 auto;} .pop-duplicate-rsv .img-box img {width: 100%;} .pop-duplicate-rsv .txt-box {margin-top: 25px; font-size: 18px; font-weight: 400; letter-spacing: -1.08px; color: #5a6681; text-align: center; margin: 15px 0 25px;} .pop-duplicate-rsv .txt-box span {font-weight: bold; color: #59a7f7; letter-spacing: -1.08px;} .pop-duplicate-rsv .date-box {width: 100%; text-align: center; background-color: #f5f5f5; padding: 20px 0; box-sizing: border-box; border-radius: 3px;} .pop-duplicate-rsv .date-box h5 {font-size: 16px; font-weight: 600; color: #4c5266;} .pop-duplicate-rsv .date-box p {font-size: 16px; font-weight: 400; color: #4c5266;} .pop-duplicate-rsv .date-box span {font-size: 16px; font-weight: 600; color: #59a7f7; letter-spacing: -0.8px;} /* ------------------------------------------------------ 스마트 락커 예약 ---------------------------------------------------------*/ .smartlocker {padding: 0 40px;} .smartlocker .smartlocker_head {margin-top: 20px; margin-bottom: 30px;} .smartlocker .smartlocker_head h1 {font-size: 36px; font-weight: 600; color: #4c5266; letter-spacing: -2.16px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0;} .smartlocker .smartlocker_head .btn-area {display: flex; align-items: center; margin-top: 20px;} .smartlocker .smartlocker_head .type_btn button {width: 100px; height: 40px; border-radius: 3px; color: #fff; box-shadow: 1.9px 7.8px 7px 0 rgba(0, 0, 0, 0.11); font-weight: 500; font-size: 20px; background-color: #606c8c;} .smartlocker .smartlocker_head .type_btn button.active {background-color: #59a7f7; font-weight: bold; } .smartlocker .smartlocker_head .type_btn button:hover {background-color: #343f5b;} .smartlocker .smartlocker_head .type_btn button.active:hover{background-color: #3e95ec;} .smartlocker .smartlocker_head .info_btn {margin-left: auto;} .smartlocker .smartlocker_head .info_btn button {font-size: 16px; color: #4c5266; font-weight: bold; letter-spacing: -0.16px; background-color: #e8f3ff; border-radius: 3px; box-shadow: 1.9px 7.8px 7px 0 rgba(0, 0, 0, 0.02); width: 180px; height: 36px;} .smartlocker .smartlocker_head .info_btn button i {display: inline-block; width: 16px; height: 16px; background: url(../images/icon/ico_info.png) no-repeat center/cover; margin-bottom: -2px; margin-right: 5px;} .smartlocker .smartlocker_head .info_btn button:hover{ opacity: 0.8;} .smartlocker .smartlocker_body {width: 100%;} .smartlocker-map {width: 100%; position: relative; text-align: center; margin-bottom: 20px;} .smartlocker-location {display: flex; justify-content: space-between; align-items: center;} .smartlocker-location h5 {font-size: 26px; font-weight: bold; color: #333; display: inline-block; margin-right: 10px;} .smartlocker-location span {font-size: 16px; font-weight: bold; color: #1382f4; letter-spacing: -0.96px;} .smartlocker-location ul li {float: left; position: relative; margin-right: 20px; font-weight: 600; color: #606c8c; letter-spacing: -0.96px; padding-left: 22px;} .smartlocker-location ul li::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px;} .smartlocker-location ul li:nth-child(1):before {background-image: repeating-linear-gradient(135deg, #fff, #dcdfe6 3px);} .smartlocker-location ul li:nth-child(2):before {background-color: #dcdfe6;} .smartlocker-location ul li:nth-child(3):before {background-color: #fff; border: 1px solid #d9d9d9;} .smartlocker-location ul li:nth-child(4):before {background-color: #1a84f4;} .smartlocker-list-wrap {width: 100%; max-width: 100%; overflow-x: auto; border-top: 1px solid #5a6681; margin: 20px 0 30px;} .smartlocker-list {display: flex; flex-wrap: nowrap;} .smartlocker-list .row {display: flex; flex-direction: column; flex: 1;} .smartlocker-list .row .box {width: 100%; height: 108px; border: 1px solid #f0f0f0; position: relative; padding: 20px; box-sizing: border-box; min-width: 185px; display: flex; flex-direction: column; justify-content: space-between;} .smartlocker-list .row .box:not(.impossible, .using, .mine) {cursor: pointer;} .smartlocker-list .row .box.active {background-color: #1a84f430;} .smartlocker-list .row .box.impossible {background-image: repeating-linear-gradient(135deg, #fff, #dcdfe6 1px);} .smartlocker-list .row .box.using {background-color: #dcdfe6;} .smartlocker-list .row .box.mine {background-color: #1a84f4;} .smartlocker-list .row .box.mine .number {color: #fff;} .smartlocker-list .row .box.mine .number span {color: #fff;} .smartlocker-list .row .box.mine .name {color: #fff;} .smartlocker-list .row .box .number {font-size: 16px; font-weight: 400; color: #5f6b8b} .smartlocker-list .row .box .number span {font-size: 22px; font-weight: 600; color: #606c8c;} .smartlocker-list .row .box .name {font-size: 18px; font-weight: bold; color: #333; letter-spacing: -1.08px; text-align: right;} .smartlocker-list .row .box button {font-size: 16px; font-weight: bold; letter-spacing: -0.96px; color: #fff; background-color: #343f5b; border-radius: 3px; width: 100px; height: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;} .smartlocker-list .row .box.active button {display: block;} .aside.locker .select-box {width: 210px; height: 38px; background-color: #fff;} .aside.locker .aside_search .date .input_group .date_input {width: 210px; height: 38px; box-sizing: border-box;} .aside.locker .seat_list_wrap {margin-top: 20px; padding-top: 10px;} .pop-locker-rsv-cont {padding-bottom: 20px; border-bottom: 1px solid #f0f0f0;} .pop-locker-rsv-cont.border-none {border: none !important;} .pop-locker-rsv-cont h5 {font-size: 18px; font-weight: 400; color: #5a6681; letter-spacing: -1.08px; margin-bottom: 15px;} .pop-locker-rsv-cont .txt-list {padding: 20px; background-color: #f5f5f5;} .pop-locker-rsv-cont .txt-list li {margin-bottom: 10px; position: relative; padding-left: 15px;} .pop-locker-rsv-cont .txt-list li:last-child {margin-bottom: 0px;} .pop-locker-rsv-cont .txt-list li::before {content: ''; position: absolute; width: 5px; height: 5px; background-color: #4c5266; border-radius: 100%; top: 50%; left: 0; transform: translateY(-50%);} .pop-locker-rsv-cont .txt-list li span {font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -1.12px; display: inline-block; margin-right: 20px;} .pop-locker-rsv-cont .txt-list li p {display: inline-block; font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #5f6b8b;} .pop-locker-rsv-cont .txt-list li p b {font-weight: bold;} .pop-locker-rsv-cont .txt-list li p.blue {font-weight: bold; color: #1382f4;} .pop-locker-rsv-cont .locker-pass-input {padding: 20px 0;} .pop-locker-rsv-cont .locker-pass-input .box {display: flex; align-items: center; margin-bottom: 10px;} .pop-locker-rsv-cont .locker-pass-input .box:last-child {margin-bottom: 0px;} .pop-locker-rsv-cont .locker-pass-input .label {font-size: 16px; font-weight: bold; color: #5a6681; letter-spacing: -0.16px; margin-right: 20px;} .pop-locker-rsv-cont .locker-pass-input input {width: 197px; height: 44px; border: none; background-color: #f0f6ff; font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -0.16px; padding: 0 20px;} .pop-locker-rsv-cont .locker-pass-input .box span {font-size: 14px; font-weight: 400; letter-spacing: -0.84px; color: #59a7f7; margin-left: 10px;} .pop-locker-rsv-cont .img-wrap {width: 48px; margin: 0 auto 10px;} .pop-locker-rsv-cont .img-wrap img {width: 100%;} .pop-locker-rsv-cont .locker-txt {font-size: 18px; font-weight: 400; color: #5a6681; letter-spacing: -1.08px; text-align: center;} .pop-locker-rsv-cont .smartlocker-location h5 {font-size: 26px; font-weight: bold; color: #333; display: inline-block; margin-right: 10px; margin-bottom: 0px;} .pop-locker-rsv-cont .smartlocker-list-wrap {margin-bottom: 0px;} .pop-locker-rsv-cont .smartlocker-list {margin-bottom: 30px;} .pop-locker-rsv-cont .smartlocker-list-wrap::-webkit-scrollbar {height: 12px;} .pop-locker-rsv-cont .smartlocker-list-wrap::-webkit-scrollbar-thumb {background-color: #dcdfe6; border-radius: 4.5px;} .pop-locker-rsv-cont .smartlocker-list-wrap::-webkit-scrollbar-track {background-color: #efefef; border-radius: 4.5px;} .pop-locker-rsv-cont .smartlocker-list .row .box {min-width: 120px; padding: 15px 10px;} .pop-locker-rsv-cont .smartlocker-list .row .box .name {text-align: left;} /* 스마트 락커 예약 팝업 */ .pop-locker-rsv {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 1.9px 7.8px 7px 0 rgba(0, 0, 0, 0.08);} .pop-locker-rsv .pop-locker-head {position: relative; padding: 0px 40px; box-sizing: border-box; background-color: #4c5266; height: 60px;} .pop-locker-rsv .pop-locker-head .pop-locker-tit {text-align: left; color: #fff; font-size: 20px; letter-spacing: -1.2px; font-weight: bold; line-height: 60px;} .pop-locker-rsv .pop-locker-head .pop-close {width: 16px; height: 16px; background: url(../images/icon/ico_close_w.png) no-repeat center/cover; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); text-indent: -99999px;font-size: 0; -webkit-transition: all .4s; transition: all .4s;} .pop-locker-rsv .pop-locker-head .pop-close:hover {cursor: pointer; -webkit-transform: translateY(-50%) rotate(180deg);transform: translateY(-50%) rotate(180deg);} .pop-locker-rsv .pop-locker-info {padding: 25px; display: flex; align-items: center;} .pop-locker-rsv .pop-locker-info .pop-locker-box {display: flex; align-items: center; margin-right: 40px;} .pop-locker-rsv .pop-locker-info .pop-locker-box .pop-locker-img {width: 140px; height: 100px; position: relative;} .pop-locker-rsv .pop-locker-info .pop-locker-box .pop-locker-img > img {width: 100%; height: 100%;} .pop-locker-rsv .pop-locker-info .pop-locker-txt {margin-left: 25px; text-align: left;} .pop-locker-rsv .pop-locker-info .pop-locker-txt > h5 {font-size: 24px; font-weight: 700; color: #333333;} .pop-locker-rsv .pop-locker-info .pop-locker-txt > p {font-weight: 500; color: #333333;} .pop-locker-rsv .pop-locker-info .pop-locker-txt > p > em {font-weight: 500; color: #1382f4;} .pop-locker-rsv .pop-locker-bottom {padding: 12px 11px 23px 35px; background-color:#f5f5f5; display: flex; align-items: flex-end;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-notice {font-size: 14px; font-weight: 500; color: #59a7f7; letter-spacing: -0.84px; margin-bottom: 8px;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-date-box {display: flex; align-items: center;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-date-box.input_group {margin-bottom: 5px; position: relative;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-date-box .pop-locker-date-label { font-size: 16px; font-weight: 600; color: #606c8c; letter-spacing: -0.96px; margin-right: 15px; min-width: 30px;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-date-box .pop-locker-select-box {position: relative; width: 210px; height: 38px; background-color: #fff; padding: 0 20px; border: none; background-image: url(../images/icon/ico_triangle_down_b.svg); background-repeat: no-repeat; background-size: 10px; background-position: top 50% right 20px; font-size: 16px; font-weight: 400; color: #4c5266; display: inline-block; vertical-align: middle; box-sizing: border-box;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-date-box .pop-locker-select-box .pop-locker-btn-select {width: 100%; height: 100%; text-align: left;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-date-box .pop-locker-select-box .pop-locker-select-list {display: none; position: absolute; width: 100%; top: 40px; left: 0; padding: 0; box-sizing: border-box; box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.14); border-radius: 6px; background-color: #fff; overflow: hidden; z-index: 10;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-date-box .pop-locker-select-box .pop-locker-select-list li {width: 100%; height: 47px; box-sizing: border-box;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-date-box .pop-locker-select-box .pop-locker-select-list li > button {width: 100%; height: 100%; background-color: #fff; color: #333; font-size: 16px; font-weight: 500; cursor: pointer; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-date-box .pop-locker-input-group {position: relative;} .pop-locker-rsv .pop-locker-bottom .pop-locker-date .pop-locker-date-box .pop-locker-input-group .pop-locker-date-input {height: 38px; background-color: #fff; border: none; background-image: url(../images/icon/ico_calendar.png); background-repeat: no-repeat; background-position: top 50% right 12px; background-size: 20px; padding: 0 15px; font-size: 16px; font-weight: 400; color: #5f6b8b; box-sizing: border-box; width: 210px;} .pop-locker-rsv .pop-locker-bottom .pop-locker-rsv-button {margin-left: 20px;} .pop-locker-rsv .pop-locker-bottom .pop-locker-rsv-button button{width: 144px; height: 80px; border-radius: 4px; background-image: linear-gradient(to top, #1382f4, #82bffe); color: #fff; font-size: 18px; font-weight: bold; letter-spacing: -1.08px; transition: all 0.2s ease;} /* ------------------------------------------------------ 컨디셔닝센터 예약 ---------------------------------------------------------*/ .conditioningCenter {padding: 0 30px;} .conditioningCenter h1 {font-size: 32px; color: #4c5266; font-weight: 600; margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;} .conditioning_head {display: flex; margin-top: 25px; margin-bottom: 25px; align-items: center; justify-content: center; padding: 0 40px; position: relative;} .conditioning_calendar {display: flex; align-items: center; justify-content: center;position: relative;} .conditioning_calendar input {border: none; background-color: inherit; text-align: center; font-size: 22px; font-weight: 600; max-width: 170px; color: #5a6681; margin: 0 35px;} .conditioning_calendar .date-display {margin: 0 20px; cursor: pointer;color: #fff;font-size: 18px;font-weight: 600;} .conditioning_calendar button {width: 36px; height: 36px; background-position: center; background-repeat: no-repeat; background-size: 13px; text-indent: -9999px; box-shadow: 1px 3.9px 7px 0 rgba(0, 0, 0, 0.14); border-radius: 3px;} .conditioning_calendar button:hover{box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.30);} .conditioning_calendar button.prevBtn {background-image: url(../images/icon/ico_arrow_L_gr.png);} .conditioning_calendar button.nextBtn {background-image: url(../images/icon/ico_arrow_R_gr.png);} .conditioning_calendar .ui-datepicker {position: absolute; top: 50px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 1000 !important;} .conditioning_head>ul {position: absolute; top: 50%; right: 40px; overflow: hidden; transform: translateY(-50%);} .conditioning_head ul:not(.select-list) li {float: left; position: relative; margin-right: 18px; font-weight: 600; color: #606c8c; letter-spacing: -0.96px; padding-left: 22px;} .conditioning_head ul:not(.select-list) li:last-child {margin-right: 0px;} .conditioning_head ul:not(.select-list) li::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px;} .conditioning_head ul li:nth-child(1):before {background-color: #dcdfe6;} .conditioning_head ul li:nth-child(2):before {background-color: #828eac} .conditioning_head ul li:nth-child(3):before {background-color: #fff; border: 1px solid #d9d9d9;} .conditioning_head ul li:nth-child(4):before {background-color: #1a84f4;} .schedule_btn_box_calendar button {background-color: #606c8c; color: #fff; font-size: 20px; font-weight: 700; width: 70px; border-radius: 3px; height: 40px; margin-right: 10px;} .schedule_btn_box_calendar button.active {background-color: #59a7f7; box-shadow: 7.4px 3px 7px 0 rgba(0, 0, 0, 0.11);} .conditioning_body {box-sizing: border-box; position: relative;} .conditioning_body ul li {margin-bottom: 30px;} .conditioning_body ul li > div {border-bottom: 1px solid #f0f0f0;} .conditioning_body ul li .conditioning_item_head {height: 70px; text-align: center;} .conditioning_body ul li .conditioning_item_head h5 {line-height: 70px; font-size: 26px; font-weight: bold; letter-spacing: -1.56px;} .conditioning_body ul li .conditioning_item_head h5 i {display: inline-block; margin-right: 15px;} .conditioning_body ul li .conditioning_item_info {position: relative; display: table-cell; width: 250px; vertical-align: middle; padding-left: 40px; box-sizing: border-box; background-color: #f5f5f5; box-shadow: 9.3px 3.7px 7px 0 rgba(0, 0, 0, 0.02);} .conditioning_body ul li .conditioning_item_info .device_list {display: flex; gap: 4px;} .conditioning_body ul li .conditioning_item_info .device_list li {text-align: center;} .conditioning_body ul li .conditioning_item_info .device_list li .ico_wrap {width: 30px; height: 30px; border-radius: 100%; margin: 0 auto 2px; background-color: #fff; background-size: 17px;} .conditioning_body ul li .conditioning_item_info .device_list li .ico_wrap.ico_twopeople {background-size: 22px;} .conditioning_body ul li .conditioning_item_info .device_list li .ico_wrap.ico_peoples {background-size: 20px;} .conditioning_body ul li .conditioning_item_info .device_list li.on .ico_wrap {background-color: #d0e6fd;} .conditioning_body ul li .conditioning_item_info .device_list li p {font-size: 12px; font-weight: 500; letter-spacing: -0.72px; color: #5b6884;} .conditioning_body ul li .conditioning_item_info .device_list li.on p {font-weight: bold;color: #1382f4;} .conditioning_body ul li .conditioning_item_info .name {font-size: 22px; color: #333333; letter-spacing: -1.32px; font-weight: 700;} .conditioning_body ul li .conditioning_item_info .location {font-size: 18px; color: #333333; letter-spacing: -1.08px; font-weight: 500; padding-left: 20px; background-image: url(../images/icon/ico_location.png); background-repeat: no-repeat; background-position: top 50% left 0px; background-size: 14px;} .conditioning_body ul li .conditioning_item_info .info_btn {position: absolute; bottom: 0; right: 0; background-color: #828eac; color: #fff; width: 64px; height: 24px; font-size: 14px; text-align: center; font-weight: 600; line-height: 24px;} .conditioning_body ul li .conditioning_item_info .info_btn button {width: 100%; height: 100%;} .conditioning_body ul li .conditioning_item_tbl {display: table-cell; vertical-align: middle;} .conditioning_body ul li .conditioning_item_tbl table {display: table; width: 100%; height: 130px; table-layout: fixed; border-right: 1px solid #ddd;} .conditioning_body ul li .conditioning_item_tbl table th {text-align: center; background-color: #e8f3ff; color: #5f6b8b; font-size: 14px; font-weight: 400; letter-spacing: -0.14px; height: 40px; border: 1px solid #f0f0f0;} .conditioning_body ul li .conditioning_item_tbl table th:first-child {border-left: none;} .conditioning_body ul li .conditioning_item_tbl table th:last-child {border-right: none;} .conditioning_body ul li .conditioning_item_tbl table td {padding: 0px;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell {background: #fff; border-left: 1px solid #f0f0f0; position: relative; height: 100%; background: #f5f5f5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation {width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: column nowrap; text-align:center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; cursor: pointer; font-size: 16px; font-weight: 600; color: #5f6b8b; letter-spacing: -0.14px;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation span {font-size: 14px; letter-spacing: -0.14px; color: #5f6b8b; font-weight: 600;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation.Impossible {background-color: #dcdfe6; cursor: default;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation.Impossible.time {background-color: #dcdfe6;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation.Impossible.others {background-color: #828eac; color: #fff;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation.Impossible.others span{color: #fff;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation.Impossible.detail {background-color: #fff; padding: 0 2px;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation:hover {background-color: #f5f5f5;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation.Impossible:hover {background-color: #dcdfe6} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation.Impossible.others:hover {background-color: #828eac;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation.Impossible.detail:hover {background-color: #fff;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation.Impossible.mine {background-color: #1a84f4; color: #fff;} .conditioning_body ul li .conditioning_item_tbl table td .condition_cell .reservation.Impossible.mine span { display: block; font-size: 14px; font-weight: bold; color: #fff;} .conditioning_body ul li .conditioning_item_tbl table td.ui-selected .condition_cell .reservation {background-color: rgba(0, 0, 0, .2);} #divReservationButtonArea {position: absolute; display: block; top: -9999px; left: -9999px;} #divReservationButtonArea button.add_btn {width: 100px; height: 40px; background-color: #343f5b; color: #fff; border-radius: 3px; position: absolute;left: 50%; z-index: 9; font-weight: 700; letter-spacing: -0.96px;} .conditioning_body ul li .conditioning_item_tbl table td.ui-selected .condition_cell.notselectable .reservation:hover{background: #fff;cursor: default;} .conditioning_body ul li .conditioning_item_tbl table td.ui-selected .condition_cell.notselectable .reservation.Impossible:hover{background: #fff;cursor: default;} .conditioning_body ul li.type1 .conditioning_item_head h5 {background-color: #f5e0e7; color: #a77878;} .conditioning_body ul li.type1 .conditioning_item_head h5 i {background: url(../images/icon/ico_conditioning_01.png) no-repeat center/cover; width: 22px; height: 20px;} .conditioning_body ul li.type1 .conditioning_item_info {background-color: #fef8fa;} .conditioning_body ul li.type1 .conditioning_item_info .name {color: #895a5a;} .conditioning_body ul li.type1 .conditioning_item_tbl table th {background-color: #faf6f7;} .conditioning_body ul li.type2 .conditioning_item_head h5 {background-color: #dce3f5; color: #8188a5;} .conditioning_body ul li.type2 .conditioning_item_head h5 i {background: url(../images/icon/ico_conditioning_02.png) no-repeat center/cover; width: 26px; height: 22px;} .conditioning_body ul li.type2 .conditioning_item_info {background-color: #f8f9fe;} .conditioning_body ul li.type2 .conditioning_item_info .name {color: #4d629a;} .conditioning_body ul li.type2 .conditioning_item_tbl table th {background-color: #eaeef6;} .pop-conditioning-rsv-cont h5 {font-size: 18px; font-weight: 400; color: #5a6681; letter-spacing: -1.08px; margin-bottom: 15px;} .pop-conditioning-rsv-cont table th {background-color: #f5f5f5; color: #5f6b8b; font-size: 17px; font-weight: 600; border: 1px solid #f0f0f0; height: 50px;} .pop-conditioning-rsv-cont table td {font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -0.16px; border: 1px solid #f0f0f0; padding: 0 20px; height: 50px;} .pop-conditioning-rsv-cont table td.name {color: #895a5a; font-weight: 600;} /* ------------------------------------------------------ 수면캡슐 예약 ---------------------------------------------------------*/ .sleep h1 {font-size: 32px; color: #4c5266; font-weight: 600; margin-top: 10px; padding:0px 40px 10px; border-bottom: 1px solid #f0f0f0;} .sleep_head {position: relative; display: flex; margin-top: 25px; margin-bottom: 25px; align-items: center; justify-content: center; padding: 0 40px;} .sleep .sleep_calendar {display: flex; align-items: center; justify-content: center;position: relative;} .sleep .sleep_calendar input {cursor: pointer; border: none; background-color: inherit; text-align: center; font-size: 22px; font-weight: 600; max-width: 170px; color: #5a6681; margin: 0 35px;} .sleep .sleep_calendar .date-display {margin: 0 20px; cursor: pointer;color: #fff;font-size: 18px;font-weight: 600;} .sleep .sleep_calendar button {width: 36px; height: 36px; background-position: center; background-repeat: no-repeat; background-size: 13px; text-indent: -9999px; box-shadow: 1px 3.9px 7px 0 rgba(0, 0, 0, 0.14); border-radius: 3px;} .sleep .sleep_calendar button.prevBtn {background-image: url(../images/icon/ico_arrow_L_gr.png);} .sleep .sleep_calendar button.nextBtn {background-image: url(../images/icon/ico_arrow_R_gr.png);} .sleep .sleep_calendar .ui-datepicker {position: absolute; top: 50px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 1000 !important;} .sleep_head ul{position: absolute; right: 20px;} .sleep_head ul:not(.select-list) li {float: left; position: relative; margin-right: 18px; font-weight: 600; color: #606c8c; letter-spacing: -0.96px; padding-left: 22px;} .sleep_head ul:not(.select-list) li::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px;} .sleep_head ul li:nth-child(1):before {background-color: #dcdfe6;} .sleep_head ul li:nth-child(2):before {background-color: #fff; border: 1px solid #d9d9d9;} .sleep_head ul li:nth-child(3):before {background-color: #1a84f4;} .schedule_btn_box_calendar button {background-color: #606c8c; color: #fff; font-size: 20px; font-weight: 700; width: 70px; border-radius: 3px; height: 40px; margin-right: 10px;} .schedule_btn_box_calendar button.active {background-color: #59a7f7; box-shadow: 7.4px 3px 7px 0 rgba(0, 0, 0, 0.11);} .sleep .sleep_body {padding: 0 30px; box-sizing: border-box;} .sleep_body ul li {margin-bottom: 30px;} .sleep_body ul li > div {border-bottom: 1px solid #f0f0f0;} .sleep_body ul li .sleep_item_info {position: relative; display: table-cell; width: 250px; vertical-align: middle; padding-left: 40px; box-sizing: border-box; background-color: #f5f5f5;} .sleep_body ul li .sleep_item_info .ly_flx > div {width: 50%;} .sleep_body ul li .sleep_item_info .device_list {display: flex; gap: 4px;} .sleep_body ul li .sleep_item_info .device_list li {text-align: center;} .sleep_body ul li .sleep_item_info .device_list li .ico_wrap {width: 30px; height: 30px; border-radius: 100%; margin: 0 auto 2px; background-color: #fff; background-size: 17px;} .sleep_body ul li .sleep_item_info .device_list li .ico_wrap.ico_twopeople {background-size: 22px;} .sleep_body ul li .sleep_item_info .device_list li .ico_wrap.ico_peoples {background-size: 20px;} .sleep_body ul li .sleep_item_info .device_list li.on .ico_wrap {background-color: #d0e6fd;} .sleep_body ul li .sleep_item_info .device_list li p {font-size: 12px; font-weight: 500; letter-spacing: -0.72px; color: #5b6884;} .sleep_body ul li .sleep_item_info .device_list li.on p {font-weight: bold;color: #1382f4;} .sleep_body ul li .sleep_item_info .name {font-size: 22px; color: #333333; letter-spacing: -1.32px; font-weight: 700; margin-bottom: 5px;} .sleep_body ul li .sleep_item_info .seat {font-size: 22px; color: #1382f4; letter-spacing: -1.32px; font-weight: 500;} .sleep_body ul li .sleep_item_info .info_btn {position: absolute; bottom: 0; right: 0; background-color: #828eac; color: #fff; width: 64px; height: 24px; font-size: 14px; text-align: center; font-weight: 600; line-height: 24px;} .sleep_body ul li .sleep_item_info .info_btn button {width: 100%; height: 100%;} .sleep_body ul li .sleep_item_tbl {display: table-cell; vertical-align: middle;} .sleep_body ul li .sleep_item_tbl table {display: table; width: 100%; height: 130px; table-layout: fixed; border-right: 1px solid #ddd;} .sleep_body ul li .sleep_item_tbl table th {text-align: center; background-color: #e8f3ff; color: #5f6b8b; font-size: 14px; font-weight: 400; letter-spacing: -0.14px; height: 40px;} .sleep_body ul li .sleep_item_tbl table td {padding: 0px;} .sleep_body ul li .sleep_item_tbl table td .meet_cell {background: #fff; border-left: 1px solid #f0f0f0; position: relative; height: 100%; background: #f5f5f5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation {width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; cursor: pointer;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation span {font-size: 14px; letter-spacing: -0.14px; color: #5f6b8b; font-weight: 600;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation.Impossible {background-color: #dcdfe6; cursor: default;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation.Impossible.time {background-color: #dcdfe6;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation.Impossible.lock {background-color: #828eac;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation.Impossible.lock span {width: 20px; height: 20px; background-image: url(../images/icon/ico_lock_wh.png); background-repeat: no-repeat; background-position: center; background-size: contain;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation.Impossible.others {background-color: #dcdfe6;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation.Impossible.others.repeat {background-image: url(../images/icon/ico_repeat-b.png); background-repeat: no-repeat; background-size: 11px; background-position: bottom 5px right 5px;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation:hover {background-color: #f5f5f5;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation.Impossible:hover {background-color: #dcdfe6;} .sleep_body ul li .sleep_item_tbl table td .meet_cell .reservation.Impossible.lock:hover {background-color: #828eac;} .sleep_body ul li .sleep_item_tbl table td.ui-selected .meet_cell .reservation {background-color: #1a84f4;} #divReservationButtonArea {position: absolute; display: block; top: -9999px; left: -9999px;} #divReservationButtonArea button.add_btn {width: 100px; height: 40px; background-color: #343f5b; color: #fff; border-radius: 3px; position: absolute; left: 50%; z-index: 9; font-weight: 700; letter-spacing: -0.96px;} #divReservationButtonArea button.add_btn:hover{background-color: #26314b;} #currPos::before {content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0px; height: 0px; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 10px solid #59a7f7;} .pop-sleep-rsv-cont h5 {font-size: 18px; font-weight: 400; color: #5a6681; letter-spacing: -1.08px; margin-bottom: 15px;} .pop-sleep-rsv-cont table th {background-color: #f5f5f5; color: #5f6b8b; font-size: 17px; font-weight: 600; border: 1px solid #f0f0f0; height: 50px;} .pop-sleep-rsv-cont table td {font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -0.16px; border: 1px solid #f0f0f0; padding: 0 20px; height: 50px;} .pop-sleep-rsv-cont table td.name {color: #895a5a; font-weight: 600;} .pop-sleep-rsv-cont.border-none {border: none !important;} .pop-sleep-rsv-cont h5 {font-size: 18px; font-weight: 400; color: #5a6681; letter-spacing: -1.08px; margin-bottom: 15px;} .pop-sleep-rsv-cont .description{font-size: 16px; text-align: center; word-break: keep-all; margin-bottom: 10px; color: #555;} .pop-sleep-rsv-cont .description h5{margin-bottom: 10px; font-weight: 600;} .pop-sleep-rsv-cont .txt-list {padding: 20px; background-color: #f5f5f5;} .pop-sleep-rsv-cont .txt-list li {margin-bottom: 10px; position: relative; padding-left: 15px;} .pop-sleep-rsv-cont .txt-list li:last-child {margin-bottom: 0px;} .pop-sleep-rsv-cont .txt-list li::before {content: ''; position: absolute; width: 5px; height: 5px; background-color: #4c5266; border-radius: 100%; top: 50%; left: 0; transform: translateY(-50%);} .pop-sleep-rsv-cont .txt-list li p {display: inline-block; font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #5f6b8b;} /* 수면캡슐 예약 hover 이벤트, disabled */ .sleep .sleep_calendar input:hover{color: #222;} .schedule_btn_box_calendar button:hover{background-color: #343f5b;} .schedule_btn_box_calendar button.active:hover{background-color: #3e95ec;} .sleep .sleep_calendar button:hover{box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.30);} .sleep .sleep_calendar button:disabled{cursor: initial; opacity: 0.5;} .sleep .sleep_calendar button:disabled:hover{box-shadow: 1px 3.9px 7px 0 rgba(0, 0, 0, 0.14); cursor: initial;} /* ------------------------------------------------------ 스마트시스템 예약 ---------------------------------------------------------*/ .smart_head {position: relative; margin-top: 20px; padding: 0 40px;} .smart_head h1 {font-size: 36px; font-weight: 600; color: #4c5266; letter-spacing: -2.16px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0;} .smartSystem-cont {position: relative;} .smartSystem-cont > img {margin: 50px auto; display: block;} .smartSystem-cont {text-align: center; height: calc(100% - 95px); overflow: hidden;} .pop-scent-cont h5 {font-size: 26px; font-weight: 600; color: #4c5266; letter-spacing: -1.56px; margin-bottom: 15px; text-align: center;} .pop-scent-cont .box {background-color: #f7f7f9; margin-bottom: 13px; text-align: center; height: 50px; line-height: 50px;} .pop-scent-cont .box span {font-size: 20px; font-weight: 600; color: #1382f4; letter-spacing: -1.2px;} .pop-scent-cont table th {background-color: #f5f5f5; color: #5f6b8b; font-size: 17px; font-weight: 600; border: 1px solid #f0f0f0; height: 50px;} .pop-scent-cont table td {font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -0.16px; border: 1px solid #f0f0f0; padding: 0 10px 0 20px; height: 50px;} .pop-scent-cont table td span {color: #1382f4;} .pop-scent-cont table ul {display: flex; justify-content: space-between;} .pop-scent-cont table ul li {width: 80px; height: 30px; background-color: #f7f7f9; border-radius: 15px; font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -0.96px; text-align: center; line-height: 30px;} .pop-air-cont h5 {font-size: 22px; font-weight: 600; color: #4c5266; letter-spacing: -1.32px; text-align: center;} .pop-air-cont h5 span {font-weight: 600; letter-spacing: normal;} .pop-air-cont .level-list {display: flex; justify-content: center; gap: 10px; margin-bottom: 23px; margin-top: 10px;} .pop-air-cont .level-list li {width: 75px; border-radius: 11px; font-size: 15px; font-weight: 500; color: #fff; letter-spacing: -0.96px; text-align: center;} .pop-air-cont .level-list li:nth-child(1) {background-color: #1382f4;} .pop-air-cont .level-list li:nth-child(2) {background-color: #12b37c;} .pop-air-cont .level-list li:nth-child(3) {background-color: #d2854d;} .pop-air-cont .level-list li:nth-child(4) {background-color: #d24d4d;} .pop-air-cont .level-list li:nth-child(5) {background-color: #50535b;} .pop-air-cont .graph-wrap {background-color: #f7f7f9; border-radius: 3px; height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;} .pop-air-cont .graph-wrap .graph {width: 395px; height: 16px; background-color: #4c5266; border-radius: 8px; position: relative;} /* 수치별 그래프 css값 [ .pop-air-cont .graph-wrap .graph .data { background: linear-gradient(to left, #색상, #색상);} ] 매우 좋음 : background: linear-gradient(to left, #1382f4, #82bffe); 좋음 : background: linear-gradient(to left, #12b37c, #4ee1af); 보통 : background: linear-gradient(to left, #d2854d, #fbaa6d); 위험 : background: linear-gradient(to left, #d24d4d, #f37c7c); 연결안됨 : background: none; /.pop-air-cont .graph-wrap .graph .mark{display:none;} */ .pop-air-cont .graph-wrap .graph .data {width: 82%; height: 100%; background: linear-gradient(to left, #1382f4, #82bffe); border-top-left-radius: 8px; border-bottom-left-radius: 8px;} .pop-air-cont .graph-wrap .graph .mark {position: absolute; top: -10px; left: calc(82% - 5px); width: 1px; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #828eac;} .pop-air-cont .graph-wrap .value {font-size: 18px; font-weight: bold; letter-spacing: -1.08px; color: #1382f4; margin-left: 8px;} .pop-air-cont table th {background-color: #f5f5f5; color: #5f6b8b; font-size: 17px; font-weight: 600; border: 1px solid #f0f0f0; height: 50px; text-align: left; letter-spacing: -0.17px; padding-left: 20px} .pop-air-cont table th span {width: 10px; height: 10px; border-radius: 100%; margin-right: 10px; display: inline-block;} .pop-air-cont table th span.color1 {background-color: #1285b3;} .pop-air-cont table th span.color2 {background-color: #99aa2f;} .pop-air-cont table th span.color3 {background-color: #daa31d;} .pop-air-cont table th span.color4 {background-color: #d24d4d;} .pop-air-cont table th span.color5 {background-color: #aaaaaa;} .pop-air-cont table td {font-size: 16px; font-weight: 400; color: #4c5266; border: 1px solid #f0f0f0; height: 50px; text-align: center;} .pop-air-cont table td span {color: #1382f4;} .pop-air-cont table ul {display: flex; justify-content: space-between;} .pop-air-cont table ul li {width: 80px; height: 30px; background-color: #f7f7f9; border-radius: 15px; font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -0.96px; text-align: center; line-height: 30px;} .smartSystem-cont.toilet {padding: 0 40px;} .smartlocker .toilet_body {width: 100%;} .toilet-location {display: flex; justify-content: space-between; align-items: center; margin-top: 20px;} .toilet-location span {font-size: 20px; font-weight: bold; color: #1382f4; letter-spacing: -0.96px; margin-right: 10px;} .toilet-location h5 {font-size: 26px; font-weight: bold; color: #333; display: inline-block; margin-right: 10px;} .toilet-location ul li {float: left; position: relative; margin-right: 20px; font-weight: 600; color: #606c8c; letter-spacing: -0.96px; padding-left: 22px;} .toilet-location ul li::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px;} .toilet-location ul li:nth-child(1):before {background-image: repeating-linear-gradient(135deg, #fff, #dcdfe6 3px);} .toilet-location ul li:nth-child(2):before {background-color: #dcdfe6;} .toilet-location ul li:nth-child(3):before {background-color: #fff; border: 1px solid #e5e5e5;} .toilet-list-wrap {width: 100%; max-width: 100%; overflow-x: auto; margin: 20px 0 30px; } .toilet-list {display: flex; flex-flow: nowrap; flex-flow: column;} .toilet-list .row {display: flex; flex-direction: row; flex: 1; margin-top: -1px;} .toilet-list .row:first-child {margin-top: 0px;} .toilet-list .row .woman-wrap, .toilet-list .row .man-wrap{width: 100%;display: flex; flex-flow: row nowrap; align-items: center; justify-content: start;} .toilet-list .row .box {width:100%; min-width: 150px; border: 1px solid #f0f0f0; border-right: 0; border-bottom: 0; position: relative; padding: 5px 20px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;} .toilet-list .row .box:last-child{border-right: 1px solid #f0f0f0;} .toilet-list .row:last-child .box{border-bottom: 1px solid #f0f0f0;} .toilet-list .row.title .box.floor {max-height: 50px; background-color: #4c5266; border: 0;} .toilet-list .row.title .box.floor .name {font-size: 20px; color: #fff; font-weight: 600;} .toilet-list .row.title >div .box{text-align: center; font-size: 20px; color: #fff; font-weight: 600; background-color: #eb5688; border: 0;} .toilet-list .row.title .man-wrap .box{background-color:#1382f4;} .toilet-list .row .box.floor{position: relative; flex-flow: row; max-width: 150px; justify-content: start; background: #f5f5f5;} .toilet-list .row .box.floor .name{font-size: 26px; text-align: left; color: #4c5266; font-weight: 600;} .toilet-list .row .box.floor button{position: absolute; bottom: 0; right: 0; width: 64px; height: 24px; background-color: #828eac; color: #fff;font-size: 14px; text-align: center; font-weight: 600; line-height: 24px;} .toilet-list .row .box{cursor: default; box-sizing: border-box;} .toilet-list .row .box.using {background-color: #dcdfe6bd;} .toilet-list .row .box .number {font-size: 23px; font-weight: 600; color: #eb5688;} .toilet-list .row .man-wrap {margin-left: -1px;} .toilet-list .row .man-wrap .box .number {color: #1382f4;} .toilet-list .row .box.impossible {background-image: repeating-linear-gradient(135deg, #fff, #dcdfe6 1px);} .toilet-list .row .box .name{font-size: 16px; color: #777; font-weight: 500;} /* 직원 현황 페이지 */ .staff_wrap {max-width: 1300px; margin: 0 auto; padding: 30px 0;} .staff_wrap .btn-staffSearch {background-color: #606c8c; margin-right: 15px;} .staff_wrap .btn-staffSearch.on {background-color: #59a7f7; margin-right: 15px;} .staff_wrap .btn-teamView {background-color: #606c8c;} .staff_wrap .btn-teamView.on {background-color: #59a7f7;} .staff-header, .staff-team-header {display: flex; align-items: center; margin-bottom: 24px;} .staff-header .staff-tab button{width: 130px; height: 40px; box-shadow: 7.4px 3px 7px 0 rgba(0, 0, 0, 0.11); border-radius: 3px; font-size: 18px; font-weight: 600; letter-spacing: -1.08px; color: #fff; background-color: #606c8c;} .staff-header .staff-tab button.active {background-color: #59a7f7;} .staff-header .search-area, .staff-team-header .search-area {margin-left: auto;} .staff-header .search-area .search-box, .staff-team-header .search-area .search-box {position: relative; display: inline-block;} .staff-header .search-area .search-box input, .staff-team-header .search-area .search-box input {width: 298px; height: 44px; border: none; background-color: #f0f6ff; font-size: 16px; font-weight: 400; color: #4c5266; padding: 0 20px;} .staff-header .search-area .search-box input::placeholder, .staff-team-header .search-area .search-box input::placeholder {color: #4c5266; font-size: 16px; font-weight: 400;} .staff-header .search-area .search-box button, .staff-team-header .search-area .search-box button {position: absolute; top: 50%; right: 20px; text-indent: -9999px; width: 17px; height: 17px; background: url(../images/icon/ico_search.png) no-repeat center/cover; transform: translateY(-50%);} .staff-team-header .staff-team > div{font-size: 22px; font-weight: 600; letter-spacing: -1.32px; color: #5a6681; margin-right: 10px;} .staff-team-header .staff-team > div > span{display: inline-block; color: #59a7f7; font-weight: 600; padding-left: 10px; margin-left: 10px; border-left: 2px solid #f5f5f5;} .staff-body {overflow: hidden;} .staff-body .tbl-wrap {border-top: 1px solid #4c5266; overflow-x: auto;} .staff-body .tbl-origin {min-width: 1000px;} .staff-body .tbl-origin td {height: 110px; box-sizing: border-box;} .staff-body .staff-img {width: 80px; height: 80px; margin: 0 auto; border-radius: 50px; overflow: hidden;background-color: #B9BFD0;} .staff-body .staff-img img {width: 100%;} .staff-body .staff-name {font-size: 18px; font-weight: bold; color: #333; letter-spacing: -1.08px; text-align: left; padding: 0 60px;} .staff-body .staff-name span {font-size: 20px; font-weight: bold; color: #1382f4; letter-spacing: -1.2px;} .staff-body .staff-co {font-size: 16px; font-weight: 600; letter-spacing: -0.96px; color: #5f6b8b; padding: 0 60px; text-align: left;} .staff-body .staff-seat {font-size: 20px; font-weight: bold; letter-spacing: -1.2px; color: #333;} .staff-body .staff-seat-loca {font-size: 16px; font-weight: 400; color: #333; letter-spacing: -0.16px;} .staff-body .staff-seat-loca.none {color: #d51f20;} .staff-body .staff-seat-loca span {font-size: 16px; font-weight: 400; color: #1382f4; letter-spacing: -0.16px;} .staff-body .tbl-origin button {width: 100px; height: 33px; border-radius: 3px; color: #fff; background-color: #0f447c; font-size: 16px; font-weight: bold; letter-spacing: -0.96px;} .staff-body .tbl-origin button:hover {opacity: 0.8; cursor: pointer;} .staff-body .tbl-origin button:disabled { background-color: #d5d5d5; cursor: initial; opacity: 1;} .staff-body .search-pack {width: 400px; float: left;} .staff-body .search-top {overflow: hidden; width: 100%;} .search-top .company-name {font-size: 16px; font-weight: 400; color: #fff; letter-spacing: -0.16px; background-color: #1382f4; width: 152px; height: 44px; text-align: center; line-height: 44px; float: left;} .search-top .search-box {position: relative; float: left;} .search-top .search-box input {width: 248px; height: 44px; border: none; background-color: #f0f6ff; font-size: 16px; font-weight: 400; color: #4c5266; padding: 0 20px; box-sizing: border-box;} .search-top .search-box input::placeholder {color: #4c5266; font-size: 16px; font-weight: 400;} .search-top .search-box button {position: absolute; top: 50%; right: 20px; text-indent: -9999px; width: 17px; height: 17px; background: url(../images/icon/ico_search.png) no-repeat center/cover; transform: translateY(-50%);} .search-menu {border: 1px solid #e5e5e5; border-top: none; box-sizing: border-box; padding: 40px;} .search-menu .main-team > li {margin-bottom: 30px; position: relative;} .search-menu .main-team > li::before {content: ''; position: absolute; width: 1px; height: calc(100% + 15px); background-color: #e5e5e5; left: 9px; top: 20px;} .search-menu .main-team > li:last-child:before {display: none;} .search-menu .main-team > li.on:last-child:before {display: block; height: calc(100% - 32px);} .search-menu .main-team > li a {font-size: 18px; font-weight: bold; color: #4c5266; letter-spacing: -0.18px; display: block; width: 100%; position: relative; padding-left: 30px;} .search-menu .main-team > li a::before {content: ''; width: 20px; height: 20px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: #5f6b8b; border-radius: 100%; background-image: url(../images/icon/ico_minus-w.png); background-repeat: no-repeat; background-position: center; background-size: 10px;} .search-menu .main-team > li.on a {color: #1382f4;} .search-menu .main-team > li.on a::before {background-color: #1382f4; background-image: url(../images/icon/ico_plus-w.png);} .search-menu .sub-team {padding-left: 30px; margin-top: 24px; display: none;} .search-menu .main-team > li.on .sub-team {display: block;} .search-menu .sub-team li {margin-bottom: 18px; position: relative;} .search-menu .sub-team li::before {position: absolute; content: ''; height: 1px; width: 20px; background-color: #e5e5e5; top: 50%; left: -20px; transform: translateY(-50%);} .search-menu .sub-team li:last-child {margin-bottom: 0;} .search-menu .sub-team input[type="checkbox"] {display: none;} .search-menu .sub-team input + label::before {position: absolute; content: ''; width: 19px; height: 19px; background-color: #fff; border: 1px solid #e5e5e5; background-image: url(../images/icon/ico_check_y.png); background-position: center; background-size: 13px 11px; background-repeat: no-repeat; left: 0; top: 50%; transform: translateY(-50%);} .search-menu .sub-team input:checked + label::before {position: absolute; content: ''; width: 19px; height: 19px; background-color: #1382f4; border-color: #1382f4; background-image: url(../images/icon/ico_check_y.png); background-position: center; background-size: 13px 11px; background-repeat: no-repeat; left: 0; top: 50%; transform: translateY(-50%);} .search-menu .sub-team .sub-team-name {position: relative; padding-left: 25px; font-size: 18px; font-weight: 400; color: #4c5266; letter-spacing: -1.08px;} .search-menu .sub-team input:checked + label {color: #1382f4;} .staff-body .result-pack {width: 855px; float: right;} .staff-body#type2 {display: none;} .staff-body#type2 .tbl-wrap {border-top: 1px solid #4c5266; overflow-y: auto; max-height: 645px;} .staff-body#type2 .tbl-wrap::-webkit-scrollbar {width: 8px;} .staff-body#type2 .tbl-wrap::-webkit-scrollbar-track {background: #fff; border-radius: 4.5px;} .staff-body#type2 .tbl-wrap::-webkit-scrollbar-thumb {background: #dcdfe6; border-radius: 4.5px;} .staff-body#type2 .tbl-wrap::-webkit-scrollbar-thumb:hover {background: #e9e9e9;} .staff-body#type2 .tbl-origin {min-width: unset;} .staff-body#type2 .tbl-origin th {position: sticky; top: 0;} .result-top {margin-bottom: 15px;} .result-top span {font-size: 22px; font-weight: 600; letter-spacing: -1.32px; color: #5a6681; margin-right: 10px;} .result-top span:nth-child(2) {color: #59a7f7; padding-left: 10px; border-left: 2px solid #f5f5f5;} /* 공지사항 FAQ */ .notice-list-wrap, .faq-list-wrap {padding-top: 30px; border-top: 1px solid #f0f0f0;} .list-area {max-width: 1300px; margin: 0 auto; padding: 25px 0;} .list-area .search-area {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;} .list-area .search-area .total {font-size: 22px; font-weight: 600; letter-spacing: -1.32px; color: #333333;} .list-area .search-area .total span {font-size: 30px; color: #1382f4; font-weight: 600;} .list-area .search-area .search-box {position: relative; display: inline-block;} .list-area .search-area .search-box input {width: 298px; height: 44px; border: none; background-color: #f0f6ff; font-size: 16px; font-weight: 400; color: #4c5266; padding: 0 20px;} .list-area .search-area .search-box input::placeholder {font-size: 16px; font-weight: 400; color: #4c5266;} .list-area .search-area .search-box button {position: absolute; top: 50%; right: 20px; text-indent: -9999px; width: 17px; height: 17px; background: url(../images/icon/ico_search.png) no-repeat center / cover; transform: translateY(-50%);} .list-area .tbl-wrap {width: 100%; overflow-x: auto; border-top: 1px solid #4c5266;} .tbl-wrap .tbl-list thead th {height: 50px; font-size: 17px; font-weight: 600; letter-spacing: -0.17px; color: #5f6b8b; background-color: #e8f3ff; border: 1px solid #f0f0f0; border-top: none; box-sizing: border-box;} .tbl-wrap .tbl-list tbody td {height: 70px; font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #4c5266; background-color: #ffffff; border: 1px solid #f0f0f0; text-align: center; padding: 0 20px;} .tbl-wrap .tbl-list tbody td:nth-child(2) {text-align: left;} .tbl-wrap .tbl-list tbody tr:hover{cursor: pointer; background-color: #f6faff !important;} .detail_cont {border: 1px solid #f0f0f0; border-top: 1px solid #4c5266; margin-bottom: 50px;} .detail_cont .cont-tit {padding: 25px 0; text-align: center; background-color: rgba(232, 243, 255, 0.3);} .detail_cont .cont-tit h5 {font-size: 22px; font-weight: 600; letter-spacing: -1.54px; color: #4c5266;} .detail_cont .cont-tit span {font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #5f6b8b; margin: 0 3px;} .detail_cont .cont-txt {padding: 30px;} .faq-list {width: 100%; border-top: 1px solid #4c5266;} .faq-list .faq-item {border: 1px solid #f0f0f0;} .faq-list .faq-item .label {width: 20%; display: flex; align-items: center;} .faq-list .faq-question {background-color: rgba(232, 243, 255, 0.3); display: flex; align-items: center; padding: 0 30px; box-sizing: border-box; height: 80px; position: relative;} .faq-list .faq-question::after {content: ''; position: absolute; width: 10px; height: 8px; background: url(../images/icon/ico_triangle_down_b.svg) no-repeat center/cover; top: 50%; right: 40px; transform: translateY(-50%);} .faq-list .faq-question.active::after {transform: rotate(180deg);} .faq-list .faq-question .Qmark {font-size: 26px; font-weight: 600; letter-spacing: -0.26px; color: #1382f4; margin-right: 67px;} .faq-list .faq-question .category {font-size: 20px; font-weight: 600; letter-spacing: -1.2px; color: #1382f4;} .faq-list .faq-question p {font-size: 17px; font-weight: 600; letter-spacing: -0.17px; color: #5f6b8b;} .faq-list .faq-answer {background-color: #fff; padding: 20px 30px; display: none; align-items: center;} .faq-list .faq-answer .Amark {font-size: 38px; font-weight: 600; color: #dddddd; letter-spacing: -0.38px; text-align: center; width: 100%;} .faq-list .faq-answer p {font-size: 16px; font-weight: 500; color: #4c5266; letter-spacing: -0.16px; line-height: 49px;} .list-area .btn-area {display: flex; align-items: center; justify-content: space-between;} .list-area .btn-area button {width: 160px; height: 40px; border-radius: 3px;} .list-area .btn-area button.btn-list {font-size: 18px; font-weight: bold; color: #fff; letter-spacing: -1.08px;} .list-area .btn-area button.btn-post {border: 1px solid #e5e5e5; font-size: 18px; font-weight: bold; letter-spacing: -1.08px; color: #4c5266; transition: all 0.2s;} .list-area .btn-area button.btn-post:hover {border-color: #59a7f7; color: #59a7f7; transition: all 0.2s;} /* 예약정책 */ .mypage {max-width: 1300px; margin: 0 auto; padding: 25px 0 30px;} .policy_wrap .policy-box {margin-bottom: 30px;} .policy_wrap .policy-tit {font-size: 22px; font-weight: 600; color: #333333; letter-spacing: -1.32px; margin-bottom: 20px;} .policy_wrap .tbl-wrap {border-top: 1px solid #4c5266;} .policy_wrap table th {border: 1px solid #f0f0f0; background-color: rgba(232, 243, 255, 0.4); font-size: 16px; font-weight: 600; letter-spacing: -0.16px; color: #4c5266; padding: 26px 0;} .policy_wrap table td {border: 1px solid #f0f0f0; text-align: center;} .policy_wrap table td:first-child {font-size: 18px; font-weight: 600; color: #4c5266; letter-spacing: -0.18px;} .policy_wrap table td:last-child {text-align: left; font-size: 16px; font-weight: 400; color: #4c5266; letter-spacing: -0.96px; padding-left: 30px;} .policy_wrap table td span {font-size: 16px; font-weight: bold; letter-spacing: -0.96px;} .policy_wrap table td span.color1 {color: #1984f4;} .policy_wrap table td span.color2 {color: #d51f20; letter-spacing: -0.96px;} /* 개인정보 수정 */ .personal_wrap {border-top: 1px solid #f0f0f0;} .personal_wrap .sub-tit {font-size: 22px; font-weight: bold; color: #1382f4; letter-spacing: -1.32px; margin: 30px 0;} .personal_wrap .profile-wrap {display: flex; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid #f0f0f0;} .personal_wrap .profile-img {width: 300px; height: 300px; background-color: #f8fbff; display: flex; flex-direction: column; justify-content: center; align-items: center;} .personal_wrap .profile-img .img-box {width: 160px; height: 160px; margin-bottom: 20px;} .personal_wrap .profile-img .img-box img {width: 100%; height: 100%;} .personal_wrap .profile-img .img-txt {font-size: 16px; font-weight: 400; color: #5a6681; letter-spacing: -0.96px; margin-bottom: 25px;} .personal_wrap .profile-img .img-btn button {width: 80px; height: 30px; border-radius: 3px; font-size: 16px; font-weight: bold; letter-spacing: -0.96px; box-shadow: 7.4px 3px 7px 0 rgba(0, 0, 0, 0.02); box-sizing: border-box;} .personal_wrap .profile-img .img-btn .btn-change {color: #5a6681; background-color: #fff; border: 1px solid #e5e5e5; } .personal_wrap .profile-img .img-btn .btn-del {color: #fff; background-color: #4c5266; } .personal_wrap .profile-info li {width: 100%; height: 44px; margin-bottom: 20px;} .personal_wrap .profile-info li:last-child {margin-bottom: 0px;} .personal_wrap .profile-info li .title {width: 90px; float: left; font-size: 16px; font-weight: bold; letter-spacing: -0.16px; color: #5a6681; line-height: 44px;} .personal_wrap .profile-info li .content {float: left;} .personal_wrap .profile-info li .content span {font-size: 16px; font-weight: 400; color: #5f6b8b; letter-spacing: -0.16px;} .personal_wrap .profile-info li input {height: 44px; background-color: #f0f6ff; font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #4c5266; border: none; box-sizing: border-box;} .personal_wrap .profile-info li input::placeholder {font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #4c5266;} .personal_wrap .profile-info .list1 input {width: 266px; padding-left: 20px;} .personal_wrap .profile-info .list2 input {width: 79px; padding-left: 15px;} .personal_wrap .profile-info .list3 input {width: 172px; padding-left: 15px;} .personal_wrap .profile-info .list3 .select-box {margin-left: 9px;} .personal_wrap .profile-info .list5 .select-box + .select-box {margin-left: 9px;} .personal_wrap .editInfo-wrap {display: flex; padding-bottom: 40px; border-bottom: 1px solid #f0f0f0;} .personal_wrap .editInfo-wrap > ul {width: 50%;} .personal_wrap .editInfo-wrap > ul > li {width: 100%; height: 44px; margin-bottom: 20px;} .personal_wrap .editInfo-wrap > ul > li:last-child {margin-bottom: 0px;} .personal_wrap .editInfo-wrap > ul > li .title {width: 135px; float: left; font-size: 16px; font-weight: bold; letter-spacing: -0.16px; color: #5a6681; line-height: 44px;} .personal_wrap .editInfo-wrap .edit-left .list1 .type1 {margin-right: 15px;} .personal_wrap .editInfo-wrap .edit-left .list1 .type2 {width: 125px;} .personal_wrap .editInfo-wrap .edit-left .list1 span {font-size: 16px; font-weight: bold; color: #59a7f7; letter-spacing: -0.16px; margin-right: 10px;} .personal_wrap .editInfo-wrap .edit-left .list2 input {width: 187px; box-sizing: border-box;} .personal_wrap .editInfo-wrap .edit-left .list2 span {line-height: 44px; font-size: 16px; font-weight: 400; color: #5f6b8b; letter-spacing: -0.16px;} .personal_wrap .btn-wrap {margin-top: 40px;} .personal_wrap .btn-wrap button {width: 160px; height: 40px; border-radius: 3px; font-size: 18px; font-weight: bold; color: #fff; letter-spacing: -1.08px;} .personal_wrap .btn-wrap .btn-cancel {background-color: #5f6d91; transition: all 0.2s;} .personal_wrap .btn-wrap .btn-cancel:hover {background-color: #4c5266; transition: all 0.2s;} .personal_wrap .btn-wrap .btn-apply {background-color: #59a7f7;} .personal_wrap .btn-wrap .btn-apply:hover {background-color: #1382f4; transition: all 0.2s;} /* 암호변경 */ .password_wrap {border-top: 1px solid #f0f0f0; padding: 100px 0 0;} .password_wrap .box {width: 800px; height: 360px; display: flex; justify-content: center; align-items: center; background-color: #f0f6ff; margin: 0 auto 100px;} .password_wrap .box ul li {height: 44px; margin-bottom: 20px;} .password_wrap .box ul li:last-child {margin-bottom: 0px;} .password_wrap .box ul li .title {width: 90px; float: left; font-size: 16px; font-weight: bold; letter-spacing: -0.16px; color: #5a6681; line-height: 44px;} .password_wrap .box ul li .content {float: left;} .password_wrap .box ul li input {height: 44px; background-color: #fff; font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #4c5266; border: none; box-sizing: border-box; padding-left: 20px; width: 266px;} .password_wrap .box ul li input::placeholder {font-size: 16px; font-weight: 400; letter-spacing: -0.16px; color: #4c5266;} .password_wrap .btn-wrap {padding-top: 30px; border-top: 1px solid #f0f0f0;} .password_wrap .btn-wrap button {width: 160px; height: 40px; border-radius: 3px; font-size: 18px; font-weight: bold; color: #fff; letter-spacing: -1.08px;} .password_wrap .btn-wrap .btn-cancel {background-color: #5f6d91; transition: all 0.2s;} .password_wrap .btn-wrap .btn-cancel:hover {background-color: #4c5266; transition: all 0.2s;} .password_wrap .btn-wrap .btn-apply {background-color: #59a7f7;} .password_wrap .btn-wrap .btn-apply:hover {background-color: #1382f4; transition: all 0.2s;} /* 서비스 통계 */ .statistics {max-width: 1300px; margin: 0 auto; padding: 25px 0 30px;} .statistics_wrap {border-top: 1px solid #f0f0f0;} .statistics_wrap .sub-tit {font-size: 22px; font-weight: bold; color: #1382f4; letter-spacing: -1.32px; margin: 30px 0 20px;} .statistics_wrap .statistics_cont {display: flex;} .statistics_wrap .chart-box-wrap.type1 {width: calc((100% - 20px) / 3 * 2);} .statistics_wrap .chart-box-wrap.type1 .chart-box {width: 50%; height: 320px; background-color: #fff; border: 1px solid #e5e5e5; box-sizing: border-box; float: left;} .statistics_wrap .chart-box-wrap.type1 .chart-tit {text-align: center; font-size: 18px; font-weight: bold; color: #5a6681; letter-spacing: -1.08px; height: 50px; line-height: 50px; background-color: #f6f8fc;} .statistics_wrap .chart-box-wrap.type1 .chart-cont {height: calc(100% - 30px); position: relative; padding: 10px;box-sizing: border-box;} .statistics_wrap .seat-total-rsv {border: 1px solid #e5e5e5; padding: 0 18px; margin-left: 20px; width: calc((100% - 20px) / 3); height: 320px; overflow-y: auto;} .statistics_wrap .seat-total-rsv::-webkit-scrollbar {width: 12px;} .statistics_wrap .seat-total-rsv::-webkit-scrollbar-thumb {width: 12px; border-radius: 4.5px; background-color: #dcdfe6;} .statistics_wrap .seat-total-rsv::-webkit-scrollbar-track {width: 12px; border-radius: 4.5px; background-color: #efefef;} .statistics_wrap .seat-total-rsv li {padding: 20px 0; border-bottom: 1px solid rgba(0, 0, 0, .1);} .statistics_wrap .seat-total-rsv li:last-child {border-bottom: 0px;} .statistics_wrap .seat-total-rsv .seat_item {display: flex; align-items: center;} .statistics_wrap .seat-total-rsv .seat_img {width: 120px; height: 85px; overflow: hidden; margin-right: 30px;} .statistics_wrap .seat-total-rsv .seat_img img {width: 100%;} .statistics_wrap .seat-total-rsv .seat_info > span {width: 64px; height: 24px; background-color: #0f447c; color: #fff; font-weight: 600; font-size: 14px; letter-spacing: -0.84px; text-align: center; line-height: 24px; display: block;} .statistics_wrap .seat-total-rsv .seat_info h5 {font-size: 20px; font-weight: bold; color: #333; letter-spacing: -1.2px;} .statistics_wrap .seat-total-rsv .seat_info p {font-size: 16px; font-weight: 400; letter-spacing: -0.16px;} .statistics_wrap .seat-total-rsv .seat_info p em {color: #1382f4;} .statistics_wrap .seat-total-rsv .seat_info p span {color: #333;} .statistics_wrap .seat-total-rsv .rsv-count {width: 75px; height: 75px; border-radius: 100%; background-color: #f6f8fc; line-height: 75px; text-align: center; font-size: 16px; font-weight: 600; color: #5a6681; letter-spacing: -0.96px; margin-left: auto;} .statistics_wrap .chart-box-wrap.type2 {width: 100%;} .statistics_wrap .chart-box-wrap.type2 .chart-box {border: none; width: 50%; float: left; box-sizing: border-box; overflow: hidden;} .statistics_wrap .chart-box-wrap.type2 .chart-tit {background: none; text-align: left; font-size: 19px; font-weight: bold; letter-spacing: -0.19px; color: #5a6681; margin: 30px 0 20px;} .statistics_wrap .chart-box-wrap.type2 .chart-cont {height: 352px; background-color: #fff; border: 1px solid #e5e5e5; box-sizing: border-box; position: relative;} /* 셀렉트 박스 공용 */ .select-box {position: relative; width: 187px; height: 44px; background-color: #f0f6ff; padding: 0 20px; border: none; background-image: url(../images/icon/ico_triangle_down_b.svg); background-repeat: no-repeat; background-size: 10px; background-position: top 50% right 20px; font-size: 16px; font-weight: 400; color: #4c5266; display: inline-block; vertical-align: middle;} .select-box .btn-select {width: 100%; height: 100%; text-align: left;} .select-box .select-list {top: 47px;} .select-list {display: none; position: absolute; width: 100%; top: 60px; left: 0; padding: 0; box-sizing: border-box; box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.14); border-radius: 6px; background-color: #fff; overflow: hidden; z-index: 10;} .btn-select.on+.select-list {display: block;} .select-list li {width: 100%; height: 47px; box-sizing: border-box;} .select-list li button {width: 100%; height: 100%; background-color: #fff; color: #333; font-size: 16px; font-weight: 500; cursor: pointer; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center;} .select-list li button:hover, .select-list li button:focus {background-color: rgba(0,0,0,0.05); color: #1382f4;} /* 반복예약 셀렉트 박스 */ .select-box.repeat {margin-left: 10px; padding-left: 40px;} .select-box.repeat::before {content: ''; position: absolute; width: 11px; height: 12px; background: url(../images/icon/ico_repeat-b.png) no-repeat center/contain; top: 50%; left: 20px; transform: translateY(-50%);} /* 정보 확인 페이지 input, select, daypicker, timepicker 색상/아이콘 제거 */ .state .select-style {background-color: #f5f5f5; background-image: none;} .state input.time{background-image: none !important;} .state .IOT-box-wrap .box, .state .img-layout li{cursor: default;} .state .select-box{background-color: #f5f5f5; background-image: none;} .state .select-box .select-list{display: none !important;} .state .input-style{background-color: #f5f5f5; cursor: initial;} .state .input-style:focus{outline: none; cursor: initial;} .state .select-style:focus{outline: none; cursor: initial;} .state .datepicker-style .time_input{background-color: #f5f5f5; background-image: none; cursor: initial;} .state .datepicker-style .date_input{background-color: #f5f5f5; background-image: none; cursor: initial;} .state .datepicker-style .ui-timepicker-container.ui-timepicker-standard{display: none !important;} .state .datepicker-style #ui-datepicker-div{display: none !important;} /* 에러페이지 */ .error-section {background-color: #fff; padding: 40px 100px;} .error-section .code-wrap {display: flex; flex-flow: column nowrap; align-items: center; justify-content: start;} .error-section .code-wrap .txt {font-weight: lighter; font-size: 25px; color: #666;} .error-section .code-wrap .num {font-weight: 600; font-size: 65px; color: #1382f4;} .error-section .code-wrap > img {display: inline-block; width: 160px; margin: 0 auto; opacity: 0.8;} .error-section .text-wrap {text-align: center;} .error-section .text-wrap > div {font-weight: 600; font-size: 23px; color: #5a6681; margin-top: 30px;} .error-section .text-wrap > p {font-weight: 300; font-size: 18px; color: #5a6681; margin-top: 15px;} .error .btn-wrap{display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin: 40px auto 0;} .error .btn-wrap button{display: inline-block; background-color: #1382f4; color: #fff; font-weight: 600; width: 150px; height: 37.5px;} /* ------------------------------------------------------ BREADCRUMB CSS ---------------------------------------------------------*/ .breadcrumb ul {display: flex; align-items: center;} .breadcrumb ul li {margin-right: 10px; padding-left: 17px; position: relative;} .breadcrumb ul li:nth-child(1)::before {display: none;} .breadcrumb ul li::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 7px; height: 11px; background: url(../images/icon/ico_arrow_R_gr.png) no-repeat center/contain;} .breadcrumb ul li a.home-btn {font-size: 0; width: 14px; height: 14px; background-image: url(../images/icon/ico_home_gr.png); background-repeat: no-repeat; background-position: center; background-size: contain;} .breadcrumb ul li a {font-size: 16px; font-weight: 400; letter-spacing: -0.96px; color: #606c8c; display: block;} /* ------------------------------------------------------ PAGING CSS ---------------------------------------------------------*/ .paging {margin-top: 20px; padding: 30px 10px; text-align: center;} .paging .page-link {font-size: 18px; color: #575c72; font-weight: 400; width: 40px; height: 40px; border-radius: 3px; background-color: #f7f9fb; display: inline-block; text-align: center; line-height: 40px; vertical-align: middle;margin: 0 1px;} .paging .page-link.active {color: #fff; background-color: #28a7e1;} .paging .page-link.first-page, .paging .page-link.prev-page, .paging .page-link.next-page, .paging .page-link.last-page {font-size: 0; background-position: center; background-repeat: no-repeat;} .paging .page-link.first-page {background-image: url(../images/icon/ico-page-first.svg); background-size: 16px;} .paging .page-link.prev-page {background-image: url(../images/icon/ico-page-prev.svg); background-size: 16px;} .paging .page-link.next-page {background-image: url(../images/icon/ico-page-next.svg); background-size: 16px;} .paging .page-link.last-page {background-image: url(../images/icon/ico-page-last.svg); background-size: 16px;} /*---- /*---- PAGING hover 이벤트 */ .paging .page-link:hover {color: #4c5266; background-color: #f3f3f3;} .paging .page-link.active:hover {color: #fff;background-color:#22a2db;}