@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700,900|Roboto:400,500,700,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Noto+Serif+TC:wght@400;500;600;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@100..900&family=Noto+Serif+TC&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

@charset "utf-8";

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */



/* Document

   ========================================================================== */



/**

 * 1. Correct the line height in all browsers.

 * 2. Prevent adjustments of font size after orientation changes in iOS.

 */



html {

  line-height: 1.15; /* 1 */

  -webkit-text-size-adjust: 100%; /* 2 */

}



/* Sections

   ========================================================================== */



/**

 * Remove the margin in all browsers.

 */



body {

  margin: 0;

}



/**

 * Correct the font size and margin on `h1` elements within `section` and

 * `article` contexts in Chrome, Firefox, and Safari.

 */



h1 {

  font-size: 2em;

  margin: 0.67em 0;

}



/* Grouping content

   ========================================================================== */



/**

 * 1. Add the correct box sizing in Firefox.

 * 2. Show the overflow in Edge and IE.

 */



hr {

  box-sizing: content-box; /* 1 */

  height: 0; /* 1 */

  overflow: visible; /* 2 */

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */



pre {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}



/* Text-level semantics

   ========================================================================== */



/**

 * Remove the gray background on active links in IE 10.

 */



a {

  background-color: transparent;

}



/**

 * 1. Remove the bottom border in Chrome 57-

 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

 */



abbr[title] {

  border-bottom: none; /* 1 */

  text-decoration: underline; /* 2 */

  text-decoration: underline dotted; /* 2 */

}



/**

 * Add the correct font weight in Chrome, Edge, and Safari.

 */



b,

strong {

  font-weight: bolder;

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */



code,

kbd,

samp {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}



/**

 * Add the correct font size in all browsers.

 */



small {

  font-size: 80%;

}



/**

 * Prevent `sub` and `sup` elements from affecting the line height in

 * all browsers.

 */



sub,

sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;

}



sub {

  bottom: -0.25em;

}



sup {

  top: -0.5em;

}



/* Embedded content

   ========================================================================== */



/**

 * Remove the border on images inside links in IE 10.

 */



img {

  border-style: none;

}



/* Forms

   ========================================================================== */



/**

 * 1. Change the font styles in all browsers.

 * 2. Remove the margin in Firefox and Safari.

 */



button,

input,

optgroup,

select,

textarea {

  font-family: inherit; /* 1 */

  font-size: 100%; /* 1 */

  line-height: 1.15; /* 1 */

  margin: 0; /* 2 */

}



/**

 * Show the overflow in IE.

 * 1. Show the overflow in Edge.

 */



button,

input { /* 1 */

  overflow: visible;

}



/**

 * Remove the inheritance of text transform in Edge, Firefox, and IE.

 * 1. Remove the inheritance of text transform in Firefox.

 */



button,

select { /* 1 */

  text-transform: none;

}



/**

 * Correct the inability to style clickable types in iOS and Safari.

 */



button,

[type="button"],

[type="reset"],

[type="submit"] {

  -webkit-appearance: button;

}



/**

 * Remove the inner border and padding in Firefox.

 */



button::-moz-focus-inner,

[type="button"]::-moz-focus-inner,

[type="reset"]::-moz-focus-inner,

[type="submit"]::-moz-focus-inner {

  border-style: none;

  padding: 0;

}



/**

 * Restore the focus styles unset by the previous rule.

 */



button:-moz-focusring,

[type="button"]:-moz-focusring,

[type="reset"]:-moz-focusring,

[type="submit"]:-moz-focusring {

  outline: 1px dotted ButtonText;

}



/**

 * Correct the padding in Firefox.

 */



fieldset {

  padding: 0.35em 0.75em 0.625em;

}



/**

 * 1. Correct the text wrapping in Edge and IE.

 * 2. Correct the color inheritance from `fieldset` elements in IE.

 * 3. Remove the padding so developers are not caught out when they zero out

 *    `fieldset` elements in all browsers.

 */



legend {

  box-sizing: border-box; /* 1 */

  color: inherit; /* 2 */

  display: table; /* 1 */

  max-width: 100%; /* 1 */

  padding: 0; /* 3 */

  white-space: normal; /* 1 */

}



/**

 * Add the correct vertical alignment in Chrome, Firefox, and Opera.

 */



progress {

  vertical-align: baseline;

}



/**

 * Remove the default vertical scrollbar in IE 10+.

 */



textarea {

  overflow: auto;

}



/**

 * 1. Add the correct box sizing in IE 10.

 * 2. Remove the padding in IE 10.

 */



[type="checkbox"],

[type="radio"] {

  box-sizing: border-box; /* 1 */

  padding: 0; /* 2 */

}



/**

 * Correct the cursor style of increment and decrement buttons in Chrome.

 */



[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button {

  height: auto;

}



/**

 * 1. Correct the odd appearance in Chrome and Safari.

 * 2. Correct the outline style in Safari.

 */



[type="search"] {

  -webkit-appearance: textfield; /* 1 */

  outline-offset: -2px; /* 2 */

}



/**

 * Remove the inner padding in Chrome and Safari on macOS.

 */



[type="search"]::-webkit-search-decoration {

  -webkit-appearance: none;

}



/**

 * 1. Correct the inability to style clickable types in iOS and Safari.

 * 2. Change font properties to `inherit` in Safari.

 */



::-webkit-file-upload-button {

  -webkit-appearance: button; /* 1 */

  font: inherit; /* 2 */

}



/* Interactive

   ========================================================================== */



/*

 * Add the correct display in Edge, IE 10+, and Firefox.

 */



details {

  display: block;

}



/*

 * Add the correct display in all browsers.

 */



summary {

  display: list-item;

}



/* Misc

   ========================================================================== */



/**

 * Add the correct display in IE 10+.

 */



template {

  display: none;

}



/**

 * Add the correct display in IE 10.

 */



[hidden] {

  display: none;

}

/*end normalize*/



html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */

html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}

audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}

audio:not([controls]){display:none;height:0}[hidden],template{display:none}

a{

	background-color: transparent;

	-webkit-text-decoration-skip: objects;

}

a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}

dfn{font-style:italic}mark{background:#ff0;color:#000}

small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}

sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}

code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}

button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}

button,input{overflow:visible}button,select{text-transform:none}

button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}

fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}

legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}

[type=checkbox],[type=radio]{padding:0}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}

[type=search]{-webkit-appearance:textfield;outline-offset:-2px}

[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}

::-webkit-input-placeholder{color:inherit;opacity:0.54}

::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}

/* End extract */







html, body{

	font-family: 'Roboto', sans-serif;

	font-family: 'Noto Sans TC', sans-serif;

	font-weight: 400;

	font-size: 17px;

	line-height: 1.7;

	position: relative;

	height: 100%;

	color: #787878;

	margin: auto;

	background-color:#ebe8db;

	}









a {

		text-decoration: none;

		transition:all .3s;

}



:root {

  --main-color:#187a17;/*green*/

	--main-colorLighter:#4aac20;

	--main-colorDarker:#166b14;

  --main-subcolor:#42953E;/*橘黃*/

  --main-width:1250px;

}



@media screen and (max-width: 1200px) {

	:root {

		 --main-width:90%;

	}

}



button, a {

	cursor:pointer;

	transition: all .3s;

}





input[type=text],

input[type=tel],

input[type=password],

input[type=number],

input[type=email],

input[type=date],

input[type=file],

select,

