.title { font-size:30px; padding:15px 0; margin-bottom: 5%;}
.title2 { font-size:22px; font-weight:bold; padding:10px 0;}
.btn { padding:8px 40px; margin:5px auto; display:table; border:1px solid #666; color:#666;}
.btn:hover {}
.btn-in { padding:5px 10px; margin:15px auto; display:table; }
.btn-in:hover { box-shadow:5px 5px 5px #000;}

.price { font-size:26px; color:#C00;font-weight:bold;}
.price:before { content:'NT$'; display:inline; margin-right:5px; width:100%; height:100%; font-size:15px;}
.price2 { text-decoration:line-through; color:#999; margin: 0 10px;}
.btn-box {
	display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
		  margin-top:-1px;
}
.btn-box a {-webkit-flex: 1; flex: 1;padding: 10px 0; background: #fff;border: 1px solid #e9e9e7; border-top:none; word-break:keep-all;color: #999;}
.btn-box img {
	display: inline !important;
    vertical-align: bottom;
    width: 20px;
    margin-right: 10px;
	opacity: 0.3;
}
.btn-box a:hover {background: #d01818;color: #fff;}
.btn-box a:hover img {opacity: 1; -webkit-filter: invert(1);}



body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } 

header { background:#fff;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);overflow: visible;}
#h01 { padding:0 5%;
	display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#box {display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
#box a { padding:5px 0 5px 15px;}
#box img {
	display: inline;
    vertical-align: middle;
    max-width: 25px;
    margin-right: 5px;
    border: 2px solid #000;
    padding: 2px;
    border-radius: 20px;
}
#box a:hover {
	-moz-transform:translateY(-5px);
-webkit-transform:translateY(-5px);
-o-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
#h02 {padding: 0 5%; background: #c00f1f; color: #fff;position: relative; z-index: 999;overflow: visible;}
#logo a {
	display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
#logo a img {-webkit-flex: 1; flex: 1;}
#logo a dl { margin-left:10px;}
#logo a dl dt { font-size:larger; margin-bottom:5px;}

#search form {
	display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
#search select { cursor:pointer; padding:5px; border-radius:3px 0 0 3px; background:#000; color:#fff;}
#search select option { cursor:pointer; padding:5px;}
#search select option:hover { background:#000; color:#000;}
#search #myInput { padding:5px; border:1px solid #000; border-radius:0 3px 3px 0;background: #f1f1f1;}

/*menu*/
#menu {}
#menu-toggle {display: none;}
#main-menu { text-align: center;    position: relative;}
#main-menu > li { display: inline-block;vertical-align: top;}
#main-menu > li > a {text-align: center; font-size: larger; padding: 10px; color:#fff;display: block; position:relative;}
#main-menu > li > a.arrow:after { content:'▾'; display:inline; margin-left:10px; width:100%; height:100%;}
#main-menu li a:hover { opacity:0.7;}
/* HEADER > MENU > DROPDOWN */
#main-menu li:hover > ul.sub-menu { display: block;}
ul.sub-menu { /* level 2 */
	display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 9999;
    background-color: rgba(241, 241, 241, 0.95);
    padding: 15px;
    width: 100%;
    -moz-column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1em;
    column-count: 3;
    column-gap: 1em;
}

ul.sub-menu li { text-align:left;}

ul.sub-menu > li > a {display: block;padding: 10px 12px; font-size: larger; color: #000;}
ul.sub-menu > li > a:hover { color:#c00f1f;}
ul.sub-menu > li > a > img { width: max-content; display: block;  margin:15px auto 10px;}






/**/
footer {}
footer .box {
	display: -webkit-flex;
  display:         flex;
  -webkit-align-items: inherit;
          align-items: inherit;
  -webkit-justify-content: space-between;
          justify-content: space-between;
		  background: #333;
    color: #fff;
}
footer .contact { padding-right:5% !important;}
footer .contact span {}
footer .contact span:after { content:'▸'; display:inline; margin:5px 0; width:100%; height:100%;}
footer .list { -webkit-flex: 1; flex: 1; padding: 20px 0 20px 5%;}
footer .list .item {
	-moz-column-count: 2;
  -moz-column-gap: 1em;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  column-count: 2;
  column-gap: 1em;
}
footer .list .head { font-size:larger; margin-bottom:10px;}
footer .list .item a { margin-bottom:10px; opacity:0.5;}
footer .list .item a:hover { text-decoration:underline;}
footer .author {text-indent: -99999px;height: 0; display:none;}
#copyright { font-size:small; margin:15px auto; text-align:center;}
/**/
#link {padding:3% 5%; background:#000; color:#fff; text-align:center;}
#link form { margin:15px auto;
	display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
#link input { padding:11px 15px; border-radius:5px 0 0 5px;}
#link button { cursor:pointer; padding:10px 15px; background:#666; color:#fff; border-radius:0 5px 5px 0 ; border:2px solid #000;}


@media screen and (max-width:968px) {
	#logo a dl { display:none;}
	#h02 { padding: 5px 5%;}
	#menu-toggle {display: block;background: url(../images/menu.png) center center no-repeat; background-size: contain; height:20px;}
	#navigation {
    width: 100%;
    position: absolute;
	top: 100%;
    left: 0;
    z-index: 999;
	}
	#main-menu {
    display: none;
    background: #f1f1f1;
    text-align: left;}
	#main-menu > li {display:block;}
	#main-menu > li > a { color:#000;}
	#main-menu li:hover > ul.sub-menu {position: static;-moz-column-count: auto; -webkit-column-count: auto; column-count: auto; background: #fff;padding: 0;}
	ul.sub-menu li {border-bottom: 1px solid #f1f1f1;}
	ul.sub-menu li > img { display:none;}
	footer .box { display:block;}
}
@media screen and (max-width:768px) {
	header { text-align: left;}
	
	#box a { font-size:0; padding:5px;}
	#logo {padding: 0;}
	#lang { left:15px; right:auto;}
	#lang a { padding: 10px;}
	.mainMenu {-webkit-flex: 1; flex: 1;  text-align: left;}
	.mainMenu > ul { display:block; text-align: center;}
	.mainMenu li a {padding: 15px;}
	.search { width:150px;position: absolute; top: 0; right: 15px;}
	
	
	
	footer .list { padding: 5%;}
}
@media screen and (max-width:568px) {
	.title { font-size:26px; padding:10px 0; margin-bottom: 3%;}
	.title2 { font-size:18px;  padding:5px 0;}
	
	#h01 { display:block;padding: 0 5% 5%;}
	#logo { max-width: 200px;  margin: auto;}
	#box { margin-top: 5%;}
	#box img { max-width: 50px; border-radius: 50px;}
	.btn-box img { display:block !important; margin:auto; width:50px; padding:5px;}

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