@charset "utf-8";

/* --------------------------------------------------------------------------------
COLOR
Body background: #fff;
Container background: none;
Main Text: #666; 
Links: blue;
Visited links: 
Hover links: 
Active links: 
H1: #000;
H2: #BB0611;
H3, H4, H5, H6: 
-------------------------------------------------------------------------------- */

/* Base
-------------------------------------------------------------------------------- */
/*html{ overflow-x: hidden; }*/
body {
	font: 12px/18px Arial, Verdana, sans-serif;
  /* "Lucida Grande", "Lucida Sans Unicode" */
	color: #666;
	-webkit-text-size-adjust:none;
	}

a {	color: #859092;	cursor:pointer; font-weight: bold; }
a:link, a:visited, a:active { text-decoration: none; }
a:hover { text-decoration: underline; }
p { line-height: 20px; margin-bottom: 20px; }
h1, h2, h3, h4{ font-family: 微軟正黑體; }
h1 { font-weight: bold; font-size: 16px; }
h2 { font-weight: bold; font-size: 18px; color:#ffffff; margin:  16px 0 8px; }
h3 { font-weight: bold; font-size: 15px; line-height: 18px; margin-bottom: 5px; color: #E50013; }
h4 { font-size: 13px; *font-size: 11px; font-weight: bold; color: #514747; }

abbr,acronym { border-bottom: 1px dotted black; } /* abbr用於縮寫，acrony頭字語的簡稱 */
acronym:after { content: " (" attr(title) ")"; } /* 列印時自動展開成全稱 */
pre,code,address,caption,cite,code,em,strong {}

em.point{ color: #D52F2F; font-weight: bold }
em.point.larged{ font-size: 15px; }


/* line outline set
--------------------------------------------------- */
a, object{ noFocusline:expression(this.onFocus=this.blur()); }/* For IE, onFocus 的 F 要大寫*/
a:focus, object:focus{ -moz-outline-style:none; } /* For Firefox */

	
/* LAYOUT CLASS
--------------------------------------------------------------------------------
text - 文字排版
button - 按鈕
replacement - 定位
ul li - ul 清單
media object - 圖文
Icon - 圖示
table - 表格
form - 表單
init style - 初始自訂樣式
-------------------------------------------------------------------------------- */
.clear { clear: both; }
.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }
.pull-right { float: right; }
.pull-left { float: left; }
.hide { display: none; }
.show { display: block; }
.invisible { visibility: hidden; }
.center{ text-align: center; }
.small { font-size: 0.8em; }

.bbline{ border: 1px solid red; }

.btn1{ vertical-align: text-bottom; }
.btn1-1{ vertical-align: text-bottom; margin-bottom: -1px; margin-left: 2px; }
.btn2{ vertical-align: middle; }
.btn3{ vertical-align: middle; margin-bottom: 2px; }

.vtm-t{ vertical-align: top; }

.color2line{ min-width: 635px; height: 3px; background: url(../images/about_02/color2line.jpg) no-repeat; }


/* text set
-------------------------------------------------------------------------------- */

.text-left{ text-align: left; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }

/*反白設定*/
::selection { background: #D30011; color: #fff; }
::-moz-selection { background: #D30011; color: #fff; /* Firefox */ }


.txt-red{ color: #E50012; }
.txt-orange{ color: #FF6607; }
.text-note, .text-note a{ color: #0BA199; }
.txt-red.text-note, .txt-red.text-note a{ color: #E50012; }

.txt-uline{ text-decoration: underline; }

/* replacement
-------------------------------------------------------------------------------- */

.replacement{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  }
  .fixed-top{ position: fixed; top: 0; z-index: 9999; }
  .fixed-bottom{ position: fixed; bottom: 0; z-index: 9999; }
  .affix { position: fixed; }


/* button set
-------------------------------------------------------------------------------- */
[class^="btn-"],
[class*=" btn-"]{
  display: inline-block;
  vertical-align: top;
  zoom: 1; /* Fix for IE7 */
  *display: inline; /* Fix for IE7 */
  background: url(../images/comm/btn-spriter.png) no-repeat;
  text-align: center;
}

.btn-more{ background-position: 0 0; width: 57px; height: 21px; line-height: 21px; margin-top: -2px; }
.btn-more:hover{ background-position: 0 -21px; width: 57px; height: 21px; line-height: 21px; }

.btn-addcar{ background-position: -171px 0; width: 115px; height: 49px; }
.btn-addcar:hover{ background-position: -171px -49px; }
.btn-addcar:active{ background-position: -171px -98px; }
.btn-addcar-small{ background-position: -286px 0; width: 25px; height: 26px; }
.btn-zoom-in{ background-position: 0 -63px; width: 76px; height: 25px; }

.btn-delete{ background-position: -311px 0; width: 25px; height: 26px; }

.btn-backtolist{ background-position: -76px -63px; width: 57px; height: 21px; }
.btn-backtolist:hover{ background-position: -76px -84px; }
.btn-backtolist:active{ background-position: -76px -105px; }

.btn-next{ background-position: 0 -138px; width: 76px; height: 25px; }
.btn-next:hover{ background-position: 0 -163px; }

.btn-next-large{ background-position: -171px -147px; width: 115px; height: 50px; }
.btn-next-large:hover{ background-position: -171px -197px; }
.btn-next-large:active{ background-position: -171px -247px; }

.btn-shopping{ background-position: -76px -138px; width: 76px; height: 25px; }
.btn-shopping:hover{ background-position: -76px -163px; }
.btn-shopping:active{ background-position: -76px -188px; }


.btn-checkout{ background-position:  0 -213px; width: 114px; height: 50px; }
.btn-checkout:hover{ background-position: 0 -263px; }
.btn-checkout:active{ background-position: 0 -313px; }

.btn-member{ background-position: -286px -78px; width: 115px; height: 50px; }
.btn-member:hover{ background-position: -286px -128px; }
.btn-member:active{ background-position: -286px -178px; }

.btn-contact{ background-position: -286px -228px; width: 115px; height: 50px; }
.btn-contact:hover{ background-position: -286px -278px; }
.btn-contact:active{ background-position: -286px -328px; }

.btn-cancel{ background-position: -114px 0; width: 57px; height: 21px; }
.btn-cancel:hover{ background-position: -114px -21px; }
.btn-cancel:active{ background-position: -114px -42px; }

.btn-submit{ background-position: -57px 0; width: 57px; height: 21px; }
.btn-submit:hover{ background-position: -57px -21px; }
.btn-submit:active{ background-position: -57px -42px; }

.btn-change{ background-position: -114px -213px; width: 57px; height: 21px; }
.btn-change:hover{ background-position: -114px -234px; }
.btn-change:active{ background-position: -114px -255px; }

.btn-apply{ background-position: -401px -50px; width: 115px; height: 50px; }
.btn-apply.disable, .btn-apply.disable:hover{ background-position: -401px 0; }
.btn-apply:hover{ background-position: -401px -100px; }
.btn-apply:active{ background-position: -401px -150px; }

.btn-login{ background-position: -516px -50px; width: 115px; height: 50px; }
.btn-login.disable, .btn-login.disable:hover{ background-position: -516px 0; }
.btn-login:hover{ background-position: -516px -100px; }
.btn-login:active{ background-position: -516px -150px; }

.btn-groupbuy{ background-position: -401px -200px; width: 151px; height: 50px; }
.btn-groupbuy:hover{ background-position: -401px -250px; }
.btn-groupbuy:active{ background-position: -401px -300px; }

.btn-checkps{ background-position: -401px -350px; width: 145px; height: 25px; }
.btn-checkps:hover{ background-position: -401px -375px; }

.btn-resendps{ background-position: -286px -378px; width: 115px; height: 50px; }
.btn-resendps:hover{ background-position: -286px -428px; }

.btn-send-large{ background-position: -171px -297px; width: 115px; height: 50px; }
.btn-send-large:hover{ background-position: -171px -347px; }
.btn-send-large:active{ background-position: -171px -397px; }

.btn-myorder{ background-position: -401px -400px; width: 115px; height: 50px; }
.btn-myorder:hover{ background-position: -401px -450px; }
.btn-myorder:active{ background-position: -401px -500px; }

.btn-goshopping{ background-position: 0 -363px; width: 114px; height: 50px; }
.btn-goshopping:hover{ background-position: 0 -413px; }
.btn-goshopping:active{ background-position: 0 -463px; }


/*  */
.btn-cancel_en{ background-position: -171px -448px; width: 57px; height: 21px; }
.btn-cancel_en:hover{ background-position: -171px -469px; }
.btn-cancel_en:active{ background-position: -171px -490px; }

.btn-submit_en{ background-position: -228px -448px; width: 57px; height: 21px; }
.btn-submit_en:hover{ background-position: -228px -469px; }
.btn-submit_en:active{ background-position: -228px -490px; }

/* ul li set
-------------------------------------------------------------------------------- */
ol { list-style: decimal; }
ul { list-style: disc; }
li { /*margin-left: 30px;*/ }
ul, ol { padding: 0; margin: 0 0 10px 25px; }
ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; list-style-type: circle; }
li { line-height: 20px; }
ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; }
ul.inline, ol.inline { margin-left: 0; list-style: none; }
ul.inline > li, ol.inline > li { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; padding-left: 5px; padding-right: 5px; }

.order_list li{ min-height: 13px; background-color: #101010; padding: 6px 39px 6px 0; display: inline-block; width: 100%; }
.order_list li:nth-child(2n) { background-color: #000; }

.order_plus{ margin-bottom: 30px; }

  .order_list.ol-circle li{ padding-left: 28px; }
  .order_list.menu_list li, .order_list.order_plus li{ padding: 0 6px 0 0; }


    .ol-circle li{ background-image: url(../images/comm/icon/circle-orange-icon.png); background-position: 13px 12px; background-repeat: no-repeat; }
      .ol-circle li:nth-child(2n){ background: url(../images/comm/icon/circle-yellowicon.png) no-repeat 13px 12px; }


/* media object
-------------------------------------------------------------------------------- */
.media,
.media-body {
  overflow: hidden;
  *overflow: visible;
  zoom: 1;
}
.media,
.media .media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}
.media-object {
  display: block;
}
.media-heading {
  margin: 0 0 5px;
}
.media > .pull-left {
  margin-right: 32px;
}
.media > .pull-right {
  margin-left: 10px;
}
.media-list {
  margin-left: 0;
  list-style: none;
}

.media-body.text-right h4, .media-body.text-right img, .media-body.text-right p { float: right; clear: both; }
.media-body p{ margin-top: 9px; line-height: 130%; color: #ccc; }




/* Icon set
-------------------------------------------------------------------------------- */

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  /*margin-top: 1px;*/
  margin-right: 0.2em;
  *margin-right: .3em;
  line-height: 14px;
  /*vertical-align: text-top;*/
  vertical-align: middle;
  background-image: url("../images/comm/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

.icon-dot{	width: 12px; height: 12px; background-position: 0 0; }
.icon-arrow{ width: 3px; height: 5px; background-position: 0 -12px; }
.icon-coffee{ width: 23px; height: 42px; line-height: 42px; background-position: -76px -84px; float: left; margin-top: 8px; }


/* custom icon */
.icon-circle{ width: 7px; height: 8px; background-position: -3px -12px; vertical-align: middle; margin: -2px 3px 0 }
.icon-greencircle{ width: 10px; height: 10px; background-position: 0 -36px; vertical-align: middle; margin: -2px 4px 0 }
.icon-timer{ width: 14px; height: 15px; background-position: 0 -21px; vertical-align: middle; margin: -2px 3px 0; }


.icon-lbnav { background-position: 0 0; }
.active .icon-lbnav, #lb-nav a:hover .icon-lbnav{ background-position: 0 -14px; }

.icon-fb,
.icon-google,
.icon-plurk{ width: 16px; height: 16px; line-height: 16px; margin: -2px 1px; }

.icon-fb{ background-position: -14px -21px; }
.icon-google{ background-position: -14px -37px; }
.icon-plurk{ background-position: -14px -53px; }

.icon-question{ width: 21px; height: 20px; background-position: 0 -69px }
.icon-answer{ width: 21px; height: 20px; background-position: 0 -89px; }

.icon-first, .icon-last{ width: 20px; height: 20px; margin-top: -3px; }
.icon-first{ background-position: -99px -84px; margin-right: 4px; }
.icon-last{ background-position: -119px -84px; margin-left: 2px; }


/* table set
--------------------------------------------------- */
table { border-collapse: collapse; border-spacing: 0; }
caption,th { text-align: left; }

  .table-txtcolor tr th{ font-size: 22px; font-family: "微軟正黑體"; }
  .table-txtcolor tr.odd th, .table-txtcolor tr.odd td > em{ font-weight: bold; color: #EA8433; }
  .table-txtcolor tr.even th, .table-txtcolor tr.even td > em{ font-weight: bold; color: #85B81D; }


  dt, dd { line-height: 20px; }
  dt { font-weight: bold; }
  dd { margin-left: 10px; }

  .dl-horizontal { *zoom: 1; }

  .dl-horizontal:before, .dl-horizontal:after {
    display: table;
    line-height: 0;
    content: "";
  }

  .dl-horizontal:after { clear: both; }

  .dl-horizontal dt {
    float: left;
    width: 67px;
    overflow: hidden;
    clear: left;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dl-horizontal dd { margin-left: 10px; }


/* form set
-------------------------------------------------------------------------------- */
input[type="text"],input[type="password"], select, textarea{ border: 3px solid #F1F1F1; color: #999; padding: 2px; }
input[type="radio"], input[type="checkbox"]{ border: none; vertical-align: middle; margin-right: 0.2em; margin-left: 0.3em; }
textarea{ resize: none; overflow: auto; color: #444; }

input[type="button"]{ border: 3px solid #F1F1F1; color: #333; padding: 2px 11px; background-color: #fff; font-size: 12px; }
input[type="button"]:hover{ background-color: #FF0000; color: #fff; }
input[type="button"]:active{ position: relative; top: 2px; left: 2px; }


input[type="text"].fine,input[type="password"].fine, select.fine, textarea.fine{ border: 1px solid #EEE; }
input[type="text"].fine,input[type="password"].fine, select.fine{ height: 26px; }

.ss-col{ width: 39px; }
.sm-col{ width: 62px; }
.ms-col{ width: 101px; }
.mm-col{ width: 194px; }
.m-col{ width: 235px; }
.b-col{ width: 442px; }
.x-col{ width: 540px; }


/* init style set
--------------------------------------------------------------------------------
rote - 路徑
pageBox - 頁碼
-------------------------------------------------------------------------------- */

/* route
-------------------------------------------------------------------------------- */
.route001 {  
      font-size:11px;
      -webkit-transform:scale(0.91);
      font-family: Arial, Helvetica, sans-serif;
      height: 20px;
      margin: 5px 0 0 0;
      text-align: right;
      float: right;
    }
    
    .route001 a{ color: #999; font-weight: normal; }
    .route001 a:hover{ text-decoration: underline; }
    .route001 a.active, .route001 a.home_link{ color: #000; }


/* pageBox-new
-------------------------------------------------------------------------------- */
.pageBox-new{ padding-top: 15px; clear: both; width: 100%; }
.pageBox-new.btt-line{ border-top: 3px solid #D1D1D1; }

/* pageBox
-------------------------------------------------------------------------------- */
.pageBox {
    width: 100%;
    text-align: center;
    position:relative;
    min-height: 56px;
    padding-top: 25px;
    clear: both;
  }

  .pageBox a {
    font-family: arial;
    color: #9E9E9E;
    display: inline-block;
    margin: 0 2px;
  }

  .pageBox a.active { color: #5DC19D; }

  .pageBox .uiBtn {
    width: 57px;
    height: 21px;
    background: url(../images/comm/glyphicons-halflings.png) no-repeat 0 0;
    vertical-align: middle;
    margin-top: -2px;
  }
  .pageBox .txt-warp{
    display: inline-block;
    vertical-align: top;
    zoom: 1; /* Fix for IE7 */
    *display: inline; /* Fix for IE7 */
    width: 200px;
  }

  .pageBox .txt-warp-link{ color: #31BE8A; font-weight: normal; }

  .pageBox .line{
    display: inline-block;
    vertical-align: top;
    zoom: 1; /* Fix for IE7 */
    *display: inline; /* Fix for IE7 */
    color: #9E9E9E;
  }
  .backtolist, .cancel_btn, .submit_btn{ 
    width: 57px; height: 21px;
    background: url(../images/comm/glyphicons-halflings.png) no-repeat;
    display: block;
   }

  .pageBox .uiBtn.backtolist{ background-position: -91px -64px; }
  .pageBox .uiBtn.backtolist:hover{ background-position: -91px -84px; }
  .pageBox .uiBtn.backtolist:active{ background-position: -91px -105px; }

  .cancel_btn{ background-position: -110px 0; }
  .cancel_btn:hover{ background-position: -110px -21px; }
  .cancel_btn:active{ background-position: -110px -42px; }

  .submit_btn{ background-position: -167px 0; }
  .submit_btn:hover{ background-position: -167px -21px; }
  .submit_btn:active{ background-position: -167px -42px; }

  .pageBox .uiBtn.first { background-position: -12px 0; width: 11px; height: 7px; }
  .pageBox .uiBtn.first:hover { background-position: -12px -7px; }
  .pageBox .uiBtn.pre { background-position: -34px 0; }
  .pageBox .uiBtn.pre:hover { background-position: -34px -21px; }
  .pageBox .uiBtn.next { background-position: -91px 0; }
  .pageBox .uiBtn.next:hover { background-position: -91px -21px; }
  .pageBox .uiBtn.last { background-position: -23px 0; width: 11px; height: 7px; }
  .pageBox .uiBtn.last:hover { background-position: -23px -7px; }
  
  /* 上下一則 */
  .pageBox .uiBtn.prepage { background-position: -34px -64px; }
  .pageBox .uiBtn.prepage:hover { background-position: -34px -84px; }
  .pageBox .uiBtn.nextpage { background-position: -148px -63px; }
  .pageBox .uiBtn.nextpage:hover { background-position: -148px -84px; }

  .pageBox .uiBtn.disabled {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter:gray !important;
    cursor: default;
    pointer-events: none;
  }