textarea {

	width: 100%;

  padding: 3px 6px;

  margin:0;

  display: inline-block;

	border:solid 1px #ccc;

  background: #fff;

  outline:none;

	border-radius:6px;

}

input[type=text]:focus,

input[type=tel]:focus,

input[type=password]:focus,

input[type=number]:focus,

input[type=email]:focus,

input[type=date]:focus,

input[type=file]:focus,

select:focus,

textarea:focus {

	width:100%;

	border:solid 1px var(--main-color);

	background: #fff;

	padding: 3px 6px;

}





/* The radio */

.radio {

	display:inline-block;

	position: relative;

	margin-bottom: 15px;

	cursor: pointer;

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

	padding:0 20px 0 30px;

	color:#666;

}



.radio input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

}



.radio .checkmark {

	position: absolute;

	top: 4px;

	left: 0;

	height: 20px;

	width: 20px;

	background-color: #fff;

	border-radius: 50%;

	border:solid 1px #ccc;

}



.radio:hover input ~ .checkmark {

    background-color: #C9C9C9;

}



.radio input:checked ~ .checkmark {

	background-color:var(--main-color);

	border:solid 1px var(--main-color);

}



.radio .checkmark:after {

    content: "";

    position: absolute;

    display: none;

}



.radio input:checked ~ .checkmark:after {

    display: block;

}



.radio .checkmark:after {

 	top: 5px;

	left: 5px;

	width: 8px;

	height: 8px;

	border-radius: 50%;

	background: white;

}





/*The checkbox*/

.checkbox {

	display: inline-block;

	position: relative;

	padding-left: 35px;

	margin-bottom: 12px;

	cursor: pointer;

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

	font-size:17px;

	border-radius:6px;

	color:#666;

	width: 100%;

}



.checkbox input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;

}





.checkbox .checkmark {

  position: absolute;

  top: 0;

  left: 0;

  height: 25px;

  width: 25px;

  background-color: #fff;

	border:solid 1px #ccc;

}



.checkbox:hover input ~ .checkmark {

  background-color: #C9C9C9;

}



.checkbox input:checked ~ .checkmark {

	background-color: var(--main-color) !important;

	border:solid 1px var(--main-color);

}



.checkbox .checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



.checkbox input:checked ~ .checkmark:after {

  display: block;

}



.checkbox .checkmark:after {

  left: 9px;

  top: 5px;

  width: 8px;

  height: 12px;

  border: solid white;

  border-width: 0 3px 3px 0;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}



.gototop{

	width: 50px;

	height: 50px;

	line-height: 50px;

	font-family: verdana;

	text-align: center;

	background: #4A5866;

	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 20px 0 rgba(0, 0, 0, 0.19);

	color: #fff;

	position: fixed;

	bottom: 100px;

	right: 30px;

	border-radius: 50%;

	text-decoration: none;

	cursor: pointer;

	display: none;

	z-index: 50;

	border: 1px solid #FFFFFF;

	opacity: 0.7;

	filter: alpha(opacity=70); /* For IE8 and earlier */

	font-size: 13px;

}

.gototop i {

	font-size:20px;

	padding-top:13px;

	}





#overlay {

	position: fixed;

	display: none;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background-color: rgba(0,0,0,0.7);

	z-index: 51;

	cursor: pointer;

}





header {

	display: block;

	width: 100%;

	padding: 0;

	position: relative;

    z-index: 50;

	background-color: #fff;

	border-top:solid 5px var(--main-color);

}





.header {

	display: flex;

	justify-content: space-between;

	width: var(--main-width);

	padding: 0px;

	margin: auto;

	flex-wrap:nowrap;

}

@media screen and (max-width: 1200px) {

	.header {

	width: 95%;

}

}

@media screen and (max-width: 1023px) {

	.header {

		flex-wrap: wrap;

	}

}



.bars {

	display: none;

}

@media screen and (max-width: 1023px) {

	.bars {

	display:block;

		width: 60px;

		order:1;

		padding: 10px;

		font-size: 28px;

	}

}

.header .logo {

	display: block;

	width: 250px;

	padding: 10px 0;

	order:1;

}

@media screen and (max-width: 1023px) {

	.header .logo {

	width: auto;

		order:2;

}

}

.header .logo img {

	width: 100%;

	display: block;

}

@media screen and (max-width: 1023px) {

.header .logo img {

width: auto;

    display: block;

    height: 40px;

    margin: auto;

}

}

.header-search {

	width: 50%;

	padding: 20px 15px 0;

	order:2;

}

@media screen and (max-width: 1023px) {

	.header-search {

		order:4;

		width:110%;

		background-color: #f5ede0;

		margin: 0 -20px;

		padding: 10px 15px;

	}

}

.search-bar {

	display: grid;

  gap: 0px;

  grid-template-columns: 85% auto;

	border:solid 2px #daab29;

	border-radius:30px;

	padding: 0;

	margin: 0;

	background-color: #fff;

}

@media screen and (max-width: 500px) {

	.search-bar {

  grid-template-columns: 75% auto;;

}

}

.search-bar input,

.search-bar input:focus {

	border:none;

	padding: 5px;

	margin-left: 15px;

}

.search-bar input[type=submit] {

	border:none;

	background-color: #daab29;

	color:#fff;

	font-weight: 500;

	padding: 5px;

	border-radius:20px;

	cursor: pointer;

	width: 100%;

	margin: 0;

	transition: all .3s;

}

.search-bar input[type=submit]:hover {

	background-color: #AA8812;

}

.keyword {

	margin-left: 30px;

	font-size: 15px;

	font-weight: 500;

}

@media screen and (max-width: 1023px) {

	.keyword {

		display: none;

	}

}

.keyword,

.keyword a {

	color:var(--main-color);

}

.keyword a {

	display: inline-block;

	padding: 0 8px;

}

.keyword a:hover {

	text-decoration: underline;

}

.herder-right {

	text-align: right;

	padding: 10px 0 0 10px;

	order: 3;

}



.herder-right .top-nav a {

	padding: 10px 15px 15px;

	color:#666;

	display: inline-block;

}

.badge {

  position: absolute;

 padding: 0px 6px;

  border-radius: 50%;

  background-color: white;

  color: var(--main-color);

border:solid 1px var(--main-color);

	font-size: 15px;

    line-height: 18px;

    margin: -6px;

}

.herder-right .top-nav a:hover {

	color:var(--main-color);

}

.herder-right .top-nav i {

	color:var(--main-color);

	font-size: 20px;

	transition: all .3s;

}

@media screen and (max-width: 1023px) {

	.herder-right .top-nav i {

		font-size: 28px;

	}

}

.herder-right .top-nav i:hover {

	color:#7D5F4D;

}

.herder-right .top-nav div.a3 {

	display: inline-block;

}



.herder-right .bottom-nav a {

	color:#fff;

	padding: 6px 20px;

	margin: 0;

	width: 50%;

	display: inline-block;

	text-align: center;

}



.herder-right .bottom-nav a.a1,

.alink a.a1{

	background-color: var(--main-color);

}

.herder-right .bottom-nav a.a1:hover,

.alink a.a1:hover {

	background-color: var(--main-colorLighter);

}

.herder-right .bottom-nav a.a2,

.alink a.a2 {

	background-color: #FFBB00;

}

.herder-right .bottom-nav a.a2:hover,

.alink a.a2:hover {

	background-color: #f1b204;

}

.herder-right .top-nav div.a3 span {

	padding-right: 10px;

}

@media screen and (max-width: 1023px) {

.herder-right .bottom-nav a.a1,

.herder-right .bottom-nav a.a2,

.herder-right .top-nav div.a3 {

	display: none;

	}

}



