@charset "utf-8";
body {
	font-family:Verdana, Geneva, sans-serif;
	background: #000 url(images/bg-body.gif) left top repeat-x;
	color: #000;
	font-size: 12pt;
}

input {
	font-family:Verdana, Geneva, sans-serif;
}
textarea {
	font-family:Verdana, Geneva, sans-serif;
}

/* ~~ 元素/標籤選取器 ~~ */
ul, ol, dl { /* 由於瀏覽器之間的差異，最佳作法是在清單中使用零寬度的欄位間隔及邊界。為了保持一致，您可以在這裡指定所要的量，或在清單包含的清單項目 (LI、DT、DD) 上指定所要的量。請記住，除非您寫入較為特定的選取器，否則在此執行的作業將重疊顯示到 .nav 清單。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin: 0;	 /* 移除上方邊界可以解決邊界可能從其包含的 Div 逸出的問題。剩餘的下方邊界可以保持 Div 不與接在後面的元素接觸。 */
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

a img { /* 這個選取器會移除某些瀏覽器在影像由連結所圍繞時，影像周圍所顯示的預設藍色邊框 */
	border: none;
}
/* ~~ 網站連結的樣式設定必須保持此順序，包括建立滑過 (Hover) 效果的選取器群組在內。~~ */
a:link {
	color: #000;
	text-decoration: none; /* 除非您要設定非常獨特的連結樣式，否則最好提供底線，以便快速看出 */
}
a:visited {
	color: #000;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* 這個選取器群組可以讓使用鍵盤導覽的使用者，也和使用滑鼠的使用者一樣擁有相同的滑過體驗。 */
	color: #ee3897;
	text-decoration: none;
}

#main-body {
	position: relative;
	height: 29em;
}

/*上方Bar*/
#bar-top {
	/*padding: 0;*/
	margin-top: .7em;
	
}
#bar-top .tit {
	/*width: 60%;*/
	text-align:center;
	font-size: 1.5em;
	color: #8FC31F;
	margin: .2em 0 .5em 0;
	display: inline-block;
	float:left;
}

/*bar 中間文字*/
#bar-tit {
	margin-top: 1em;
	line-height: 1.5em;
}
#bar-tit .tit1{ font-size: 1em; }
#bar-tit .tit2{ width: 100%; text-align:center; font-size: 12px; color: #fff; line-height: 1.2em;  }
#bar-tit a:link { color: #fff; }
#bar-tit a:visited { color: #fff; }
#bar-tit a:hover {
	color: #FF0;
}

.nav-l {
	width: 100%;
	height: 47px;
	display: inline-block;
	background:url(images/ico-arr-left.png) center top no-repeat;
	margin-top: .5em;
	float:left;
}
.nav-l-on:link {
	width: 100%;
	height: 47px;
	display: inline-block;
	background:url(images/ico-arr-left-on.png) center top no-repeat;
	margin-top: .5em;
	float:left;
}
.nav-l-on:visited {
	width: 100%;
	height: 47px;
	display: inline-block;
	background:url(images/ico-arr-left-on.png) center top no-repeat;
	margin-top: .5em;
	float:left;
}

.nav-r {
	width: 100%;
	height: 47px;
	display: inline-block;
	background:url(images/ico-arr-right.png) center top no-repeat;
	margin-top: .5em;
	float:right;
}

