@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(font-awesome.css);
@import url(font-awesome-ie7.css);
@import url(jquery.css);
@import url(jquery-ui.css);
@import url(jquery-ui.theme.css);
@import url(bootstrap.css);
@import url(bootstrap-theme.css);
body, html{overflow:hidden;}
*, body, div, p, input, button, a, strong, td, li, i, h1, h2, h3, h4, h5, strong, button, span{font-size:13px; font-family:'Noto Sans TC', 'FontAwesome', '微軟正黑體', sans-serif; text-decoration:none; text-shadow:none; margin:0; padding:0;}
td{padding:5px;}
ul{margin:0;}
ul li{margin:0 0 5px 0; padding:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:''; content:none;}
input[type="submit"], input[type="reset"], input[type="button"]{cursor:pointer; border-radius:5px; padding:2px 5px; border:1px #CACACA solid;}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover{background:#717071; color:#fff;}
textarea{resize:none;}
:-moz-placeholder, ::-moz-placeholder{opacity:1;}
ul li{list-style:disc;}
ol li{list-style:decimal;}
li{margin-left:28px;}
form table, form td{border:none;}
.hidden, .hideit{display:none;}
.clear{clear:both;}
.form{width:96%; max-width:600px; margin:20px auto;}
.form table{width:100%;}
.form table tr td:nth-child(1), .form table tr td:nth-child(3){width:100px;}
hr{border:1px #EEE solid; border-width:1px 0 0;	clear:both; height:0; margin:5px 0;}
hr.line01{border:none; border-bottom:1px #AAA dotted; margin-bottom:50px;}
pre{height:auto; font-family:Consolas, monospace; border:1px solid #f0f0f0;	background:#fafafa; padding:10px 20px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; margin:0 0 20px 0; overflow-x:auto;}
label{margin-right:5px;}
form td{padding:2px;}
.responsive img, .responsive iframe, .responsive object, .responsive embed{width:100%; height:auto;}
img{max-width:100%; border:none;}
a{color:#7DBB09; text-decoration:none;}
a:hover{color:dodgerblue; transition:All 0.2s ease; text-decoration:none;}
.sabrosus{padding:3px; margin:50px auto; text-align:right; width:100%; border-top:1px #CCC dotted; padding-top:10px;}
.sabrosus #sabrosus_dp{display:none;}
.sabrosus *{color:#333;}
.sabrosus a{border:#333 1px solid; color:#333; margin-bottom:10px; padding:2px 5px; margin-right:2px; text-decoration:none; display:inline-block;}
.sabrosus a:hover{border:#666 1px solid; color:#FFF; background:#666;}
.sabrosus a.current{border:#333 1px solid; padding: 2px 5px; font-weight:bold; color: #fff; margin-right: 2px; background:#333}
.bh{text-align:right; margin:100px 0 20px 0;}
.share_tool{text-align:right;}
.main{width:98%; max-width:1048px; margin:0 auto; position:relative;}
.shopIframe{width:100%; height:600px; display:none;}
.fa{margin:0 5px 0 0;}
.form-control{padding:0px 5px;}
.form-control.inline{max-width:calc(100% - 100px); display:inline-block;}
.form-control.ckn{max-width:80px; display:inline-block;}
.form-control.num{max-width:80px; display:inline-block; text-align:center;}
.form-control.file{max-width:200px; display:inline-block;}
.form-control.date{max-width:100px; display:inline-block;}
.forms{width:96%; max-width:600px; margin:50px 0 20px 0;}
.forms .form-control.ckn{max-width:80px; display:inline-block;}
form .form-control{margin-bottom:10px;}
.controlgroup{display: inline-block; position:relative; margin:0; padding:0; top:5px;}
.controlgroup label{background: #eee; border:1px #999 solid; font-weight: normal; margin:0; padding: 2px 5px; cursor: pointer; display:inline-block; float:left; color:#000;}
.controlgroup label:hover{background:#ddd;}
.controlgroup label:nth-child(1){border-radius:5px 0 0 5px;}
.controlgroup label:nth-last-child(1){border-radius:0 5px 5px 0;}
.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:#7DBB09; color: #fff;}
.controlgroup.radio label{display: inline-block;}
.controlgroup.radio input{display: none;}
.table{display:table;}
.thead{display:table-header-group;}
.thead .td{font-weight:bold;}
.tbody{display:table-row-group;}
.tr{display:table-row;}
.tr .td{display:table-cell;}
.cycle-slideshow.banner a, .cycle-slideshow.banner a img{width:100%; height:100%;}
header{background:#333; color:#fff; padding:10px 15px;}
header .title{color:#fff; font-size:20px;}
header .tool{position:absolute; right:10px; top:12px;}
header .tool a{color:#fff;}
header:after{content:''; display:block; clear:both;}
#navicon{margin-right:10px; color:#fff; cursor:pointer;}
#loginBox{width:85%; max-width:300px; margin:calc(30% - 200px) auto 0 auto; border:1px #999 solid; border-radius:10px; padding:20px;}
#loginBox h5{font-size:16px; margin-bottom:10px;}
aside{float:left; width:200px; height:calc(100vh - 40px); overflow-x: hidden; overflow-y: auto; padding:15px; background:#E0E0E3; box-shadow:2px 1px 3px #aaa;}
aside ul{margin:0; padding:0;}
aside ul li{list-style:none; margin:0 0 5px 0; padding:0;}
aside ul li a{color:#666; font-size:15px; cursor:pointer;}
aside ul li a.sub_menu{display:block; padding-left:20px; margin-top:5px;}
#main{width:calc(100vw - 200px); height:calc(100vh - 40px); float:right; border:none;}
#mask{width:100vw; height:100vh; position:fixed; z-index:900; left:0; top:0; background:rgba(0,0,0,0.6); display:none;}
#maskContent{position: fixed; z-index: 901; background:#fff; border:none; border-radius: 10px; padding: 15px; width:800px; height:80vh; left:50%; top:50%; transform: translate(-50%, -50%); display:none;}
.orderInfo{width:100%;}
.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;}
.mobile{display:none;}
.mobile-x{display:inline-block;}

@media screen and (max-width:1048px){
}
@media screen and (max-width:900px){
}
@media screen and (max-width:800px){
}
@media screen and (max-width:700px){
	#isMobile{content:'Y'; position:fixed; z-index:-1; left:-20px; bottom:-20px; display:inline-block;}
	#main{width:calc(100vw); height:calc(100vh); float:none;}
	aside{position:fixed; z-index:900; left:0; top:45px; width:calc(100vw); height:calc(100vh - 45px); display:none;}
	#loginBox{margin-top:20vh;}
	.mobile{display:inline-block;}
	.mobile-x{display:none;}
}
@media screen and (max-width:600px){
}
@media print{
	html, body{ width:100%; height:auto; overflow:auto; }
}