/*手機板側邊選單*/

.alink {

	display: block;

	width: 100%;

}

.alink a {

	display: inline-block;

	width: 50%;

	text-align: center;

	padding: 6px;

}



.sidenav {

	height: 100%;

	width: 0;

	position: fixed;

	z-index: 99;

	top: 0;

	left: 0;

	background-color:  #4d4d4d;

	overflow-x: hidden;

	transition: 0.5s;

	padding-top: 60px;

	padding-bottom: 100px;

	box-shadow: -8px 0px 8px rgba(0,0,0,0.25);

}



.sidenav .closebtn {

    position: absolute;

    top: 0;

    right: 20px;

    font-size: 32px;

    margin-left: 50px;

}

.sidenav a {

	color: #FFFFFF;

	text-decoration: none;

}

.sidenav .mb {

	display: flex;

	color:#fff;

	padding: 0 0 15px 40px;

	margin-top: -20px;

}

.sidenav .mb i {

	font-size: 58px;

	padding-right: 15px;

	padding-top: 8px;

}

.sidenav .mb span {

	display: block;

	padding-bottom: 6px;

}

.sidenav .mb a {

	color:#fff;

	display: inline-block;

	padding: 0px 20px;

	border-radius:5px;

	border:solid 1px #fff;

	text-align: center;

	margin-right: 8px;

}



.sidenav .store-logo {

	display: block;

	background-color: #fff;

	text-align: center;

}

.sidenav .store-logo img {

	width: 50%;

	height: auto;

	display: block;

	margin: auto;

}



.sidenav .title {

	display: block;

	padding: 10px 40px;

    background-color: #353535;

    color: #fff;

    font-size: 20px;

    border-bottom: solid 1px #6d6d6d;

	text-align: center;

}

.sidenav ul {

	list-style-type: none;

	margin: 0px;

	padding: 0px;

}

.sidenav ul ul {

	margin: 0px;

	padding: 0px;

	display: none;

}

.sidenav ul ul ul {

	margin: 0px 0px -1px;

	padding: 0px;

	display: none;

}

.sidenav li {

	display: block;

	border-bottom-width: 1px;

	border-bottom-style: solid;

	border-bottom-color: #5f5f5f;

}

.sidenav li li {

	background-color: #FFFFFF;

	border-bottom: 1px solid #E7E7E7;

	color: #333;

}

.sidenav li li li {

	background-color: #f9c7d2;

}

.sidenav li a {

	padding: 8px 20px;

	color: #FFF;

	text-decoration: none;

	display: block;

	padding-left: 45px;

}

.sidenav li li a {

	color: #666666;

}

.sidenav li li li a {

	color: #936b6b;

	padding-left: 45px;

}

.sidenav li a:hover, .sidenav li a:active, .sidenav li a:focus {

	color: #FFFFFF;

	background-color: #595959;

}

.sidenav li li a:hover, .sidenav li li a:active, .sidenav li li a:focus {

	color: #333333;

	background-color: #FFFFFF;

}



.sidenav li i {

	padding-right: 6px;

}

.sidenav li i.fa-angle-down {

	float: right;

	padding-top: 6px;

	padding-right: 0px;

}

.sidenav li img {

	width: 24px;

	height: auto;

	padding-right: 6px;

	margin-bottom: -3px;

	}





@media screen and (max-height: 450px) {

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

}

/*手機版側邊選單結束*/



main {

background-color: #ebe8db;

}



.navbanner {

	display: flex;

	justify-content: space-between;

	width: var(--main-width);

	margin: 0px auto;

}

@media screen and (max-width: 1200px) {

	.navbanner {

		width: 95%;

	}

}

@media screen and (max-width: 1023px) {

	.navbanner {

		display:block;

		width: 100%;

	}

}



.nav {

	display: block;

	width: 225px;

	height: 473px;

	background-color: #4d4d4d;

	padding: 5px 0;

	z-index: 90;

}

@media screen and (max-width: 1200px) {

	.nav {

		width: 175px;

		height: 385px;

		font-size: 15px;

	}

}

@media screen and (max-width: 1023px) {

	.nav {

	display: none;

	}

}

.dropbtn {

	display: block;

  color: white;

  padding: 3px 16px;

	width: 225px;

	transition: all .3s;

	cursor: pointer;

}

@media screen and (max-width: 1200px) {

	.dropbtn {

		width: 175px;

	}

}

.dropbtn:hover {

	  background-color: #595959;

}



.dropright {

  position: relative;

  display: inline-block;

}



.dropright-content {

  display: none;

  position: absolute;

  min-width: 160px;

  left: 225px;

  top:0;

  z-index: 99;

	background-color: #fff;

}

@media screen and (max-width: 1200px) {

	.dropright-content {

		left: 175px;

	}

}

.dropright-content a {

  color: black;

  padding: 3px 16px;

  text-decoration: none;

  display: block;

}



.dropright-content a:hover {

	background-color: #CFCFCF;

}



.dropright:hover .dropright-content {

  display: block;

}



.dropright:hover .dropbtn {

  background-color: #737373;

}





.banner {

	width: 82%;

	display: block;

	padding: 0;

	margin: 0;

}

@media screen and (max-width: 1023px) {

	.banner {

		width: 100%;

	}

}





.main-container {

	width: var(--main-width);

	margin: auto;

	padding: 0 0 80px;

	min-height: 500px;

}

@media screen and (max-width: 1200px) {

	.main-container {

		width: 95%;

		padding: 0 0 50px;

	}

}



.banner-two {

	display: grid;

	grid-template-columns: 49% 49%;

	justify-content: space-between;

	padding: 25px 0;

}

@media screen and (max-width: 767px) {

	.banner-two {

	display: block;

		padding: 10px 0 20px;

}

}



.banner-four {

	display: grid;

	grid-template-columns: 24% 24% 24% 24%;

	justify-content: space-between;

	padding: 25px 0;

}

@media screen and (max-width: 767px) {

	.banner-four {

	grid-template-columns: 49% 49%;

		padding: 10px 0 30px;

}

}

.banner-two img,

.banner-four img {

	width: 100%;

}

.banner-two img:hover,

.banner-four img:hover {

	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}





.subject-pd-box {

	display: grid;

	grid-template-columns: 4.8% 26.4% auto;

	width: 100%;

	background-color: white;

	border-radius:8px;

	margin-bottom: 30px;

}

@media screen and (max-width: 767px) {

	.subject-pd-box {

		display: block;

	}

}

.subject-topic {

	font-size: 32px;

	line-height: normal;

	color:white;

	font-family: "Noto Serif TC", serif;

  font-optical-sizing: auto;

  font-weight: 668;

  font-style: normal;

	background-color: var(--main-color);

	border-radius:8px 0 0 8px;

	text-align: center;

	padding-top: 15px;

}

@media screen and (max-width: 1200px) {

	.subject-topic {

		padding-top: 8px;

		font-size: 24px;

	}

}

@media screen and (max-width: 767px) {

	.subject-topic {

		padding: 8px;

		letter-spacing: 5px;

		border-radius:8px 8px 0 0;

	}

}

.subject-img {

	display: block;

	width: 100%;

  padding-top: 100%; 

  position: relative;

	overflow: hidden;

}

@media screen and (max-width: 767px) {

	.subject-img {

		display: none;

	}

}

.pd-img {

	width: 100%;

  padding-top: 100%; 

  position: relative;

	overflow: hidden;

	margin-bottom: 5px;

	background-color: white;

}