.nav-r-on:link {
	width: 100%;
	height: 47px;
	display: inline-block;
	background:url(images/ico-arr-right-on.png) center top no-repeat;
	margin-top: .5em;
	float:right;
}
.nav-r-on:visited {
	width: 100%;
	height: 47px;
	display: inline-block;
	background:url(images/ico-arr-right-on.png) center top no-repeat;
	margin-top: .5em;
	float:right;
}
/*bar 右邊區*/
#bar-nav {
	margin-top: 1.8em;
}
#bar-nav img {
	width: 100%;
}
#bar-nav img:hover {
	opacity: .9;
}
#bar-top .login:link {
	margin: 1em 5px 0 0;
	width: 74px;
	height: 34px;
	display: inline-block;
	background:url(images/ico-login.png) left center no-repeat;
}
#bar-top .login:visited {
	margin: em 5px 0 0;
	width: 74px;
	height: 34px;
	display: inline-block;
	background:url(images/ico-login.png) left center no-repeat;
}
#bar-top .login:hover {
	opacity: .8;
}
#bar-top .home:link {
	margin: 1em 5px 0 0;
	width: 40px;
	height: 34px;
	display: inline-block;
	background:url(images/ico-home.png) left center no-repeat;
	/*float: right;*/
}
#bar-top .home:visited {
	margin: 1em 5px 0 0;
	width: 40px;
	height: 34px;
	display: inline-block;
	background:url(images/ico-home.png) left center no-repeat;
	/*float: right;*/
}
#bar-top .home:hover {
	opacity: .8;
}

#bar-top .cart:link {
	margin: 1em 5px 0 0;
	width: 40px;
	height: 34px;
	display: inline-block;
	background:url(images/ico-cart.png) left center no-repeat;
	/*float: right;*/
}
#bar-top .cart:visited {
	margin: 1em 5px 0 0;
	width: 40px;
	height: 34px;
	display: inline-block;
	background:url(images/ico-cart.png) left center no-repeat;
	/*float: right;*/
}
#bar-top .cart:hover {
	opacity: .8;
}

#bar-top .skype-css:link {
	width: 40px;
	height: 34px;
	background:url(images/ico-skype.png) left center no-repeat;
	display: inline-block;
	margin: 1em 5px 0 0;
}
#bar-top .skype-css:visited {
	width: 40px;
	height: 34px;
	background:url(images/ico-skype.png) left center no-repeat;
	display: inline-block;
	margin: 1em 5px 0 0;
}
#bar-top .fb-css:link {
	width: 40px;
	height: 34px;
	background:url(images/ico-fb.png) left center no-repeat;
	display: inline-block;
	margin: 1em 5px 0 0;
}
#bar-top .fb-css:visited {
	width: 40px;
	height: 34px;
	background:url(images/ico-fb.png) left center no-repeat;
	display: inline-block;
	margin: 1em 5px 0 0;
}



/*列表清單*/
#list-item {
	margin: 0 0 .5em 0;
	padding: 0 .5em;
	position: relative;
	text-align: center;
}
#list-item:hover {
	opacity: .9;
}
#list-item img {
	width: 96%;
}
#list-item .tit {
	position: absolute;
	top: 45%;
	left: 2%;
	width: 96%;
	padding: .5em 0;
	text-align:center;
	font-size: 1.3em;
	font-weight: 600;
	background-color: #eee;
	opacity: .7;
	color: #333;
}
#list-item .cart {
	position: absolute;
	left: 45%;
	bottom: -5px;
}
#list-item .tit2 {
	font-size: .8em;
}


#cart-list {
	height: auto;
	padding: .5em 0;
}

.t-l { text-align: left; }
.t-c { text-align:center; }
.t-r { text-align:right; }

.button {
  border-radius: 0.5em;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
  color: #369ab8;
  color: #fff;
  display: inline-block;
  text-decoration: none;
}

/*一般按鈕*/
.btn1:link {
	width: 7em;
	padding: .6em 1em;
  	border-radius: 0.5em;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	background-color: #333;
	text-align:center;
  	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
  	color: #fff;
  	display: block;
  	text-decoration: none;
}
.btn1:visited {
	width: 7em;
	padding: .6em 1em;
	border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	background-color: #333;
	text-align:center;
	box-shadow: inset 0px 0px 0px 1px rgba(102,102,102,0.5);
	color: #fff;
	display: block;
	text-decoration: none;
}
.btn1:hover {
	background-color: #777;
	text-align:center;
  	color: #fff;
}

#nav {
	margin: 0px 0px .5em 0px;
	padding: 0;
}
#nav a {
  color: #333;
  text-decoration: none;
}

#hero {
  background: #369ab8;
  color: #fff;
  text-align: center;
}

#header {
	height: 78px;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}
#header a:link {
	color: #000;
}
#header a:visited {
	color: #000;
}
#header .logo {
	padding: 15px 0 0 10px;
}

