<style type="text/css">
<!--

#locpage {
	background-color:#EEEEEE;
	width:100%;
	height:20px;
	position: relative;
	margin-left:3px;
}

#leftguide {
	display:block;
	background-color:#EEEEEE;
	margin-left:3px;
}
#rightguide {
	display:block;background-color:#EEEEEE;
	margin-left:3px;
}
#dspbox {
	margin:5px;
	padding:20px;
	border:1px #8ec21f solid;border-radius:10px;
	color:#999999;
}

#footerbox {
	position:relative;
	
	text-align:center;
	width:100%;
	
}

#footer {
	text-align:center;
	background-color: #acce22;
	float:left;
	width:100%;
	height:110px;
	border:1px #E0E0E0 solid;border-radius:10px 0px 10px 0px;
	display:inline; /* So IE plays nice */
	color: #FFFFFF;
}

#footer dl { display:inline;}
#footer dt { display:inline;}

#slideshow img { display: none }
#slideshow img.first { display: block }

#mapbox {
        position: relative;
        padding-bottom: 75%;
        overflow: hidden;
    }
#mapbox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

#keyindata {
        position: relative;
        padding-bottom: 75%;
		
        overflow: hidden;
    }
#keyindata iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
#homelist {
	text-align:left;
	float:left;	
}
.container {
	padding-top:5px;
	min-height:250px;
	vertical-align: top;
	width: 100% !important;
	
    
}
.header {
	min-height:120px;
	
}

.taillogo {
	background-color:#a0ce4e;
	text-align:left;
}
	


.dspdata{
	margin:10px;
	border-style:dashed;border-width:0px;border-bottom-width:1px;border-color:#BADBFC;
	color:#3C3C3C;
	font-size:100%;
	line-height: 24px;
	
}
.dspdate {
	margin:1px;
	color:#3b4588;
	font-size:100%;
	line-height: 20px;
	font-weight:bold;
}
.dsptitle {
	margin:5px;
	color:#AE0000;
	font-size:100%;
	line-height: 20px;
	font-weight:bold;
}
.pagefunbar {
	background-color:#8ec21f;
	width:100%;
	height:20px;
	position: relative;
	margin:0; 
}
.itembar {
	border:1px #F7D4EE solid;border-radius:10px;
}
.radius10 {
	border-radius:10px;
}
.imgradius60 {
	border-radius: 60px;
	box-shadow: 0 0 10px rgba(0,0,0,1.00);
	opacity: 0.8;
}
.imgradius10 {
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,1.00);
	opacity: 0.9;
}
.imgradius0001 {
	border-bottom-right-radius: 50px;
	box-shadow: 0 0 5px rgba(0,0,0,0.9);
	
}
.prodlist {
	margin:5px;
}

.dropdown-menu li:hover .sub-menu {visibility: visible;}
.dropdown:hover .dropdown-menu {display: block;}
//FB LINK RWD設定
.fb-comments, .fb-comments iframe[style] {
	width: 100% !important;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
	width: 100% !important;
}
.kdlist {
	text-align:left;
}
.pics { 
  height: 232px;
  width: 232px;
  padding:0;
  margin:0;
  overflow: hidden;
}
.pics img { 
  height: 200px;
  width: 200px;
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #eee;
  top:0; left:0
}

/*advlist*/
.advlist-title {
	
	margin:10px;
	padding-left:10px;
	border-left:6px solid #2196F3;
	background-color: #ddffff;
	font-size:120%;
}	

/*文字跑馬燈左右*/

.marqee {
 height: 40px;
 width: 450px;
 margin: 0 auto;
 overflow: hidden; 
 position: relative;
 background: black;
}
/*
.marqee > ul {
 padding-left: 0;
 
 display: flex;
 list-style-type: none;
 animation: marqee 30s linear infinite;
 position: absolute;
}

.marqee > ul > li {
 white-space: nowrap;
 margin-right: 2em;
 font-weight: bold;
 color: yellow;
}

@keyframes marqee {
 0% {
  left: 100%;
  transform: translateX(0%);
 }

 100% {
  left: 0;
  transform: translateX(-100%);
 }
}
*/

.marquee {
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%;
  will-change: transform;
  animation: marquee 30s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01; 
    width: auto;
    padding-left: 0;
  }
}


/*文字跑馬燈上下*/
.marqee_ud {
	height:60px;
 overflow:hidden;
 margin:0;
 position:relative;
}

.marqee_udtxt {
 animation: marqee_ud 30s linear infinite;
 
}
.marqee_udtxt:hover {
	animation-play-state:paused;
}

@keyframes marqee_ud {
 100% {
   transform: translateY(100%);
 }
 
}