.subject-img img,

.pd-img img {

	position:  absolute;

	width: 100%;

	height: 100%;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  text-align: center;

	transition: all .3s;

	object-fit: cover;

}

.pd-img img {

	object-fit: contain;

}

.subject-img img:hover {

	width: 106%;

	height: 106%;

	top: -3%;

  left: -3%;

}

.pd-img img:hover {

	opacity: .85;

}

.subject-pd-list {

	display: flex;

	justify-content: space-evenly;

	padding: 25px 0 0;

	width: 100%;

}

.subject-pd-list .pd-item {

	width: 21%;

	line-height: normal;

}



@media screen and (max-width: 1200px) {

	.subject-pd-list .pd-item {

	font-size: 13px;

		padding-bottom: 10px;

}

}

@media screen and (max-width: 767px) {

	.subject-pd-list {

	flex-wrap: wrap;

		padding: 0;

}

	.subject-pd-list .pd-item {

	width: 40%;

		font-size: 15px;

		padding: 15px 0;

}

}

.subject-pd-list .pd-item a {

	color:#4A4A4A;

}



.subject-pd-list .pd-item a:hover {

	color:var(--main-color);

}

.price {

	color:#b91b00;

	font-size: 36px;

	font-family: "Grenze Gotisch", serif;

  font-optical-sizing: auto;

  font-weight: 500;

  font-style: normal;

	padding-right: 5px;

}

@media screen and (max-width: 1200px) {

	.price {

	font-size: 24px;

		padding-right: 3px;

}

}

.price-sm {

	color:#b9b9b9;

	text-decoration:line-through;

	padding: 0 0 0 15px;

}

@media screen and (max-width: 1200px) {

	.price-sm {

	padding: 0 0 0 10px;

}

}

.more {

	display: block;

	text-align: right;

	margin-bottom: -15px;

	z-index: 10;

	position: relative;

}

@media screen and (max-width: 1200px) {

	.more {

	margin-bottom: -10px;

}

}

@media screen and (max-width: 767px) {

		.more {

	margin-bottom: -38px;

}

}

.more a {

	display: inline-block;

	font-size: 20px;

	padding: 2px 30px;

	color:white;

	background-color: #DAAB29;

	border-radius:20px;

}

@media screen and (max-width: 1200px) {

	.more a {

	font-size: 16px;

		padding: 0px 15px;

}

}

@media screen and (max-width: 767px) {

		.more a {

	background-color:transparent;

}

}

.more a:hover {

	background-color: var(--main-colorDarker);

}

.more a.bg-green {

	background-color: var(--main-subcolor);

}

.more a.bg-green:hover {

	background-color: #5bad57;

}





footer {

	display: block;

	width: 100%;

	background-color: white;

}

.footer {

	width: var(--main-width);

	margin: auto;

	display: flex;

	padding: 30px 0;

	justify-content: space-between;

}

@media screen and (max-width: 767px) {

	.footer {

		display: block;

		font-size: 15px;

	}

}

.footer-logo {

	width: 13%;

	display: block;

	padding: 0 30px 0 0;

	border-right:solid 1px #999;

}

@media screen and (max-width: 1023px) {

	.footer-logo {

		display: none;

	}

}

.footer-logo img {

	width: auto;

	height: 80px;

}

.footer-menu {

	display: block;

	padding: 0; 

	width: 50%;

}

@media screen and (max-width: 1023px) {

	.footer-menu {

		width: 70%;

	}

}

@media screen and (max-width: 767px) {

	.footer-menu {

		width: 100%;

		text-align: center;

	}

}



.footer-menu p {

	font-size: 15px;

}

.footer-menu a {

	display: inline-block;

	padding: 3px 15px 3px 0;

	color:#666;

}



.footer-menu a:hover {

	color:var(--main-color);

}

.footer-menu span {

	padding-left: 10px;

}

@media screen and (max-width: 1023px) {

	.footer-menu span {

		display: block;

		padding: 0;

	}

}

.sns {

	width: 26.4%;

	text-align: right;

}

@media screen and (max-width: 1023px) {

	.sns {

	width: 30%;

}

}

@media screen and (max-width: 767px) {

	.sns {

	width: 100%;

	text-align: center;

}

}



.sns a {

	display: inline-block;

	padding: 0 5px;

}

.sns img {

	width: 65px;

	height:65px;

}

@media screen and (max-width: 1249px) {

	.sns img {

	width: 45px;

	height:45px;

}

}

.text-warning {

	display: block;

	text-align: center;

	color:white;

	background-color: var(--main-color);

	padding: 30px 20px 80px;

}

@media screen and (max-width: 1023px) {

	.text-warning {

		font-size: 15px;

	}

}

.text-warning span {

	font-size: 24px;

	display: block;

}







.sub-banner,

ul.breadcrumb {

	display: block;

	width: var(--main-width);

	margin: 0 auto;

}

@media screen and (max-width: 1249px) {

	.sub-banner,

	ul.breadcrumb {

	width: 100%;

	}

}

.sub-banner img {

	display: block;

	width: 100%;

}





ul.breadcrumb {

  padding: 8px 16px;

  list-style: none;

  background-color: #E0DBCB;

	margin-bottom: 15px;

}

@media screen and (max-width: 1249px) {

	ul.breadcrumb {

  padding: 5px 16px;

	}

}

ul.breadcrumb li {

  display: inline;

  font-size: 15px;

}

ul.breadcrumb li+li:before {

  padding: 8px;

  color: black;

  content: "/\00a0";

}

ul.breadcrumb li a {

  color: var(--main-color);

  text-decoration: none;

}

ul.breadcrumb li a:hover {

  color: var(--main-color);

  text-decoration: underline;

}



.store-banner,

.store-banner img {

	display: block;

	width: 100%;

	padding: 0;

	margin: 0 0 30px;

}



.pd-list,

.pd-list-store {

	display: grid;

	justify-content:space-between;

	gap: 60px 25px;

	padding: 0 0 30px;

	font-size: 16px;

}

.pd-list {

	grid-template-columns: 18.4% 18.4% 18.4% 18.4% 18.4%;

}

.pd-list-store {

	grid-template-columns: 23% 23% 23% 23%;

}

@media screen and (max-width: 1023px) {

	.pd-list {

		grid-template-columns: 22.5% 22.5% 22.5% 22.5%;

	}

	.pd-list-store {

	grid-template-columns: 31% 31% 31%;

}

}

@media screen and (max-width: 500px) {

	.pd-list,

	.pd-list-store {

		grid-template-columns: 47% 47%;

	}

}

.pd-list .pd-item a,

.pd-list-store .pd-item a{

	color:#606060;

}

.pd-list .pd-item a:hover,

.pd-list-store .pd-item a:hover {

	color:var(--main-color);

}

.pd-name {

	height: 55px;

	overflow: hidden;

}





.pagination {

	display: block;

	text-align: center;

max-width: 1200px;

	margin: auto;

	padding: 90px 0;

}
.pagination li {
	display: inline;
}

.pagination a {

  color: black;

  padding: 8px 16px;

  text-decoration: none;

  transition: background-color .3s;

	background-color: white;

}

@media screen and (max-width: 320px) {

	.pagination a {

  padding: 4px 10px;

}

}

.pagination a:hover {

	background-color: #e1d2b8;

}



.pagination a.active {

  background-color: var(--main-color);

  color: white;

	border:solid 1px var(--main-color);

}





.store-main,