#header .tit1 {
	padding-top: 10px;
	font-size: 3em;
  	font-weight: 600;
}

#header .tit2 {
	padding-top: 30px;
	font-size: 1.5em;
}
#header .keyword {
	margin: 1.7em 0 0 0;
	width: 50%;
	font-size: .9em;
	height: 2em;
	border-radius: .8em;
	-webkit-border-radius: .8em;
	-moz-border-radius: .8em;
	float:right;
}
.go-search {
	width: 20px;
	height: 30px;
	background:url(images/ico-search.png) left top no-repeat;
	display: inline-block;
	margin: 1.3em 0 0 .3em;
	float:right;
}

.container {
	/*padding-top: 1em;*/
}

/* 選單圖片*/
#ad-center {
	/*background: url(images/bg-center.png) left center repeat-x;*/
	text-align:center;
}

#ad-center a:link {
	padding: 0;
}
#ad-center a:visited {
	padding: 0;
}
#ad-center a:hover {
	opacity: .9;
}
#ad-center img {
	width: 100%;
	/*height: 272px;*/
}

/*一般網頁內容*/
#html-content {
	height: 30em;
	/*padding: 1em;*/
	margin-left: .5em;
	background-color: #fff;
	border-radius: .5em;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
}
#html-body {
	width: 97%;
	margin: 1em 1em 1em .5em;
	height: 28em;
	overflow:auto;
	
}

/*連絡人業務 */
#sales img {
	width: 25%;
	float: left;
	margin: 0 1em;
}
#sales p {
	margin: .5em 0;
	font-style: italic;
}
#sales .txt {
	font-size: .9em;
}
#sales .tit {
	font-size: 1.3em;
	line-height: 130%;
	font-weight: 600;
}


/*其它頁面的介紹列表內容 */
#intro {
	margin: .5em 0;
}
#intro img {
	width: 100%;
}
#intro .txt {
	font-size: .9em;
}

/* ~~ 頁尾 ~~ */
#footer {
	z-index: 10;
  	color: #62696c;
  	text-align: center;
}
#pagenav {
	margin: .3em 0;
	line-height: 1em;
	color: #fff;
}
#pagenav a:link {
	color: #fff;
	width: 1.5em;
	display: inline-block;
}
#pagenav a:visited {
	color: #fff;
	width: 1.5em;
	display: inline-block;
}
#pagenav a:hover {
	color: #c00;
}
#pagenav .link-on:link {
	color: #c00;
	width: 1.5em;
	display: inline-block;
}
#pagenav .link-on:visited {
	color: #c00;
	width: 1.5em;
	display: inline-block;
}


.nav-l2 {
	width: 100%;
	height: 28em;
	display: inline-block;
	background:url(images/ico-arr-left.png) center right no-repeat;
	margin-top: .5em;
	float:left;
}
.nav-l2-on:link {
	width: 100%;
	height: 28em;
	display: inline-block;
	background:url(images/ico-arr-left-on.png) center right no-repeat;
	margin-top: .5em;
	float:left;
}
.nav-l2-on:visited {
	width: 100%;
	height: 28em;
	display: inline-block;
	background:url(images/ico-arr-left-on.png) center right no-repeat;
	margin-top: .5em;
	float:left;
}

.nav-r2 {
	width: 100%;
	height: 28em;
	display: inline-block;
	background:url(images/ico-arr-right.png) center left no-repeat;
	margin-top: .5em;
	float:right;
}

.nav-r2-on:link {
	width: 100%;
	height: 28em;
	display: inline-block;
	background:url(images/ico-arr-right-on.png) center left no-repeat;
	margin-top: .5em;
	float:right;
}
.nav-r2-on:visited {
	width: 100%;
	height: 28em;
	display: inline-block;
	background:url(images/ico-arr-right-on.png) center left no-repeat;
	margin-top: .5em;
	float:right;
}