.fa-spin-hover:hover {
	font-size: 130%;
	color: #FFFFFF;
    animation: fa-spin 2s infinite linear;
}
.fa-enlarge-hover:hover {
	font-size: 130%;
	color: #FFFFFF;
	background:#A0A0A0;
	border: solid 0.08em #eee;
	border-radius: .1em;
	padding: .2em .25em .15em;
}
.fa-enlarge2-hover:hover {
	font-size: 130%;
	color: Dodgerblue;
	background: #7ba7fe;
	border: solid 0.08em #eee;
	border-radius: .1em;
	padding: .2em .25em .15em;
}

.homebm {
	margin:20px;
	font-size: 120%;
	font-weight:bold;
	
	color:#008000;
}	
.welcome {
	margin:1px;
	padding-top:30px;
	background-color:#8ec21f;
	height:100px;
	color:#000000;
	text-align:center;
	font-size:120%;
	line-height: 20px;
	font-weight:bold;
}
.subpagebm
{
	display:flex;
	align-items:center;
	margin:1px;
	padding-left:10px;
	background-color:#8ec21f;
	height:100px;
	
}
.font-bm {
	color:#000000;
	text-align:left;
	font-size:20px;
	line-height: 20px;
	font-weight:bold;
}
.locpage {
	color:#B0512A;
	font-size:14px;
	width:150px;
}
.newlist {
	height:30px;
		
    
}
.imgbox {	
	width: 200px;
	height: 150px;
	overflow: hidden;
}
.borderbox {
	margin:2px;
	padding-bottom:6px;
	border:#C0C0C0 1px solid;
	border-radius:10px;
	
}
.newsbox {
	margin:2px;
	padding-bottom:6px;
	border:#C0C0C0 1px solid;
	border-radius:10px;
	background-color:#F0F0F0;
}
.newsboxnull {
	margin:2px;
	padding-bottom:6px;
	border:#C0C0C0 1px solid;
	border-radius:10px;
	background-color:#F0F0F0;
}
.bg01 {
	background-color:#a0ce4e;
}
.prodkindrow {
	display:flex;
	align-items:center;
	text-align:center;
	flex-wrap:wrap
}	

.productkdbox {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	margin:2px;
	background-color:#F0F0F0;
	width:100px;
	text-align:center;
	font-size:16px;
	border:#FFFFFF 1px solid;
	color:#000000;
	border-radius:5px;
	
    box-shadow:
        5px 5px 10px rgba(0, 0, 0, .3),
        -5px -5px 10px rgba(255, 255, 255, .8),
        outset 0 0 0x rgba(255, 255, 255, .8),
        outset 0 0 0 rgba(0, 0, 0, .3);
    
    &:active {
        box-shadow:
            0 0 0 rgba(0, 0, 0, .3),
            0 0 0 rgba(255, 255, 255, .8),
            inset -5px -5px 10px rgba(255, 255, 255, .8),
            inset 5px 5px 10px rgba(0, 0, 0, .3);
    
	}
}
.productviewimg {	
	width: 200px;
	height: 300px;
	overflow: hidden;
}
.product_view {
	margin:2px;
	padding-bottom:6px;
	border:#C0C0C0 1px solid;
	border-radius:10px;
	background-color:#F0F0F0;
}

.newslist {
	font-size: 20px;
	height: 80px;
	background-color: #FFFFFF;
}
.newslist:hover {
	background-color: #41A620;
}
.dottedtop {border-style:dotted;border-color:#666666;border-width:0px;border-top-width:1px;}
.dottedbot {border-style:dotted;border-color:#666666;border-width:0px;border-bottom-width:1px;}
.doubletop {border-style:double;border-color:#666666;border-width:0px;border-top-width:3px;}
.doublebot {border-style:double;border-color:#666666;border-width:0px;border-bottom-width:3px;}
.dashedtop {border-style:dashed;border-color:#666666;border-width:0px;border-top-width:1px;}
.dashedbot {border-style:dashed;border-color:#666666;border-width:0px;border-bottom-width:1px;}

.recurit1111 {
	border:0px;
	background-color: #41A620;
	height: 30px;
	width:150px;
	border-radius:10px;
}	

.recurit123 {
	border:0px;
	background-color: #B3CDA1;
	height: 30px;
	width:150px;
	border-radius:10px;
}

.searchdiv {
	background: #FFFFFF ;
	border: 1px solid #989898;
	border-radius: 4px;
	padding: 0px;
	display: flex;
	align-items: center;
	display:inline;
	width: 120px;
	
	
}
.searchinput {
	border: none;
	outline: none;
	margin: 0px 0px 0px 5px;
	padding: 0px;
	background: none ;
	width:90px;
	
}
-->
</style>
