@charset "utf-8";
/* CSS Document */
/* 虛擬路徑: 從根目錄『 /』 開始, 相對路徑:『./』表示為自身目錄,『../』表示上層目錄 */
body {
	margin: 0px;
	padding-top: 0px;padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
	border: 0px;
	background: url(../images/top_bg.png) repeat-x left top;
}


/* ~~ 元素/標籤選取器 ~~ */
h1, h2, h3, h4, p {
	margin-top: 0;	 /* 移除上方邊界可以解決邊界可能從其包含的 Div 逸出的問題。剩餘的下方邊界可以保持 Div 不與接在後面的元素接觸。 */
	padding-right: 15px;
	padding-left: 15px; /* 將欄位間隔加入至 Div 內元素的兩側 (而不是 Div 本身)，即可不需執行任何方塊模型的計算作業。具有側邊欄位間隔的巢狀 Div 也可當做替代方法。 */
}
img{
  border: 0px;
}



#topTitle{
	height:76px;
	width: 1010px;
	margin: 0 auto;  /*  兩側的自動值與寬度結合後，版面便會置中對齊 */
	padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
	background: url(../images/top_bg-bar.png);
}

#topLogo{
  float:left;
  margin: 0px;
}
#Logo a{float:left; display:block; text-indent:-9999px; width: 10px;}
/*  我們平時會遇到，我們想以圖片作為對像背景，內容用文字+超鏈接來做優化，同時又想隱藏文字，超鏈接不受影響，這樣來優化網頁，即不影響美觀又達到了搜索引擎優化的效果。所用關鍵CSS樣式：text-indent:-9999px */



