@charset "UTF-8"; /* Document : style.css Created on : 15. 02. 01 Author : Nexist Description : 추가적인(개별적인) 스타일 시트입니다.. */ .popup { position: absolute; top: 575px; right: 28%; display: flex; z-index: 9999999; flex-flow: column; border-radius: 5px; border: solid 1px #bbb; box-shadow:0 0 4px rgba(0,0,0,0.2); overflow: hidden; user-select: none; } .popup__content { font-size: 0; } .popup__header { background: rgba(255,255,255,0.5); height: 30px; text-align: right; padding: 0 5px; backdrop-filter: blur(5px); } .popup__today-close { display: inline-flex; height: 30px; line-height: 28px; padding: 2px 5px 0px 5px; align-items: center; vertical-align: middle; } .popup__today-close input { display: inline-block; width: 15px; height: 15px; vertical-align: middle; } .popup__today-close span { display: inline-block; padding-left: 5px; font-size: 13px; line-height: 30px; vertical-align: middle; } .popup__close { position: relative; display: inline-block; vertical-align: middle; width: 30px; height: 30px; cursor: pointer; font-size: 0; color: transparent; } .popup__close:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); content: ''; width: 70%; height: 1px; background: #000; } .popup__close:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); content: ''; width: 70%; height: 1px; background: #000; } .mb_sex i.fa-mars { color: #65c4ea; } .mb_sex i.fa-venus { color: #ea6565; } .contents { background: white; border-radius: 5px; text-align: center; overflow: hidden; } #dashboard { width: 100%; min-height: 860px; padding: 0; font-family: "NanumBarunGothic", 'Nanum Barun Gothic'; } #dashboard .depth1 { position: relative; font-size: 0; } #dashboard .depth1 .item1.statistic { position: relative; display: inline-block; vertical-align: middle; width: 100%; height: 340px; padding: 40px 30px 20px 250px; } #dashboard .depth1 .item1.statistic .statistic_loading { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255,255,255,0.5); z-index: 100; display: none; } #dashboard .depth1 .item1.statistic .statistic_loading .loading-activity { position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; } #dashboard .depth1 .item1.statistic.loading .statistic_loading { display: block; } #dashboard .depth1 .item1.statistic h3 { position: absolute; top: 0; left: 0; width: 250px; text-align: right; padding: 40px 10px 10px 20px; height: 75px; font-size: 0; z-index: 4; font-family: 'NanumSquare', 'Nanum Square'; } #dashboard .depth1 .item1.statistic h3 > span { display: inline-block; padding-top: 1px; height: 25px; font-size: 24px; font-weight: 100; line-height: 25px; vertical-align: middle; } #dashboard .depth1 .item1.statistic h3 .next_btn, #dashboard .depth1 .item1.statistic h3 .prev_btn { position: relative; display: inline-block; font-size: 0; width: 25px; height: 25px; vertical-align: middle; cursor: pointer; } #dashboard .depth1 .item1.statistic h3 .next_btn:after, #dashboard .depth1 .item1.statistic h3 .next_btn:before, #dashboard .depth1 .item1.statistic h3 .prev_btn:after, #dashboard .depth1 .item1.statistic h3 .prev_btn:before { position: absolute; content: ''; left: 50%; margin-left: -6px; width: 11px; height: 2px; background: #777; border-radius: 3px; transition: 0.3s ease-out; } #dashboard .depth1 .item1.statistic h3 .next_btn:after { top: 8px; transform: rotate( 45deg); } #dashboard .depth1 .item1.statistic h3 .next_btn:before { bottom: 8px; transform: rotate(-45deg); } #dashboard .depth1 .item1.statistic h3 .prev_btn:after { bottom: 8px; transform: rotate( 45deg); } #dashboard .depth1 .item1.statistic h3 .prev_btn:before { top: 8px; transform: rotate(-45deg); } #dashboard .depth1 .item1.statistic h3 .next_btn:hover:after, #dashboard .depth1 .item1.statistic h3 .next_btn:hover:before, #dashboard .depth1 .item1.statistic h3 .prev_btn:hover:after, #dashboard .depth1 .item1.statistic h3 .prev_btn:hover:before { background: #000; } #dashboard .depth1 .item1.statistic h3 .next_btn.disabled:after, #dashboard .depth1 .item1.statistic h3 .next_btn.disabled:before, #dashboard .depth1 .item1.statistic h3 .prev_btn.disabled:after, #dashboard .depth1 .item1.statistic h3 .prev_btn.disabled:before { cursor: not-allowed; background: #ccc !important; } #dashboard .depth1 .item1.statistic .info { position: absolute; top: 0; left: 0; width: 250px; height: 340px; padding: 90px 20px 0 0; border-right: solid 1px #eee; z-index: 3; } #dashboard .depth1 .item1.statistic .info dt { position: relative; text-align: right; padding: 20px 15px 0 0; height: 35px; font-size: 12px; } #dashboard .depth1 .item1.statistic .info dd { font-size: 15px; height: 30px; text-align: right; } #dashboard .depth1 .item1.statistic .info dd span { font-size: 25px; font-weight: 700; font-family: 'NanumSquare', 'Nanum Square'; } #dashboard .depth1 .item1.statistic .info dt.total_price { padding-top: 30px; height: 50px; font-size: 14px; } #dashboard .depth1 .item1.statistic .info dd.total_price { font-size: 17px; height: 35px; } #dashboard .depth1 .item1.statistic .info dd.total_price span { font-size: 30px; font-weight: 900; letter-spacing: -1px; padding-right: 1px; } #dashboard .depth1 .item1.statistic table { width: 100%; } #dashboard .depth1 .item1.statistic table tr th.label { position: relative; font-weight: 400; font-size: 12px; color: #aaa; border-right: solid 1px #ddd; } #dashboard .depth1 .item1.statistic table tr th.label .label_1 { position: absolute; top: -5px; right: 10px; } #dashboard .depth1 .item1.statistic table tr th.label .label_2 { position: absolute; top: 38px; right: 10px; } #dashboard .depth1 .item1.statistic table tr th.label .label_3 { position: absolute; top: 81px; right: 10px; } #dashboard .depth1 .item1.statistic table tr th.label .label_4 { position: absolute; top: 125px; right: 10px; } #dashboard .depth1 .item1.statistic table tr th.label .label_5 { position: absolute; top: 168px; right: 10px; } #dashboard .depth1 .item1.statistic table tr th.label .label_6 { position: absolute; top: 211px; right: 10px; } #dashboard .depth1 .item1.statistic table tr th.label .label_7 { position: absolute; top: 255px; right: 10px; } #dashboard .depth1 .item1.statistic table tr td.bars { position: relative; height: 260px; vertical-align: bottom; border-bottom: solid 1px #ccc; } #dashboard .depth1 .item1.statistic table tr td.day { height: 30px; } #dashboard .depth1 .item1.statistic table tr td .bar { position: relative; display: block; width: 12px; margin: 0 auto; background: linear-gradient( to top, #70c484, #5EBD75 ); border-radius: 6px 6px 0 0; height: 0%; min-height: 1.5%; max-height: 100%; box-shadow: 0 0 2px rgba(0,0,0,0.2); z-index: 5; transition: 1s ease-out; } #dashboard .depth1 .item1.statistic table tr td .price { position: absolute; opacity: 0; margin-bottom: 0; left: 50%; padding: 4px 10px 3px; color: #fff; font-size: 12px; line-height: 12px; word-break: keep-all; text-align: center; display: block; background: rgba(0,0,0,0.5); border-radius: 3px; z-index: 6; transition: 0.3s ease-out; font-family: 'NanumSquare', 'Nanum Square'; } #dashboard .depth1 .item1.statistic table tr td .price:after { position: absolute; content: ''; bottom: -14px; left: 50%; margin-left: -7px; width: 0; height: 0; border: solid 7px transparent; border-top-color: rgba(0,0,0,0.5); } #dashboard .depth1 .item1.statistic table tr td:hover .price { margin-bottom: 10px; opacity: 1; } #dashboard .depth1 .item1.statistic table tr td.bars.today { background: #f6f6f6;} #dashboard .depth1 .item1.statistic table tr td.day.today { background: #f0f0f0;} #dashboard .depth1 .item1.statistic table tr td.bars.future .bar { background: #ccc;} #dashboard .depth1 .item1.statistic table tr th.line { position: relative; height: 0; } #dashboard .depth1 .item1.statistic table tr td.line { position: relative; height: 0; } #dashboard .depth1 .item1.statistic table tr td.line .line_1 { position: absolute; top: -73px; left: 0; right: 0; width: 100%; height: 0; border-bottom: solid 1px #f0f0f0; z-index: 1; } #dashboard .depth1 .item1.statistic table tr td.line .line_2 { position: absolute; top: -116px; left: 0; right: 0; width: 100%; height: 0; border-bottom: solid 1px #f0f0f0; z-index: 1; } #dashboard .depth1 .item1.statistic table tr td.line .line_3 { position: absolute; top: -160px; left: 0; right: 0; width: 100%; height: 0; border-bottom: solid 1px #f0f0f0; z-index: 1; } #dashboard .depth1 .item1.statistic table tr td.line .line_4 { position: absolute; top: -204px; left: 0; right: 0; width: 100%; height: 0; border-bottom: solid 1px #f0f0f0; z-index: 1; } #dashboard .depth1 .item1.statistic table tr td.line .line_5 { position: absolute; top: -247px; left: 0; right: 0; width: 100%; height: 0; border-bottom: solid 1px #f0f0f0; z-index: 1; } #dashboard .depth1 .item1.statistic table tr td.line .line_6 { position: absolute; top: -290px; left: 0; right: 0; width: 100%; height: 0; border-bottom: solid 1px #f0f0f0; z-index: 1; } #dashboard .depth1 .item1.statistic table tr td .bar.step_0 { } /*#dashboard .depth1 .item1.statistic table tr td .bar { background: linear-gradient(to top, #5D98EA 0px, #4B8DE8 50px, #3982E6 100px, #3477D2 150px, #2A5FA8 200px); }*/ /*#dashboard .depth1 .item1.statistic table tr td .bar { background: linear-gradient(to top, #4B8DE8 0px, #3477D2 200px, #D13434 240px); }*/ #dashboard .depth1 .item1.statistic table tr td .bar.step_0 { background: linear-gradient(to top, #1D4173 0%, #2B62AC 100%); } #dashboard .depth1 .item1.statistic table tr td .bar.step_1 { background: linear-gradient(to top, #3477D2 0%, #3982E6 100%); } #dashboard .depth1 .item1.statistic table tr td .bar.step_2 { background: linear-gradient(to top, #3477D2 0%, #3982E6 100%); } #dashboard .depth1 .item1.statistic table tr td .bar.step_3 { background: linear-gradient(to top, #3477D2 0%, #4B8DE8 100%); } #dashboard .depth1 .item1.statistic table tr td .bar.step_4 { background: linear-gradient(to top, #3477D2 0%, #5D98EA 100%); } #dashboard .depth1 .item1.statistic table tr td .bar.step_5 { background: linear-gradient(to top, #3477D2 0%, #5D98EA 100%); } #dashboard .depth1 .item1.statistic table tr td .bar.step_6 { background: linear-gradient(to top, #3477D2 0%, #5D98EA 100%); } /*#dashboard .depth1 .item1.statistic table tr td .bar.step_7 { background: linear-gradient(to top, #E8BE4D 0%, #E8BE4D 100%); }*/ #dashboard .depth1 .item1.statistic table tr td .bar.step_7 { background: linear-gradient(to top, #D95858 0%, #DF7676 100%); } #dashboard .depth1 .item1.statistic table tr td .bar.step_8 { background: linear-gradient(to top, #D13434 0%, #D95858 100%); } #dashboard .depth1 .item1.statistic table tr td .bar.step_9 { background: linear-gradient(to top, #AC2B2B 0%, #D13434 100%); } #dashboard .depth2 { position: relative; font-size: 0; margin-top: 20px; height: 100%; } #dashboard .depth2 .item1, #dashboard .depth2 .item2, #dashboard .depth2 .item3, #dashboard .depth2 .item4 { display: inline-block; vertical-align: middle; padding-left: 20px; vertical-align: top; } #dashboard .depth2 .item1 { width: 23%; padding-left: 0; } #dashboard .depth2 .item2 { width: 27%; } #dashboard .depth2 .item3 { width: 25%; } #dashboard .depth2 .item4 { width: 25%; } #dashboard .depth2 .member { display: inline-block; position: relative; width: 100%; height: 500px; } #dashboard .depth2 .member h3.title .total_member { position: absolute; top: 20px; right: 20px; font-size: 14px; font-weight: 400; } #dashboard .depth2 .member h3.title .total_member span { font-size: 17px; color: #333; padding: 0 0 0 5px; } #dashboard .depth2 .member .chart { position: relative; width: 250px; height: 250px; margin: 30px auto 0; } #dashboard .depth2 .member .chart .count { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -80px; width: 160px; height: 100px; line-height: 100px; font-size: 60px; text-align: center; font-family: 'NanumSquare', 'Nanum Square'; } #dashboard .depth2 .member .chart .count .label { position: absolute; top: 50%; left: 50%; margin: 27px 0 0 -50px; width: 100px; height: 20px; line-height: 20px; font-size: 17px; text-align: center; font-family: 'NanumSquare', 'Nanum Square'; color: #999; } #dashboard .depth2 .member .chart #member_step_chart { position: relative; z-index: 10; width: 100%; height: 100%; } #dashboard .depth2 .member .step_list { max-width: 250px; width: 100%; margin: 0 auto; padding: 10px 0 0 0; } #dashboard .depth2 .member .step_list li { position: relative; font-size: 14px; color: #666; height: 30px; line-height: 30px; padding: 0 0 0 15px; text-align: left; } #dashboard .depth2 .member .step_list li .name {} #dashboard .depth2 .member .step_list li .count { position: absolute; z-index: 5; top: 0; right: 5px; text-align: right; height: 30px; } #dashboard .depth2 .member .step_list li:after { position: absolute; content: ''; top: 10px; left: 0; width: 10px; height: 10px; background: #ccc; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,0.3);} #dashboard .depth2 .member .step_list li.step_0:after { background: #ffcc00; } #dashboard .depth2 .member .step_list li.step_1:after { background: #faa43a; } #dashboard .depth2 .member .step_list li.step_2:after { background: #5EBD75; } #dashboard .depth2 .member .step_list li.step_3:after { background: #f15854; } #dashboard .depth2 .member .step_list li.step_4:after { background: #f15854; } #dashboard .depth2 .seat { display: inline-block; position: relative; width: 100%; height: 500px; padding-top: 150px; } #dashboard .depth2 .seat h3.title { position: absolute; top: 0; width: 100%; } #dashboard .depth2 .seat .info { position: absolute; top: 50px; font-size: 0; left: 20px; right:20px; padding: 25px 0 0 0; height: 100px; font-family: 'NanumSquare', 'Nanum Square'; border-bottom: solid 1px #eee; } #dashboard .depth2 .seat .info dt { position: absolute; top: 65px; left: 0%; width: 33.3%; font-size: 12px; font-family: 'NanumSquare', 'Nanum Square'; } #dashboard .depth2 .seat .info dd { display: inline-block; width: 33.3%; height: 40px; line-height: 40px; font-size: 35px; font-family: 'NanumSquare', 'Nanum Square'; } #dashboard .depth2 .seat .info dt.use { left: 0%; } #dashboard .depth2 .seat .info dt.rest { left: 33.3%; } #dashboard .depth2 .seat .info dt.total { left: 66.6%; } #dashboard .depth2 .seat .info dd.use { } #dashboard .depth2 .seat .info dd.rest { } #dashboard .depth2 .seat .info dd.total { } #dashboard .depth2 .seat ul { padding: 10px 0; height: 100%; overflow-y: auto; } #dashboard .depth2 .seat ul li { position: relative; height: 40px; font-size: 14px; text-align: left; padding: 0; } #dashboard .depth2 .seat ul li .name { position: absolute; top: 50%; margin-top: -15px; left: 30px; height: 30px; line-height: 30px; text-align: left; } #dashboard .depth2 .seat ul li .total { position: absolute; top: 50%; margin-top: -15px; right: 30px; height: 30px; line-height: 30px; text-align: right; font-family: 'NanumSquare', 'Nanum Square'; } #dashboard .depth2 .seat ul li .bar_wrap { position: absolute; top: 50%; margin-top: -7px; left: 130px; right: 80px; height: 14px; line-height: 14px; border-radius: 3px; font-size: 0; overflow: hidden; } #dashboard .depth2 .seat ul li .bar_wrap .bar { display: inline-block; vertical-align: middle; width: 50%; max-width: 100%; overflow: hidden; height: 14px; line-height: 14px; font-size: 10px; text-align: center; background: #eee; transition: 1s ease-out; font-family: 'NanumSquare', 'Nanum Square'; } #dashboard .depth2 .seat ul li.seat_1 .bar_wrap .bar.use { background: #f15854; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_2 .bar_wrap .bar.use { background: #faa43a; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_3 .bar_wrap .bar.use { background: #ffcc00; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_4 .bar_wrap .bar.use { background: #5EBD75; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_5 .bar_wrap .bar.use { background: #5fa3ec; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_6 .bar_wrap .bar.use { background: #E258B2; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_7 .bar_wrap .bar.use { background: #f17cb0; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_8 .bar_wrap .bar.use { background: #8458e2; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_9 .bar_wrap .bar.use { background: #b2912f; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_10 .bar_wrap .bar.use { background: #41D3BD; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_11 .bar_wrap .bar.use { background: #407899; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_12 .bar_wrap .bar.use { background: #faa43a; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .seat ul li.seat_12 .bar_wrap .bar.use { background: #f15854; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.5); } #dashboard .depth2 .message { width: 100%; height: 200px; } #dashboard .depth2 .message h3.title span.price { position: absolute; top: 20px; right: 20px; font-size: 12px; font-weight: 400; letter-spacing: -0.5px; } #dashboard .depth2 .message h3.title span.price span { font-size: 17px; color: #333; font-weight: 700; padding: 0 2px 0 4px; } #dashboard .depth2 .message .info { font-size: 14px; text-align: right; padding: 0 20px 30px 20px; } #dashboard .depth2 .message .info dt { position: relative; display: block; font-size: 12px; color: #999; font-weight: 700; text-align: left; margin-top: 20px; padding: 0 0 0 2px; height: 15px; line-height: 15px; } #dashboard .depth2 .message .info dt .count { position: absolute; top: 0; right: 2px; font-weight: 400; } #dashboard .depth2 .message .info dd { display: block; width: 100%; height: 5px; border-radius: 2px; background: #eee; text-align: left; font-size: 0; } #dashboard .depth2 .message .info dd .bar { display: inline-block; width: 0%; max-width: 100%; height: 5px; border-radius: 2px; background: #aaa; transition: 0.3s ease-out; } #dashboard .depth2 .message .info dd.sms .bar { background: linear-gradient( to right, #70c484, #5EBD75 ); } #dashboard .depth2 .message .info dd.lms .bar { background: linear-gradient( to right, #fbad52, #faa43a ); } #dashboard .depth2 .message .info dd.mms .bar { background: linear-gradient( to right, #f36a68, #f15854 ); } #dashboard .depth2 .ping { width: 100%; height: 200px; margin-top: 20px; } #dashboard .depth2 .ping .ping_detail li.header { margin: 0; padding: 20px 20px 10px 20px; border-bottom: solid 1px #e6e6e6; } #dashboard .depth2 .ping .ping_detail li { margin: 0 10px; } #dashboard .depth2 .ping .ping_detail li:nth-child(2) { margin: 5px 10px 0 10px; } #dashboard .depth2 .ping .ping_detail li.header .ping_refresh { top: inherit; bottom: 10px; right: 10px; } /* #dashboard .depth2 .ping ul { padding: 5px 10px; } #dashboard .depth2 .ping ul li { position: relative; font-size: 14px; text-align: left; line-height: 34px; vertical-align: middle; border-top: solid 1px #eee; z-index: 1; } #dashboard .depth2 .ping ul li:hover { z-index: 10; } #dashboard .depth2 .ping ul li:first-child { border-top: none; } #dashboard .depth2 .ping ul li i { position: relative; display: inline-block; width: 20px; text-align: center; font-size: 17px; line-height: 34px; vertical-align: middle; color: #888; transition: 0.3s ease-out; z-index: 2; } #dashboard .depth2 .ping ul li > i { width: 30px; padding: 0 0 0 5px; color: #555; } #dashboard .depth2 .ping ul li .state { position: absolute; top: 0; right: 15px; text-align: right; line-height: 34px; vertical-align: middle; font-size: 12px; font-weight: 700; color: #888; transition: 0.3s ease-out; } #dashboard .depth2 .ping ul li .state i.fa-meh { color: #888; } #dashboard .depth2 .ping ul li .state i.fa-laugh-beam { color: #5EBD75; } #dashboard .depth2 .ping ul li .state i.fa-smile { color: #faa43a; } #dashboard .depth2 .ping ul li .state i.fa-dizzy { color: #f15854; } #dashboard .depth2 .ping ul li .state .dv_name { position: absolute; z-index: 1; opacity: 0; top: -15px; left: 5px; padding: 4px 9.5px 3px; color: #fff; font-size: 12px; line-height: 12px; white-space: nowrap; word-break: keep-all; text-align: center; display: block; background: rgba(0,0,0,0.5); border-radius: 3px; z-index: 6; transition: 0.3s ease-out; font-family: 'NanumSquare', 'Nanum Square'; text-shadow: 0 0 1px #000; font-weight: 200; } #dashboard .depth2 .ping ul li .state .dv_name:after { position: absolute; content: ''; bottom: -14px; left: 50%; margin-left: -7px; width: 0; height: 0; border: solid 7px transparent; border-top-color: rgba(0,0,0,0.5); } #dashboard .depth2 .ping ul li .state .dv_name.on { top: -20px; opacity: 1; } */ #device_status { position: relative; overflow: visible; } #device_status a i.fa-laugh-beam { color: #4caf50; } #device_status a i.fa-dizzy { color: #f15854; } #device_status .ping_detail li { position: relative; display: block; font-size: 14px; text-align: left; line-height: 34px; vertical-align: middle; border-bottom: solid 1px #eee; z-index: 1; } #device_status .ping_detail li.header { position: relative; color: #444; font-size: 17px; line-height: 20px; padding: 0 0 0 10px; text-align: left; font-family: 'NanumSquare', Nanum Square; font-weight: 700; } #device_status .ping_detail li.header .ping_refresh { position: absolute; top: 3px; right: 0; font-size: 12px; line-height: 23px; padding: 0 5px; } #device_status .ping_detail li.header .ping_refresh .loading-activity { margin-top: 3.3px; } #device_status .ping_detail li:hover { z-index: 10; } #device_status .ping_detail li:last-child { border-bottom: none; } #device_status .ping_detail li i { position: relative; display: inline-block; width: 20px; text-align: center; font-size: 17px; line-height: 34px; vertical-align: middle; color: #888; transition: 0.3s ease-out; z-index: 2; } #device_status .ping_detail li > i { width: 30px; padding: 0 0 0 5px; color: #555; } #device_status .ping_detail li .state { position: absolute; top: 0; right: 5px; text-align: right; line-height: 34px; vertical-align: middle; font-size: 12px; font-weight: 700; color: #888; transition: 0.3s ease-out; } #device_status .ping_detail li .state i.fa-meh { color: #888; } #device_status .ping_detail li .state i.fa-laugh-beam { color: #60BD68; } #device_status .ping_detail li .state i.fa-dizzy { color: #f15854; } #device_status .ping_detail li .state .dv_name { position: absolute; z-index: 1; opacity: 0; top: -15px; left: 5px; padding: 4px 9.5px 3px; color: #fff; font-size: 12px; line-height: 12px; white-space: nowrap; word-break: keep-all; text-align: center; display: block; background: rgba(0,0,0,0.7); border-radius: 3px; z-index: 6; transition: 0.3s ease-out; text-shadow: 0 0 1px #000; font-weight: 400; } #device_status .ping_detail li .state .dv_name:after { position: absolute; content: ''; bottom: -14px; left: 50%; margin-left: -7px; width: 0; height: 0; border: solid 7px transparent; border-top-color: rgba(0,0,0,0.7); } #device_status .ping_detail li .state .dv_name.on { top: -20px; opacity: 1; } /* #dashboard .depth2 .manual { display: inline-block; width: 100%; height: 280px; font-size: 0; margin-top: 20px; padding: 20px; } #dashboard .depth2 .manual a { display: inline-block; width: 50%; height: 50%; font-size: 14px; padding-top: 20px; opacity: 0.7; transition: 0.3s ease-out; } #dashboard .depth2 .manual a img { display: block; margin: 0 auto; height: 55px; } #dashboard .depth2 .manual a span { display: block; margin: 0 auto; text-align: center; padding-top: 10px; color: #000; } #dashboard .depth2 .manual a:nth-child(1) { border-right: solid 1px #eee; border-bottom: solid 1px #eee; border-radius: 5px 0 0 0; } #dashboard .depth2 .manual a:nth-child(2) { border-bottom: solid 1px #eee; border-radius: 0 5px 0 0; } #dashboard .depth2 .manual a:nth-child(3) { border-right: solid 1px #eee; border-radius: 0 0 0 5px; } #dashboard .depth2 .manual a:nth-child(4) { border-radius: 0 0 5px 0; } #dashboard .depth2 .manual a:hover { background: #f9f9f9; opacity: 1; } */ #dashboard .depth2 .manual { display: inline-block; width: 100%; height: 280px; font-size: 0; margin-top: 20px; } #dashboard .depth2 .manual a { position: relative; display: block; height: 75px; padding: 20px 20px 20px 30px; border-bottom: solid 1px #eee; opacity: 0.7; transition: 0.3s ease-out; text-align: left; } #dashboard .depth2 .manual a img { display: inline-block; height: 35px; vertical-align: middle; } #dashboard .depth2 .manual a span { display: inline-block; padding-left: 20px; font-size: 17px; color: #000; vertical-align: middle; } #dashboard .depth2 .manual a:last-child { border-bottom: none; } #dashboard .depth2 .manual a:hover { opacity: 1; } #dashboard .depth2 .notice { position: relative; width: 100%; height: 280px; overflow: hidden; } #dashboard .depth2 .notice { position: relative; width: 100%; height: 280px; overflow: hidden; } #dashboard .depth2 .notice h3.title #teamviewer_down { position: absolute; bottom: 10px; right: 10px; } #dashboard .depth2 .notice ul { display: block; padding: 10px 10px 0 10px; } #dashboard .depth2 .notice ul li { position: relative; display: block; } #dashboard .depth2 .notice ul li a { display: block; padding: 0 10px 0 55px; height: 35px; line-height: 35px; overflow: hidden; border-top: solid 1px #eee; font-size: 14px; text-align: left; color: #555; } #dashboard .depth2 .notice ul li:first-child a { border-top: none; } #dashboard .depth2 .notice ul li a:hover { background: #f9f9f9; color: #000; } #dashboard .depth2 .notice ul li a span.new { color: #e3624c; font-size: 10px; vertical-align: middle; } #dashboard .depth2 .notice ul li span.date { position: absolute; top: 0; left: 0; width: 50px; height: 35px; line-height: 35px; text-align: center; color: #e3624c; font-size: 12px; } #dashboard .depth2 .notice .more_notice { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; line-height: 40px; text-align: center; border-top: solid 1px #eee; color: #555; font-size: 14px; } #dashboard .depth2 .notice .more_notice:hover { background: #f9f9f9; color: #000; } .book_wrap { position: relative; } .book_wrap .book_shelf { position: absolute; top: 0; left: 0; width: 250px; } .book_wrap .book_shelf h3.title a.btn { position: absolute; top: 20px; right: 10px; } .book_wrap .book_shelf .vList { width: 100%; } .book_wrap .book_shelf ul.vList li { width: 100%; text-align: left; font-size: 14px; } .book_wrap .book_shelf ul.vList li .dsc { display: inline-block; padding-left: 5px; font-size: 12px; opacity: 0.5; } .book_wrap .book_list { position: relative; margin-left: 270px; } .book_form td#bk_image { padding: 20px 0; text-align: center; } .book_form td#bk_image img { height: 120px; } /* #member_view .depth2 .order .service_select #service_list li .svc_legend span.D_1:after { position: absolute; top: 2px; left: 10px; content: ''; width:6px; height: 6px; border-radius: 3px; display: block; background: #5da5da; } #member_view .depth2 .order .service_select #service_list li .svc_legend span.D_7:after { position: absolute; top: 2px; left: 10px; content: ''; width:6px; height: 6px; border-radius: 3px; display: block; background: #5EBD75; } #member_view .depth2 .order .service_select #service_list li .svc_legend span.D_15:after{ position: absolute; top: 2px; left: 10px; content: ''; width:6px; height: 6px; border-radius: 3px; display: block; background: #faa43a; } #member_view .depth2 .order .service_select #service_list li .svc_legend span.M_1:after { position: absolute; top: 2px; left: 10px; content: ''; width:6px; height: 6px; border-radius: 3px; display: block; background: #f15854; } #member_view .depth2 .order .service_select #service_list li .svc_legend span.W_1:after { position: absolute; top: 2px; left: 10px; content: ''; width:6px; height: 6px; border-radius: 3px; display: block; background: #b276b2; } #member_view .depth2 .order .service_select #service_list li .svc_legend span.W_2:after { position: absolute; top: 2px; left: 10px; content: ''; width:6px; height: 6px; border-radius: 3px; display: block; background: #5EBD75; } #member_view .depth2 .order .service_select #service_list li .svc_legend span.W_3:after{ position: absolute; top: 2px; left: 10px; content: ''; width:6px; height: 6px; border-radius: 3px; display: block; background: #faa43a; } #member_view .depth2 .order .service_select #service_list li .svc_legend span.W_4:after { position: absolute; top: 2px; left: 10px; content: ''; width:6px; height: 6px; border-radius: 3px; display: block; background: #f15854; } */ a.guide_btn { position: relative; z-index: 999999; } a.guide_btn > span { position: absolute; display: block; visibility: hidden; opacity: 0; top: 50%; right: 50%; margin: 0 -20px 0 0; width: 250px; font-weight: 400; padding: 10px 15px !important; font-size: 13px !important; line-height: 150% !important; text-align: justify; border-radius: 4px !important; background: rgba(70,70,70,0.80) !important; color: white !important; } a.guide_btn > span:before { position: absolute; top: -7px; right: 13px; content: ''; border-top: solid 0 transparent; border-left: solid 7px transparent; border-right: solid 7px transparent; border-bottom: solid 7px rgba(70,70,70,0.80); } a.guide_btn > i { color: #666; font-size: 20px; transition: 0.2s ease-out; } a.guide_btn:hover > i { color: #e1ab55; } a.guide_btn:hover > span { display: block; visibility: visible; opacity: 1; margin: 20px -20px 0 0; transition: 0.2s; } a.guide_btn.on > i { color: #4caf50; } a.guide_btn.on > span { display: block; visibility: visible; opacity: 1; margin: 20px -20px 0 0; transition: 0.2s; } .mst_list td { position: relative; } .mst_list a.guide_btn { position: absolute; top: 10px; left: 15px; padding: 5px; display: block; } .mst_list .mst_use_label { display: inline-block; height: 20px; line-height: 20px; padding: 1px 5px 1px 0; vertical-align: middle; } .mst_list .toggleBtn { vertical-align: middle; } .mst_list textarea { margin-top: 5px; } .bs_device_list { display: inline-block;} .bs_device_list li { padding: 10px 5px; border-top: solid 1px #eee; } .bs_device_list li:first-child { border-top: none; } /* seat config & service config */ .stc_list { position: relative; font-size: 0; column-count: 2; column-gap: 20px; } /*.stc_list li.stc_wrap { display: inline-block; width: 49%; background: white; border-radius: 5px; text-align: center; overflow: hidden; vertical-align: top; } .stc_list li.stc_wrap:nth-child(odd) { margin-right: 2%; }*/ .stc_list li.stc_wrap { background: white; border-radius: 5px; text-align: center; margin-bottom: 20px; overflow: hidden; vertical-align: top; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .stc_list li.stc_wrap .stc_contents { position: relative; padding: 20px 20px 20px 180px; border-bottom: solid 1px #eee; font-size: 14px; min-height: 140px; text-align: left; } .stc_list li.stc_wrap .stc_contents .image { position: absolute; top: 20px; left: 20px; width: 140px; height: 100px; overflow: hidden; border-radius: 3px; box-shadow: 0 0 1px rgba(0,0,0,0.5); } .stc_list li.stc_wrap .stc_contents .image img { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); } .stc_list li.stc_wrap .stc_contents .use { display: block; padding: 0 0 0 0; color: #cc0000; font-size:12px; } .stc_list li.stc_wrap .stc_contents .name_wrap { display: block; padding-top: 0; padding-bottom: 10px; padding-right: 100px; font-size: 17px; } .stc_list li.stc_wrap .stc_contents .name_wrap .type { display: inline-block; background: #cc0000; color: #fff; border-radius: 4px; font-size: 14px; padding: 3px 6px; } .stc_list li.stc_wrap .stc_contents .name_wrap .type.type_free { background: #3e85f9; } .stc_list li.stc_wrap .stc_contents .name_wrap .type.type_room { background: #e3624c; } .stc_list li.stc_wrap .stc_contents .name_wrap .type.type_fix { background: #57c72d; } .stc_list li.stc_wrap .stc_contents .name_wrap .dsc { display: block; font-size: 14px; padding-top: 7px;} .stc_list li.stc_wrap .stc_contents .update { display: block; font-size: 12px; color: #999; } .stc_list li.stc_wrap .stc_contents .update:before { display: inline-block; width: 40px; content: '수정일'; } .stc_list li.stc_wrap .stc_contents .regdate { display: block; font-size: 12px; color: #999; } .stc_list li.stc_wrap .stc_contents .regdate:before { display: inline-block; width: 40px; content: '등록일'; } .stc_list li.stc_wrap .stc_contents .stc_btns { position: absolute; top: 20px; right: 20px; text-align:right; } .stc_list li.stc_wrap .stc_contents .stc_btns .order { display:inline-block; font-size: 12px; color: #999; padding: 5px;} .stc_list li.stc_wrap .stc_contents .svc_btn { position: absolute; bottom: 10px; right: 20px;} .stc_list li.stc_wrap.stc_add_btn { background: none; } .stc_list li.stc_wrap table.listStyle { padding: 0; } .stc_list li.stc_wrap table.listStyle td { padding: 5px 0; } .stc_list li.stc_wrap table.listStyle tr th { padding: 10px 0; } .stc_list li.stc_wrap table.listStyle tr td { padding: 5px 0; } .stc_list li.stc_wrap table.listStyle tr td .price1 { } .stc_list li.stc_wrap table.listStyle tr td .price2 { display: none; } .stc_list li.stc_wrap table.listStyle tr td.price2_y { padding: 0; } .stc_list li.stc_wrap table.listStyle tr td.price2_y .price1 { display: block; padding: 3px 0; min-height: 19px; line-height: 13px; } .stc_list li.stc_wrap table.listStyle tr td.price2_y .price2 { display: block; padding: 3px 0; min-height: 19px; line-height: 13px; color: #aab0b9; border-top: solid 1px rgba(0,0,0,0.05); } .stc_list li.stc_wrap table.listStyle tr td.pdl10.price2_y { padding: 0 !important; } .stc_list li.stc_wrap table.listStyle tr td.pdl10.price2_y .price1 { padding: 3px 0 3px 10px; } .stc_list li.stc_wrap table.listStyle tr td.pdl10.price2_y .price2 { padding: 3px 0 3px 10px; } .stc_list li.stc_wrap table.listStyle tr.svc_use_N td { color: rgba(0,0,0,0.3); text-decoration: line-through;} .stc_list li.stc_wrap table.listStyle.svc_table tr.tr_even td { background: #fcfcfc; } .stc_list li.stc_wrap table.listStyle.svc_table tr.tr_odd td { background: #fff; } .stc_list li.stc_wrap table.listStyle.svc_table tr:hover td { background: #f9fdfd; } @media (max-width: 1600px) { .stc_list { column-count: 1; } } #seat_position { position: relative; width: 100%; height: 100%; min-height: 500px; display: block; background: white; background-repeat: no-repeat; } #seat_position.bg_auto_Y { background: #fff; border-radius: 4px; } #seat_position.bg_auto_Y .seat_room { border: solid 1px #ddd; background: #fff; box-sizing: border-box; border-radius: 4px; } /*#seat_position.bg_auto_Y .seat_room .seat { border: solid 1px #ddd; background: #fff; box-sizing: border-box; border-radius: 4px; }*/ #seat_position .seat_room { position: absolute; background: rgba(0,0,0,0.1); } #seat_position .seat_room.room_hover { background: rgba(0,0,0,0.15);} #seat_position .seat_room.room_select { background: rgba(255,0,0,0.2); z-index: 999998 !important; } #seat_position .seat_room .seat { position: absolute; background: #cccccc; color: #fff; opacity: 0.7; display: table-cell; vertical-align: inherit; text-align: center; } #seat_position .seat_room .seat.seat_hover { background: #ce4c45; } #seat_position .seat_room .seat.seat_select { background: #4c6b5b; z-index: 999998 !important; } #seat_position.kiosk .seat_room .seat { background: #cccccc; color: #fff; } #seat_position.kiosk .seat_room .seat.seat_hover { background: #ce4c45; } #seat_position.kiosk .seat_room .seat.seat_select { background: #4c6b5b; } #seat_position.edit_seat_mode .seat { cursor: move; } .svc_dc tbody.svc_dc_list tr th, .svc_dc tbody.svc_dc_list tr td { padding: 10px 20px; } .svc_dc tbody.svc_dc_list tr.delete th, .svc_dc tbody.svc_dc_list tr.delete td { background: #eee; } .svc_dc tbody.default_html { display: none; } .service_list li { background: #fff; padding: 10px; border-left: solid 3px #fff; border-top: solid 1px #eee; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .service_list li:first-child { border-top: none; } .service_list li.on { background: #f9f9f9; border-left: solid 3px #ccc; } .service_list li:hover { background: #f0f9f9; } .svc_days_bar { width: 100%; border-radius: 11px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .svc_days_bar tr td { color: white !important; text-align: center !important; padding: 2px 5px !important; font-size: 12px; word-break: keep-all; border-bottom: none !important;} .svc_days_bar tr td.D_1 { background: #5da5da; } .svc_days_bar tr td.D_7 { background: #5EBD75; } .svc_days_bar tr td.D_15 { background: #faa43a; } .svc_days_bar tr td.M_1 { background: #f15854; } /* locker style */ .locker_form { position: absolute; left: 20px; top: 155px; width: 450px; height: 762px; } #locker_wrap { display: block; padding: 0; font-size: 0; margin: 0 0 0 470px; min-height: 762px; } .locker { display: block; } .locker ul { padding: 0; margin: 0 auto; padding: 15px 0 20px 15px; font-size: 0; } .locker .locker_item { display: inline-block; background: #fff; border: solid 1px #ddd; vertical-align: middle; margin: 5px 0 0 5px; color: #999; text-align: center; font-size: 17px; box-sizing: border-box; cursor: pointer; border-radius: 3px; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .locker .locker_item.unused { background: #fafafa; border: solid 1px #eee; color: #ccc; font-weight: 400; } .locker .locker_item { position: relative; } .locker .locker_item .idx { position: absolute; top: 10px; right: 10px; line-height: 15px; font-size: 12px; } .locker .locker_item .name { position: relative; padding: 0 0 0 15px; color: #3a3c4c; word-break: keep-all; } .locker .locker_item .name:before { content:''; position: absolute; top: 5px; left: 5px; display: block; width: 5px; height: 5px; background: #bbb; border-radius: 50%; } .locker .locker_item .name.type_1:before { background: #faa43a; } .locker .locker_item .name.type_2:before { background: #5EBD75; } .locker .locker_item .name.type_3:before { background: #f15854; } .locker_assign .locker_item.unused { background: #eee; border: solid 1px #eee; font-size: 0; cursor: not-allowed; } .locker_assign .locker_item.assigned { background: #fafafa; border: solid 1px #eee; color: #ccc; cursor: not-allowed; } .locker_assign .locker_item.assign { background: #e3624c; border: solid 1px #ccc; color: #fff; } .locker_assign_wrap { position: relative; } .locker_assign_wrap .locker_assign_left { position: absolute; top: 0; left: 0; width: 200px; } .locker_assign_wrap .locker_assign_left ul.vList li { width: 150px; text-align: left; } .locker_assign_wrap .locker_assign_list { margin: 0 0 0 220px; } .goods_list tr td.goods_image { text-align: center; font-size: 0; } .goods_list tr td.goods_image img { max-width: 120px; border: solid 1px #eee; border-radius: 4px; } .goods_list tr td.goods_info { position: relative; } .goods_list tr td.goods_info .gd_category { display: block; font-size: 12px; color: #5fa3ec; } .goods_list tr td.goods_info .gd_name { display: block; font-size: 17px; font-weight: 700; padding-top: 5px; line-height: 20px; } .goods_list tr td.goods_info .gd_dsc { display: block; font-size: 14px; color: #777; line-height: 17px; } .goods_list tr td.goods_info .gdp_select { display: block; padding: 10px 0 0 0; } .goods_list tr td.goods_info .gdp_select .title { display: inline-block; border: solid 1px #aaa; color: #777; padding: 3px 0; margin-right: 10px; width: 80px; text-align: center; border-radius: 4px; } .goods_list tr td.goods_info .gdp_add { display: block; padding: 5px 0 0 0; } .goods_list tr td.goods_info .gdp_add .title { display: inline-block; border: solid 1px #aaa; color: #777; padding: 3px 0; margin-right: 10px; width: 80px; text-align: center; border-radius: 4px; } .goods_form .gdp_select_list tr.delete th { background: #f9f9f9; color: #999; border-bottom: solid 1px #eee; } .goods_form .gdp_select_list tr.delete td { background: #f9f9f9; color: #999; border-bottom: solid 1px #eee; } .goods_form .gdp_select_list tr.delete td input.inputBox { background: #f9f9f9; color: #999; } .goods_form .gdp_add_list tr.delete th { background: #f9f9f9; color: #999; border-bottom: solid 1px #eee; } .goods_form .gdp_add_list tr.delete td { background: #f9f9f9; color: #999; border-bottom: solid 1px #eee; } .goods_form .gdp_add_list tr.delete td input.inputBox { background: #f9f9f9; color: #999; } .book_list tr td.book_image { text-align: center; font-size: 0; padding: 10px 0; } .book_list tr td.book_image img { border: solid 1px #eee; border-radius: 4px; } .book_list tr td.book_info { position: relative; } .book_list tr td.book_info .bk_category { display: block; font-size: 12px; color: #5fa3ec; } .book_list tr td.book_info .bk_title { display: block; font-size: 17px; font-weight: 700; padding: 5px 0; line-height: 20px; } .book_list tr td.book_info .bk_author { display: inline-block; font-size: 12px; color: #777; line-height: 17px; } .book_list tr td.book_info .bk_author:before { content:'작가'; display: inline-block; padding: 0 5px 0 0; font-size: 12px; color: #aaa; line-height: 17px; } .book_list tr td.book_info .bk_publisher { display: inline-block; font-size: 12px; color: #777; line-height: 17px; } .book_list tr td.book_info .bk_publisher:before { content:'발행처'; display: inline-block; padding: 0 5px 0 10px; font-size: 12px; color: #aaa; line-height: 17px; } .book_list tr td.book_info .bk_pubdate { display: inline-block; font-size: 12px; color: #777; line-height: 17px; } .book_list tr td.book_info .bk_pubdate:before { content:'발행일'; display: inline-block; padding: 0 5px 0 10px; font-size: 12px; color: #aaa; line-height: 17px; } .book_list tr td.book_info .bk_isbn { display: block; padding-top: 10px; font-size: 14px; color: #777; line-height: 17px; } .book_list tr td.book_info .bk_isbn:before { content:'ISBN'; display: inline-block; padding: 0 5px 0 0; font-size: 14px; color: #aaa; line-height: 17px; } .message_list { overflow: visible; } .receiver_list_view { position: relative; } .receiver_list_view .receiver_list { position: absolute; top: 50%; right: 0; display: none; background: #fff; border: solid 1px #ddd; max-height: 400px; box-shadow: 0 0 10px rgba(0,0,0,0.15); overflow: auto; padding: 10px; border-radius: 4px; transform: translate(70%, -50%); list-style: decimal; list-style-position: inside; } .receiver_list_view .receiver_list li { padding: 10px; border-top: solid 1px #f6f6f6; white-space: nowrap; } .receiver_list_view .receiver_list li:first-child { border-top: none; } .receiver_list_view:hover .receiver_list { display: block; } .message_status { padding: 20px; font-size: 14px; line-height: 180%; text-align: left; } .message_send { width: 100%; max-width: 500px; text-align: center; } /*.message_send .message_send_type { padding: 10px 20px; text-align: left; } .message_send .message_send_type a { display: inline-block; cursor: pointer; margin-right: 3px; font-size: 14px; padding: 4px 8px; background: #fff; border: solid 1px #fff; transition: 0.3s ease-out; text-shadow: 0 0 0 rgba(0,0,0,0); border-radius: 3px; } .message_send .message_send_type a:hover { background: #999; border: solid 1px #888; color: white; text-shadow: 0 0 3px rgba(0,0,0,0.3); } .message_send .message_send_type a:active { background: #e3624c; border: solid 1px #ee6644; color: white; text-shadow: 0 0 3px rgba(0,0,0,0.3); } .message_send .message_send_type a.on { background: #2bc5c5; border: solid 1px #26b4b3; color: white; text-shadow: 0 0 3px rgba(0,0,0,0.3); }*/ .message_send .message_send_type2 { position: relative; height: 135px; overflow: hidden; border-top: solid 1px #e6e6e6; z-index: 1; } .message_send .message_send_type2 .send_direct { position: absolute; top: 0; left: 0; width: calc(100% - 40px); margin: 10px 20px 0 20px; transition: 0.3s ease-out; } .message_send .message_send_type2 .send_direct textarea { width: 100%; height: 100px; } .message_send .message_send_type2 .send_member { position: absolute; top: 0; left: 100%; width: 100%; padding: 45px 0 0 0; transition: 0.3s ease-out; } .message_send .message_send_type2.member .send_direct { left: -100%; } .message_send .message_send_type2.member .send_member { left: 0; } .message_send #add_list_cmt { color: #e3624c; font-weight: 400; font-family: "NanumBarunGothic", "Nanum Barun Gothic"; } .message_send .send_list { list-style: decimal; padding: 10px 20px 20px 50px; max-height: 400px; overflow: auto; /*column-count: 2; column-gap: 5%;*/ } .message_send .send_list li { position: relative; padding: 0 40px 0 10px; line-height:41px; height: 40px; color: #aaa; text-align: left; border-bottom: solid 1px #eee; vertical-align: top; font-size: 14px; transition: 0.3s ease-out; } .message_send .send_list li .tel { position: relative; display: inline-block; width: 250px; font-size:17px; color: #000; } .message_send .send_list li .tel:before { display: inline-block; content: '전화번호'; padding-right: 8px; font-size:14px; color: #999; } .message_send .send_list li .tel:after { position: absolute; top: 0; right: 0; display: inline-block; content: '고객명'; padding-right: 8px; font-size:14px; color: #999; } .message_send .send_list li .name { display: inline-block; width: 100px; padding: 3px 5px; font-size:17px; color: #000; border: solid 1px #fff; transition: 0.3s ease-out; } .message_send .send_list li:hover .name { border: solid 1px #ddd; } .message_send .send_list li .name:focus { border: solid 1px #bbb; } .message_send .send_list li .name::placeholder { color: #ccc; } /*.message_send .send_list li:before { position: absolute; content: ''; top: 17px; left: 15px; width: 4px; height: 4px; background: #ccc; border-radius: 50%; }*/ .message_send .send_list li span.del { position: absolute; top: 0; right: 0; font-size: 28px; color: #ccc; content: '×'; width: 40px; height: 40px; line-height:42px; text-align: center; user-select: none; transition: 0.3s ease-out; } .message_send .send_list li span.del:hover { color: #e3624c; } .message_send .send_list li:hover { background: #f9f9f9; } .message_send .send_list li.empty { list-style: none; column-span: all; text-align: center; border-bottom: none; } .message_send .send_list li.empty:before { display: none; } .message_send .send_list li.empty:after { display: none; } .message_send h3.title .send_count { color: #4187DA; font-weight: 400; font-family: "NanumBarunGothic", "Nanum Barun Gothic"; } .message_send h3.title .send_count:after { content:'건'; } .message_send #message_send_start:after { content:'건 발송하기'; } .message_send #message_send_start.proc:after { content:''; } .message_send #message_form_wrap { position: relative; z-index: 100; } .message_send #message_form_wrap #message_form { position: relative; padding: 20px; text-align: left; } .message_send #message_form_wrap #message_form #message_body { position: relative; width: 250px; height: 280px; } .message_send #message_form_wrap #message_form #message_body::placeholder { color: #aaa; } .message_send #message_form_wrap #message_form #message_byte { padding: 0 5px 0 0; width: 250px; text-align: right; } .message_send #message_form_wrap #message_form #message_byte:after { content: ' Bytes'; } .message_send #message_form_wrap #message_form #message_byte.error { color: #e3624c; } .message_send #message_form_wrap #message_form #message_byte.error:after { content: ''; } .message_send #message_form_wrap #message_form #message_info { position: absolute; top: 20px; left: 290px; height: 250px; text-align: left; } .message_send #message_form_wrap #message_form #message_info dt { padding-top: 15px; font-size: 12px; color: #bbb; font-weight: 100; } .message_send #message_form_wrap #message_form #message_info dd { padding-top: 3px; font-size: 17px; color: #444; font-weight: 400; font-family: 'NanumSquare', 'Nanum Square'; } .message_send #message_form_wrap #message_form #message_info dd.dsc { padding-top: 3px; font-size: 13px; color: #999; font-weight: 100; } .message_send #message_form_wrap #message_form #message_info dd.shop_msg_price:after { content:'원'; } .message_send #message_form_wrap #message_form #message_info dd.msg_price:after { content:'원'; } .message_send #message_form_wrap #message_form #message_info dd.send_count:after { content:'건'; } .message_send #message_form_wrap #message_form #message_info dd.send_price:after { content:'원'; } #msg_member_select_wrap { position: fixed; top: 60px; left: 280px; bottom: 0; right: 0; backdrop-filter: blur(5px); background: rgba(0,0,0,0.5); z-index: 100; transition: 0.3s ease-out; } #msg_member_select_wrap.fade_in { opacity: 1; visibility: visible; transition: opacity 0.3s ease-out; } #msg_member_select_wrap { visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s ease-out; } body.fold #msg_member_select_wrap { left: 60px; } #msg_member_select { position: absolute; top: 50%; left: 50%; width: 1170px; height: 94%; max-height: 810px; transform: translate(-50%, -50%); font-size: 0; } #msg_member_select h3.title #msg_member_select_close { position: absolute; right: 0; top: 0; width: 50px; height: 50px; font-size: 0; } #msg_member_select h3.title #msg_member_select_close:after, #msg_member_select h3.title #msg_member_select_close:before { position: absolute; content: ''; left: 50%; top: 50%; width: 50%; height: 2px; background: #777; border-radius: 3px; transition: 0.3s ease-out; } #msg_member_select h3.title #msg_member_select_close:after { transform: translate(-50%, -50%) rotate( 45deg); } #msg_member_select h3.title #msg_member_select_close:before { transform: translate(-50%, -50%) rotate(-45deg); } #msg_member_select h3.title #msg_member_select_close:hover:after { background: #000; transform: translate(-50%, -50%) rotate( 135deg); } #msg_member_select h3.title #msg_member_select_close:hover:before { background: #000; transform: translate(-50%, -50%) rotate(45deg); } #msg_member_select .msg_member_select_search { position: relative; display: inline-block; width: 450px; height: 100%; max-height: 575px; padding-bottom: 60px; font-size: 13px; vertical-align: top; } #msg_member_select .msg_member_select_search .formStyle { display: block; height: calc(100% - 50px); overflow: auto; padding: 10px 10px 0 10px ; } #msg_member_select .msg_member_select_search .formStyle tr th, #msg_member_select .msg_member_select_search .formStyle tr td { padding: 10px 0;} /*#msg_member_select .msg_member_select_search .formStyle tr td .inputBox { padding: 0 5px; border-top: none; border-left: none; border-right: none; border-radius: 0; }*/ #msg_member_select .msg_member_select_search .msg_member_select_search_btn { position: absolute; bottom: 0px; left: 0px; margin: 0px; width: 100%; padding: 20px; font-weight: 700; border: none;border-radius: 0; border-top: solid 1px #ddd; } #msg_member_select .msg_member_select_search .msg_member_select_search_btn:hover { text-shadow: 0 0 3px rgba(0,0,0,0.5); } #msg_member_select .msg_member_select_list { display: inline-block; width: 700px; margin-left: 20px; height: 100%; vertical-align: top; } #msg_member_select .msg_member_select_list h3.title { height: 50px; } #msg_member_select .msg_member_select_list > table { counter-reset: row-num; display: block; height: calc(100% - 50px); overflow: auto; padding: 0 10px 60px 10px; width: 100%; } #msg_member_select .msg_member_select_list > table tbody { padding: 0 10px;} #msg_member_select .msg_member_select_list > table tbody tr { counter-increment: row-num; } #msg_member_select .msg_member_select_list > table tbody tr td.no label::before { content: counter(row-num); } #msg_member_select .msg_member_select_list > table tr td { text-align: center; } #msg_member_select .msg_member_select_list > table tbody tr td.empty { padding: 100px; background: none; border-bottom: none; } #msg_member_select .msg_member_select_list > table thead tr th { position: sticky; top: 0px; padding: 15px 0; background: #fff; } #msg_member_select .msg_member_select_list > table tbody tr td { padding: 0 0; } #msg_member_select .msg_member_select_list > table tbody tr td label { display: block; padding: 10px 0; color: #585f69; } #msg_member_select .msg_member_select_list > table tbody tr td.checkbox { padding: 0; } #msg_member_select .msg_member_select_list > table tbody tr td.checkbox label { display: block; padding: 10px; } #msg_member_select .msg_member_select_list > table tbody tr td:first-child { margin-left: 10px; } #msg_member_select .msg_member_select_list > table tbody tr td:first-child { margin-left: 10px; } #msg_member_select .msg_member_select_list .msg_member_select_btns { position: sticky; bottom: 0; border-top: solid 1px #ddd; } #msg_member_select .msg_member_select_list .msg_member_select_btns:after { content: ''; width: 1px; height: 100%; background: #ddd; position: absolute; top: 0; right: 50%; } #msg_member_select .msg_member_select_list .msg_member_select_btns a { display: inline-block; width: 50%; margin: 0; padding: 20px; font-weight: 700; border: none; border-radius: 0; } #msg_member_select .msg_member_select_list .msg_member_select_btns a:hover { text-shadow: 0 0 3px rgba(0,0,0,0.5); } #msg_member_select .msg_member_select_list .msg_member_select_btns a:after { font-weight: 400; content: " (" attr(data) "명)"; } #shop_list.listStyle { } #shop_list.listStyle td.shop_select { position: relative; padding: 0; font-size: 14px; } #shop_list.listStyle td.shop_select input[type="radio"] + label { display: inline-block; height: 45px; line-height: 45px; width: 140px; padding-left: 5px; white-space: nowrap; } #shop_list.listStyle td.shop_select input[type="radio"] + label .btn { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); display: none; } #shop_list.listStyle td.shop_select input[type="radio"]:checked + label { font-weight: 700; } #shop_list.listStyle td.shop_select input[type="radio"]:checked + label .btn { display: block; } .shop_select_wrap { position: relative; font-size: 0; } .shop_select_wrap .shop_select_left { display: inline-block; vertical-align: top; width: 230px; min-height: 200px; } .shop_select_wrap .shop_select_left .brand_list { position: relative; display: inline-block; vertical-align: top; width: 100%; max-height: calc(100vh - 500px); overflow: auto; margin-bottom: 20px; } .shop_select_wrap .shop_select_left .brand_list h3.title { position: sticky; top: 0; left: 0; background: #fff; } .shop_select_wrap .shop_select_left .vList li { width: unset; height: unset; text-align: left; border-bottom: solid 1px #f6f6f6; } .shop_select_wrap .shop_select_left .vList li:first-child { border-bottom: solid 1px #eee; padding-bottom: 10px; margin-bottom: 5px; } .shop_select_wrap .shop_select_left .shop_search { } .shop_select_wrap .shop_select_left .shop_search #shop_search { margin: 10px; width: calc(100% - 20px); } .shop_select_wrap .shop_list { display: inline-block; vertical-align: top; width: calc(100% - 250px); height: calc(100vh - 217px); margin-left: 20px; overflow: auto; padding-bottom: 10px; } /*.shop_select_wrap .shop_list h3 { position: sticky; top: 0; left: 0; z-index: 100; background: #fff; }*/ /*.shop_select_wrap .shop_list .listStyle thead th { position: sticky; top: 51px; z-index: 100; background: #fff; }*/ .shop_select_wrap .shop_list .listStyle { padding: 0; } .shop_select_wrap .shop_list .listStyle thead th { position: sticky; top: 0; z-index: 100; background: #fff; font-size: 17px; line-height: 20px; border-bottom: solid 1px #e6e6e6; padding: 20px 0px 11px 0px; font-family: 'NanumSquare', Nanum Square; font-weight: 400; } .shop_select_wrap .shop_list .listStyle thead th.bold { font-weight: 700; color: #444; } .shop_select_wrap .shop_list .listStyle thead th.sp_title { text-align: left; padding-left: 25px; } .shop_select_wrap .shop_list .listStyle tbody tr { counter-increment: row-num; } .shop_select_wrap .shop_list .listStyle tbody tr td.no { padding-left: 10px; } .shop_select_wrap .shop_list .listStyle tbody tr td.no:after { content: counter(row-num); } .valid { display: inline-block; font-size: 17px; font-weight: 400; font-family: 'Nanum Square', 'NanumSquare'; } .valid_N { display: inline-block; color: #e3624c; font-size: 17px; font-weight: 400; font-family: 'Nanum Square', 'NanumSquare'; } .valid_Y { display: inline-block; color: #4caf50; font-size: 17px; font-weight: 400; font-family: 'Nanum Square', 'NanumSquare'; } #history_wrap { margin-top: 20px; padding-bottom: 20px; min-height: 100px; } /*#history_wrap .listStyle tbody { max-height: 100px; overflow: auto; }*/ #history_wrap .listStyle tbody tr td.empty { padding: 20px; } #history_wrap .listStyle tfoot tr td#history_more_btn { padding: 15px; font-size: 17px; } /*#history_wrap .listStyle { display: block; max-height: 200px; overflow: auto; width: 100%; }*/ /*#history_wrap .listStyle thead tr th { position: sticky; top: 0px; padding: 15px 0; background: #fff; }*/ #history_wrap .listStyle tbody tr td { padding: 10px 0; } .sv_price_list { width: 100%; } .sv_price_list > li { width: 100%; margin-bottom: 20px; background: white; padding-top: 5px; border-radius: 5px; text-align: center; } .sv_price_list > li > h3 { position: sticky; top: 60px; height: 45px; background: #fff; padding: 15px 15px 10px 15px; z-index: 10; border-bottom: solid 1px #e6e6e6; font-size: 17px; font-weight: 700; color: #444; text-align: left; font-family: 'NanumSquare', Nanum Square; } .sv_price_list > li > div { position: sticky; top: 105px; display: flex; margin: 0 10px; padding: 10px 0; background: #fff; z-index: 10; border-bottom: solid 1px #e6e6e6; } .sv_price_list > li > div > span { display: inline-block; width: 120px; font-size: 14px; font-weight: 400; text-align: center; } .sv_price_list > li > div > span:nth-child(1) { width: 100px; flex-shrink: 0; } .sv_price_list > li > div > span:nth-child(2) { width: 120px; flex-shrink: 0; } .sv_price_list > li > ul { display: block; margin: 0 10px; } .sv_price_list > li > ul > li { width: 100%; display: flex; border-bottom: solid 1px #eee; align-items: center; } .sv_price_list > li > ul > li:first-child { } .sv_price_list > li > ul > li > div { width: 100px; display: inline-block; flex-shrink: 0; font-size: 17px; font-family: 'NanumSquare', Nanum Square; } .sv_price_list > li > ul > li > ul { width: 100%; } .sv_price_list > li > ul > li > ul > li { width: 100%; display: flex; border-bottom: solid 1px #eee; align-items: center; } .sv_price_list > li > ul > li > ul > li:last-child { border-bottom: none; } .sv_price_list > li > ul > li > ul > li > div { width: 120px; display: inline-block; flex-shrink: 0; font-size: 14px; padding: 10px 0 10px 10px; text-align: left; } .sv_price_list > li > ul > li > ul > li > ul { width: 100%; } .sv_price_list > li > ul > li > ul > li > ul > li { width: 100%; display: flex; border-bottom: solid 1px #eee; } .sv_price_list > li > ul > li > ul > li > ul > li:last-child { border-bottom: none; } .sv_price_list > li > ul > li > ul > li > ul > li > span { width: 120px; padding: 5px 10px; } .sv_price_list > li > ul > li > ul > li > ul > li > span.price { width: 120px; padding: 5px 10px; text-align: right; } body.mobile .shop_select_wrap .shop_select_left { display: block; width: 100%; } body.mobile .shop_select_wrap .shop_list { display: block; width: 100%; margin-left: 0; margin-top: 20px; height: inherit; } /*#loginBgWrap { position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #213121; }*/ #loginBgWrap { position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #031f39; } #memberLogin { position: relative; min-width: 300px; width: 90%; height: 480px; margin: max(0px, calc((100vh - 480px) / 2)) auto 0 auto; text-align: center; z-index: 10;} #memberLogin h1 { padding: 30px 0; line-height: 30px; font-size: 28px; font-weight: 400; font-family: 'Nanum Square', NanumSquare; color: #fff; } #memberLogin h1 b { font-weight: 900; font-size: 30px; } /*#memberLogin h1 img { max-width: 400px; }*/ #memberLogin h1 img { max-width: 300px; } #memberLogin form legend { display: none; } #memberLogin dl { width: 100%; max-width: 400px; background: rgba(255,255,255,0.80); border-radius: 5px; text-align: center; overflow: hidden; border-radius: 4px; box-shadow: 0 3px 30px rgba(0,0,0,0.5); margin: 0 auto; padding: 15px 0; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } #memberLogin dl dt { display: block; width: 84%; margin: 0 auto; padding: 10px 0 5px 5px; color: #999; text-align: left; font-size: 12px; } #memberLogin dl dd { padding: 0 0 15px 0; } #memberLogin dl dd input { width: 84%; transition: 0.3s ease-out; border: solid 1px #ccc; } #memberLogin dl dd input::placeholder { visibility: hidden; } #memberLogin dl dd input:hover { border: solid 1px #aaa; } #memberLogin dl dd input:focus { border: solid 1px #999; background: #fff; } #memberLogin dl dt.auto_login { text-align: left; padding: 0 0 15px 0; display: flex; } #memberLogin dl dt.auto_login input { width: unset; } #memberLogin dl dt.auto_login label { display: inline-block; padding-left: 5px; } #memberLogin .loginBtn { padding: 20px 0 0 0; } #memberLogin .loginBtn input[type='submit'] { width: 100%; max-width: 400px; padding: 15px 0 15px 5px; font-weight: 700; font-size: 19px; border-radius: 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); box-shadow: 0 3px 30px rgba(0,0,0,0.5); background: #e1ab55; color: white; letter-spacing: 5px; border: none; text-decoration: none !important; white-space: nowrap; transition: 0.3s ease-out; font-family: 'NanumSquare', 'Nanum Square'; } #memberLogin #loginBtn2 { padding: 20px; font-size: 12px; color: #999; } #memberLogin #loginBtn2 a { color: #999; } #background { height: 100vh; width: 100vw; overflow: hidden; } #intro_bg_mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background: url("../images/bg_fattern.png") top repeat-x; opacity: 1; } #intro_bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0.6; } #intro_bg div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; } #intro_bg div.on { transform: scale(1.06); -o-transform: scale(1.06); -moz-transform: scale(1.06); -webkit-transform: scale(1.06); transition: transform ease-out 5.1s; -o-transition: transform ease-out 5.1s; -moz-transition: transform ease-out 5.1s; -webkit-transition: transform ease-out 5.1s; } /* 로딩 박스 * #loadingArea{position:absolute;right:10px;bottom:10px;height:70px;padding:20px;border:2px solid #000;background:#FFF;text-align:center} /* //로딩 박스 */ /* .statisticContents { overflow: inherit; } .statisticContents h3.title { position: sticky; top: 60px; height: 50px; background: #fff; z-index: 100; border-radius: 5px 5px 0 0; } .statisticTable thead tr th { position: sticky; top: 110px; height: 31px; background: #fff; z-index: 100; } .statisticTable thead tr th span.dsc { font-weight: 400; color: #ccc; font-size: 12px; } .statisticTable thead tr:nth-child(2) th { top: 141px; } .statisticTable tfoot tr td { position: sticky; bottom: 0; z-index: 100; border-top: solid 1px #eee; } */ .statisticCompany { border-bottom: solid 1px #e6e6e6; } .statisticTable tbody tr td { color: #999; } .statisticTable tbody tr td.date { color: #666; } .statisticTable tbody tr td.subtotal { color: #000; } .statisticTable tbody tr td.total { color: #000; font-weight: 700; } .statisticTable tfoot tr td { padding-top: 20px !important; padding-bottom: 20px !important; font-size: 14px; } .statisticTable tfoot tr td.subtotal { color: #000; } .statisticTable tfoot tr td.total { color: #000; font-weight: 700; } h2.title { color: #555; font-size: 24px; font-weight: 700; text-align: left; font-family: 'NanumSquare', 'Nanum Square'; text-shadow: 0 0 2px rgba(0,0,0,0.15); } h2.title span { display: block; color: #999; font-size: 12px; font-weight: 400; padding: 0 0 20px 0; font-family: "NanumBarunGothic", 'Nanum Barun Gothic'; text-shadow: none; } h2.title #dlg_close { position: absolute; top: 0; right: 10px; cursor: pointer; } h3.title { position: relative; color: #444; font-size: 17px; line-height: 20px; border-bottom: solid 1px #e6e6e6; padding: 20px 20px 10px 20px; text-align: left; font-family: 'NanumSquare', Nanum Square; font-weight: 700; } h3.title .btns { position: absolute; bottom: 10px; right: 10px; } h3.title span { display: inline-block; color: #888; font-size: 12px; padding: 0 0 0 10px; } h3.title span.CNT { display: inline; color: #444; font-size: 17px; padding: 0; } h3.title span.CNT .red { color: #e3624c; } h3.title span.CNT * { display: inline; color: #444; font-size: 17px; padding: 0; } h3.title .perpage { position: absolute; top: 11px; right: 20px; font-size: 11px; } h3.title .perpage .inputBox { font-size: 11px; padding: 5px 0 5px 5px; } h3.title a.guide_btn { position: absolute; bottom: 8px; right: 20px; } details.search_form_wrap { } details.search_form_wrap summary { position: absolute; top: 20px; right: 20px; } details.search_form_wrap summary:after { content: ' 열기'; } details.search_form_wrap[open] summary:after { content: ' 닫기'; } .formStyle { padding: 0 20px; width: 100%; } .formStyle caption { display: none; } .formStyle tr th { font-size: 14px; font-weight: 400; } .formStyle tr th, .formStyle tr td { border-bottom: solid 1px #f0f0f0; padding: 20px 20px 20px 20px; color: #585f69; } .formStyle tr td { text-align: left; } .formStyle tr.mini tr, .formStyle tr.mini td { padding: 10px 20px; } .formStyle tr th .dsc, .formStyle tr td .dsc { display: block; font-weight: 400; padding: 3px 0; color: #bbb; font-size: 12px; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .formStyle tr th .dsc.red, .formStyle tr td .dsc.red { color: #e3624c; } .formStyle tr td input[type='radio'] { vertical-align: middle; } .formStyle tr td input[type='radio'] + label { line-height: 150%; } .formStyle tr td label { display: inline-block; line-height: 150%; padding: 3px 5px; } .formStyle tr td label input[type='checkbox'] { vertical-align: middle; } /*.formStyle tr td label:first-of-type { padding-left: 0; }*/ .formStyle tbody.default_html { display: none; } .formStyle .mdHistory td { padding: 5px 0; } .formStyle tr td.member_batch_insert_guide { font-size: 15px; line-height: 150%; } .formStyle tr td.member_batch_insert_guide dl { padding-top: 20px; width: 100%; max-width: 800px; min-width: 400px; font-size: 0; border-bottom: solid 1px #eee; } .formStyle tr td.member_batch_insert_guide dl dt { position: relative; display: inline-block; width: 80px; text-align: center; padding: 8px; font-size: 13px; line-height: 120%; vertical-align: top; border-top: solid 1px #eee; } .formStyle tr td.member_batch_insert_guide dl dt:after { position: absolute; top: 8px; right: 4px; content: " : "; color: #aaa; } .formStyle tr td.member_batch_insert_guide dl dd { display: inline-block; width: calc(100% - 110px); padding: 8px; font-size: 13px; line-height: 120%; vertical-align: top; border-top: solid 1px #eee; } .formStyle tr td.member_batch_insert_guide dl dt.header { border-top: none; font-weight: 400; } .formStyle tr td.member_batch_insert_guide dl dt.header:after { display: none; content: ''; } .formStyle tr td.member_batch_insert_guide dl dd.header { border-top: none; padding-left: 30px; font-weight: 400; } .listStyle { padding: 0 20px; width: 100%; } .listStyle caption { display: none; } .listStyle tr th { padding: 20px 0; color: #888; border-bottom: solid 1px #eee; font-size: 14px; font-weight: 400; text-align: center; } .listStyle tr td { padding: 15px 0; color: #585f69; border-bottom: solid 1px #eee; text-align: left; } .listStyle tr:nth-child(odd) td { background: #fcfcfc; } .listStyle tr:hover td { background: #f9fdfd; color: #333; } .listStyle.mini { } .listStyle.mini tr th { padding: 7px 0; } .listStyle.mini tr td { padding: 5px 0 5px 5px; } .listStyle tr.tr_gray td { color: #ccc; } .listStyle tr.tr_orange td { color: #faa43a; } .listStyle.td_align_center td { text-align: center; } .listStyle td.align_left { text-align: left; padding-left: 10px; } .listStyle tr th.checkbox, .listStyle tr td.checkbox { padding: 0; } .listStyle tr th.checkbox label, .listStyle tr td.checkbox label { display: block; padding: 10px; } .listStyle tr th.checkbox label *, .listStyle tr td.checkbox label * { vertical-align: top; } .listStyle tr td .dsc { font-size: 12px; opacity: 0.7; } .list_btns { position: relative; padding: 10px 5px; } .list_btns * { display: inline-block; } .list_btns .perpage { position: absolute; bottom: 10px; right: 5px; padding: 0;} .procBar { display: block; width: 100%; margin: 0 auto; font-size: 0; height: 11px; border-radius: 5px; background: #ccc; } .procBar .bar { display: block; font-size: 10px; height: 11px; color: white; border-radius: 6px; background: #e3624c; min-width: 7px; } #dlg_content .formStyle { padding: 0; border-top: dotted 1px #eee; } #dlg_content .listStyle { padding: 0; } /*ul.vList { padding: 10px; } ul.vList li { padding: 1px 0 0 0; } ul.vList li a, ul.hList li a { display: block; padding: 5px; margin: 2px; border-radius: 3px; } ul.vList li a:hover, ul.hList li a:hover { background: #666; color: white; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } ul.vList li a.on, ul.hList li a.on { background: #2bc5c5; color: white; } ul.vList li a:active, ul.hList li a:active { background: #e3624c; color: white; -webkit-transition: 0.1s ease-out; -moz-transition: 0.1s ease-out; -ms-transition: 0.1s ease-out; -o-transition: 0.1s ease-out; transition: 0.1s ease-out; } ul.hList { padding: 10px; height: 50px; text-align: left; } ul.hList li { display: inline-block; } ul.vList li.line { margin-top: 10px; padding-top: 9px; border-top: solid 1px #eee; height: 1px; display: block; } ul.vList li, ul.hList .inputBox { padding: 5px 0 5px 5px; width: 80px; margin-right: 10px; } ul.vList li, ul.hList select.inputBox { height: 30px;}*/ ul.vList { padding: 10px; } ul.vList li { padding: 1px 0 0 0; } ul.vList li a, ul.hList li a { display: block; cursor: pointer; font-size: 14px; padding: 4px 8px; background: #fff; border: solid 1px #fff; transition: 0.3s ease-out; text-shadow: 0 0 0 rgba(0,0,0,0); border-radius: 3px; } ul.vList li a:hover, ul.hList li a:hover { background: #666; border: solid 1px #555; color: white; text-shadow: 0 0 3px rgba(0,0,0,0.3); } ul.vList li a.on, ul.hList li a.on { background: #2bc5c5; border: solid 1px #26b4b3; color: white; text-shadow: 0 0 3px rgba(0,0,0,0.3); } ul.vList li a:active, ul.hList li a:active { background: #e3624c; border: solid 1px #ee6644; color: white; text-shadow: 0 0 3px rgba(0,0,0,0.3); } ul.hList { padding: 10px 20px; text-align: left; font-size: 0; } ul.hList li { display: inline-block; } ul.hList li a { margin-left: 5px; } ul.hList li:first-child a { margin-left: 0; } ul.vList li.line { margin-top: 10px; padding-top: 9px; border-top: solid 1px #eee; height: 1px; display: block; } ul.vList li, ul.hList .inputBox { padding: 5px 0 5px 5px; width: 80px; margin-right: 10px; } ul.vList li, ul.hList select.inputBox { height: 30px;} ul.vList li a .dsc, ul.hList li a .dsc { font-size: 12px; opacity: 0.7; } .pager { display: flex; width: fit-content; font-size: 0; margin: 20px auto; border-radius: 5px; overflow: hidden; border: solid 1px #ddd; } .pager a, .pager b { display: inline-block; width: 55px; height: 35px; text-align: center; line-height: 35px; border-left: solid 1px #eee; margin-left: -1px; background: white; font-size: 14px; } .pager a:hover, .pager b:hover { border-left: solid 1px #666; background: #666; color: white; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .pager a:active, .pager b:active { border-left: solid 1px #e3624c; background: #e3624c; color: white; -webkit-transition: 0.1s ease-out; -moz-transition: 0.1s ease-out; -ms-transition: 0.1s ease-out; -o-transition: 0.1s ease-out; transition: 0.1s ease-out; } .pager b { border-left: solid 1px #2bc5c5 !important; background: #2bc5c5 !important; color: white; } /* 트리메뉴 + 폼데이터 수정페이지 */ .tree_wrap { position: relative; } .tree_wrap .tree_menu { position: relative; width: 280px; min-height: 200px; text-align: left; overflow: hidden; } .tree_wrap .tree_menu .firstUl { padding: 20px; } .tree_wrap .tree_menu li ul { display: none; } .tree_wrap .tree_menu li.firstLi { display: block; padding: 0 0 0 19px; } .tree_wrap .tree_menu li.firstLi:before { display: none; } .tree_wrap .tree_menu li.firstLi:after { display: none; } .tree_wrap .tree_menu li.firstLi > span > i { position: absolute; top: 3px; left: 0; display: block; line-height: 12px; color: #aaa; width: 19px; text-align: center; height: 13px; font-size: 13px; background: #fff; z-index: 10;} .tree_wrap .tree_menu li.firstLi > ul { display: block; } .tree_wrap .tree_menu li.firstLi > ul > li { padding: 0 0 0 19px; } .tree_wrap .tree_menu li.firstLi > ul > li > span > i { position: absolute; top: 3px; left: 0; display: block; line-height: 12px; color: #aaa; width: 20px; text-align: center; height: 13px; font-size: 13px; background: #fff; z-index: 10;} .tree_wrap .tree_menu li.firstLi > ul > li > .openBtn { display: none; } .tree_wrap .tree_menu li.firstLi > ul > li > ul { display: block; } .tree_wrap .tree_menu li .open_btn { position: absolute; box-sizing: border-box; top: 2px; left: 3px; display: block; line-height: 12px; color: #ccc; width: 13px; height: 13px; background: #fff; border: solid 1px #ccc; z-index: 10; } .tree_wrap .tree_menu li .open_btn:after { content:''; position: absolute; top: 5px; left: 2px; width: 7px; height: 1px; background: #ccc; } .tree_wrap .tree_menu li .open_btn:before { content:''; position: absolute; top: 2px; left: 5px; width: 1px; height: 7px; background: #ccc; } .tree_wrap .tree_menu li .open_btn.close:before { display: block; } .tree_wrap .tree_menu li .open_btn.open:before { display: none; } .tree_wrap .tree_menu li { position: relative; padding: 0 0 0 19px; } .tree_wrap .tree_menu li span { display: block; height: 20px; line-height: 20px; font-size: 16px; border-radius: 3px; color: #666; } .tree_wrap .tree_menu li span.cate > .name { display: inline-block; font-size: 14px; } .tree_wrap .tree_menu li span.cate > .name > .dsc { display: inline-block; font-style: normal; font-size: 12px; color: #999; } .tree_wrap .tree_menu li span.cate > .count { display: inline-block; font-style: normal; font-size: 12px; color: #5fa3ec; } .tree_wrap .tree_menu li span.cate:before { box-sizing: border-box; content: ''; display: block; width: 9px; height: 9px; background: #fff; position: absolute; top: 4px; left: 5px; border-radius: 50%; border: solid 1px #ccc; z-index: 10; } .tree_wrap .tree_menu li span.cate.on > .name { font-weight: 700; color: #000; } .tree_wrap .tree_menu li span.cate.on > .dsc { color: #333; } .tree_wrap .tree_menu li span.cate.on > i { color: #5fa3ec; } .tree_wrap .tree_menu li span.cate.on:before { border: solid 1px #5fa3ec; } .tree_wrap .tree_menu li span.cate.on .open_btn { border: solid 1px #5fa3ec; } .tree_wrap .tree_menu li span.cate.on .open_btn:after { background: #5fa3ec; } .tree_wrap .tree_menu li span.cate.on .open_btn:before { background: #5fa3ec; } .tree_wrap .tree_menu li span.cate.root > .name { font-size: 16px; padding-left: 4px; } .tree_wrap .tree_menu li span.cate.root:before { display: none; } .tree_wrap .tree_menu li.firstLi > ul li:before { content: ''; display: block; height: 100%; width: 1px; background: #eee; position: absolute; top: -10px; left: -10px; z-index: 1; } .tree_wrap .tree_menu li.firstLi > ul li:after { content: ''; display: block; width: 15px; height: 1px; background: #eee; position: absolute; top: 8px; left: -10px; z-index: 1; } .tree_wrap .tree_menu li.firstLi > ul li:last-child:before { height: 19px; } .tree_wrap .tree_btns { position: relative; width: 270px; text-align: right; padding-top: 5px; } .tree_wrap .tree_form { position: absolute; top: 0; left: 300px; right: 0; } .tree_wrap.form_base .tree_menu { position: absolute; top: 0; left: 0; } .tree_wrap.form_base .tree_btns { display: none; } .tree_wrap.form_base .tree_form { position: relative; top: unset; left: unset; margin-left: 300px; } #category .c_loading { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.6); z-index: 10; line-height: 250px; text-align: center; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } #category.category_loadend .c_loading { opacity: 0; display: none; } .cate{cursor:pointer} /* // 사이트구성 */ /* 입력폼 */ .inputBox { border: solid 1px #dbdbdb; border-radius: 3px; background: #fdfdfd; padding: 10px; width: 150px; } .inputBox:hover { border: solid 1px #aaa; } .inputBox:focus { background: #fff; } .inputBox::placeholder { color: #ccc; } input[type=file].inputBox { width: 250px; } select.inputBox { height: 40px; } textarea.inputBox { width: 95%; height: 150px; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } input[type=text],input[type=submit],input[type=button],button,input[type=url]{-webkit-appearance:none} .submit{ padding: 30px; clear: both; text-align:center} .req{padding:3px 2px;color:#1391D5} /* //입력폼 */ .manager_id_prefix { width: 100px; text-align: right; padding: 10px 5px 10px 0; border: none !important; } .manager_id_suffix { width: 50px; text-align: left; } /* perpage */ .perpage{padding-bottom:5px; text-align:right} /* //perpage */ /* zipcodeArea */ #zipcodeArea{min-height:200px;height:auto !important;height:300px;padding:0 5px;border:2px solid #ccc} #zipcodeArea li:hover { background: #f0f0f0; } #zipcodeArea a{font-size:11px} /* //zipcodeArea */ /* 에러처리 */ .topMenuAlertformError .formErrorContent{width:80px !important;margin-left:40px !important} .inputContainer{float:left;position:relative} .formError{display:block;position:absolute;top:300px;left:300px;z-index:5000;cursor:pointer} .ajaxSubmit{display:none;padding:20px;border:1px solid #999;background:#55ea55} .formError .formErrorContent{position:relative;z-index:5001;width:100%;width:190px;padding:4px 10px;border:2px solid #ddd;border-radius:6px;background:#e3624c;font-size:12px;color:#fff;box-shadow:0 0 6px #000;-moz-box-shadow:0 0 6px #000;-webkit-box-shadow:0 0 6px #000;-moz-border-radius:6px;-webkit-border-radius:6px} .greenPopup .formErrorContent{background:#2bc5c5} .blackPopup .formErrorContent{background:#666666;color:#FFF} .formError .formErrorArrow{position:relative;z-index:5006;width:15px;margin:-2px 0 0 150px} .formError .formErrorArrowBottom{top:2px;margin:0 0 0 12px;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none} .formError .formErrorArrow div{display:block;height:1px;margin:0 auto;border-left:2px solid #ddd;border-right:2px solid #ddd;background:#e3624c;font-size:0;line-height:0;font-size:0;box-shadow:0 2px 3px #444;-moz-box-shadow:0 2px 3px #444;-webkit-box-shadow:0 2px 3px #444} .formError .formErrorArrowBottom div{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none} .greenPopup .formErrorArrow div{background:#2bc5c5} .blackPopup .formErrorArrow div{background:#666666;color:#FFF} .formError .formErrorArrow .line10{width:15px;border:none} .formError .formErrorArrow .line9{width:13px;border:none} .formError .formErrorArrow .line8{width:11px} .formError .formErrorArrow .line7{width:9px} .formError .formErrorArrow .line6{width:7px} .formError .formErrorArrow .line5{width:5px} .formError .formErrorArrow .line4{width:3px} .formError .formErrorArrow .line3{width:1px;border-left:2px solid #ddd;border-right:2px solid #ddd;border-bottom:0 solid #ddd} .formError .formErrorArrow .line2{width:3px;border:none;background:#ddd} .formError .formErrorArrow .line1{width:1px;border:none;background:#ddd} /* //에러처리 */ @-webkit-keyframes pace-spinner {0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}@-moz-keyframes pace-spinner {0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }}@-o-keyframes pace-spinner {0% { -o-transform: rotate(0deg); transform: rotate(0deg); }100% { -o-transform: rotate(360deg); transform: rotate(360deg); }}@-ms-keyframes pace-spinner {0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }}@keyframes pace-spinner {0% { transform: rotate(0deg); transform: rotate(0deg); }100% { transform: rotate(360deg); transform: rotate(360deg); }} .loading-activity { display: inline-block; width: 20px;height: 20px;border: solid 2px transparent;border-top-color: #999;border-left-color: #999; border-radius: 15px;-webkit-animation: pace-spinner 400ms linear infinite;-moz-animation: pace-spinner 400ms linear infinite;-ms-animation: pace-spinner 400ms linear infinite;-o-animation: pace-spinner 400ms linear infinite;animation: pace-spinner 400ms linear infinite;} .btn.large .loading-activity { margin-bottom: 4px; vertical-align: middle; } .btn.small.loading-activity { margin-top: 3px; } .loading-activity.size_50 { width: 50px; height: 50px; border-radius: 50%; border-width: 4px; } .formStyle tr td.editor_view { font-size: 1em; line-height: 1.6em; min-height: 400px; } .listStyle tr td.task_title { padding: 0; } .listStyle tr td.task_title a { display: block; width: 400px; max-width: 100%; padding: 15px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editor__editable, /* Classic build. */ main .ck-editor[role='application'] .ck.ck-content, /* Decoupled document build. */ .ck.editor__editable[role='textbox'], .ck.ck-editor__editable[role='textbox'], /* Inline & Balloon build. */ .ck.editor[role='textbox'] { width: 100%; background: #fff; font-size: 1em; line-height: 1.6em; min-height: 400px; padding: 1.5em 2em; } .ck.ck-editor__editable { background: #fff; border: 1px solid hsl(0, 0%, 70%); width: 100%; } .ck.ck-editor { /* To enable toolbar wrapping. */ width: 100%; overflow-x: hidden; } /* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */ .ck.ck-editor__editable { position: relative; z-index: 10; } .mso-form { } .mso-form__radio { vertical-align: middle; } .mso-form__radio + label { vertical-align: middle; } .mso-form__label-payment { display: block; font-size: 12px; color: #bbb; font-weight: 400; padding-top: 3px; } .mso-form__price-payment { display: block; font-size: 12px; color: #bbb; font-weight: 400; } .mso-form__price { display: inline-block; width: 110px; } .mso-form__price .mso-form__radio + label { display: inline-block; padding: 0 0 2px 8px; text-align: right; } .mso-form__price-payment_type_bank { } .mso-form__price-payment_type_card { } .mso-form__type { display: inline-block; width: 110px; height: 40px; line-height: 40px;} .mso-form__type-bank { padding: 10px 0 0 130px; } .mso-form__type.mso-form__bank { width: unset; } .mso-form__dsc { line-height: 180%; padding-top: 20px; } .mso-form[data="card"] .mso-form__bank { display: none; } .mso-form[data="bank"] .mso-form__card { display: none; }