/* ~~ 其他 float/clear 類別 ~~ */
.fltrt {  /* 這個類別可用來讓元素在頁面中浮動，浮動的元素必須位於頁面上相鄰的元素之前。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* 這個類別可用來讓元素在頁面左方浮動，浮動的元素必須位於頁面上相鄰的元素之前。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* 這個類別可放置在 <br /> 或空白的 Div 上，當做接在 #container 內最後一個浮動 Div 後方的最後一個元素 (如果從 #container 移除或取出 #footer) */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.fl-l {
	float:left;
}

.fl-r {
	float:right;
}
/*顏色*/
.c_img {
	border: #eae3df 8px solid;
}
.c_yellow {
	color: #ff9000;
}
.c_pink {
	color: #ee3897;
}
.c_org {
	color: #f26522;
}
.c_txt {
	color: #958d95;
}

/*動畫效果*/
.slide-down {
	position: absolute;
	z-index: 0;
	left: 0px;
	top: 0px;
	animation: ani-down 1s ease-in;
	-moz-animation: ani-down 1s ease-in;	/* Firefox: */
	-webkit-animation: ani-down 1s ease-in;	/* Safari and Chrome: */
}
@keyframes ani-down 			{ from {top: -600px; opacity:0; } to { top: 0px; opacity:1; } }
@-moz-keyframes ani-down 		{ from {top: -600px; opacity:0; } to { top: 0px; opacity:1; } }
@-webkit-keyframes ani-down	{ from {top: -600px; opacity:0; } to { top: 0px; opacity:1; } }

.slide-up {
	position: absolute;
	z-index: 0;
	left: 0px;
	top: 0px;
	animation: ani-up 1s ease-in;
	-moz-animation: ani-up 1s ease-in;	/* Firefox: */
	-webkit-animation: ani-up 1s ease-in;	/* Safari and Chrome: */
}
@keyframes ani-up 			{ from {top: 1200px; opacity:0; } to { top: 0px; opacity:1; } }
@-moz-keyframes ani-up 		{ from {top: 1200px; opacity:0; } to { top: 0px; opacity:1; } }
@-webkit-keyframes ani-up	{ from {top: 1200px; opacity:0; } to { top: 0px; opacity:1; } }


/*動畫效果*/
.slide-ltr {
	position: absolute;
	z-index: 0;
	left: 0px;
	top: 0px;
	animation: ani-ltr 1s;
	-moz-animation: ani-ltr 1s;	/* Firefox: */
	-webkit-animation: ani-ltr 1s;	/* Safari and Chrome: */
}
@keyframes ani-ltr 			{ from {left: -1000px; opacity:0; } to { left: 0px; opacity:1; } }
@-moz-keyframes ani-ltr 		{ from {left: -1000px; opacity:0; } to { left: 0px; opacity:1; } }
@-webkit-keyframes ani-ltr	{ from {left: -1000px; opacity:0; } to { left: 0px; opacity:1; } }

/*動畫效果*/
.slide-rtl {
	position: absolute;
	z-index: 0;
	left: 0px;
	top: 0px;
	animation: ani-rtl 1s;
	-moz-animation: ani-rtl 1s;	/* Firefox: */
	-webkit-animation: ani-rtl 1s;	/* Safari and Chrome: */
}
@keyframes ani-rtl 			{ from {top: 0px; left: 1000px; opacity:0; } to {top: 0px;  left: 0px; opacity:1; } }
@-moz-keyframes ani-rtl 	{ from {top: 0px; left: 1000px; opacity:0; } to {top: 0px;  left: 0px; opacity:1; } }
@-webkit-keyframes ani-rtl	{ from {top: 0px; left: 1000px; opacity:0; } to {top: 0px;  left: 0px; opacity:1; } }

/*動畫效果*/
.slide-fade {
	animation: ani-fade 2s ease-in-out;
	-moz-animation: ani-fade 2s ease-in-out;	/* Firefox: */
	-webkit-animation: ani-fade 2s ease-in-out;	/* Safari and Chrome: */
}
@keyframes ani-fade 			{ from {opacity:0; } to {opacity:1; } }
@-moz-keyframes ani-fade 	{ from {opacity:0; } to {opacity:1; } }
@-webkit-keyframes ani-fade	{ from {opacity:0; } to {opacity:1; } }