@charset "UTF-8";
/* CSS Document */
video::-webkit-media-controls {
	display: none !important;
	}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
h1 {
	color:#000;
	font-size: 170%;
	padding: 0px 10%;
	line-height: 100%;
	font-weight: 600;
}
h2 {
	color:#000;
	font-size: 120%;
	padding: 0px 10%;
	line-height: 115%;
	font-weight: 300;
}
h3 {
	font-size: 75%;
	padding: 0px 10%;
	line-height: 130%;
	font-weight: 300;
	color: #666;
}
.loader{
	visibility:visible;
	position: fixed;
	z-index: 2001;
	left: 50%;
	top: 50%;
	margin-left: -30px;
	margin-top: -30px;
	width: 60px;
	text-align: center;
	}
.loader.hide{
	visibility:hidden;
}
.spinner {
	z-index: 2001;
	width: 60px;
	height: 60px;
	position: absolute;
}
.spinnerTitle {
	display: block;
	position: absolute;
	bottom: 10px;
	left: 50%;
	width: 80px;
	height: 20px;
	margin-left: -40px;
	z-index: 2001;
	text-align: center;
	font-size: 14pt;
	background-image:url(/admin/images/root/symbol.png);
}
.spinnerDescription{
	position: fixed;
	display: block;
	color: white;
	top: 50%;
	left: 30px;
	right: 30px;
	margin-top: 40px;
	text-align: center;
	z-index: 2001;
}
.spinnerBefore {
	display: block;
	content: '';
	position: fixed;
	z-index: 2000;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom:0px;
	width: 100%;
	height:auto;
	background-color: rgba(140, 0, 0, 0.8);
}
.double-bounce1, .double-bounce2 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: inset 0px 0px 0px 2px #FFF;
	opacity: 1;
	position: absolute;
	top: 0;
	left: 0;
	background-size: 90%;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-animation: bounce 2.0s infinite ease-in-out;
	animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}
[data-role="messageArea"] {
 position:fixed;
 z-index:3001;
 top:0px;
 width:100%;
 height:100%;
 display:none;
 background-color:rgba(0,0,0,0.7);
 visibility:hidden;
}
[data-role="pop"] {
 position:fixed;
 top:70px;
 z-index:202;
 height:auto;
 padding-top:10px;
 width:400px;
 left: 50%;
 margin-left:-200px;
 background-color:#FFF;
 border-radius: 15px;
 -webkit-border-radius: 15px;
 -ms-border-radius: 15px;
 -moz-border-radius: 15px;
 text-align:center;
}
[data-role="pop"] label{
	border-bottom:none;
}
[data-role="content"] {
	position:fixed;
	z-index:901;
	top:100%;
	bottom: 0%;
	left: 0%;
	right: 0%;
	overflow: hidden;
	background-color: #333;
	visibility: hidden;
}
[data-role="content"] .frame{
	right:0px;
}
[data-role="content"] > #contentArea {
	position:absolute;
	left: 0px;
	right: 0px;
	top:0px;
	bottom:50px;
	color:#FFF;
}
[data-role="content"] > #contentArea .frame {
	padding: 20px 40px 40px 40px;
}
[data-role="video"] {
 position:fixed;
 z-index:1001;
 width:100%;
 height: 100%;
 top:100%;
 bottom:0%;
 left: 0%;
 right: 0%;
 overflow:hidden;
 background-color:#333;
 visibility:hidden;
}
[data-role="video"] > #videoArea {
	position:absolute;
	left: 0;
	right: 0;
	top:0px;
	bottom:50px;
	color:#FFF;
	overflow:hidden;
	text-align:center;
}
#alertSelect{
	background-color: rgb(0,0,0);
	width: 100%;
	background-image:url(/images/icons/white/down-selectable.png);
	background-repeat:no-repeat;
	background-size: auto 80%;
	background-position: right center;
}
#alertInput{
	background-color:rgb(90,90,90);
	width: 90%;
	margin: 5px 0px;
	}
#alertButton{
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	color: #FFF;
	line-height: 50px;
	height: 50px;
	}
