/**** 컨텐츠 ****/
#contents{
    text-align: center;
    height: 100%;
    width: 100%;
	background-color: #333979; /*36373c*/ /*2a3179*/ /*343A4B*/ /*2B3170*/
	/*background:url(../images/bg.jpg);*/
}


/****  영역 ************/
#top-area{
	height:20%;
}

#mid-area{
	height:72%;
}

#foot-area{
	height:8%;
	position:relative;
	background:linear-gradient(to bottom, #000 10%, #000);
	background:#1f223e;
}

#mid-left{
	height:100%;width:65%;float:left;color:#FFF;
	padding:5% 6% 5% 5%;
	text-align:left;
}

#mid-right{
	height:100%;width:35%;float:left;color:#FFF;
}




/***** 타석별 UI ****************/
.select-box-28{
	width:25%;
	margin-right:0%;
	margin-bottom:0%;
	background:#FFF;
	float:left;
	border-right:1px solid #333979;
	border-bottom:1px solid #333979;/*6875AB*/
}

.select-box-28:nth-child(4n) {

}

.select-box-35{
	width:20%;
	margin-right:0%;
	margin-bottom:0%;
	background:#FFF;
	float:left;
	border-right:1px solid #333979;
	border-bottom:1px solid #333979;/*6875AB*/
}

.select-box-35:nth-child(4n) {

}

.select-box-40{
	width:20%;
	margin-right:0%;
	margin-bottom:0%;
	background:#FFF;
	float:left;
	border-right:1px solid #333979;
	border-bottom:1px solid #333979;/*6875AB*/
}

.select-box-40:nth-child(4n) {

}



/***** 타석 박스 해상도별 비율 유지 **********/
.client-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 120%;
	background:#FFF;
}
.client-wrapper .wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align:center;
	background:linear-gradient(to bottom, #FFF 60%, #FFF); /*CAEAF5*/
	color:#3E63AE;/*3E63AE*/
	text-shadow: -1px 0 #3E63AE, 0 1px #3E63AE, 1px 0 #3E63AE, 0 -1px #3E63AE;
}

.box-num{
	/*font-size:5em;*/
	font-size:6vw;
	font-family: 'NanumSquare';font-weight:800;letter-spacing:-5px;
}

.time-remain{
 font-size:1.4em;
 font-size:1.8vw;
 width:100%;
 text-align:center;
 font-family: 'NanumSquare';font-weight:800;
 letter-spacing:-1px;
 text-shadow : none !important;
}

.stand-by{
 font-size:1.4em;
 width:100%;
 margin:0 auto;
 margin-top:1%;
 text-align:center;
 font-family: 'NanumSquare';font-weight:800;
 letter-spacing:-1px;
}



/********** 다이얼패드 ********************/

.number-box{
	width:33.3%;
	float:left;
	/*border:1px solid #19207e;*/
	border:1px solid rgba(255, 0, 0, 0);
}

.dial-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 100%;
}
.dial-wrapper .dwrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align:center;
	background:#1f223e;/*3661b5*/
	font-size:4em;
	font-size:4vw;
	border-radius:50%;
}

#checkin-btn{font-size:2em;background:linear-gradient(to bottom, #E14B4B 60%, #A92626);}

.in-header{height:70%;margin-top:20%;position:relative;}
.in-bottom{position:absolute;bottom:0px;width:100%;}
.in-tag{padding:1% 3%;background:#AFAFAF;width:60%;margin:0 auto;}
.reload-ico{font-size:5em;float:right;margin:10px;cursor:pointer;color:#FFF;margin:4%;" Onclick="$('.loader-wrap').show();location.reload();}
.text-guide{margin-top:10%;padding-top:5%;text-align:left;font-size:1.6em;font-family: 'Nanum Gothic', sans-serif;width:90%;opacity:0.8;border-top:1px solid #DFDFDF;line-height:32px;}

.tmp-box{float:left;width:70px;height:70px;line-height:70px;border:2px solid #AFAFAF;color:#AFAFAF;margin-right:10px;margin-bottom:10px;}



/*상태변환*/
/*
.using-client:hover,.standby-client:hover{
  background: #70A90A !important;
  color:#FFF !important;
  text-shadow : none !important;
}
*/


.on-select-dial{
  background-color: #AAA !important;
}

.already-using-client{
	background:linear-gradient(to bottom, #2e346d 60%, #2e346d) !important;
	color:#999 !important;
}

.appoint-client{
	background:linear-gradient(to bottom, #2e346d 60%, #2e346d) !important;
	color:#999 !important;
}

.on-blue,.using-client{
	background:linear-gradient(to bottom, #3E62AE 60%, #3E62AE) !important;
	color:#FFF !important;

}

.on-select{
  background: #70A90A !important;
  color:#FFF !important;
  text-shadow : none !important;
}


.wrap-none{
	background:#191f5a !important;
}

/*
.dwrap:hover {
  background-color: #AAA !important;
}
*/

.disable-client{
	background:linear-gradient(to bottom, #000 60%, #000) !important;
	color:#BBB !important;
}


/* 로그인 박스 */
#checkin_id,#checkin_pw{font-size:3vw;}

.focus-on{border:4px solid #FFC107 !important;}/*28BCA5*/
.focus-on::placeholder {
  color: #FFF;
  font-style: italic;
}

.focus-on::-webkit-input-placeholder{
  color: #FFF;
  font-style: italic;
}
.focus-on:-moz-placeholder {
  color: #FFF;
  font-style: italic;
}

/*로딩 스피너*/
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;

}
.loader {
  color: #FFF;
  font-size: 10px;
  margin: 0px auto;
  position: absolute;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  left:50%;
  top:40%;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
.loader-wrap{
position:absolute;width:100%;height:100%;background:#000;z-index:999;top:0px;opacity:0.3;display:none;
}