/*  Horizontal Menu Bar */
.topNav {float:right; position:relative; top:45px;}
.topNav a{background:url(../images/top_nav_bt.png) left 0; color:#ffe; text-decoration:none; height:30px; float:left; cursor:pointer; margin:0 3px 0 0; }
.topNav a:hover{background:url(../images/top_nav_bt.png) left -30px; height:30px; }
.topNav a span{background:url(../images/top_nav_bt.png) right 0; padding:7px 10px 7px 0; margin:0 0 0 10px; float:left; height:16px;}
.topNav a:hover span{background:url(../images/top_nav_bt.png) right -30px; color:#0011aa; padding:7px 10px 7px 0; margin:0 0 0 10px; height:16px; }

.topNav_green { position:relative; top:1px;}
.topNav_green a{background:url(../images/top_nav_green_bt.png) left 0; color:#eee; text-decoration:none; height:30px; float:left; cursor:pointer; margin:0 3px 0 0; }
.topNav_green a:hover{background:url(../images/top_nav_green_bt.png) left -30px; height:30px; }
.topNav_green a span{background:url(../images/top_nav_green_bt.png) right 0; padding:7px 10px 7px 0; margin:0 0 0 10px; float:left; height:16px;}
.topNav_green a:hover span{background:url(../images/top_nav_green_bt.png) right -30px; color:#aa1100; padding:7px 10px 7px 0; margin:0 0 0 10px; height:16px; }


.a_green { margin: 0 auto; position:relative;}
.a_green a{background:url(../images/top_nav_grayblue_bt.png) left 0; color:#fff; text-decoration:none; height:24px; float:left; cursor:pointer; margin:0 3px 0 0; }
.a_green a:hover{background:url(../images/top_nav_grayblue_bt.png) left -24px; height:24px; }
.a_green a span{background:url(../images/top_nav_grayblue_bt.png) right 0px; padding:3px 10px 5px 0; margin:0 0 0 10px; float:left; height:16px;}
.a_green a:hover span{background:url(../images/top_nav_grayblue_bt.png) right -24px; color:#351C53; padding:3px 10px 5px 0; margin:0 0 0 10px; height:16px; }
.a_blue { margin: 0 auto; position:relative; }
.a_blue a{background:url(../images/top_nav_grayblue_bt.png) left -48px; color:#fff; text-decoration:none; height:24px; float:left; cursor:pointer; margin:0 3px 0 0; }
.a_blue a:hover{background:url(../images/top_nav_grayblue_bt.png) left -72px; height:24px; }
.a_blue a span{background:url(../images/top_nav_grayblue_bt.png) right -48px; padding:3px 10px 5px 0; margin:0 0 0 10px; float:left; height:16px;}
.a_blue a:hover span{background:url(../images/top_nav_grayblue_bt.png) right -72px; color:#351C53; padding:3px 10px 5px 0; margin:0 0 0 10px; height:16px; }
.a_orange { margin: 0 auto; position:relative; }
.a_orange a{background:url(../images/top_nav_grayblue_bt.png) left -96px; color:#fff; text-decoration:none; height:24px; float:left; cursor:pointer; margin:0 3px 0 0; }
.a_orange a:hover{background:url(../images/top_nav_grayblue_bt.png) left -120px; height:24px; }
.a_orange a span{background:url(../images/top_nav_grayblue_bt.png) right -96px; padding:5px 6px 3px 0; margin:0 0 0 6px; float:left; height:16px; font-size:15px;}       /*  font-size:15px */
.a_orange a:hover span{background:url(../images/top_nav_grayblue_bt.png) right -120px; color:#351C53; padding:4px 6px 4px 0; margin:0 0 0 6px; height:16px; }
.a_gray { margin: 0 auto; position:relative; }
.a_gray a{background:url(../images/top_nav_grayblue_bt.png) left -144px; color:#fff; text-decoration:none; height:24px; float:left; cursor:pointer; margin:0 3px 0 0; }
.a_gray a:hover{background:url(../images/top_nav_grayblue_bt.png) left -168px; height:24px; }
.a_gray a span{background:url(../images/top_nav_grayblue_bt.png) right -144px; padding:3px 10px 5px 0; margin:0 0 0 10px; float:left; height:16px;}
.a_gray a:hover span{background:url(../images/top_nav_grayblue_bt.png) right -168px; color:#351C53; padding:3px 10px 5px 0; margin:0 0 0 10px; height:16px; }
.a_pink { margin: 0 auto; position:relative; }
.a_pink a{background:url(../images/top_nav_grayblue_bt.png) left -192px; color:#fff; text-decoration:none; height:24px; float:left; cursor:pointer; margin:0 3px 0 0; }
.a_pink a:hover{background:url(../images/top_nav_grayblue_bt.png) left -216px; height:24px; }
.a_pink a span{background:url(../images/top_nav_grayblue_bt.png) right -192px; padding:3px 10px 5px 0; margin:0 0 0 10px; float:left; height:16px;}
.a_pink a:hover span{background:url(../images/top_nav_grayblue_bt.png) right -216px; color:#351C53; padding:3px 10px 5px 0; margin:0 0 0 10px; height:16px; }


/*  頁面系列商品項目 */
.navMenu { margin: 0 auto; position:relative;}
.navMenu a{background:url(../images/top_nav_orange-1.gif) left 0; color:#a51; text-decoration:none; height:24px; float:left; cursor:pointer; margin:0 3px 0 0;font-size:15px;  }
.navMenu a:hover{background:url(../images/top_nav_orange-1.gif) left -24px; height:24px; }
.navMenu a span{background:url(../images/top_nav_orange-1.gif) right 0px; padding:5px 6px 3px 0; margin:0 0 0 6px; float:left; height:16px;font-size:15px;}
.navMenu a:hover span{background:url(../images/top_nav_orange-1.gif) right -24px; color:#21f; padding:4px 6px 4px 0; margin:0 0 0 6px; height:16px; }
.navMenu_alt { margin: 0 auto; position:relative;}
.navMenu_alt {background:url(../images/top_nav_orange-1.gif) left -24px; height:24px; float:left;margin:0 3px 0 0; font-size:15px;}
.navMenu_alt span {background:url(../images/top_nav_orange-1.gif) right -24px; color:#883333; padding:4px 6px 4px 0; margin:0 0 0 6px; height:16px; float:left;font-size:15px; font-weight:bold;}
.navMenu_none { margin: 0 auto; position:relative;}
.navMenu_none {background:url(../images/top_nav_orange-non.png) left 0px; height:24px; float:left;margin:0 3px 0 0; font-size:15px;}
.navMenu_none span {background:url(../images/top_nav_orange-non.png) right 0px; color:#bb8833; padding:4px 6px 4px 0; margin:0 0 0 6px; height:16px; float:left;font-size:15px; }



/*   原備份如下,  上方top_nav_orange.png檔 改成 top_nav_orange.gif

.navMenu { margin: 0 auto; position:relative;}
.navMenu a{background:url(../images/top_nav_orange.png) left 0; color:#a31; text-decoration:none; height:24px; float:left; cursor:pointer; margin:0 3px 0 0;font-size:15px;  }
.navMenu a:hover{background:url(../images/top_nav_orange.png) left -24px; height:24px; }
.navMenu a span{background:url(../images/top_nav_orange.png) right 0px; padding:5px 6px 3px 0; margin:0 0 0 6px; float:left; height:16px;font-size:15px;}
.navMenu a:hover span{background:url(../images/top_nav_orange.png) right -24px; color:#21f; padding:4px 6px 4px 0; margin:0 0 0 6px; height:16px; }
.navMenu_alt { margin: 0 auto; position:relative;}
.navMenu_alt {background:url(../images/top_nav_orange.png) left -24px; height:24px; float:left;margin:0 3px 0 0; font-size:15px;}
.navMenu_alt span {background:url(../images/top_nav_orange.png) right -24px; color:#000; padding:4px 6px 4px 0; margin:0 0 0 6px; height:16px; float:left;font-size:15px; }

*/


.tab_bg { margin: 0 auto; position:relative;}  /*  類標籤 tab -Horizontal Menu Bar <橫頁籤> 16px字 */
.tab_bg a{background:url(../images/tab_bg.png) left 0; color:#777; text-decoration:none; height:28px; float:left; font-size:16px; font-weight:bold; cursor:pointer; margin:0; padding:0;}
.tab_bg a:hover{background:url(../images/tab_bg.png) left -28px; height:28px;}
.tab_bg a span{background:url(../images/tab_bg.png) right 0; padding:5px 10px 5px 0; margin:0 0 0 10px; float:left; height:18px;}
.tab_bg a:hover span{background:url(../images/tab_bg.png) right -28px; color:#993322; padding:7px 10px 3px 0; margin:0 0 0 10px; height:18px; }
.tab_bg span{background:url(../images/tab_bg.png) left -56px; margin:0 auto; float:left; height:28px;}
.tab_bg span span{background:url(../images/tab_bg.png) right -56px; color:#880011; padding:8px 10px 2px 0; margin:0 0 0 10px; height:18px; font-size:16px;font-weight:bold; }

.tab_bg0 { margin: 0 auto; position:relative;}  /*  類標籤 tab -Horizontal Menu Bar <橫頁籤> 18px字 */
.tab_bg0 a{background:url(../images/tab_bg.png) left 0; color:#777; text-decoration:none; height:28px; float:left; font-size:18px; font-weight:bold; cursor:pointer; margin:0; padding:0;}
.tab_bg0 a:hover{background:url(../images/tab_bg.png) left -28px; height:28px;}
.tab_bg0 a span{background:url(../images/tab_bg.png) right 0; padding:5px 10px 5px 0; margin:0 0 0 10px; float:left; height:18px;}
.tab_bg0 a:hover span{background:url(../images/tab_bg.png) right -28px; color:#993322; padding:7px 10px 3px 0; margin:0 0 0 10px; height:18px; }
.tab_bg0 span{background:url(../images/tab_bg.png) left -56px; margin:0 auto; float:left; height:28px;}
.tab_bg0 span span{background:url(../images/tab_bg.png) right -56px; color:#880011; padding:8px 10px 2px 0; margin:0 0 0 10px; height:18px; font-size:18px;font-weight:bold; }


.has-sub div {
    display:none;
    float:right;
    position:relative;
    clear:left;
    }
.has-sub:hover>div {
    display:block;
    position:relative;right:-30px;
    width:90px;
    z-index:99;
    padding-top:1px;
     }


#bottomTitle{
	height:76px;
	margin: 0 auto;  /*  兩側的自動值與寬度結合後，版面便會置中對齊 */
	padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
	background-image: url(../images/top_bg_bottom.png);
	background-repeat: repeat-x;
	background-position: bottom ;
	font-size:14px;
	color: #201000;
}
#bottomTitle span span, span a, #bottomTitle span a:hover {
	color: #201000;
	font-size:12px;
	text-decoration: none;
}
#bottomHint {
	width: 1200px;
	float:right;
	padding-right: 100px;
	font-size:12px;
	text-align:right;
	color: #998866;
}



/*  =======  go-top go-bottom icon, 固定在 右下角的 至頂端 至底端 icon         =======  */
#topbottom_bt {position: fixed; bottom: 72px; right: 2px; width: 40px; height:80px;}
#gotop {width: 40px; height:40px;}
#gotop a{display:block; background:url(../images/backtopbottom.png) no-repeat left top; height:40px;}
#gotop a:hover{background:url(../images/backtopbottom.png) -40px top;}
#gobottom {width: 40px; height:40px;}
#gobottom a{display:block; background:url(../images/backtopbottom.png) no-repeat left bottom; height:40px;}
#gobottom a:hover{background:url(../images/backtopbottom.png) -40px bottom;}
/*  =======  back-home  icon, 固定在 右下角的 回首頁  icon                      =======  */
#backhome_bt {position: fixed; bottom: 1px; right: 2px; width: 48px; height:48px;}
#backhome_bt a{display:block; background:url(../images/backhome_1.png) no-repeat 0 0; height:48px;} /* 注意display:block;一定要加上 */
#backhome_bt a:hover{background:url(../images/backhome_2.png) no-repeat 0 0;}


.container {
	width: 1010px;
	margin: 0 auto;  /*  兩側的自動值與寬度結合後，版面便會置中對齊 */
	padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
	font-size:16px;
	color: #353535;
}



/* ======= begin - 左側 menu ======= */
.leftmenu {
	float: left;
	width: 180px;
	margin-top: 5px ;
	padding: 0px 0 20px 0px ;
/*	background-color:#fee;  */
}

#menu, #menu * {
    list-style:none;
    border:0;
    padding:0;
    margin:0 auto;
}
#menu {
    width:173px;
    position:relative;
    z-index:999;
    background:url(../images/t_base.png) -173px 0;
    padding-top:34px;
}
#menu ul {
    background:url(../images/t_base.png) 0 bottom;
    padding-bottom:70px;
}

#menu div {
    width:170px;
    position:relative;
    background:url(../images/t_sub.png) -170px 0;
    padding-top:6px;
}
#menu div ul {
    background:url(../images/t_sub.png) 0 bottom;
    padding-bottom:5px;
}
* html #menu div, * html #menu div ul { background-image:url(../images/t_sub.png); }
*+html #menu li { border-bottom:1px solid transparent; }
#menu li div {
    visibility:hidden;
    position:absolute;
    margin:-45px 0 0 0;
    left:100%;
}
* html #menu li div, *+html #menu li div { margin-top:-45px; }
#menu li:hover>div { visibility:visible; }
* html #menu li { height:34px; }
#menu li a {
    display:block;
    font-size:14px;          /*  大選單 字型大小 */
    font-weight: bold;
    text-decoration:none;
    color:#ee0038;              /*  大選單 字型顏色 */
    padding-top:11px;
    cursor:pointer;
    position:relative;
    z-index:9;
}
*+html #menu li a { padding-top:12px; }
* html #menu li a { padding-top:10px; }

#menu li a:hover { background:url(../images/t_base-select.png) no-repeat -163px 0; }
#menu li span {
    line-height:16px;
    padding:0 5px 11px 12px;
    display:block;
}
*+html #menu li span { padding-bottom:10px; }
* html #menu li span {
    height:24px;
    padding-bottom:2px;
}

#menu li a:hover span { background:url(../images/t_base-select.png) no-repeat -331px bottom; }
#menu li a:hover span.nosub { background:url(../images/t_base-select.png) no-repeat 5px bottom; } /*  大選單無子選單時 class="nosub"*/
#menu li a:hover span { color:#0000dd; } /*  大選單hover時, 字型顏色 */

#menu li li { border:0; }
#menu li li a span { color:#0000dd; }   /*  小選單 字型顏色 */
#menu li li a:hover { background:url(../images/t_sub-select.png) no-repeat -160px 0; }
#menu li li a:hover span{
    background:url(../images/t_sub-select.png) no-repeat 5px bottom;
    color:#fff;                        /*  小選單hover時, 字型顏色 */
}
/* ======= end - 左側 menu ======= */


.rightcontent{
  float: right;
  width: 820px;
	margin: 0px auto;  /*  兩側的自動值與寬度結合後，版面便會置中對齊 */
	padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
}


.clearfloat { /* 這個類別可放置在 <br /> 或空白的 Div 上，當做接在 #container 內最後一個浮動 Div 後方的最後一個元素 (如果從 #container 移除或取出 #footer) */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}


.mouseOverPop a img       { border-top: 7px solid #fff; border-bottom: 5px solid #fff; }
.mouseOverPop a:hover img { border-top: 1px solid #fff; border-bottom: 11px solid #fff; }

.pink { margin: 0 auto; position:relative;}
.pink a{color:#c12;font-size:18px;font-weight:bold; text-decoration:none;float:left; height:24px; cursor:pointer;}
.pink a:hover{ height:24px; }
.pink a span{position:relative; top:-16px;padding:2px 10px 3px 10px; margin:0 5px;}
.pink a:hover span{ color:#ff00ff; padding:2px 10px 3px 10px; margin:0 5px;}

.pink_b { margin: 0 auto; position:relative;}
.pink_b a{color:#c12;font-size:18px;font-weight:bold; text-decoration:none;float:left; height:24px; cursor:pointer;}
.pink_b a:hover{ height:24px; }
.pink_b a span{position:relative; top:1px;padding:2px 10px 3px 10px; margin:0 5px;}
.pink_b a:hover span{ color:#ff00ff; padding:2px 10px 3px 10px; margin:0 5px;}

.pink_nav { float:left; color:#753; }
.pink_nav span{  font-size:16px; background-color:#dd9; border:2px solid #dd9;}
.pink_nav a{background:url(../images/soccer_2.png) no-repeat left bottom;padding:0px 0px 0px 22px; margin:3px 3px; color:#366;font-size:16px; text-decoration:none; cursor:pointer; line-height:28px;}
.pink_nav a:hover{background:url(../images/soccer_1.png) no-repeat left bottom; color:#ee0066; height:28px; }





.downloadICO span  {float:left; width:48px; height:68px; margin-left:20px;color:#631; font-size:16px;text-align:center;}
.downloadICO span a       {display:block; background:url(/ads/images/download_rar.gif) no-repeat 0 0; width:48px; height:48px;}
.downloadICO span a:hover {background:url(/ads/images/download_rar.gif) 48px top; width:48px; height:48px;}


.circleICO {float:left; width:136px; height:136px; position:relative;}
.circleICO a       {background:url(/ads/images/circlex2.png) no-repeat 0 0;color:#631;text-decoration:none; width:136px; height:136px; float:left; cursor:pointer;}
.circleICO a:hover {background:url(/ads/images/circlex2.png) 136px top; width:136px; height:136px;}
.circleICO a span      {color:#993a00;font-size:18px;text-align:center; height:30px; float:left; padding:60px 0 0 0; width:136px; height:136px;}
.circleICO a:hover span{color:#ff5;}