#alertButton:hover{
	background-color:rgba(0,0,0,0.7);
}
[data-transition="slow"] {
 transition:all 0.4s ease-in-out;
 -moz-transition:all 0.4s ease-in-out;
 -ms-transition:all 0.4s ease-in-out;
 -o-transition:all 0.4s ease-in-out;
 -webkit-transition:all 0.4s ease-in-out;
}
[data-transition="fast"] {
 transition:all 0.2s ease-in-out;
 -moz-transition:all 0.2s ease-in-out;
 -ms-transition:all 0.2s ease-in-out;
 -o-transition:all 0.2s ease-in-out;
 -webkit-transition:all 0.2s ease-in-out;
}
#errorButton {
	height: 55px;
	line-height: 55px;
	border-radius:0px;
	width:100%;
	margin: 0px;
	padding: 0px;
}
.ui-button-confirm, .ui-button-confirm-alert, .ui-button-alert {
	width: 100%;
	display: inline-block;
	white-space: nowrap;
	border-top: 1px solid #DDD;
}
.ui-button-confirm button, .ui-button-confirm-alert button, .ui-button-alert button {
	border-right: 1px solid #DDD;
	color: #CC0000;
	font-size: 120%;
}
.ui-button-confirm button:first-child, .ui-button-confirm-alert button:first-child, .ui-button-alert button:first-child {
	font-weight:bold;
}
.ui-button-confirm button:last-child, .ui-button-confirm-alert button:last-child, .ui-button-alert button:last-child {
	border-right: none;
}
.ui-button-confirm > button {
	width: 50% !important;
	float: left;
	margin-bottom: -6px;
}
.ui-button-confirm-alert > button {
	width: 33.333% !important;
	float: left;
	margin-bottom: -6px;
}
.passbook{
	position:relative;
	height: 100%;
	width: 100%;
	border-radius:10px;
	background-image:url(/admin/images/root/passbook.png);
	background-size:100% 100%;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	}
.passbookHeader{
	position:absolute;
	top:0px;
	width:100%;
	height:110px;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
	}