.mb-main {

	display: flex;

	justify-content: flex-start;

	width: 100%;

	margin: auto;

	padding: 0 0 20px;

}

@media screen and (max-width: 1023px) {

	.store-main,

	.mb-main {

	display: block;

	}

}

.store-content-left,

.mb-content-left {

	display: block;

	width: 20%;

	padding: 0 25px 0 0;

}

@media screen and (max-width: 1023px) {

	.store-content-left,

	.mb-content-left {

	display: none;

	}

}

.store-logo {

	color:#333;

	text-align: center;

	background-color: white;

	padding-bottom: 10px;

}

.store-logo img {

	width: 100%;

	display: block;

}

.store-logo a {

	color:#333;

}





.mb-side-title {	

	display: block;

	background-color:var(--main-color);

	padding: 6px 15px;

	color:#fff;

	text-align: center;

}



.store-side-menu,

.mb-side-menu {

	display: block;

	background-color: white;

	border-top:solid 1px #ccc;

}

.mb-side-menu {

	border-top:none;

}

.store-side-menu ul,

.mb-side-menu ul {

	margin: 0;

	padding: 0;

	list-style: none;

}

.store-side-menu ul ul,

.mb-side-menu ul ul {

	display: none;

}

.store-side-menu li,

.mb-side-menu li {

	padding: 0;

	border-bottom: solid 1px #ccc;

}

.store-side-menu li i {

	float: right;

	padding-top: 6px;

}

.store-side-menu li li,

.mb-side-menu li li {

	border-bottom: none;

	background-color: #e0dbcb;

}

.store-side-menu li a,

.mb-side-menu li a {

	color:#393939;

	display: block;

	padding: 6px 20px;

}



.store-side-menu li li a,

.mb-side-menu li li a {

	color:#7b7b7b;

}



.mb-side-menu li a:hover {

	color:#393939;

	background-color: #e0dbcb;

}

.store-side-menu li li a:hover,

.mb-side-menu li li a:hover {

	color:#333;

}





.pd-main,

.mb-content-right {

	width: 80%;

	display: block;

}

@media screen and (max-width: 1023px) {

	.pd-main,

	.mb-content-right {

	width: 100%;

}

}

.pd-content {

	display: flex;

	justify-content: space-between;

	padding: 0 0 20px;

}



.pd-img-L {

	width: 44%;

}

.pd-img-L img {

	width: 100%;

	height: auto;

	display: block;

}







.pd-content-right {

	width: 53%

}

@media screen and (max-width: 600px) {

	.pd-content,

	.pd-img-L,

	.pd-content-right {

		display:block;

		width: 100%;

	}

}



.pd-content-right h1 {

	font-size: 24px;

	margin: 0 0 15px 0;

	color:#3E3733;

}

.pd-content-right .intro {

	display: block;

	font-size: 16px;

}



.pd-content-right .btn {

	display: block;

	padding: 8px 0;

}

.pd-content-right .btn i {

	padding-right: 6px;

}

.pd-content-right .btn a {

	display:inline-block;

	padding: 8px 30px;

	margin-right: 8px;

	border-radius:6px;

}

.pd-content-right .btn a.link1 {

	background-color: #FFBB00;

	color:#fff;

}

.pd-content-right .btn a.link1:hover {

	background-color: #e6a800;

}

.pd-content-right .btn a.link2 {

	background-color: #EA643E;

	color:white;

}

.pd-content-right .btn a.link2:hover {

	background-color: #e85830;

}



.price-block {

	display: grid;

	gap:10px 0;

	grid-template-columns: 90px auto;

	border: solid 1px #666;

	border-left:none;

	border-right:none;

	padding: 15px 0;

	margin: 15px 0;

}

.price-block b {

	color:#000;

}

.price-block .price {

	line-height: 15px;

	font-family: "Outfit", sans-serif;

}

.price-block p {

	margin: 5px 0;

}

.price-block ul {

	list-style: none;

	display: block;

	width: 100%;

	margin: 0;

	padding: 0;

}

.price-block li {

	display: inline;

}



.price-block li+li:before {

  padding:  0 6px;

  content: "/\00a0";

}



.options {

	display: block;

	padding: 15px 0;

}

.options a,

.options label {

	display: inline-block;

	padding: 3px 25px;

	border-radius:5px;

	border:solid 1px #5D4E45;

	color:#5D4E45;

	margin-right: 6px;

}

.options a:hover,

.options label:hover {

	background-color:#d4cac4;

}

.options a:focus,

.options a.select,

.options label:focus {

	color:white;

	background-color:#5D4E45;

}



.title-bar {

	display: block;

	padding: 8px 15px;

	background-color: #D0C8B0;

	font-size: 24px;

	color:#333;

}

.pd-detail {

	display: block;

}

.pd-detail img,

.pd-detail table {

	max-width: 100%;

	height: auto;

}



.cart-store,

.order-store {

	width: 100%;

	display: block;

	margin: 30px 0;

	box-shadow: 2px 4px 6px #ccc;

}

@media screen and (max-width: 600px) {

	.cart-store,

.order-store {

	font-size: 16px;

	}

}

.order-store {

	margin: 0 0 50px;

}

.store-name {

	display: block;

	width: 100%;

	background-color: #d1cfc7;

	color:#333;

	padding: 8px 15px;

}

.store-name a {

	color:#333;

}

.cart-pd-list,

.order-pd-list {

	display: block;

	padding: 0px 30px;

	background-color: white;

}

@media screen and (max-width: 600px) {

	.cart-pd-list,

	.order-pd-list {

	padding: 0px 20px;

}

}

.cart-pd,

.order-pd {

	width: 100%;

	display: grid;

	grid-template-columns: 70px auto 180px 120px 120px 120px 80px;

	gap: 0 25px;

	align-items: center;

	border-bottom: solid 1px #ccc;

	padding: 15px 0;

}

.order-pd {

	width: 100%;

	grid-template-columns: 70px auto 120px 100px 60px 100px;

}

@media screen and (max-width: 1249px) {

	.cart-pd {

		grid-template-columns: 50px auto 120px 70px 70px 70px 80px;

	}

	.order-pd {

		grid-template-columns: 50px auto 120px 70px 70px 70px;

	}

}

@media screen and (max-width: 1023px) {

	.cart-pd,

	.order-pd {

		grid-template-columns: 80px auto auto auto 40px;

		gap: 0 10px;

		align-items: start;

	}

		.order-pd {

		grid-template-columns: 80px auto auto auto;

	}

	.cart-pd div,

	.order-pd div {

		padding: 3px 0;

	}

}

.cart-pd .item1 img,

.order-pd .item1 img {

	width: 70px; 

	height: 70px;

	object-fit: contain;

}

@media screen and (max-width: 1023px) {

	.cart-pd .item1 img,

	.order-pd .item1 img {

	width: 80px;

	height: 80px;

}

}

.cart-pd .item4,

.cart-pd .item6,

.order-pd .item4,

.order-pd .item6 {

	text-align: right;

}

.cart-pd .item5,

.cart-pd .item7,

.order-pd .item5 {

	text-align: center;

}

.cart-pd .item7 a {

	color:#4F4F4F;

}

.cart-pd .item7:hover,

.cart-pd .item7 a:hover{

	color:var(--main-color);

	cursor: pointer;

}

.cart-pd .item6,

.order-pd .item6 {

	color:#b91b00;

}



