@charset "utf-8";
/*google web fonts*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanssc.css);
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900');
html {min-height: 100%; font-size: 16px}
body {
	height: 100%;
	background: url(../images/bg-body.png) left top repeat #000;
	font-size: 1rem;
	font-weight: 300;
	color: #fff;
	letter-spacing: 0
}
* { /*使用邊框不影響 div or table 本身寬度設定*/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
input, select, textarea {
	width: 100%;
	background: none;
	border: #e1a737 1px solid;
	color: #fff;
	padding: .5rem
}
input:hover, select:hover, textarea:hover {
	border: #ad2d01 1px solid;
	outline: none
}
input:focus, select:focus, textarea:focus {
	border: #f60 1px solid;
	outline: none
}
input::placeholder {font-weight: 300; color: #ddd}

input[type="checkbox"], input[type="radio"] {width: initial !important}

/*about button*/
*[onclick], button {cursor: pointer}

button {
	background: #640000;
	border: none;
	border-radius: .35rem;
	color: #fff;
	text-transform: uppercase;
	padding: .25rem 1rem
}
button:hover {background: #a26b00}

button.addFavi, button.addCart {
	font-size: 1.75rem;
	color: #fff;
	vertical-align: middle;
	padding: 0
}
button.addFavi {background: #ffa800; border: #ffa800 1px solid}
button.addCart {background: #a00; border: #a00 1px solid}
button.addFavi:hover {background: #a26b00}
button.addCart:hover {background: #640000}

div.btnMore {text-align: center; margin-bottom: 1.5rem}
div.btnMore>button {padding: .25rem 2rem}
div.btnMore>button:hover {background: #282828}

a {color: #282828; text-decoration: none; padding: 0}
a:hover {color: #a00; text-decoration: none}
a, button, figure, figcaption {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none
}

img {
	width: 100%;
	max-width: 100%;
	height: auto!important;
	border: none
}

/*font setting*/
h1, h2, h3, h4, h5, p, ul, li, dl, dt, dd, button, input, textarea, select, option, a, div {font-family: 'Roboto', 'Noto Sans TC', 'Noto Sans SC', "Font Awesome 5 Free", MS UI Gothic, MS Gothic, sans-serif}

h1 {font-size: 1.73rem}
h2 {font-size: 1.5rem}
p, li {font-size: 1rem}
li {list-style: none}
div.clearfix {clear: both}

/*goTOP use only*/
.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 40px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	/* image replacement properties */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: hsla(0, 0%, 0%, .75) /*改變按鈕顏色*/ url(../images/layout/cd-top-arrow.svg) no-repeat center 50%;
	border-radius: .5rem;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
	-moz-transition: opacity .3s 0s, visibility 0s .3s;
	transition: opacity .3s 0s, visibility 0s .3s;
	z-index: 9999
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
	-moz-transition: opacity .3s 0s, visibility 0s 0s;
	transition: opacity .3s 0s, visibility 0s 0s
}
.cd-top.cd-is-visible {visibility: visible; opacity: .75}
/* the button becomes visible */
/* .cd-top.cd-fade-out {opacity: .25} */
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
.cd-top:hover {background: hsla(0, 0%, 0%, 1) /*改變按鈕顏色*/ url(../images/layout/cd-top-arrow.svg) no-repeat center 50%} /*改變按鈕顏色*/
@media only screen and (min-width: 1024px) {
	.cd-top {
		height: 60px;
		width: 60px;
		right: 30px;
		bottom: 30px
	}
}
@media only screen and (min-width: 768px) {
	.cd-top {right: 1.5rem; bottom: 6.5rem}
}

header {
	width: 100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
	border-bottom: #ccc 1px solid;
	padding: 0
}

/*logo*/
a.navbar-brand {font-size: 2.125rem; font-weight: 600; padding: 1rem 0}

/*nav*/
nav.bg-light {max-width: 1110px; background: none !important; margin: 0 auto; padding: 0}

/*mobile toggler*/
.navbar-light .navbar-toggler {background: none; color: #004fa2; border-color: #004fa2}

/*main nav*/
.navbar-collapse {}

.navbar-light .navbar-collapse .nav-link {
	border-right: #eee 1px solid;
	margin-right: 1px;
	padding: 3rem 0 .25rem
}
.navbar-light .navbar-collapse .nav-link p {
	font-size: 1.125rem;
	font-weight: 400;
	text-align: center;
	line-height: 1rem;
	margin-bottom: 0
}
.navbar-light .navbar-collapse .nav-link p:last-of-type {font-size: 1rem; color: #a00}
.navbar-light .navbar-collapse .nav-link:hover p:last-of-type {color: #282828}

.navbar-light .navbar-nav .nav-link:first-of-type {border-left: #eee 1px solid}


/*moblie nav*/
div.slidebars {
	background: rgba(255, 255, 255, 0.89);
	border-right: #004fa2 1px solid;
	box-shadow: rgba(0, 0, 0, .15) 1px 0 5px;
	padding: 1rem
}
div.closeBtn {text-align: right}
div.closeBtn>button {background: none}
div.closeBtn>button>i {color: #004fa2}

dl.navMobile {margin-top: 1.5rem}
dl.navMobile>dd {border-bottom: #a00 1px solid; text-align: center}
dl.navMobile>dd>a {font-size: 2rem; text-transform: uppercase}
dl.navMobile>dd>a:hover, dl.navMobile>dd>a:focus {color: #ad2d01}
dl.navMobile>dd:last-child {border-bottom: none}

/*footer*/
footer {background: #000; padding: 1.5rem 0}
footer>section {max-width: 1110px}

footer>dl.link {}
footer>dl.link>dd {border-right: #e1a737 1px solid; text-align: center}
footer>dl.link>dd>a {text-transform: uppercase}
footer>dl.link>dd:nth-of-type(1) {border-left: #e1a737 1px solid}


dl.contact {margin-bottom: 0}
dl.contact>dd {color: #fff; text-align: center; text-transform: uppercase; margin-bottom: 0}

div.copyright>p {color: #fff; text-align: right; margin: 0}

section.container {}