/* 새로 짜기엔 양이 너무 많아서 기존 코드 기준으로 수정만 진행함 */ /* 매장-좌석배치도 */ #seat_position_wrap { display: flex; flex-direction: column; width: 100vw; height: 100%; background: #303030; } #seat_position_wrap > #seat_type_wrap { width: 100vw; height: 44vw; flex-shrink: 0; } #seat_position_wrap > #seat_type_wrap { display: none; } #seat_position_wrap > #seat_type_page { display: flex; flex-wrap: nowrap; height: 2px; flex-shrink: 0; margin-top: -2px; z-index: 10; font-size: 0; color: rgba(0,0,0,0);} #seat_position_wrap > #seat_type_page li { width: 100%; margin: 0; border-radius: 0; box-shadow: none; height: 2px; background: rgba(255,255,255,0.3); } #seat_position_wrap > #seat_type_page li.on { background: rgba(255,255,255,0.7); } #seat_position_wrap #position_outer_wrap { position: relative; overflow: hidden; width: 100vw; height: 100%; z-index: 5; } #seat_position_wrap #position_wrap { position: relative; overflow: scroll; width: 100vw; height: 100%; z-index: 5; font-size: 15px; } #seat_position_wrap #position_wrap::-webkit-scrollbar { display: none; } #seat_position_wrap #position_wrap > #position { position: relative; height: 100%; transition: 0.3s ease-out; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap { position: relative; width: 100%; height: 100%; background-repeat: no-repeat; z-index: 10; background-position: 0 0; overflow: hidden; transition: 0.3s ease-out; transform-origin: 0 0; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room { position: absolute; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat { position: absolute; background: #848484; color: white; text-align: center; font-size: 24px; white-space: nowrap; line-height: 24px; display: flex; flex-flow: column; align-items: center; justify-content: center; font-family: var(--header-font-family); } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .seat_idx { display: block; text-shadow: 0 0 3px rgba(0,0,0,0.6); } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .seat_info { display: block; opacity: 0.8; white-space: nowrap; font-size: 14px; line-height: 14px; text-shadow: 0 0 2px rgba(0,0,0,0.8);} #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.text_1 { font-size: 14px; line-height: 14px; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.text_1 .seat_info { margin-left: -0.5px; letter-spacing: -0.5px; font-size: 10px; line-height: 10px; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.text_2 { font-size: 17px; line-height: 17px; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.text_2 .seat_info { font-size: 12px; line-height: 12px; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.text_3 { font-size: 21px; line-height: 21px; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.text_3 .seat_info { font-size: 14px; line-height: 14px; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.mb_use { background: #4c6b5b; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.my_seat { background: #ca504f; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.my_seat_sub { background: #ca504f; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.select { background: #ca504f; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.seat_lock { background: #444444; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat.seat_select_lock { background: #444444; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .st_info { position: absolute; left: 0; top: 0; padding: 10px 5px; background: #a0a7af; border-radius: 3px; height: 33px; color: #fff; text-shadow: 0 0 1px rgba(0,0,0,0.5); z-index: 10; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .st_info.state_0 { background: #FAA43A; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .st_info.state_1 { color: #e4e6e9; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .st_info.state_2 { color: #ffee00; background: #60BD68; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .st_info i { display: inline-block; width: 12px; height: 14px; line-height: 14px; font-size: 12px; text-align: center; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .st_info .no { display: inline-block; font-size: 12px; line-height: 14px; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .date { position: absolute; top: 0; right: 0; left: 0; padding: 5px 5px 0 0; border-radius: 3px; text-align: right; letter-spacing: -0.5px; font-size: 12px; height: 33px; line-height: 12px; z-index: 9; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .date.date_1 { background: #d9d9dd; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .date.date_2 { background: #f9a23a; color: white; text-shadow: 0 0 1px rgba(0,0,0,0.5); } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .date.date_3 { background: #f15854; color: white; text-shadow: 0 0 1px rgba(0,0,0,0.5); } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .mb_info { display: table-cell; vertical-align: middle; padding-top: 35px; text-align: center; letter-spacing: -0.5px; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .mb_info .name { width: 15px; height: 15px; font-size: 13px; text-align: center; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .mb_info i { width: 15px; height: 15px; font-size: 12px; line-height: 15px; text-align: center; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .mb_info i.fa-mars { color: #65c4ea; } #seat_position_wrap #position_wrap > #position > #position_inner_wrap .seat_room .seat .mb_info i.fa-venus { color: #ea6565; } #seat_position_wrap #position_page { position: absolute; left: 0; bottom: 0; width: 100%; display: flex; height: calc(45px + max( calc( env(safe-area-inset-bottom)) , 15px)); font-family: var(--header-font-family); justify-content: space-between; padding-bottom: max( calc( env(safe-area-inset-bottom)) , 15px); z-index: 10; background: linear-gradient(0deg, rgba(50,50,50,1) 0%, rgba(50,50,50,0.75) 50%, rgba(50,50,50,0.0) 100%); } #seat_position_wrap #position_page > ul.page { display: flex; margin: 0 0 0 15px; padding: 0; max-width: calc(100vw - 150px); border-radius: 23px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } #seat_position_wrap #position_page > ul.page > li { display: flex; padding: 0; width: 80px; height: 45px; font-weight: 400; color: #666; font-size: 14px; align-items: center; justify-content: center; border-left: solid 0.5px #e2e2e2; background: #fff; opacity: 0.7; transition: 0.2s ease-out; } #seat_position_wrap #position_page > ul.page > li:first-child { padding: 0 0 0 5px; width: 90px; border-left: none; border-radius: 23px 0 0 23px; } #seat_position_wrap #position_page > ul.page > li:last-child { padding: 0 5px 0 0; width: 90px; border-radius: 0 23px 23px 0;} #seat_position_wrap #position_page > ul.page > li.on { color: var(--text-primary); font-weight: 900; opacity: 1; } #seat_position_wrap #position_page > ul.zoom { display: flex; flex-shrink: 0; margin: 0 5px 0 0; } #seat_position_wrap #position_page > ul.zoom > li { position: relative; display: flex; cursor: pointer; margin: 0 10px 0 0; width: 45px; height: 45px; font-size: 0; flex-shrink: 0; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); align-items: top; justify-content: center; background: #fff; opacity: 1; transition: 0.2s ease-out; } #seat_position_wrap #position_page > ul.zoom > li:before, #seat_position_wrap #position_page > ul.zoom > li:after { position: absolute; content: ''; width: 17px; height: 3px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 2px; background: #666; transition: 0.2s ease-out; } #seat_position_wrap #position_page > ul.zoom > li[data='plus']:before { width: 3px; height: 17px; } #seat_position_wrap #position_page > ul.zoom > li[data='minus']:before { display: none;} #seat_position_wrap #position_page > ul.zoom > li.disabled { opacity: 0.7;} #seat_position_wrap #position_page > ul.zoom > li.disabled:before, #seat_position_wrap #position_page > ul.zoom > li.disabled:after { opacity: 0.5; } #seat_position_wrap.zaksim #position_wrap > #position > #position_inner_wrap .seat_room .seat.mb_use { background: var(--zaksim-point); } #seat_position_wrap.hau #position_wrap > #position > #position_inner_wrap .seat_room .seat.mb_use { background: var(--hau-point); } #seat_position_wrap.mentors #position_wrap > #position > #position_inner_wrap .seat_room .seat.mb_use { background: var(--mentors-point); } #seat_position_wrap.pickko #position_wrap > #position > #position_inner_wrap .seat_room .seat.mb_use { background: var(--pickko-point); } #seat_position_wrap #seat_select_wrap { position: relative; opacity: 0; z-index: 1000; max-height: 0; flex-shrink: 0; overflow: hidden; padding: 0 15px; visibility: hidden; background: #fff; font-family: var(--header-font-family); box-shadow: 0 0 30px rgba(0,0,0,0.3); transition: 0.3s ease-out; } #seat_position_wrap #seat_select_wrap.show { opacity: 1; max-height: 170px; padding: 20px 20px max(env(safe-area-inset-bottom) , 20px) 20px; visibility: visible; } #seat_position_wrap #seat_select_wrap #seat_select_close { position: absolute; top: 10px; right: 10px; z-index: 50; } /*#seat_position_wrap #seat_select_wrap > h2 { display: block; font-size: 13px; color: #666; font-weight: 300; line-height: 15px; padding: 5px; font-family: var(--normal-font-family); }*/ #seat_position_wrap #seat_select_wrap > dl { padding: 8px 0 16px 0 } #seat_position_wrap #seat_select_wrap > dl > dt { position: relative; display: inline-block; vertical-align: middle; padding: 0; font-size: 13px; line-height: 20px; height: 20px; color: var(--black-400); font-weight: 400; font-family: var(--normal-font-family); } #seat_position_wrap #seat_select_wrap > dl > dt[stc_type='free']:after { content: ' (자유석)'; font-size: 13px; color: var(--black-400); font-weight: 300; } #seat_position_wrap #seat_select_wrap > dl > dt[stc_type='fix']:after { content: ' (고정석)'; font-size: 13px; color: var(--black-400); font-weight: 300; } #seat_position_wrap #seat_select_wrap > dl > dd { position: relative; display: block; vertical-align: middle; padding: 0 0 0; font-size: 13px; line-height: 20px; height: 20px; color: var(--black-700); font-weight: 500; font-family: var(--header-font-family); } #seat_position_wrap #seat_select_wrap > dl > dd:after { content: '번 좌석'; display: inline-block; font-size: 13px; line-height: 20px; height: 20px; color: var(--black-700); font-weight: 300; padding-left: 3px; } #seat_position_wrap #seat_select_wrap > dl > dt:empty:after { content: ''; display: inline-block; width: 75px; height: 20px; background: #e6e6e6; animation: opacity-change 1s linear infinite; border-radius: 4px; } #seat_position_wrap #seat_select_wrap > dl > dd:empty:after { content: ''; display: inline-block; width: 55px; height: 20px; background: #e6e6e6; animation: opacity-change 1s linear infinite; border-radius: 4px; } /*#seat_position_wrap #seat_select_wrap .indm_btn_wrap .seat_select_cancle { flex-shrink: 0; width: 100px; }*/ .seat-position__select-info .btn-group .seat-position__btn-cancel { width: 100px; flex-shrink: 0; margin-right: 10px; } /* 사물함 */ #locker_wrap { position: relative; width: 100%; height: 100%; overflow: hidden; background: #444444; } #locker_wrap > .locker_assign_wrap { background: #323332; padding: 20px; min-height: calc(100% - 300px); scroll-snap-type: x mandatory; position: relative; display: flex; flex-wrap: wrap; flex-flow: row; overflow: auto; flex-direction: row; } #locker_wrap > .locker_assign_wrap > div.locker_group { position: relative; display: inline-block; padding: 20px 20px 0 0; } #locker_wrap > .locker_assign_wrap > div.locker_group::-webkit-scrollbar { display: none; } #locker_wrap > .locker_assign_wrap > div.locker_group > h3 { position: -webkit-sticky; position: sticky; display: inline; left: -15px; text-align: left; padding: 0 15px; line-height: 45px; font-size: 15px; font-weight: 400; color: white; font-family: var(--header-font-family); } #locker_wrap > .locker_assign_wrap > div.locker_group > .locker { display: inline-flex; flex-direction: column; padding: 8px; margin: 0; border-radius: 7px; scroll-snap-align: start; scroll-snap-stop: always; } #locker_wrap > .locker_assign_wrap > div.locker_group > .locker > ul { display: flex; flex-direction: row; flex-wrap: nowrap; } #locker_wrap > .locker_assign_wrap > div.locker_group > .locker > ul:last-child > li { border-bottom: none; } #locker_wrap > .locker_assign_wrap > div.locker_group > .locker > ul > li { display: flex; flex-shrink: 0; font-size: 14px; width: 45px; height: 45px; text-shadow: 0 0 3px rgba(0,0,0,0.1); border-radius: 2px; background: #848484; align-items: center; justify-content: center; margin: 1px; color: white; font-family: var(--header-font-family); transition: 0.2s ease-out; } #locker_wrap > .locker_assign_wrap > div.locker_group > .locker > ul > li:last-child { border-right: none; } #locker_wrap > .locker_assign_wrap > div.locker_group > .locker > ul > li.unused { background: #444444; } #locker_wrap > .locker_assign_wrap > div.locker_group > .locker > ul > li.select { background: #ca504f; } #locker_wrap > .locker_assign_wrap > div.locker_group > .locker > ul > li.assigned { background: #E2AB56; } #locker_wrap > .locker_guide { position: -webkit-sticky; position: sticky; z-index: 9; bottom: 0; left: 0; display: flex; padding: 0 20px env(safe-area-inset-bottom) 20px; margin-bottom: calc( env(safe-area-inset-bottom) * -1); border-top: solid 0.5px rgba(0,0,0,0.1); background: rgba(30,30,30,0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #locker_wrap > .locker_guide span { position: relative; display: flex; color: white; width: 25%; font-size: 13px; line-height: 13px; font-weight: 300; text-align: center; padding: 0 5px; height: 55px; align-items: center; justify-content: center; } #locker_wrap > .locker_guide span:before { content: ''; display: inline-block; width: 12px; height: 12px; line-height: 13px; background: #848484; margin-right: 7px; box-shadow: 0 0 6px rgba(0,0,0,0.3); } #locker_wrap > .locker_guide span.lk_step1:before { background: #ca504f; } #locker_wrap > .locker_guide span.lk_step4:before { background: #444; } #locker_wrap > .locker_notice { position: relative; padding: 20px 20px max( calc(env(safe-area-inset-bottom) + 30px ), 30px) 20px; border-top: solid 1px #555; z-index: 10; background: #444444; } #locker_wrap > .locker_notice h3 { position: relative; padding: 10px 0 10px 22px; font-size: 15px; line-height: 20px; font-weight: 400; color: #ccc; } #locker_wrap > .locker_notice h3 i { position: absolute; top: 12px; left: 0; opacity: 1; margin-right: 7px; background: #ccc; mask-image: var(--icon-16-error); -webkit-mask-image: var(--icon-16-error); } #locker_wrap > .locker_notice ul { } #locker_wrap > .locker_notice ul li { position: relative; font-size: 13px; font-weight: 300; color: #aaa; line-height: 150%; word-break: keep-all; padding: 10px 0 0 16px; } #locker_wrap > .locker_notice ul li:after { position: absolute; content: ''; top: 17px; left: 6px; width: 3px; height: 3px; border-radius: 50%; background: #7b7b7b; } #locker_wrap > #locker_select_wrap { position: fixed; bottom: -165px; width: 100%; opacity: 0; z-index: 1000; padding: 0 20px; visibility: hidden; background: #fff; font-family: var(--header-font-family); box-shadow: 0 0 30px rgba(0,0,0,0.3); transition: 0.3s ease-out; } #locker_wrap > #locker_select_wrap.show { bottom: 0px; opacity: 1; padding: 20px 20px max(env(safe-area-inset-bottom) , 20px) 20px; visibility: visible; } #locker_wrap > #locker_select_wrap #locker_select_close { position: absolute; top: 13px; right: 13px; z-index: 50; } #locker_wrap > #locker_select_wrap > h2 { display: block; font-size: 13px; color: #666; font-weight: 300; line-height: 15px; padding: 5px; } #locker_wrap > #locker_select_wrap > dl { padding: 8px 0 16px 0; } #locker_wrap > #locker_select_wrap > dl > dt { position: relative; display: inline-block; vertical-align: middle; padding: 0 ;font-size: 13px; line-height: 20px; height: 20px; color: var(--black-400); font-weight: 400; font-family: var(--header-font-family); } #locker_wrap > #locker_select_wrap > dl > dd { position: relative; display: block; vertical-align: middle; padding: 0; font-size: 13px; line-height: 20px; height: 20px; color: var(--black-700); font-weight: 500; font-family: var(--header-font-family); } #locker_wrap > #locker_select_wrap > dl > dd:after { content: '번'; letter-spacing: -0.8px; display: inline-block; font-size: 13px; color: var(--black-400); font-weight: 300; padding-left: 3px; line-height: 20px; height: 20px; } #locker_wrap > #locker_select_wrap > dl > dt:empty:after { content: ''; display: inline-block; width: 75px; height: 20px; background: #e6e6e6; animation: opacity-change 1s linear infinite; border-radius: 4px; } #locker_wrap > #locker_select_wrap > dl > dd:empty:after { content: ''; display: inline-block; width: 55px; height: 20px; background: #e6e6e6; animation: opacity-change 1s linear infinite; border-radius: 4px; } /*#locker_wrap > #locker_select_wrap .indm_btn_wrap .locker_select_cancle { flex-shrink: 0; width: 100px; }*/ .locker-position__select-info .btn-group .locker-position__btn-cancel { width: 100px; flex-shrink: 0; margin-right: 10px; } #seat_position_wrap #seat_select_wrap > dl { padding: 8px 0 16px 0 } #seat_position_wrap #seat_select_wrap > dl > dt { position: relative; display: inline-block; vertical-align: middle; padding: 0; font-size: 13px; line-height: 20px; height: 20px; color: var(--black-400); font-weight: 400; font-family: var(--normal-font-family); } #seat_position_wrap #seat_select_wrap > dl > dt[stc_type='free']:after { content: ' (자유석)'; font-size: 13px; color: var(--black-400); font-weight: 300; } #seat_position_wrap #seat_select_wrap > dl > dt[stc_type='fix']:after { content: ' (고정석)'; font-size: 13px; color: var(--black-400); font-weight: 300; } #seat_position_wrap #seat_select_wrap > dl > dd { position: relative; display: block; vertical-align: middle; padding: 0 0 0; font-size: 13px; line-height: 20px; height: 20px; color: var(--black-700); font-weight: 500; font-family: var(--header-font-family); } #seat_position_wrap #seat_select_wrap > dl > dd:after { content: '번 좌석'; display: inline-block; font-size: 13px; line-height: 20px; height: 20px; color: var(--black-700); font-weight: 300; padding-left: 3px; } #seat_position_wrap #seat_select_wrap > dl > dt:empty:after { content: ''; display: inline-block; width: 75px; height: 20px; background: #e6e6e6; animation: opacity-change 1s linear infinite; border-radius: 4px; } #seat_position_wrap #seat_select_wrap > dl > dd:empty:after { content: ''; display: inline-block; width: 55px; height: 20px; background: #e6e6e6; animation: opacity-change 1s linear infinite; border-radius: 4px; } #locker_wrap.zaksim > .locker_guide span.lk_step3:before { background: var(--zaksim-point); } #locker_wrap.hau > .locker_guide span.lk_step3:before { background: var(--hau-point); } #locker_wrap.mentors > .locker_guide span.lk_step3:before { background: var(--mentors-point); } #locker_wrap.pickko > .locker_guide span.lk_step3:before { background: var(--pickko-point); } #locker_wrap.zaksim > .locker_assign_wrap > div.locker_group > .locker { border: solid 4px var(--zaksim-point-down); } #locker_wrap.hau > .locker_assign_wrap > div.locker_group > .locker { border: solid 4px var(--hau-point-down); } #locker_wrap.mentors > .locker_assign_wrap > div.locker_group > .locker { border: solid 4px var(--mentors-point-down); } #locker_wrap.pickko > .locker_assign_wrap > div.locker_group > .locker { border: solid 4px var(--pickko-point-down); } #locker_wrap.zaksim > .locker_assign_wrap > div.locker_group > .locker > ul > li.assigned { background: var(--zaksim-point); } #locker_wrap.hau > .locker_assign_wrap > div.locker_group > .locker > ul > li.assigned { background: var(--hau-point); } #locker_wrap.mentors > .locker_assign_wrap > div.locker_group > .locker > ul > li.assigned { background: var(--mentors-point); } #locker_wrap.pickko > .locker_assign_wrap > div.locker_group > .locker > ul > li.assigned { background: var(--pickko-point); }