@media screen and (max-width: 1023px) {

.cart-pd .item1,

	.order-pd .item1 {

  grid-row-start: 1;

  grid-row-end: 3;



}

.cart-pd .item2{

  grid-column-start: 2;

  grid-column-end: 4;

}



	.order-pd .item2 {

  grid-column-start: 2;

  grid-column-end: 5;

}



.cart-pd .item3 {

  grid-column-start: 4;

  grid-column-end: 6;

}



	.order-pd .item3 {

  grid-column-start: 4;

  grid-column-end: 5;

}



}

@media screen and (max-width: 600px) {

	.cart-pd .item1,

	.order-pd .item1 {

  grid-row-start: 1;

  grid-row-end: 4;

}

.cart-pd .item2,

.cart-pd .item3,

	.orderpd .item2,

.order-pd .item3 {

  grid-column-start: 2;

  grid-column-end: 6;

}

}





.cart-pd select {

	border:solid 1px #ccc;

	padding: 2px 5px;

}

.cart-pd input,

.cart-pd input:focus {

	border:solid 1px #ccc;

	padding: 2px 5px;

	width: 60px;

}

.total-price {

	display: flex;

	justify-content: flex-end;

	background-color: #E6E5E4;

	width: 100%;

	margin-top: -1px;

}

.total-price .sum {

	text-align: right;

	padding: 10px 15px;

}

.total-price .sum span {

	color:#b91b00;

	padding: 0 15px;

	font-size: 24px;

	font-weight: 500;

}

.total-price .btn a {

	display: block;

	background-color: #FFCC00;

	padding: 16px 35px;

	color:#333;

	width: 100%;

	text-align: center;

}

.total-price .btn a:hover {

	background-color: #ffbc00;

}



.topic {

	display: block;

	font-size: 24px;

	color:#000;

	padding-top: 30px;

}

@media screen and (max-width: 1023px) {

	.topic,

	.order-topic {

	padding-top: 6px;

}

}

.order-topic {

	display: flex;

	justify-content: space-between;

	color:#000;

	padding-bottom: 10px;

	font-size: 20px;

}

.order-topic a {

	display: inline-block;

	font-size: 15px;

	color:var(--main-color);

}

.order-btn {

	display: block;

	padding: 15px 10px;

	background-color: white;

	border-top:solid 1px #ccc;

	margin-top: -1px;

}

.order-btn span {

	font-size: 20px;

	display: inline-block;

	padding: 3px 20px;

	color:#b91b00;

}

.order-btn a {

	display: inline-block;

	float: right;

	color:#b91b00;

	padding: 3px 15px;

	border:solid 1px #b91b00;

	margin: 0 10px;

}

.order-btn a:hover {

	background-color: #b91b00;

	color:white;

}



.send-info {

	display: block;

	background-color: white;

	padding: 20px 30px 30px;

	border-top: solid 1px #ccc;

	margin-top: -1px;

}

.send-info .topic {

	margin: 0 0 15px;

}

.send-info label {

	display: inline-block;

	width:40%;

}

@media screen and (max-width: 767px) {

	.send-info label {

	display: block;

	width:100%;

		padding: 10px 0;

}

}

.send-info input[type=text],

.send-info input[type=tel] {

	border:solid 1px #ccc;

	border-radius:5px;

	width: 80%;

	margin-left: 15px;

	padding: 3px 8px;

}

.send-info input[type=text]:focus,

.send-info input[type=tel]:focus {

	border:solid 1px var(--main-color);

	padding: 3px 15px;

	width: 80%;

}

@media screen and (max-width: 767px) {

	.send-info input[type=text],

.send-info input[type=tel],

	.send-info input[type=text]:focus,

.send-info input[type=tel]:focus {

	width: 100%;

	margin-left:0;

}

}



.send-info textarea {

	width: 100%;

	height: 90px;

	border:solid 1px #ccc;

}

.send-info textarea:focus {

	border:solid 1px var(--main-color);

}



.tab {

  overflow: hidden;

	margin-top: 20px;

}





.tab .tablinks,

.tab .tablinks-bill {

  float: left;

  border: solid 1px #ccc;

  outline: none;

  cursor: pointer;

  padding: 6px 16px;

  transition: 0.3s;

  font-size: 17px;

	background-color: #EFEFEF;

	margin-right: 3px;

}



.tab .tablinks:hover,

.tab .tablinks-bill:hover {

  background-color: #525252;

	color:white;

}



.tab .tablinks.active,

.tab .tablinks-bill.active {

  background-color: var(--main-color);

	color:white;

}



.tabcontent,

.billcontent {

  display: none;

  padding: 6px 20px;

	background-color: #EFEFEF;

	margin-top: 5px;

}

.tabcontent .price {

	font-size: 2em;

	line-height: 25px;

}

.tabcontent label,

.billcontent label {

	display: block;

}

.tabcontent select,

.billcontent select {

	width: 150px;

	border:solid 1px #ccc;

	padding: 3px 6px;

}

@media screen and (max-width: 500px) {

	.tabcontent select,

	.billcontent select {

	width: 49%;

	}

}

.tabcontent select:focus,

.billcontent select:focus {

	padding: 3px 6px;

}

.tabcontent input[type=text],

.tabcontent input[type=text]:focus,

.billcontent input[type=text],

.billcontent input[type=text]:focus {

	width: 450px;

	padding: 3px 6px;

}

@media screen and (max-width: 1023px) {

	.tabcontent input[type=text],

.tabcontent input[type=text]:focus,

	.billcontent input[type=text],

.billcontent input[type=text]:focus {

	width: 100%;

	margin: 5px 0;

}

}

.tabcontent a,

.billcontent a {

	display: inline-block;

	color:var(--main-color);

	padding: 3px 25px;

	margin-left: 20px;

	background-color: white;

	border:solid 1px #ccc;

}

.tabcontent a:hover,

.billcontent a:hover {

	background-color: var(--main-color);

	color:white;

}



.pay-info,

.settlement {

	display: block;

	background-color: white;

	padding: 30px 20px;

	margin: 30px 0;

	box-shadow: 3px 6px 6px #ccc;

}

.pay-info input {

	margin-right: 10px;

}

.pay-info span {

		color:var(--main-color);

	}

@media screen and (max-width: 600px) {

	.pay-info span {

		display: block;

	}

}



.settlement {

	text-align: right;

}

.settlement p {

	margin: 0;

	padding: 5px 0;

}

.settlement span {

	display: inline-block;

	color:#b91b00;

	width: 100px;

}

.settlement .total {

	border-top: solid 1px #ccc;

	padding-top: 10px;

	font-weight: 500;

	font-size: 24px;

}

.settlement .total span {

	font-size: 32px;

}



.cart-btn {

	display: block;

	padding: 10px 0;

	text-align: right;

}

.cart-btn button {

	background-color: var(--main-color);

	border:none;

	outline: none;

	border-radius:6px;

	color:white;

	padding: 10px 60px;

	font-size: 24px;

}

.cart-btn button:hover {

	background-color: var(--main-colorDarker);

}



.order-info {

	display: grid;

	grid-template-columns: 150px auto;

	grid-gap: 10px;

	background-color: white;

	padding: 20px 30px;

	box-shadow: 2px 4px 6px #ccc;

	margin-top: 20px;

}

@media screen and (max-width: 600px) {

	.order-info {

		grid-template-columns: 100px auto;

		padding: 20px;

	}

}





.login-content {

	display:grid;

	grid-template-columns: auto 450px;

	background-color: white;

	border-radius:10px;

	padding: 30px 40px;

	width: 860px;

	margin: 50px auto 30px;

	align-items: center;

}

@media screen and (max-width: 900px) {

	.login-content {

	display:block;

	width: 80%;

}

}

