@charset "utf-8";

* {margin: 0; padding: 0; box-sizing: border-box;}
html, body {width: 100%; height: 100%; }
body {font-family: 'Noto Sans KR', 맑은 고딕, dotum, sans-serif; color:#434a5e; font-weight: 400; font-style: normal; font-size: 18px; letter-spacing: -0.2px; line-height: 1.5; font-stretch: normal; }
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; }
ul, ol, li, dl {list-style: none; padding: 0; margin: 0; }
a {text-decoration: none; color: #434a5e;}





/* =======================================================
	layout
========================================================*/
#wrap {display: table; position: relative; width: 100%; height: 100%; }
#container {display: table-row; position: relative; width: 100%; height: 100%; /*background: url("../images/bg2.jpg") no-repeat center center/cover;*/ background-color: #f6f8ff; box-sizing: border-box; }
#container .inner {width:100%; min-width: 1024px; margin: 0 auto; }

#container.main {height: calc(100% - 80px); }
/* #container.main .inner {width: 1660px; } */
/* #container.main .inner {width:100%; min-width: 1000px;} */

.dimlayer {position: absolute; top: 0; left: 0; z-index: 99; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); }






/* =======================================================
	header
========================================================*/
#header {display: table-row; position: relative; z-index: 1; height: 80px; box-sizing: border-box; box-shadow: 0 0 20px 0 rgba(58, 133, 97, 0.2); }
#header .inner {display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; margin: 0 46px; }
#header .time {font-size: 35px; color: #1e211b; font-weight: 900; }

#header-gnb {}
#gnb li {display: inline-block; }
#gnb li + li {margin-left: 50px; }
#gnb li a {display: inline-block; min-width: 32px; max-width: 42px; height: 38px; background-position: center center; background-repeat: no-repeat; }
#gnb li .gnb-home {background-image: url("../images/gnb01.png"); }
#gnb li .gnb-home:hover,
#gnb li .gnb-home.on {background-image: url("../images/gnb01_on_blue.png"); }
#gnb li .gnb-sales {background-image: url("../images/gnb02.png"); }
#gnb li .gnb-sales:hover,
#gnb li .gnb-sales.on {background-image: url("../images/gnb02_on_blue.png");}
#gnb li .gnb-chart {background-image: url("../images/gnb03.png"); }
#gnb li .gnb-chart:hover,
#gnb li .gnb-chart.on {background-image: url("../images/gnb03_on_blue.png"); }
#gnb li .gnb-member {background-image: url("../images/gnb04.png"); }
#gnb li .gnb-member:hover,
#gnb li .gnb-member.on {background-image: url("../images/gnb04_on_blue.png"); }
#gnb li .gnb-set {background-image: url("../images/gnb05.png"); }
#gnb li .gnb-set:hover,
#gnb li .gnb-set.on {background-image: url("../images/gnb05_on_blue.png"); }