.passbookHeader::after{
	display: block;
	content: "";
	position: absolute;
	left: 0px;
	bottom: -10px;
	width: 10px;
	height: 20px;
	border-radius: 0px 10px 10px 0px;
	background: linear-gradient(90deg, #272727, #191919);
	}
.passbookHeader::before{
	display: block;
	content: "";
	position: absolute;
	right: 0px;
	bottom: -10px;
	width: 10px;
	height: 20px;
	border-radius: 10px 0px 0px 10px;
	background: linear-gradient(90deg, #191919, #272727);
	}
.passbookHeader .left{
	position:absolute;
	top:10px;
	left:15px;
	right:110px;
}
.passbookHeader .right{
	position:absolute;
	top:10px;
	right:15px;
}
.passbookHeader .name{
	font-size:160%;
	margin-bottom:5px;
	}
.passbookHeader .email{
	font-size:80%;
	}
.passbookHeader .printCode{
	font-size:80%;
	}
.passbookHeader .memberLogo{
	width:90px;
	height:90px;
	margin:auto;
	background-color:#FFF;
	border-radius:50%;
	background-size:75% auto;
	background-repeat:no-repeat;
	background-position:center center;
	}
.passbookMain{
	position:absolute;
	top:110px;
	bottom:100px;
	width:100%;
	}
.passbook .qr{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -135px;
	margin-top: -135px;
	width: 270px;
	height: 270px;
	background-color: #FFF;
	border-radius: 10px;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	background-repeat: no-repeat;
	background-position: center center;
	}
.passbookFooter{
	position:absolute;
	height:100px;
	bottom:0px;
	width:100%;
	}
.passbook .viewoxLogo{
	width: 100%;
	height: 100%;
	background-image:url(/admin/images/root/viewox-logo-shadow.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	}
.passbookFooter{
	text-align:center;
	}
.passbook.horizontal .passbookHeader{
	width: 50%;
}
.passbook.horizontal .passbookHeader .right{
	right:10px;
}
.passbook.horizontal .passbookHeader::before{
	display:none;
}
.passbook.horizontal .passbookMain{
	width:50%;
	right:0px;
	top: 0px;
	bottom: 0px;
	border-left: 1px dashed rgba(255, 255, 255, 0.3);
	}
.passbook.horizontal .passbookFooter{
	width:50%;
	height: auto;
	left:0px;
	top: 110px;
	bottom: 0px;
	}
[data-type="list-button"]{
	color: #FFF;
	width: auto !important;
	padding-left: 36px !important;
	padding-right: 10px !important;
	background-position: 4px center !important;
	font-weight: bold !important;
	border:1px solid #fff !important;
	border-radius: 5px !important;
	-webkit-border-radius: 5px !important;
	-moz-border-radius: 5px !important;
	-ms-border-radius: 5px !important;
	-o-border-radius: 5px !important;
	}
.uploadButton{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	}
.uploadButton span, .uploadButton cite{
	display:block;
	padding: 5px 20px;
	line-height: 140%;
	}
.uploadButton cite{
	border-top:1px dashed rgba(255,255,255,0.3);
	font-weight:bold;
	}
.slideArea{
	position:fixed;
	top:0px;
	bottom:50px;
	width:100%;
	overflow:hidden;
	}
.slidePage{
	position:absolute;
	left:0%;
	width:100%;
	height:100%;
	transition:left 0.3s ease-in-out;
	-webkit-transition:left 0.3s ease-in-out;
	-moz-transition:left 0.3s ease-in-out;
	-ms-transition:left 0.3s ease-in-out;
	-o-transition:left 0.3s ease-in-out;
	}
.slidePage > div{
	position:absolute;
	top:0px;
	width:100%;
	height:100%;
	max-width:none;
	padding:0px;
	margin:0px;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style:none;
	}
.slidePage input, .slidePage textarea, .slidePage .ui-white-button{
	/*max-width:350px;*/
}
.loginInputArea{
	width:80%;
	max-width:980px;
	margin:auto;
	}
.loginInputArea input, .loginInputArea textarea, .loginInputArea .ui-white-button{
	max-width:none;
}
.slidePage > div label{
	width:100%;
	color: #FFF;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.slidePage > div .ui-white-button{
	width: 100%;
	height: 55px;
	line-height: 55px;
	border-radius: 5px;
	font-weight: bold;
	max-width:350px;
}
.slidePage > div:nth-child(1){
	left:0%;
}
.slidePage > div:nth-child(2){
	left:100%;
}
.slidePage > div:nth-child(3){
	left:200%;
}
.panButtons{
	position:fixed;
	bottom:0px;
	height:50px;
	line-height:50px;
	width:100%;
	cursor:pointer;
	background-color: #444;
	}
.panButtons > div{
	width:33.33%;
	float:left;
	text-align:center;
	color:#FFF;
	}
.panButtons > div:last-child{
	margin-right:0px;
}
.panButtons > .active{
	font-weight:bold;
	background-color: #AB141F;
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.7);
}
/*FIXED*/
#datePicker{
	min-height:200px;
	}
#datePicker select
{
	width:auto;
}
#datePicker select, #datePicker .split-two-select, #datePicker .split-tree-select{
	margin-right:0px;
	text-align:center;
}
#datePicker label{
	border:none;
	text-align:center;
	line-height:20px;
}
.creditCard {
	position: relative;
	width: 350px;
	height: 200px;
	background-color: gray;
	margin: 20px auto;
	border-radius: 8px;
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
	-ms-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
	-o-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
	color: #FFF;
	background-image: url(/admin/images/root/world_map.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-shadow: 0px 0px 3px #000;
}
.creditCard label {
	display: block;
	position: absolute;
	width:auto;
	color:#FFF;
	margin: 0px;
	padding: 0px;
	text-align: left;
	border:none;
}
.creditCard label:nth-child(1) {
	top: 20px;
	left: 10%;
	font-size: 200%;
	font-weight: bold;
}
.creditCard label:nth-child(2) {
	left: 10%;
	bottom: 40px;
	width: 85%;
	overflow: hidden;
}
.creditCard label:nth-child(3) {
	left: 10%;
	top: 45%;
	font-size: 120%;
	font-weight: bold;
}
.creditCard label:nth-child(4) {
	right: 10px;
	bottom: 10px;
	width: 60px;
	height: 35px;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}
.creditCard label:nth-child(5) {
	bottom: 10px;
	left: 40%;
}
.creditCard label:nth-child(6) {
	top: 65px;
	left: 10%;
	font-size:80%;
}
.creditCardForm {
	display: inline-block;
}
.visa{
	background-image:url(/admin/images/root/visa.png);
	}
.master{
	background-image:url(/admin/images/root/master.png);
	}
.american-express{
	background-image:url(/admin/images/root/american-express.png);
	}
.diners-club{
	background-image:url(/admin/images/root/diners-club.png);
	}
.jcb{
	background-image:url(/admin/images/root/jcb.png);
	}
.discover{
	background-image:url(/admin/images/root/discover.png);
	}
.videoControls{
	position: fixed;
	z-index: 900;
	left: 0px;
	right: 0px;
	bottom: 50px;
	height:50px;
	}
.videoControls .control{
	position: absolute;
	left: 0px;
	width:50px;
	height:100%;
	cursor:pointer;
	background-color: rgba(205, 0, 0, 0.9);
}
.videoControls .user{
	position: absolute;
	right: 0px;
	width:50px;
	height:100%;
	cursor:pointer;
	background-color: rgba(205, 0, 0, 0.9);
}
.videoControls .timeLine{
	position: absolute;
	left: 50px;
	right: 50px;
	height: 100%;
	width:auto;
	cursor:pointer;
	background-color: rgba(0, 0, 0, 0.5);
	}
.videoControls .startTimer{
	display:block;
	position:absolute;
	top:0px;
	left:5px;
	right:auto;
	bottom:auto;
	height:auto;
	width:auto;
	line-height:50px;
	background-color:transparent;
}
.videoControls .endTimer{
	display:block;
	position:absolute;
	top:0px;
	left:auto;
	right:5px;
	bottom:auto;
	height:auto;
	width:auto;
	line-height:50px;
	background-color:transparent;
}
.videoControls .timer{
	display: block;
	position: absolute;
	left: 0px;
	bottom:0px;
	width: 2px;
	height: 10px;
	background-color: #FFF;
}
.videoControls .timer > .timerText{
	display:block;
	position:absolute;
	left:5px;
	bottom: 0px;
	font-size:60%;
}
.videoControls .timer > .timerText.right{
	left:auto;
	right:5px;
}
.videoControls .points{
	position: absolute;
	width: 100%;
	height: 100%;
	}
.videoControls .points > .item{
	width: 1px;
	position: absolute;
	margin-left:-4px;
}
.videoControls .points > .item > .pop{
	display:none;
	position:absolute;
	left:0px;
	bottom:10px;
	width:auto;
	padding:5px 10px;
	color:#FFF;
	background-color:#CC0000;
	border-radius: 5px 5px 5px 0px;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
.videoControls .points > .item > .pop::after{
	display:block;
	content:"";
	position:absolute;
	left:0px;
	bottom:-9px;
	width:10px;
	height:10px;
	background-image:url(/admin/images/root/videoPop.png);
}
.videoControls .points > .item > .pop.right{
	left: auto;
	right: -1px;
	border-radius: 5px 5px 0px 5px;
}
.videoControls .points > .item > .pop.right::after{
	background-image:url(/admin/images/root/videoPopRight.png);
	right: 0px;
	left: auto;
}
.videoControls .points > .item > .pop strong{
	display:block;
	white-space:nowrap;
	font-size:85%;
}
.videoControls .points > .item > .pop cite{
	display:block;
	white-space:nowrap;
	font-style:normal;
	font-size:75%;
}
.videoControls .points > .item > .line{
	display: block;
	position: absolute;
	left: 0px;
	top:0px;
	width: 2px;
	height: 10px;
	background-color: #CC0000;
}
#videoPlayer{
	-moz-transform:rotate(270deg);
	-o-transform:rotate(270deg);
	}
#myVideo{
	background-color:#000;
	cursor:pointer;
	position:relative;
	z-index:1;
	}