@media screen and (max-width: 600px) {

	.login-content {

	width: 95%;

	margin: 30px auto 20px;

		padding: 30px 15px;

}

}

.login-logo,

.join-logo {

	display: block;

	text-align: center;

	font-size: 28px;

	letter-spacing: 6px;

	padding: 0px 20px;

}

.login-logo img {

	width: 200px;

	display: block;

	margin: -50px auto 20px;

}

.join-logo img {

	width: 200px;

	margin: 20px auto;

	display: block;

}

@media screen and (max-width: 900px) {

	.login-logo img,

	.join-logo img {

	width:150px;

	margin: 10px auto 30px;

}

}





.login {

	display: block;

	margin: 20px auto;

	padding-left: 30px;

	border-left:solid 1px #ccc;

}

@media screen and (max-width: 900px) {

	.login {

	padding: 20px 0 0;

	border-left:none;

		border-top:solid 1px #ccc

	}

}

.login h2 {

	display: block;

	font-size: 24px;

	font-weight: 500;

	color:#333;

	text-align: center;

}

.login div,

.join div {

	display: block;

	padding: 8px;

}

.login label,

.join label {

	display: block;

	color:#333;

}

.login .input-code {

	display: flex;

	padding: 0;

	margin: 0;

}

.login .input-code img {

	width: 120px;

	display: block;

}

.login input,

.join input,

.form-right input {

	background-color: #EBEBEB;

	padding: 8px;

	border:solid 1px #EBEBEB;

}

.login input:focus,

.join input:focus,

.form-right input:focus {

	background-color: #EBEBEB;

	padding: 8px;

	border:solid 1px var(--main-color);

}

.login .checkbox .checkmark {

  background-color: #EBEBEB;

	border-color:  #EBEBEB;

}

.login a.forget {

	color:#333;

	float: right;

	display: inline-block;

	margin: -37px 15px 0;

    z-index: 2;

    position: relative;

}

.login a.forget:hover {

	color:var(--main-color);

}

.login a.join-link {

	display: block;

	color:#666;

	text-align: center;

	padding: 5px;

}

.login button {

	display: block;

	width: 100%;

	border:none;

	border-radius:5px;

	color:white;

	background-color: var(--main-color);

	padding: 8px 10px;

}



.signin-other {

	display: block;

	border-top:solid 1px #ccc;

	padding: 25px 0 0 ;

	text-align: center;

}

.signin-other a {

	display: inline-block;

	padding: 6px 10px;

	color:#5B5B5B;

	font-size: 15px;

}

.signin-other a:hover,

.login a.join-link:hover {

	color:var(--main-color);

}

.signin-other img {

	padding-right: 6px;

}



.login-footer,

.store-footer {

	display: block;

	text-align: center;

	padding-bottom: 80px;

}





.join-content {

	display:block;

	background-color: white;

	border-radius:10px;

	padding: 30px 40px;

	width: 800px;

	margin: 50px auto 30px;

}



@media screen and (max-width: 850px) {

	.join-content {

		width: 95%;

}

}

@media screen and (max-width: 767px) {

		.join-content {

		padding: 20px 0;

}

}

.join-content h2,

.mb-containt h2 {

	display: block;

	font-size: 24px;

	font-weight: 500;

	color:#333;

	text-align: center;

}

.join-content button,

.mb-containt button {

	display: inline-block;

	border:none;

	border-radius:5px;

	color:white;

	background-color: var(--main-color);

	padding: 8px 40px;

	margin: 30px auto;

	width: 200px;

} 

.join-content button:hover,

.mb-containt button:hover {

	background-color: var(--main-colorDarker);

}



.join {

	display:grid;

	grid-template-columns: auto 80%;

	gap:10px;

	padding: 0 20px;

	width: 100%;

	align-items: center;

}

@media screen and (max-width: 767px) {

	.join {

	display:block;

}

}



.join input[type=tel] {

	width: 60%;

}

@media screen and (max-width:550px) {

	.join input[type=tel] {

	width:100%;

}

}

.join .item1,

.form-right .item1 {

	text-align: right;

}

@media screen and (max-width: 767px) {

	.join .item1,

	.form-right .item1 {

	text-align: left;

}

}

.join .item2 a {

	display: inline-block;

	border:solid 1px var(--main-color);

	color:var(--main-color);

	padding: 6px 15px;

	text-align: center;

	width: 38%;

	margin-left: 2%;

	border-radius:6px;

}

@media screen and (max-width:550px) {

	.join .item2 a {

		width: 100%;

		margin: 6px 0;

	}

}

.join .item2 a:hover {

	color:#fff;

	background-color: var(--main-color);

}





.mb-containt {

	display: block;

	width: 100%;

	background-color: white;

	padding: 30px 40px;

}

@media screen and (max-width:600px) {

	.mb-containt {

	padding: 30px 20px;

}

}

.form-right {

	display:grid;

	grid-template-columns: auto 80%;

	gap:10px;

	padding: 0 20px;

	width: 70%;

	align-items: center;

	margin: auto;

}

@media screen and (max-width:600px) {

	.form-right {

		display: block;

	width: 100%;

		padding: 0 10px;

}

}

.form-right input:disabled {

	background-color: #f5ede0;

    border: solid 1px #d3d3d3;

}

.form-right div {

	padding: 6px 8px;

}

@media screen and (max-width:600px) {

	.form-right div.item1 {

	padding: 8px 0 2px;

}

	.form-right div.item2 {

	padding: 0 0 8px;

}

}



.qa-list {

	display: block;

	margin: 15px auto 30px;

}

.qa {

  background-color: #e9dcc9;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  transition: 0.4s;

	margin-bottom: 1px;

}



.qa-list .active, .qa:hover {

  background-color: #dbcebb;

}



.qa:after {

  content: '\002B';

  color: #777;

  font-weight: bold;

  float: right;

  margin-left: 5px;

}



.qa-list .active:after {

  content: "\2212";

}



.qa-panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

.qa-panel img {

	max-width: 100%;

}





.article {

	display: block;

	margin: 10px auto 30px;

}





.mb-points-list {

	display: grid;

	grid-template-columns: 31.5% 31.5% 31.5%;

	gap: 30px 20px;

	width: 100%;

	justify-content: space-around;

}

@media screen and (max-width:1300px) {

	.mb-points-list {

	grid-template-columns: 48.5% 48.5%;

}

}

@media screen and (max-width:767px) {

	.mb-points-list {

	display: block;

        margin: auto;

}

}

.mb-points-box {

	display: grid;

	grid-template-columns: 80px auto 55px;

	width: 100%;

	background-color: #fff;

	align-items: center;

	margin-bottom: 10px;

}



.mb-points-box .points-img img {

	display: block;

	width: 80px;

	height: 80px;

	object-fit: cover;

}



.mb-points-box p {

	display: block;

	padding: 0 20px;

	margin: 0;

	color:#666;

}

.mb-points-box i {

	display: inline-block;

	font-size: 2em;

	color:#ccc;

}

.mb-points-box span {

	color:#B95600;

	font-weight: 500;

	font-size: 1.5em;

	line-height: normal;

	padding-right: 10px;

}





.points-use-list {

	overflow-x:auto;

}

.points-use-list table {

	border-collapse: collapse;

  border-spacing: 0;

  width: 100%;

  border: 1px solid #ddd;

	background-color: #fff;

}

.points-use-list td,

.points-use-list th {

	padding: 8px;

	text-align: left;

}

.points-use-list tr:nth-child(even){

	background-color: #f2f2f2;

}

