@charset "utf-8";



/*font*/
* {font-family: "Arial","verdana", "Helvetica", "sans-serif","微軟正黑體","Microsoft JhengHei","Heiti TC";color:#666666 }
.bold {font-weight:bold}


.f6pt {font-size:6pt;}
.f7pt {font-size:7pt;}
.f8pt {font-size:8pt;}
.f9pt {font-size:9pt;}
.f10pt {font-size:10pt}
.f11pt {font-size:11pt}
.f12pt {font-size:12pt}
.f13pt {font-size:13pt}
.f14pt {font-size:14pt}
h1,.h1 {font-size:22pt;font-weight:bold;margin:10px 0px}
h2,.h2 {font-size:20pt;font-weight:bold;margin:9px 0px}
h3,.h3 {font-size:18pt;font-weight:bold;margin:8px 0px}
h4,.h4 {font-size:16pt;font-weight:bold;margin:7px 0px}
h5,.h5 {font-size:14pt;font-weight:bold;margin:6px 0px}
h6,.h6 {font-size:12pt;font-weight:bold;margin:5px 0px}



.wordbreak {
		table-layout:fixed;
		table-layout: \9;
		word-wrap:break-word;
		word-wrap: \9;
		word-break:break-all \9;
		overflow:hidden;
		overflow:auto \9;
}


.red {color:#FF0000}
.ora {color:#FF6600}
.blk {color:#000000}
.gre {color:#090}
.gra {color:#999999}
.whi {color:#FFFFFF}
.c600 {color:#660000}
.c666 {color:#666}
.c999 {color:#999999}

.bg_red {background-color:#FF0000}
.bg_blk {background-color:#000000}
.bg_gre {background-color:#009900}
.bg_gra {background-color:#999999}
.bg_whi {background-color:#FFFFFF}
.bg_ora {background-color:#ff9900}
.bg_bro {background-color:#c19e67}


/*hover*/
a,.hover {text-decoration:none;}
a:hover,.hover:hover {
  text-decoration:none;
  cursor:pointer;  
}

a.yellow {text-decoration:none;color:#FFFFFF}
a.yellow:hover {
  text-decoration:none;
  color:#FFFF00; 
  cursor:pointer
}

a.btn:hover *{
  background-position:0px 100%
}


/*block*/
.none {display:none}
.hide {display:none}
.hidden {visibility:hidden;*display:none}
.block {display:block}
.inline {display:inline;*float:left}
.inlineblk {display:inline-block;*float:left}

.right {float:right;}
.left {float:left;}
.center {text-align:center}
.vtop {vertical-align:top}
.vmin {vertical-align:middle}
.vbtm {vertical-align:bottom}
.hright {text-align:right}
.hleft {text-align:left}
.hcenter {text-align:center}

.w10px {width:10px}
.w20px {width:20px}
.w40px {width:40px}
.w60px {width:60px}
.w80px {width:80px}
.w100px {width:100px}
.w120px {width:120px}
.w150px {width:150px}
.w180px {width:180px}
.w200px {width:200px}
.w300px {width:300px}
.w400px {width:400px}
.w500px {width:500px}
.w600px {width:600px}
.w700px {width:700px}

.clearfix:after {
	content: ".";
	display: block;
   	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}


.clearbox {
	display:block;
	overflow:visible;
   *overflow:;
    clear:both;
	border:0px #333333 solid;    
   *height:10px
}

/*line*/
.line20 {line-height:20px};
.line30 {line-height:30px};
.line40 {line-height:40px};
.line60 {line-height:60px};

/*margin*/
.mg_3 {margin:3px}
.mg_5 {margin:5px}
.mg_10 {margin:10px}
.mg_lr3 {margin-left:5px;margin-right:5px}
.mg_lr5 {margin-left:5px;margin-right:5px}
.mg_lr10 {margin-left:10px;margin-right:10px}

.mg_l3 {margin-left:3px;}
.mg_l5 {margin-left:5px;}

.mg_tb5 {margin-top:5px;margin-bottom:5px}
.mg-ie_t5 {*margin-top:5px;}
.mg-ie_t10 {*margin-top:10px;}
.mg-ie_t15 {*margin-top:15px;}

.mg_t10 {margin-top:10px;}
.mg_t5 {margin-top:5px;}
.mg_t3 {margin-top:3px;}

.mg_auto {margin:auto}
.mg_lrauto {margin-left:auto;margin-right:auto}

/*padding*/
.pd01 {padding:0.1px;*padding:0px}
.pd_3  {padding:3px;*padding:0px}
.pd_t3  {padding-top:3px;*padding-top:3px}
.pdt01 {padding-top:0.1px;*padding:0px}

/*shadow*/

.shadow_3 {
    -webkit-box-shadow: 0 0px 3px #666; 
    -moz-box-shadow: 0 0px 3px #666; 
    box-shadow: 0 0px 3px #666;
}

.shadow_5 {
    -webkit-box-shadow: 0 0px 5px #666; 
    -moz-box-shadow: 0 0px 5px #666; 
    box-shadow: 0 0px 5px #666;
}

.glow_gray {
    -webkit-box-shadow: 0px 0px 3px #999; 
    -moz-box-shadow: 0px 0px 3px #999; 
    box-shadow: 0px 0px 3px #999;
}

.embass {
    text-shadow: 1px 1px  #ffffff;
}

.embassb {
    text-shadow: -1px -1px 1px #000000;
}

/*round corner*/

.round_10 {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.round_5 {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.round_3 {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}


.round_t10 {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
}

.round_t5 {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

.round_t3 {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    border-radius: 3px 3px 0px 0px;
}

.round_l10 {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
}

.round_l5 {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
}

.round_l3 {
    behavior: url(border-radius.htc)\9;
    -moz-border-radius: 3px 0px 0px 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
}






/*-------------------------------------------------------------------------------*/


/*title*/
.title1 {
 background:url(../images/title1.png) no-repeat ;
 padding-left:15px;
}

/*border*/
.bdr1 {border-width:1px;border-style:solid}
.bdr2 {border-width:2px;border-style:solid}
.bdr3 {border-width:3px;border-style:solid}

.bdrb1 {border-bottom-width:1px;border-bottom-style:solid}
.bdrb2 {border-bottom-width:2px;border-bottom-style:solid}
.bdrb3 {border-bottom-width:3px;border-bottom-style:solid}

.bdrtb1 {border-width:1px 0px;border-style:solid}
.bdrtb2 {border-width:2px 0px;border-style:solid}
.bdrtb3 {border-width:3px 0px;border-style:solid}


.bdr_red {border-color:#FF0000;}
.bdr_gre {border-color:#006600;}
.bdr_ora {border-color:#FF9900;}
.bdr_gra {border-color:#999999;}
.bdr_blk {border-color:#000000;}
.bdr_ccc {border-color:#cccccc;}
.bdr_whi {border-color:#FFFFFF;*border-color:#999999}

/*link*/
.link1 {
 background:url(../images/link1.png) no-repeat 3px 6px;
 padding-left:20px;
}

.link1vm {
 background:url(../images/link1.png) no-repeat 3px 50%;
 padding-left:20px;
}


/*tab*/
.tab_bg1,.tab_bg2,.tab_bg3,.btn_bg1,.btn_bg2,.btn_bg3 {
  background:url(../images/tab_bg.png) repeat-x;
  background-size:cover;
  display:inline-block;
  vertical-align:middle;
  cursor:pointer;
}

.btn_bg1:hover,.btn_bg2:hover,.btn_bg3:hover {
  background:url(../images/tab_bg.png) repeat-x;
  background-size:cover;
  display:inline-block;
  vertical-align:middle;
  filter:alpha(opacity=50);/*for ie*/
  opacity:0.5;
  -moz-opacity:0.5;
  -khtml-opacity:0.5;
  cursor:pointer;
}

.tab_bg1,.btn_bg1 {
  line-height:22px;
  padding:0px 5px;
  min-height:22px;
  *height:22px;
}

.tab_bg2,.btn_bg2 {
  line-height:33px;
  padding:0px 10px;
  min-height:33px;
  *height:33px;
}

.tab_bg3,.btn_bg3 {
  line-height:44px;
  padding:0px 14px;
  min-height:44px;
  *height:44px;
}

.nobg {
 background:url()
}

/*-------------------------------------------------------------------------------*/
.container {
 margin:auto;	
 width:970px;
 min-height:600px;
 *height:;
 clear:both	
}

/*header*/
.header {
	
}
.logo_block{
 width:700px;
 height:105px;
 float:left;
 display:block;
}
.logo {
 margin-top:40px;
 margin-left:220px	
}

.sch_block{
 width:270px;
 height:105px;
 float:left;
 display:block;
}

.cart_block {
 height:32px;
 margin-top:15px;
}

.cart {
 margin-left:35px;	
 width:70px;
 float:left;
 color:#ffffff;
}

.cart_icon {
 background-image: url(../images/icon_cart.png);	
 background-position: 0 0;
 background-repeat:no-repeat;
 width:21px;
 height:16px;
 float:left;
}

.msg {
 background-image: url(../images/icon_msg.png);
 background-position: 0 0;
 background-repeat:no-repeat;
 width:14px;
 height:10px;	 
 margin-top:5px;	
 margin-right:16px;
 float:left;
}

.sch {
 width:132px;
 height:22px;
 background:url(../images/bg_sch.png);
 float:left;
}
.sch_ipt {
 width:80px;
 height:14px;
 border:#ffffff solid 0px;
 margin:1px 0px 0px 5px;
 background-color:transparent; 
}
.sch_icon {
position:absolute;
margin-left:110px;
margin-top:3px;
}


.top_ban_block{
 height:50px;
 border:1px solid #ffffff;
 position:relative;
}
.top_ban_block img {
 xmargin:10px 0px 0px 10px;
 top:10px;
 left:10px;
 position:absolute;
}

.menu_block{
 width:100%;
 height:24px;
 margin-top:5px;
}
.menu_block span {
 background-image:url(../images/menu_bg.jpg);
 cursor:pointer;
 display:block;
 height:24px;
 float:left;
}
.menu_block a:hover span {
 background-image:url(../images/menu_bg_f.jpg);
 cursor:pointer;
 display:block;
}

.menu_block .menu_active {
 background-image:url(../images/menu_bg_p.jpg);
 cursor:pointer;
 display:block;
}

.menu1 { background-position:0px 0px;width:180px  }
.menu2 { background-position:-180px 0px;width:180px  }
.menu3 { background-position:-360px 0px;width:180px  }
.menu4 { background-position:-540px 0px;width:180px  }
.menu5 { background-position:-720px 0px;width:250px   }

.submenu_block {
 background-color:#36444e;
 position:absolute;
 z-index:12;
}
.submenu_block_inner{
 width:970px;
 min-height:40px;/*min-height:385px*/
 *xheight:385px;
}

.submenu_block_close {
 clear:both;
 float:right;
 width:65px;
 height:20px;
 text-align:left; 
}

.submenu_close {
 background-image:url(../images/icon_menu_close.jpg);
 width:14px;
 height:14px;
 display:block;
 margin-right:5px;
 float:left;
}

.submenu_pane {
 width:105px;
 margin:40px 20px 0px 40px;
 float:left;
}

.submenu_title {
 border-bottom:#ffffff solid 1px;
 height:25px;
 font-size:11pt;
 font-weight:bold;
 color:#ffffff;
}

.submenu_list {
 margin-top:10px;
}


/*content*/
.content {	
  margin-top:20px;
  margin-bottom:20px;
}

/*fix footer*/
.footer {
 background:#000;
 width:100%;
 height:20px;
 color:#626262;
 text-align:center;
 font-size:9pt;
}



html, body {xheight: 100%;}



html {
 display:block;
 height:100%
}

body {
 background:url(../building/bg.jpg) no-repeat;
 background-position:center;
 background-attachment:fixed;
 display:block;
}


/*building*/
.building {
 margin:auto;	
 background:url(../building/cardbg.jpg);	
 width:500px;
}

.building_logo {
 margin:auto;
}


.container  {min-height: 100px;}

.content {overflow:auto;
	padding-bottom: 20px;}  /* must be same height as the footer */

.footer {position: relative;
	margin-top: -20px; /* negative value of footer height */
	height: 20px;
	clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/*pagenation*/

.pagination{
 line-height:40px;
 font-size:10pt;
 text-indent:0px;
}
.pagination span {
 padding:3px;
 text-align:center;
 border:1px #aaaaaa solid;
 font-size:8pt;
}

.pagination span a {
 color:#cccccc;
}
.pagination .pagebold {
 font-weight:bold;
 color:#ffffff;
}
.pagination span:hover{
 padding:3px;
 text-align:center;
 border:1px #ffffff solid;
 font-size:8pt;
 text-decoration:none;
 color:#ffffff;
}

.pagination span:hover a{
 text-decoration:none;
 color:#ffffff;
}



/*form*/

/*button*/
@media screen and (min-width: 1200px)  {
    /* 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。*/
	body {
	 background-size:100% 100%;
	}
}

@media screen and (min-height: 0px) and (max-height: 500px) {
  	body {
	 background-size:cover;
	}  
}

 
@media screen and (min-width: 768px) and (max-width: 979px)  {
    /* 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。 */  
	body {
	 background-size:cover;
	}    
}
 
@media screen and (max-width: 767px)  and (max-height:500px) {
    /* 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。*/
    body {
	 background-size:cover;
	}     
}
 
@media screen and (max-device-width: 480px)  and (max-height:500px) {
    /* 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。*/
   	body {
	 background-size:cover;
	}  
}