.myVideoPlayButton{
	display:block;
	position:absolute;
	z-index:2;
	width:50px;
	height:50px;
	left:50%;
	top:50%;
	margin-left:-25px;
	margin-top:-25px;
	background-image:url(/admin/images/icons/white/play.png);
	background-size:100% 100%;
	cursor:pointer;
}
.pause{
	background-image:url(/admin/images/icons/white/pause.png);
	}
.colorBook{
	margin: 15px 0px 0px 0px;
	padding: 0px;
	}
.colorBook li{
	list-style:none;
	display:inline-block;
	width:40px;
	height:40px;
	margin:1px;
	cursor:pointer;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	}
.colorBook li:hover{
	box-shadow:inset 0px 0px 0px 3px #FFF;
}
.productItem{
	display:block;
	position:relative;
	width:100%;
	min-height:50px;
	margin:0px 0px 10px 0px;
	padding:15px 0px 25px 0px;
	border-bottom: 1px dashed #555;
	}
.productItem:last-child{
	padding-bottom:0px;
	}
.productItem .desc, .productIndex .desc{
	font-size:60%;
	color:#AAA;
	}
.productIndex > div{
	text-align:right;
	font-size:150%;
	margin-bottom: 5px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #555;
}
.productIndex > div:last-child{
	border-bottom:none;
	}