.btn-uselink {

	display: block;

	font-size: 18px;

	text-align: right;

	padding-bottom: 20px;

	color:#333;

	margin-top: -48px;

}

@media screen and (min-width:767px) {

.btn-uselink {

	display: none;

}

}

.btn-uselink a {

	display: inline-block;

	padding: 2px 15px;

	color:#fff;

	background-color: var(--main-color);

	border-radius:5px;

}



.store-name-p {

	display: block;

	background-color: #fff;

	color:#666;

	padding: 15px 20px;

}

.store-name-p span {

	font-size: 22px;

	color:#000;

	display: block;

}

.select-points {

	display: block;

	background-color: #fff;

	padding: 20px;

}

.select-points .radio {

	display: block;

}





.btn-center {

	display: block;

	padding: 15px 20px;

	text-align: center;

}

.btn-center button {

	display: inline-block;

	background-color: var(--main-color);

	color:#fff;

	padding: 5px 25px;

	border-radius:5px;

	outline: none;

	border:none;

	margin: auto 5px;

}

.btn-center button:hover {

	background-color: var(--main-colorLighter);

}



.message-box {

	display: block;

	background-color: #fff;

	padding: 20px 30px;

	border-radius:5px;

	width: 90%;

	margin: auto;

}

.a-link {

	display: block;

	text-align: center;

	padding: 20px;

}

.a-link a {

	color:var(--main-color);

}









/*店家後臺*/

.header-store {

	display: flex;

    justify-content: space-between;

    max-width: 600px;

    padding: 10px 0px;

    margin: auto;

    flex-wrap: nowrap;

	align-items: center;

	font-size: 24px;

}



.header-store img {

	display: inline-block;

	width: auto;

	height: 50px;

	padding: 0;

	margin: 0;

}

.header-store i {

	font-size: 24px;

}

.header-store a {

	color:#676767;

}



.main-container-store {

	max-width: 600px;

    margin: auto;

    padding: 0 0 80px;

    min-height: 500px;

}

@media screen and (max-width:767px) {

	.header-store,

	.main-container-store {

    width: 90%;

    margin: auto;

}

}



.menu-block {

	display: flex;

	padding: 20px 30px;

	margin: 10px auto;

	 border-radius: 6px;

    background-color: #fff;

    align-items: center;

    box-shadow: 3px 4px 8px #ccc;

	line-height: normal;

	width: 90%;

}

@media screen and (max-width: 500px) {

	.menu-block {

    padding: 20px;

}

}

@media screen and (max-width: 375px) {

	.menu-block {

	padding: 15px;

		font-size: 15px;

}

}

.menu-block h3 {

	display: block;

	width: 140px;

	color:var(--main-color);

}

@media screen and (max-width: 375px) {

	.menu-block h3 {

	width: 110px;

}

}

.menu-block ul {

	display:block;

	padding: 0 0 0 15px;

	margin: 0;

	border-left:solid 1px #a1c3a7;

	width: 87%;

}



.menu-block li {

	display: inline-block;

	padding: 0;

	margin: 0;

	width: 49%;

}

@media screen and (max-width: 600px) {

	.menu-block li {

	display: block;

	width: 100%;

}

}

.menu-block a {

	display: block;

	padding: 6px;

	color:#333;

	text-decoration: none;

}

.menu-block a:hover{

	color:#C07016;

}

.menu-block a span {

	background-color: #C07016;

	color:#fff;

	padding: 2px 9px;

	border-radius:50%;

	margin-left: 5px;

	font-size: 15px;

}





.store-p-nav {

	display: block;

	text-align: right;

	padding: 20px 0;

	margin: auto;

}

.store-p-nav a {

	color:#fff;

	padding: 5px 20px;

	border-radius:5px;

	margin-left: 10px;

	background-color: #7b644e;

}



.store-p-list-box {

	display: block;

	background-color: #fff;

	border-radius:5px;

	margin: 0 auto 15px;

    border: solid 1px #ccc;

}

.store-p-list-box div:nth-child(even),

.store-table .item-2grid:nth-child(even) {

  background-color: #f2f2f2;

}

.store-p-list-box div {

	display: flex;

	justify-content: space-between;

	padding: 8px 20px;

}

.store-p-list-box a {

	color:var(--main-color);

}



.store-table {

	display: block;

	background-color: #fff;

	border-radius:5px;

	margin: 30px auto;

}

.store-table .item-2grid {

	display: grid;

	grid-template-columns: 120px auto;

	width: 100%;

}



.store-table .item-2grid div {

	padding: 8px 16px;

}



.mbqrcode {

	display: block;

	text-align: right;

	font-size: 36px;

}

.mbqrcode a {

	color:#6F6F6F;

}

@media screen and (min-width: 769px) {

	.mbqrcode {

		display: none;

	}

}



.qrcode {

	display: block;

	max-width: 300px;

	margin: auto;

}

.qrcode img {

	width: 100%;

	display: block;

}



.mb-topic {

	display: block;

	padding: 0 0 20px;

}

.mb-topic h3 {

	font-size: 28px;

	margin: 0;

	padding: 0;

	color:#333;

	font-weight: 400;

}

.mb-topic a {

	display: inline-block;

	float: right;

	color:var(--main-color);

	margin-top: -40px;

}



.btn-line,

a.btn-line {

	display:inline-block;

	outline: none;

	border:solid 1px var(--main-color);

	border-radius:5px;

	margin: 5px;

	padding: 3px 16px;

	background-color:transparent;

	color: var(--main-color) !important;

}



.group-navbtn {

	display: block;

	padding: 0 0 15px;

}

.group-navbtn a {

	display:inline-block;

	outline: none;

	border:solid 1px var(--main-color);

	border-radius:5px;

	margin: 5px;

	padding: 3px 16px;

	background-color:transparent;

	color: var(--main-color);

	transition: all .3s;

}

.group-navbtn a:hover,

.group-navbtn a.select,

.btn-line:hover,

a.btn-line:hover {

	background-color: var(--main-color);

	color:#fff!important;

}

.group-navbtn select {

	width: 120px;

	display: inline-block;

	margin-left: 5px;

}

.group-navbtn button {

	display: inline-block;

	background-color: var(--main-color);

	border:none;

	padding: 2px 12px;

	outline: none;

	color:#fff;

	border-radius:5px;

}





.form-table {

	display: block;

	max-width: 600px;

	margin: auto;

	font-size: 16px;

}

.form-table table,

.mb-group-otder-list table {

  border-collapse: collapse;

  border-spacing: 0;

  width: 100%;

  border: 1px solid #ddd;

	background-color: #fff;

}

.form-table table th,

.form-table table td,

.mb-group-otder-list th,

.mb-group-otder-list td {

	padding: 12px;

	border: 1px solid #bfbfbf;

}

.form-table table th {

	background-color: #f5f5f5;

	color:#333;

	font-weight: 400;

}

.form-table table td {

	width: 65%;

}

.form-table img {

	max-width: 300px;

	margin: 15px auto;

	display: block;

}



.mb-group-otder-list th {

	background-color:#6b6b6b;

	color:#fff;

	font-weight: 400;

}

.mb-group-otder-list td a {

	color:var(--main-color);

}



.summary {

	display: block;

	padding: 15px;

	background-color:#e0dbcb;

	color:#333;

	margin: 10px 0;

	border-radius:5px;

}

.summary h3 {

	font-size: 20px;

	margin: 0;

	padding: 0;

}

.summary p {

	margin: 6px 0;

}