@charset "utf-8";
BODY {color:#222; font-family:"Microsoft JhengHei"; font-size:14px}
.container {max-width:640px}

A {color:#222; text-decoration:none; outline:none}
A img {display:block; margin:0 auto}
A[name] {position:relative; top:-3em}
/*@media (max-width:767px) {
	A[name] {position:absolute; top:20em;}
}*/
A:hover {color:#f60; text-decoration:underline}
img {max-width:100%; height:auto}
h1 {font-size:1.7em; margin-top:0; line-height:1.4}
h2 {font-size:1.5em; color:#444; letter-spacing:2px; line-height:1.7em}
@media (max-width:414px) {/* 5.5" iphone6+ */
	H1 {font-size:1.6em; text-indent:inherit;}
	H2 {letter-spacing:normal; letter-spacing:normal;}
}
h2 span {float:right; font-weight:normal; font-size:12px;}
small {color:#666;}
.text-danger small {color:#a94442;}
H2 small {font-size:0.85em; letter-spacing:normal;}
h3 {line-height:1.7em;}
H4 {font-weight:normal; text-align:left;}
h5 {/*text-indent:2em; */font-size:0.75em; margin-top:0;}
h5 strong {font-size:1.6em; color:#C00; padding-right:5px;}
th {background-color:#999; color:#FFF; text-align:center; white-space: nowrap;}
@media (max-width:414px) {
	.table > tbody > tr > td, .table > tfoot > tr > td {padding:4px;}
}

/*  ================ FORM =================  */
FIELDSET {margin:0 20px; border:1px solid #CCC; border-radius:10px; padding:10px;}
LEGEND {padding:10px 0 0 20px; border-bottom:none; font-size:1.2em; color:#399; margin-bottom:0;}
figure {margin-bottom:.5em}
time {font-size:0.85em; color:#666; white-space:nowrap}
sub {bottom:0;}
/*p {text-indent:2em;}*/

label:after {content:" \003A "; padding-right:0.5em}

header {min-height:100px; padding-top:1em; background:url(../img/banner_bac.jpg) right center; background-size:contain; overflow:hidden}

@media (max-width:320px) {
	header {min-height:85px}
}
header.header2 {background:url(../img/banner_bac2.jpg) center center}

article {background-color:#fff}
article.container {padding-left:5px; padding-right:5px;}
/*側邊攔.管理員快速選單*/
.groupon {font-size:0.8em; min-height:3.5em; padding-right:10px; position:fixed; left:5px; top:0px; z-index:999; margin-left:5px; background-color:rgba(255,255,255,.5); border-radius:0 0 15px 15px; box-shadow:0 4px 3px rgba(20%,20%,40%,0.3);}
.groupon ul li {display:inline-block;}
.groupon ul li a {text-decoration:none;}
.groupon ul li a sup {border-radius:16px; padding:1px 4px; left:-7px; alpha(opacity=85); opacity:0.85;}
@media (max-width:767px) {
	.groupon {height:3em; width:100%; overflow-y:hidden; overflow-x:scroll; right:0;}
	.groupon ul {width:720px;}
}


/*----- 返回頂端 -----*/
.gotoTop {position:fixed; bottom:4em; right:10px; z-index:999; display:none;}
.gotoTop a {display:block; width:30px; height:30px; border-radius:50%; text-align:center; background-color:#ccc; color:#fff; line-height:30px; font-size:.8em}
.gotoTop a:hover {background-color:#F30}

/* -- 導覽列 --*/
.breadcrumb {background-color:transparent; padding-top:1em}
.breadcrumb > li + li:before {content:'〉'}

/*  == 關閉網站 == */
#close_site {background:url(../img/close_site.png) no-repeat left 50px; padding:50px 0 0 130px; width:600px; margin:0 auto}
#close_site h1 {font-size:2.5em; color:#F00; line-height:50px; border-bottom:2px dotted #F90}
#close_site h3 {font-size:1.5em; color:#F60; line-height:30px; text-align:left; text-indent:2em; padding:10px}

/*網站導覽列*/
#Nav {height:40px; line-height:40px; padding-left:20px; text-align:left; margin:5px 0 15px 20px;}
#Nav span {color:#CCC; padding:0 5px;}
#Nav b {color:#069;}

/*----- 頁腳 ------*/
footer {clear:both; color:#360; padding:5px 0; margin-top:2em; text-align:center; background:rgb(248,255,232);
background: linear-gradient(to bottom, rgb(248,255,232) 0%,rgb(227,245,171) 33%,rgb(183,223,45) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 );
}
footer div {position:relative; top:-1em; line-height:0; color:#ccc; font-size:.85em;}
footer div a {padding:0 .4em; color:#666;}
footer h6 {font-size:1.35em; color:#690;}
footer address {margin-bottom:0;}
footer address span {display:inline-block;  padding-left:1em;}
footer ul {padding:2px;}
footer ul li {display:inline-block; padding-right:10px;}
footer > p {font-size:.85em; margin-bottom:.2em; color:#690;}
footer small {color:#690;}


/* 按鈕 */
.Botton {height:70px; padding:5px 60px; border-top:5px solid #DDD; padding-top:15px;}
.Botton button {float:right;}
.btn .fa {filter:alpha(opacity=50); opacity:0.5;}

.model {font-size:0.85em; color:#999; line-height:20px; height:20px;}
.date {font-size:0.75em; color:#999;}


.specials_time {color:#F00; font-size:.85em;}
/*.specials_time strong {display:block; letter-spacing:.1em; color:#F00;}*/
.specials_time small {font-size:0.75em; color:#F00;}
.attributes {color:#F30;}
@media (max-width:414px) {/* 5.5" iphone6+ */
	.specials_time {width:95%; left:.3em;}
}



/* error_message.html*/ 
#error_message_search {margin:20px 0 0 100px;}
#error_message_search li {float:left; margin-right:5px}
.no_entry {height:60px; line-height:60px; color:#F60; font-size:1.2em; max-width:300px; margin:30px auto 30px; padding-left:80px; letter-spacing:1px; background-image:url(../img/empty.jpg)}

/*資料是空的*/
#entry {border:2px solid #C0262C; border-radius:1em; padding:3em 3em .5em; margin-bottom:1em;}
#entry img {vertical-align:middle; padding:1em; max-width:215px;}
#entry span.text-nowrap {font-size:1.65em; color:#C0262C;}
@media (min-width:992px) and (max-width:1199px) {
	#entry span.text-nowrap {font-size:1.5em; letter-spacing:2px;}
}
@media (min-width:768px) and (max-width:991px) {
	#entry {min-height:25em; padding:6em 1.5em 0; text-align:center;}
	#entry span.text-nowrap {font-size:1.4em;}
}
@media (min-width:481px) and (max-width:767px) {
	#entry {padding:2.5em 1.5em .5em; text-align:center;}
	#entry span.text-nowrap {font-size:1.35em;}
}
@media (max-width:480px) {
	#entry {padding:1em; text-align:center;}
	#entry span.text-nowrap {font-size:1.3em; line-height:2em; }
}

.center_module {margin:5px; background-color:#fff}
/* @media (max-width:414px) {
	.center_module {margin-left:0;}
} */
.center_module h3 {left:0;}
.header {border-top:2px solid #1C1F87; position:relative; height:30px;}
.header > h2 {text-align:center; display:inline-block; 
 border-radius:15px; color:#FFF; padding:0 30px; position:absolute; top:-35px; left:42%; border-bottom:none; font-weight:normal; background:rgb(30,87,153); background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);}
/*.center_module h2 a {color:#289284;}*/
.center_module h2 span img {margin:8px 20px 0 0;}

/* 網站訊息 */
.info {color:#C00; font-size:1.1em;}
.info:before {font-family:FontAwesome; content:"\f05a"; font-size:1.5em; padding-right:.3em;}

.categories_tree {float:right;}


/*驗證欄位警告訊息*/
.form-control.error::-moz-placeholder {color:#f99; opacity:1;}
.form-control.error:-ms-input-placeholder {color:#f99;}
.form-control.error::-webkit-input-placeholder {color:#f99;}
input.error, select.error, textarea.error {border-color:#C00; color:#F00; background-color:#FFE6FF;}
input.error + label.error, select.error + label.error, textarea.error + label.error {position:absolute; right:-10px; top:-15px; background-color:rgba(204,0,0,.8); color:#FFF; font-size:12px; padding:2px 10px; border-radius:5px; font-weight:normal; z-index:2;}
input.error + label.error:after, select.error + label.error:after, textarea.error + label.error:after {content:''; display:inline-block; border-right:7px solid transparent; border-left:7px solid rgba(204,0,0,.8); border-bottom:7px solid transparent; position:absolute; bottom:-7px; left:10px;}
input.valid {background:#CF9;}
textarea.valid {background:#CF9;}
.vvimg {padding:0; min-width:8em; position:relative;}
.vvimg .fa {position:absolute; right:5px; top:10px; z-index:10;}
#getcode {cursor:pointer;}

/* 輸入框加入圖示 */
.form-control-feedback {color:#ccc;}
.error + .form-control-feedback {color:#f00;}
.error + button + .form-control-feedback {color:#f00;}

/*顯示隱藏密碼*/
.has-feedback .form-control {padding-right:2.2em}
.btn-off {position:absolute;top:8px; right:10px}


select.input-xs {height:25px; line-height:25px; padding:5px 8px;}

.row {margin:0; margin-bottom:5px;}
.alert {font-size:1.7em;}
.caret {border-top:6px solid;}
.btn-xs {font-size:0.85em;}
.panel-heading {font-size:1.25em;}


@media (min-width:768px) and (max-width:991px) {
	.mode_photo_text .product_name {font-size:1.1em; line-height:1.2em;}
	.Box h3 {font-size:17px; letter-spacing:normal;}

	.Box table#shipping_time td {padding:1px 3px;}
	.Box table#shipping_time td strong, .Box table#shipping_time td em {font-size:1.7em;}
	.Box table#shipping_time + p strong, .Box table#shipping_time + p em {font-size:1.5em;}
}
@media (max-width:767px) {
	.xs-hidden {display:none;}
	#popup .content {left:10%; width:80%;}
	.list_category {padding:0 0 0 4px; margin-left:0; margin-right:0;}
	.list_category h3 {font-size:12em;}

	.col-xs-6 {padding-left:5px; padding-right:5px;}
	.navbar-default .navbar-form {border-color:transparent;}
	.badge {padding:2px 4px;}
	.contact_us {padding:5px 0;}
	.contact_us .form-group {margin-left:5px; margin-right:5px;}

	.mode_photo_text .product_name {font-size:1.2em; line-height:1.5em;}
	.Botton {padding:5px 20px;}
	.btn-lg {padding:6px 12px; font-size:1.2em;}
	#order a:hover span {margin:0 0.3em 0 0;}
}
@media (max-width:414px) {
	.Botton {padding:5px 10px;}
}

/* https://css-tricks.com/examples/hrs/ */
hr.style-one {border:0; height:1px; background:#333; background-image:linear-gradient(to right, #ccc, #333, #ccc);}
hr.style-two {border:0; height:1px; background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));}
hr.style-three {border:0; border-bottom:1px dashed #ccc; background:#999;}
hr.style-four {height:12px; border:0; box-shadow:inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);}
hr.style-five {border:0; height:0; box-shadow:0 0 10px 1px black;}
hr.style-five:after {content:"\00a0";}
hr.style-six {border:0; height:0; border-top:1px solid rgba(0, 0, 0, 0.1); border-bottom:1px solid rgba(255, 255, 255, 0.3);}
hr.style-seven {height:30px; border-style:solid; border-color:black; border-width:1px 0 0 0; border-radius:20px;}
hr.style-seven:before {display:block; content:""; height:30px; margin-top:-31px; border-style:solid; border-color:black; border-width: 0 0 1px 0; border-radius:20px;}
hr.style-eight {padding:0; border:none; border-top:medium double #333; color:#333; text-align:center;}
hr.style-eight:after {content:"§"; display:inline-block; position:relative; top:-0.7em; font-size:1.5em; padding:0 0.25em; background:white;}