@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(font-awesome.css);
@import url(font-awesome-ie7.css);
@import url(js/jquery.css);
@import url(js/jquery-ui.css);
@import url(js/jquery-ui.theme.css);
@import url(js/bootstrap.css);
@import url(js/bootstrap-theme.css);
html, body{overflow:hidden; height:100vh;}
body{background-image:url('images/bg1.png'), url('images/bg.png'); background-repeat:no-repeat, repeat-x; background-size:100% auto, auto 80vh;}
*, body, div, p, input, button, a, strong, td, li, i, h1, h2, h3, h4, h5, strong, button, span{font-family:'Noto Sans TC', 'FontAwesome', sans-serif; text-decoration:none; text-shadow:none; margin:0; padding:0;}
hr{border:none; border-bottom:1px #E5E9EF solid; margin-bottom:15px;}
button.btn{position: relative;}
.fa{margin:0 5px;}
.form-control{margin:5px 0; padding:0px 5px;}
.form-control.ckn{width:80px; float:left;}
.form-control.inline{max-width:150px; display:inline-block;}
.form-control.file{max-width:200px; display:inline-block;}
.form-control.date{max-width:100px; display:inline-block;}
.hideit{display:none;}
.clear{clear:both; height:0; line-height:0; display:block;}
.sabrosus{text-align:center;}
.sabrosus a{padding:5px; min-width:20px; margin:20px 3px; border:1px #eee solid; border-radius:3px; background:#09f; color:#fff; display:inline-block;}
.sabrosus a.current, .sabrosus a:hover{background:#fff; color:#09f;}
.orderInfo{width:calc(100% - 10px);}
.orderInfo tr.sub_title{background: #eee;}
.orderInfo td{padding:2px 5px;}
.orderCounter{text-align: right; width:calc(100% - 20px);}
.orderCounter span{width:80px; display: inline-block;}
.orderInfo1{width:calc(40% - 10px); float:left;}
.orderInfo2{width:calc(60% - 10px); float:right;}
.orderInfo1 h5, .orderInfo2 h5{margin-top:14px; background: #eee; padding: 5px;}
.orderInfo1 span, .orderInfo2 span{width:80px; margin-right: 8px; text-align: right; display: inline-block;}
.orderInfo1 .form-control, .orderInfo2 .form-control{max-width:calc(100% - 100px); display: inline-block;}
.fa{margin:0 5px;}
#mask{position: fixed; z-index: 900; left:0; top:0; width: 100vw; height: 100vh; background:rgba(0,0,0,0.6); display: none;}
#maskContent{position: fixed; z-index: 901; background:#fff; border-radius: 10px; padding: 15px; width:800px; height:80vh; left:50%; top:50%; transform: translate(-50%, -50%); display: none;}
#maskContent .fa-close{position:absolute; right:-10px; top:-10px; width:30px; height:30px; font-size:24px; line-height:30px; text-align:center; color:#fff; background:#444; border-radius:15px; cursor:pointer;}
#maskContent .data{width:100%; height: 100%; overflow-x: hidden; overflow-y: auto;}
#logo img{height:40px;}
#menuMobile{display:none; cursor:pointer;}
#header{margin:10px;}
#header .tool{float:right; color:#fff; background: rgba(0,0,0,0.4); padding: 5px; border-radius: 3px;}
#header .tool a{color:#fff; padding:0 5px; border-left:1px #fff solid;}
#header .tool a:nth-child(1){border:none;}
#header:after{content:''; display:block; clear:both;}
#loginBox{position:fixed; border:1px #666 solid; box-shadow:2px 6px 10px rgba(91,91,91,.6); width:230px; background:#fff; padding:15px 20px; left:50%; top:50%; transform: translate(-50%, -50%); color:#F39800; border-radius:10px;}
#loginBox .ui-input-text:nth-child(4){width:50px; display:inline-block;}
#loginBox #ckn{height:30px;}
#leftImg{position:fixed; z-index:3; left:14px; top:70px; width:186px;}
#menu{width:210px; height:calc(100vh - 180px); padding:10px 0; overflow-x:hidden; overflow-y:auto; position:fixed; z-index:2; left:10px; top:130px; background:rgba(255,255,255,.9); border-radius:8px 0 0 8px; border:1px #eee solid; box-shadow:2px 2px rgba(152,152,152,.3);}
#menu a{color: #666;}
#menu ul.folder{margin:0;}
#menu ul.folder li{list-style:none; margin-bottom:5px; cursor:pointer;}
#menu ul.folder li a{display:block;}
#menu ul.folder li.folder div.hideit{margin-left:18px;}
#main{background:#fff; float:right; margin-right:10px; width:calc(100vw - 231px); height:calc(100vh - 90px); border:1px #ebebeb solid; box-shadow:5px 5px 10px rgba(152,152,152,.3); border-radius:10px 0 10px 0; overflow:hidden;}
#main iframe{width:100%; height:100%; border:none; border-radius:10px 0 10px 0;}
#footer{position:fixed; bottom:10px; width:100%; text-align:center;}
.ui-btn.ui-btn-def, .ui-btn.ui-btn-def .fa{font-size:13px; line-height:20px; background-color:#ff770d; border-color:#d66006; border-radius:13px; color:#fff; text-shadow:0 1px 0 #454f66;}
.ui-btn.ui-btn-def:hover, .ui-btn.ui-btn-def:hover .fa{background-color:#f9a004; color:#fff; text-shadow:0 1px 0 #454f66;}
.controlgroup{display: inline-block;}
.controlgroup label{background: #eee; border:1px #999 solid; font-weight: normal; padding: 2px 5px; cursor: pointer; display: block;}
.controlgroup label:hover{background:#ddd;}
.controlgroup label:nth-child(2){border-radius: 3px 0 0 3px;}
.controlgroup label:nth-last-child(1){border-radius: 0 3px 3px 0;}
.controlgroup label.active{background: dodgerblue; color: #fff;}
.controlgroup.horizontal label{display: inline-block;}
.controlgroup.horizontal input{display: none;}
@media screen and (max-width:800px){
	#maskContent{width:96%;}
	#menuMobile{display:inline-block;}
	#header .tool a span{display: none;}
	#leftImg{display:none;}
	#menu{width:calc(100vw - 20px); height:calc(100vh - 90px); padding-left:30px; left:calc(-100vw + 10px); top:80px; animation:.5s slideOutLeft; border-radius:10px 0 10px 0; overflow:hidden;}
	#main{width:calc(100vw - 20px); float:none; margin:0 0 0 10px; border-radius:10px;}
	.orderInfo1, .orderInfo2{width:100%; float:none;}
}