.header-util {font-size: 24px; color: #1e1e1e; }
.header-util .btn-logout {display: inline-block; min-width: 154px; height: 42px; margin-left: 15px; background-color: #1e1e1e; box-sizing: border-box; border-radius: 30px; line-height: 37px; vertical-align: middle; text-align: center; }
.header-util .btn-logout span {padding-left: 34px; background: url("../images/icon_logout.png") no-repeat left center; color: #fff; font-size: 18px; }





/* =======================================================
	container
========================================================*/
/*--------------------------------
  common
---------------------------------- */
/* bg-color */
.bg-green {background-color: #40cb5a;}
.bg-blue {background-color: #3a9ccf; }
.bg-yellow {background-color: #fcb503; }
.bg-black {background-color: #1e1e1e;}
.bg-white {background-color: #ffffff;}

/*color*/
.col-green {color: #40cb5a;}
.col-blue {color: #52a2ff; }
.col-yellow {color: #fcb503; }
.col-black {color: #1e1e1e;}
.col-white {color: #ffffff;}

/* align */
.text-left {text-align: left !important; }
.text-right {text-align: right !important; }
.text-center {text-align: center !important; }

/* tag */
.tag {height:35px; line-height: 170%; display: inline-block; padding: 3px 15px; border-radius: 24px; box-sizing: border-box; color: #fff; font-weight: 500; font-size: 16px; text-align: center; }
.tag.tag-green {background-color: #40cb5a; }
.tag.tag-gray {background-color: #8e8e8e; }
/*.tag + .tag {margin-left: 5px; }*/

/* icon */
.icon-member {display: inline-block; width: 21px; height: 21px; margin-right: 10px;  background: url("../images/icon_member.png") no-repeat center center; }
tr.active .icon-member,
.icon-member.on {background-image: url("../images/icon_member_on.png");}



/*--------------------------------
  text
---------------------------------- */
.font-bold {font-weight: 700; }

.font-green {color: #40cb5a !important; }
.font-blue {color: #3b9ccf !important; }
.font-red {color: #ff553e !important; }
.font-gray {color: #858a7f !important; }

.text-through {color: #9ea09b; text-decoration: line-through; }

.sales-header {display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1em 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.sales-header h2.title {position: relative; padding-left: 20px; line-height: 1; font-size: 36px; color: #1e211b; font-weight: 700; }
.sales-header h2.title:before {content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 38px; background-color: #1e1e1e; border-radius: 10px; }



/*--------------------------------
  form
---------------------------------- */
input.input-text {min-width: 200px; height: 48px; padding: 0 10px; box-sizing: border-box; border: 1px solid #dfdfdf; border-radius: 12px; outline: none; -webkit-appearance:none; -moz-appearance: none; -o-appearance:none; appearance: none; font-family: inherit;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input::placeholder, input::-moz-placeholder {font-size: 20px; }

label {display: inline-block; font-family: inherit; }

/* radio */
label.radiobox {font-size: 14px; }
label.radiobox + label.radiobox {margin-left: 40px; }
label.radiobox > span {padding-left: 5px; }
label.radiobox > span + .input-text {margin-left: 36px; }
.radiobox input[type="radio"], .radiobox span {vertical-align: middle; }
input[type="radio"] {position: relative; appearance: none; width: 16px; height: 16px; border: 1px solid #cfcfcf; border-radius: 50%; }
input[type="radio"]:checked::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #52a2ff; border-radius: 50%;}


input[type="radio"] + label {font-size: 14px; }
.label-text {font-weight: 700; }
.input-group .label-text {width: 150px; }
.input-group .label-text + .input-text {width: calc(100% - 184px); }



/*--------------------------------
  button
---------------------------------- */
button {border: 0; outline: none; background: none; cursor: pointer; font-size: 18px; font-family: inherit; line-height: 120%; }
.btn { display: flex; align-items: center; justify-content:center; }
.btn span.icon{ font-size: 1.2em; margin-right: 0.15em;}
.btn-edit { width: 192px; height: 52px; background-color: #8e8e8e; box-sizing: border-box; border-radius: 32px; color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -1px; }
.btn-white { padding: 9px 20px; border: 1px solid #e1e1e1; border-radius: 10px; background-color: #f7f7f7; box-shadow: 0 0 10px 0 rgba(117, 117, 117, 0.4); color: #444a3e; font-weight: 700; }
.btn-dark { width: 192px; height: 52px; background-color: #1e1e1e; box-sizing: border-box; border-radius: 32px; color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -1px; }
.btn-delete { width: 32px; height: 32px; background: url("../images/btn_delete.png") no-repeat center center; }

/* btn-big */
.btn-big {width: 303px; height: 70px; vertical-align: middle; border-radius: 12px; color: #fff; font-size: 30px; font-weight: 700;}
.btn-midium {width: 100%; height: 56px; border-radius: 10px; font-size: 18px; color: #fff; font-weight: 500; }
/* 이용시작 */
.btn-big.green {border: 1px solid #1da136; background-color: #40cb5a; box-shadow: 0px 0px 10px 0 rgba(58, 133, 97, 0.5); }
/* 시간연장 */
.btn-big.yellow,
.btn-midium.yellow {border: 1px solid #e7a500; background-color: #fcb503; box-shadow: 0px 0px 10px 0 rgba(215, 154, 0, 0.5); }
/* 한게임더 */
.btn-big.blue {border: 1px solid #4896f0; background-color: #52a2ff; box-shadow: 0px 0px 10px 0 rgba(25, 117, 165, 0.5); }
/* 결제완료 */
.btn-big.red {border: 1px solid #d7311a; background-color: #ff553e; box-shadow: 0px 0px 10px 0 rgba(215, 49, 26, 0.5); }
/* 취소 */
.btn-big.gray,
.btn-midium.gray{border: 1px solid #828ba1; background-color: #a2a7b4; box-shadow: 0px 0px 10px 0 rgba(130, 139, 161, 0.5); }

.btn-group {position: relative; padding: 0 30px 0 0; box-sizing: border-box; text-align: right; }
.btn-big + .btn-big {margin-left: 15px; }




/*--------------------------------
  list
---------------------------------- */
.dl-list {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.dl-list dt,
.dl-list dd {font-size: 16px; color: #444a3e; line-height: 1.2; }
.dl-list dt {position: relative; width: 65px; margin-right: 10px; }
.dl-list dt:after {content: ""; position: absolute; top: 35%; right: 0; width: 1px; height: 10px; background-color: #adb0ac; }



/*--------------------------------
  table
---------------------------------- */
table {table-layout: fixed; border-collapse: collapse; width: 100%; }
th, td {color: #444a3e; text-align: center; line-height: 1; box-sizing: border-box ;}
thead th {padding: 20px 0; background-color: #eee; font-weight: 700; }
table td {height: 50px; border-bottom: 1px solid #cfcfcf; }
.table-basic table th,
.table-basic table td {border: 1px solid #cfcfcf; padding: 0 34px 0; font-weight: 700; letter-spacing: -1px;}
.table-basic table th {padding: 25px 15px; background-color: #eee; text-align: left; font-weight: 600; font-size: 16px; }





/*--------------------------------
  로그인
---------------------------------- */
.login-wrap {position: absolute; top: 13%; left: 50%; transform: translateX(-50%); margin: 0 auto; }
.login-wrap .logo {width:180px; height: 130px; margin:0 auto; text-align: center; background: url("../images/gpos_logo_black.png") no-repeat center center; background-size: contain; }

.login-box {display: -webkit-box; display: -ms-flexbox; display: flex; height: 530px; margin-top: 10px; border-radius: 32px; box-sizing: border-box; box-shadow: 2px 3px 20px 2px rgba(80, 91, 121, 0.2);}
.login-box .login-bg {width: 375px; border-top-left-radius: 32px; border-bottom-left-radius: 32px; background: url("../images/gpos_login_img.png") no-repeat center center; background-color: rgba(255, 255, 255, .8); }
.login-box .login-field {width: 476px; padding: 40px 34px; border-top-right-radius: 32px; border-bottom-right-radius: 32px; background-color: rgba(255,255,255,1);}
.login-box .login-field h2 {font-size: 48px; color: #434a5e; letter-spacing: 1px; }
.login-box .login-field .login-input {margin: 55px 0 37px; }
.login-box .login-field .login-input .lbl {width: 68px; }
.login-box .input-group {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.login-box .input-group + .input-group {margin-top: 20px; }
.login-box .input-text {width: calc(100% - 68px); }
.login-box .btn-login {width: 100%; padding: 18px 0; background-color: #000000; border-radius: 0.3em; color: #fff; font-size: 30px; letter-spacing: 1px; }



/*--------------------------------
  메인
---------------------------------- */
/*
.main .inner {display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; width: 100%; padding: 120px 0; }
*/
.main .inner {display: flex; justify-content: space-evenly; width: 100%; align-items: top; padding-top: 5em; }
.main .inner .left {width: calc(50% - 70px); }
.main .inner .right {width: 50%; }
.main .logo{width: 180px; height: 130px; text-align: center; background: url("../images/gpos_logo_black.png") no-repeat center center; background-size: contain; }
.pos-title {font-size: 72px; color: #1e211b; font-weight: 500; line-height: 1.3; }

.dashboard {width: 100%; margin: 46px 0 50px; }
.dashboard:after {content: ""; display: block; clear: both; height: 0; visibility: hidden; }
.dashboard-item {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; float: left; width: calc(33% - 15px); height: 83px; padding: 0 24px; border-radius: 18px; line-height: 1; box-sizing: border-box; box-shadow: 0 0 24px 7px rgba(58, 133, 97, 0.2); }
.dashboard-item + .dashboard-item {margin-left: 25px; }
.dashboard-item .title {position: relative; display: inline-block; width: 123px; margin-right: 10px; font-size: 24px; font-weight: 500; color: #1e1e1e; }
.dashboard-item .title:after {content: ""; position: absolute; top: 5px; right: 0; width: 1px; height: 15px; background-color: #1e1e1e; }
.dashboard-item .count {display: inline-block; padding-bottom: 4px; font-size: 38px; font-weight: 700; color: #1e211b; text-align: right; letter-spacing: -1.2px; }

.main .chart-wrap .title {font-size: 24px; color: #1e211b; font-weight: 500; }
.main .chart-wrap .chart {max-height: 326px; }

.dashboard-menu {display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; gap: 15px 15px; width: 100%; }
.dashboard-menu .menu {width: calc(33% - 8px); height: 343px; background-color: rgba(255, 255, 255, 0.5); border-radius: 20px; box-shadow: 2px 3px 15px 3px rgba(58, 133, 97, 0.2); }
.dashboard-menu .menu a {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; border-radius: 20px; font-size: 24px; color: #444a3e; font-weight: 500; }
.dashboard-menu .menu a:hover {background-color: rgba(0, 119, 255, 0.4); }
.dashboard-menu .menu span {display: block; padding-top: 100px; background-repeat: no-repeat; background-position: top center; }
.dashboard-menu .menu .menu01 {background-image: url("../images/menu01.png"); }
.dashboard-menu .menu .menu02 {background-image: url("../images/menu02.png"); }
.dashboard-menu .menu .menu03 {background-image: url("../images/menu03.png"); }




/*--------------------------------
  판매현황
---------------------------------- */
.sales-header {width: 100%; padding: 1em 2em; }
.sales-header .sales-dashboard { }
.sales-header .dashboard-item {max-width: 200px; height: 63px; padding: 0 30px 0 25px; border-radius: 38px;  }
.sales-header .dashboard-item .count {color: #1e1e1e; } 
.sales-wrap {display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; gap: 20px; padding-bottom: 100px; /*min-height: 500px;*/ padding:0 3.9%; margin:0 auto; justify-content: flex-start; position: relative;}
.sales-item { flex: 1 1 13.2%; min-width: 230px; max-width: 13.2%; min-height: 343px; max-height: 350px; padding: 1em; background-color: #fff; border-radius: 18px; border: 1px solid #dde4e7; box-shadow: 0px 0px 30px 2px rgb(58 94 133 / 20%); box-sizing: border-box; letter-spacing: -1px; flex-direction: column; justify-content: space-between;}

.sales-item .room-ctl-btnBox{ width:100%; height: 70%; text-align: left; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.3em;}

.sales-item .room {display: block; margin: 10px 0 15px; font-weight: 800; color: #898e84; font-size: 30px; line-height: 1; }
.sales-item.on {background-color: #f3f8ff; border: 1px solid #d0dae7; box-shadow: 0px 0px 30px 2px rgb(101 153 183 / 50%);}
.sales-item.on .room {color: #444a3e; }
.sales-item .dl-list {margin-top: 5px; }
.sales-item .dl-list dd span {font-weight: 800; font-size: 24px; }
.time-graph {position: relative; width: 100%; height: 15px; margin-top: 10px; background-color: #cdcdcd; border-radius: 30px; }
.time-graph .graph-bar {position: absolute; top: 1px; left: 1px; height: 13px; border-radius: 30px; background-color: #ff553e; }
.time-graph .graph-bar.green {background-color: #40cb5a; }
.sales-item .price-wrap {display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 0px; font-size: 18px; color: #444a3e; font-weight: 800; }
.sales-item .price-wrap span{margin-right: 0.3em;}
.sales-item .price-wrap .price span {font-size: 24px; }
.sales-item .sales-btn {position: relative; /*height: calc(100% - 70px);*/ }
.sales-item .sales-btn .btn-edit {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 15px 0px rgba(39, 40, 45, 0.4);}