.productIndex .totalMoney{
	font-size:200%;
	}

.productItem > li{
	display:inline-block;
	list-style:none;
	margin:0px;
	padding:0px;
	margin-right:-3px;
	vertical-align:top;
}
.productItem > li:nth-child(1){
	width:15%;
	text-align:center;
	}
.productItem > li:nth-child(1) img{
	width:auto;
	max-width:100%;
	max-height:150px;
	border-radius: 7px;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
.productItem > li:nth-child(2){
	width:54%;
	padding:0px 3%;
	}
.productItem > li:nth-child(3){
	width:25%;
	text-align:right;
	}
.productItem .productName{
	font-size:120%;
	margin-bottom:10px;
	font-weight:bold;
	}
.productItem .productDetail{
	font-size:80%;
	}
.productItem .productDetail ul{
	padding: 0px 0px 0px 20px;
	}
.productItem .productMoneyStatic{
	font-size: 150%;
	text-align:right;
	}
.productItem .productMoney{
	font-size: 110%;
	text-align:right;
	color:#AAA;
	}
.productItem .productPrice > select{
	padding: 10px;
	background-color:#ab131f;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	}
.productItem:last-child{
	border:none;
	}
.contract{
	box-sizing:border-box;
	width: 100%;
	padding: 20px 3%;
	background-color: white;
	color: #444;
	border-radius: 10px;
	margin: 20px auto;
	max-height: 150px;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style:none;
	font-size:80%;
	}
.contract ol{
	padding-left:20px;
	}
.contract table{
	width:100%;
	border-left: 1px dashed #CCC;
	border-right: 1px dashed #CCC;
	border-top: 1px dashed #CCC;
	border-bottom: none;
	}
.contract table td{
	border-right: 1px dashed #CCC;
	border-bottom: 1px dashed #CCC;
	border-left: none;
	border-top: none;
	padding: 5px 10px;
	}
.contract table td:last-child{
	border-right:none;
	}
.contract table td p{
	margin:0px;
	padding:0px;
	}
	
@-webkit-keyframes bounce {
  0%, 100% {
	-webkit-transform: scale(0.0);
	} 50% {
	 -webkit-transform: scale(1.0);
	 }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
@media only screen 
and (min-width : 0px) 
and (max-width : 767px) {
	.loginInputArea{
		max-width:350px;
	}
	.loginInputArea input, .loginInputArea textarea, .loginInputArea .loginInputArea label, .descriptor, .loginInputArea div{
		width:100%;
	}
	.inputArea input, .inputArea textarea, .inputArea .inputArea label, .inputArea, .inputArea div{
		width:100%;
	}
}