#path { padding:5px 5%;}
#path li, #path li a { display:inline-block; color:#999; padding: 2px 5px;}
#path li { font-size:small;}
#path li a { font-size:small;}
#path li:before { content:">"; display:inline; margin:0 5px;}
#path li:first-child:before { content:""; display:none;}
#path li a:hover { color:#c00;}
hr { border-bottom:1px dotted #ddd; width:100%; margin: 10px 0;}

main {}
#banner {}
#top {
	padding:15px 5%;
	display: -webkit-flex;
  display:         flex;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
}
#top h1 { font-weight:bold;    margin: 0;}
#top #img-box { margin-right:5%;}
#products #top #img-box { width: 25%;}
#products-show #top #img-box { width: 40%;}
#top dl {-webkit-flex: 1; flex: 1;}
/**/
.tool-bar { width:100%; padding:10px 5%; background:#666; color:#fff;
display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
.tool-bar .box {
	display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.tool-bar .box p { padding:0 10px;}
.tool-bar .total span { padding:0 10px; font-weight:bold; color: #fdf99e;}
.tool-bar .page span { padding:0 5px;}
.tool-bar .page button { padding:3px 5px; margin:0 3px; cursor:pointer; background: #c00f1f; color: #fff;}

#products #content { text-align:center; padding:5%; background:#f1f1f1; }
#products #content .list { display:inline-block; vertical-align:top; width:calc(100%/4 - 4px); background:#fff; margin-bottom:20px;border: 1px solid #e9e9e7; border-bottom:none;}
#products #content .list a { display:block;}
#products #content .list dl { padding:20px 10px;}
#buy-btn { position:fixed; bottom:50%; right:0;}
#buy-btn a {display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    text-align: center;
    padding: 5px 10px;
	background: #f1f1f1;
    color: #f62362;}
#buy-btn a img {}
#buy-btn a:hover {background:#f50b51;color: #fff;}

/**/
.slide {
	border: 1px solid #efefef;
	border-left: 5px solid #f49d47;
	position: fixed;
	bottom: 0px;
	right: 0px;
	display: none;
	background-color: White;
	z-index: 9999;
	padding: 15px;
	height: 100px;
	width: 200px;
	white-space: nowrap;
	text-align:center;
}
.slide .item { color:#F60; padding:0 5px;}
#products-show .ID { font-size:larger; margin-bottom:5%;}
.ID:before { content:'產品編號 : ';}
#products-show #top dl dd { padding:5px 0;border-bottom:1px dotted #ddd; line-height:30px;}
.buy-people { font-size:small; font-weight:bold;}
#products-show .slider-for img {cursor:zoom-in;}
#size select, #size input {padding:5px; margin:0 5px; background:#f1f1f1; border: 1px solid #fff; width: 30%;}
#cartForm select, #cartForm input {padding:5px; margin:0 5px; background:#f1f1f1; border: 1px solid #fff; width: 30%;}
#products-show .btn-box {    -webkit-justify-content: flex-start; justify-content: flex-start; margin: 5% 0;}
#products-show .btn-box a {
	    -webkit-flex: none;
    flex: none;
    padding: 10px;
    background: #000;
    color: #fff;text-align: center;
}
#products-show .btn-box a:hover { background:#c00;}
#products-show .btn-box img { opacity: 1; -webkit-filter: invert(1);}
#others { padding:0 5% 5%; background:#f1f1f1; text-align:center;}
#others > .title2 {
	border-radius: 0 0 10px 10px;
    width: max-content;
    margin: 0 auto 10%;
    padding: 15px 5%;
    color: #fff;
    background: #666;
    box-shadow: 0 5px 2px rgba(0, 0, 0, 0.15); font-weight:bold;
}
#others .slick-slide { margin:10px;border: 1px solid #e9e9e7;
-webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s; }
#others .slick-slide:hover {
	-moz-transform:translateY(-10px);
-webkit-transform:translateY(-10px);
-o-transform:translateY(-10px);
-ms-transform:translateY(-10px);
transform:translateY(-10px);
}

#others dl { background:rgba(255, 255, 255, 0.8); padding:20px 10px;}

/*tab*/
ul.tab-show { overflow: hidden;}
ul.tab-show {display: -webkit-flex; display: flex;}
ul.tab-show li {-webkit-flex: 1; flex: 1;margin: 0 1px;}
ul.tab-show li a {
    display: block;
    padding: 10px 20px;
    transition: 0.3s;
	background: #f1f1f1;
	width: 100%;
    height: 100%;
    text-align: center;
}
ul.tab-show li a:hover, ul.tab-show li a:focus, ul.tab-show li .active {background: #c00; color: #fff !important;}
.tabcontent { display: none; padding:5% 15%;}
.tabcontent .slick-slide { margin:10px; padding:5px ;border: 1px solid #e9e9e7; text-align:center; 
-webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s; }
.tabcontent .slick-slide:hover {
	-moz-transform:translateY(-10px);
-webkit-transform:translateY(-10px);
-o-transform:translateY(-10px);
-ms-transform:translateY(-10px);
transform:translateY(-10px);
}
/*表格*/
.form #content {
	display: -webkit-flex;
  display:         flex;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  -webkit-justify-content: center;
          justify-content: center; padding:5%;
}
.form h1:before { content:''; width:100%; height:100%; display:inline; border-left:7px solid #c00; margin-right:5px; }

#login #content .login-box {}
.login-box {-webkit-flex: 1; flex: 1; width:45%; margin:0 2%;text-align:left;padding:2% 5% 5%; background: #f1f1f1;}
.login-box form { margin:5% 0;}
.login-box form input[type="text"] { width:100%; padding:10px; border:1px solid #ddd; border-radius:3px; background:#fff; margin:5px 0;}
.login-box form textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:3px; background:#fff; margin:5px 0;}
.login-box form select {padding:10px; border:1px solid #ddd; border-radius:3px; background:#fff; margin:5px;}
.login-box form input[type="radio"] { margin-left:10px; width:20px; height:20px;vertical-align: middle;}
.login-box form button { cursor:pointer;padding:10px; display:inline;margin: 5% 5px 0 0;  border-radius:3px; background:#c00; color:#fff; }
.login-box .txt { border:1px solid #ddd; background:#fff; padding:10px; max-height:250px; overflow:auto;}
#contact .login-box form input[type="text"] { width:50%; display:inline; float:left;}
#signup #content p, #order #content p { margin:10px 0;}
#order #content p span { margin:0 5%; color:#999;}
#order #content .txt { padding: 5px 5%; background:#fff;}
#thanks .login-box form { text-align:center;}
form table a { text-decoration:underline; color:#F09; margin:0 5px;}
form .table-box { overflow:auto;}
form table { border:1px solid #ddd; background:#fff; width: 100%; text-align:center; margin-bottom:5%;}
form table th, form table td { padding:10px !important; border:1px solid #ddd; max-width:50%;}
form table th {word-break: keep-all; background:#666; color:#fff;}
form table input[type="number"] { width:60px; padding:10px; border:1px solid #ddd; background:#fff; }
form table img { max-width:150px;}
.schedule {  text-align:center;    margin-bottom: 5%;
	display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.schedule li {-webkit-flex: 1; flex: 1; padding:10px; position:relative; height:40px; background:#ccc;}
.schedule li:after { content:''; position:absolute; right:-19px; top:0; z-index:1;
	width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid #ccc;
    border-bottom: 20px solid transparent;
	-webkit-filter: drop-shadow(1px 0 0 #f1f1f1);
    filter: drop-shadow(1px 0 0 #f1f1f1);
}
.schedule li:last-child:after { display:none;}
.schedule li.here { background:#c00; color:#fff;}
.schedule li.here:after { border-left-color:#c00 !important;
-webkit-filter: drop-shadow(1px 0 0 #c00);
    filter: drop-shadow(1px 0 0 #c00);}
.schedule br { display:none;}
/*左側選單*/
aside { width:200px;}
aside .list li { border-bottom:1px solid #f1f1f1;}
aside .list li a:before { content:'▶'; display:inline; margin-right:5px; width:100%; height:100%;}
aside .list a { display:block; padding:10px 0;}
aside .list li { border-bottom:1px solid #f1f1f1;}
aside .list a:hover { color:#c00f1f;}


/*about*/
#about .a01 {width:45%; float:right; margin-left:5%;}
#about .a02 {width:45%; float:left; margin-right:5%;}

/*faq*/
.ac-container label{
	padding: 10px 0;
    position: relative;
    display: block;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    font-size: larger;
}
.ac-container label:after {
	content: '+';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 20px;
	color:#ccc;
}
.ac-container label:hover:after, .ac-container input:checked + label:hover:after {content: '+'; color:#000;}
.ac-container input:checked + label:after, .ac-container input:checked + label:hover:after{content:'-'; color:#000; }
.ac-container input{display: none;}
.ac-container article{
	margin-top: -1px;
	overflow-y: auto;
	height: 0px;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	display:flex;
	
}
.ac-container input:checked ~ label, .ac-container label:hover { font-weight:bold;}
.ac-container input:checked ~ article{
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	display: block;
    height: inherit;
	margin-bottom: 10px !important;
	padding:20px;
	flex:1;
	background: #fff;
    border: 3px solid #ccc;
}


@media screen and (max-width:968px) {
}
@media screen and (max-width:768px) {
	#products #content .list{ width:calc(100%/3 - 4px); }
	.form #content { display:block;}
	.login-box {width: 100%;  margin: 0 0 5%;}
	aside {
    width: 100%;
    border: 1px solid #f1f1f1;
    padding: 0 15px;
	margin-bottom: 5%;}
}
@media screen and (max-width:568px) {
	.slide { width:100%;}
	#top { display:block; padding: 15px 5% 5%;}
	#top #img-box { width: auto !important;}
	#top h1 { text-align:center;}
	#products #content .list { width:calc(100%/2 - 4px); }
	#products #content .list dl {padding: 0 10px 10px;}
	.tool-bar { display:block;}
	.tool-bar .box { padding:5px 0;}
	#size select, #size input { width:auto;}
    #cartForm select, #cartForm input { width:auto;}
	#products-show .btn-box a { -webkit-flex: 1; flex: 1;}
	ul.tab-show li a {padding: 10px;}
	.tabcontent { padding: 15% 5%;}
	#buy-btn {bottom: 0; width: 100%;display: -webkit-flex; display: flex;}
	#buy-btn a { -webkit-justify-content: center; justify-content: center;}
	.schedule li {height: 60px; padding: 10px 0 10px 20px;}
	.schedule li:after { border-width:30px 0 30px 20px;}
	.schedule br { display:block;}
	#about .a01, #about .a02 {width:100%; float:none; margin:0 0 5%;}
}
@media screen and (max-width:368px) {
	
}