body {
  -webkit-text-size-adjust: 100%;
  color: #2c2c2c;
  background: #f8f8f8;
}

a {
  color: #2c2c2c;
}

input[type='password'], input[type='email'], input[type='tel'], input[type='text'], input[type='number'], input[type='search'], textarea {
  -webkit-appearance: none;
  font-family: '微軟正黑體', sans-serif;
  width: 100%;
  padding: 10px 10px 7px 10px;
  margin: 5px 0 10px 0;
  border: 1px solid #DDD;
  font-size: 0.9em;
  background: #FFF;
  color: black;
  border-radius: 5px;
}
input[type='password']:focus, input[type='email']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='number']:focus, input[type='search']:focus, textarea:focus {
  outline: none;
}

select {
  background: white;
  color: black;
  padding: 4px;
  border: 1px solid #DDD;
  margin: 0;
}

i{
  margin-right: 4px;
}

span.warn {
  color: #ff5f5f;
}

input.error {
  border: #ff5f5f 1px solid; 
}

.ui-datepicker{
  z-index: 999999;
}
.input-datepicker {
  width: 110px;
}
.button {
  color: #999;
  background: #DDD;
  border-radius: 4px;
  padding: 2px 10px 0;
  border-bottom: 3px #999 solid;
}
.button:hover {
  color: #CCC;
  background: #888;
}
.button.disabled, .button[disabled] {
  color: #cccccc;
}
.button.btn-rush {
  background: #dd0000;
  color: #FFF;
  border-bottom: 3px #BB0000 solid;
}
.button.btn-rush:hover{
  background: #f70000;
}
.button.btn-rush:active, .button.btn-rush.pressed {
  background: #910000;
}
.button.btn-discount{
  background: #ff9900;
  color: #FFF;
  border-bottom: #FF6600 3px solid;
}
.button.btn-discount:hover{
  background: #ffa31a;
}
.button.btn-discount:active, .button.btn-discount.pressed {
  background: #b36b00;
}
.button.btn-preorder{
  background: #ffcc21;
  color: white;
  border-bottom: #FF9900 3px solid;
}
.button.btn-preorder:hover{
  background: #ffd23b;
}
.button.btn-preorder:active, .button.btn-preorder.pressed {
  background: #d3a300;
}
.button.btn-finish {
  background: #0099cc;
  color: white;
  border-bottom: #336699 3px solid;
}
.button.btn-finish:hover {
  background: #00668D;
}
.button.btn-finish:active, .button.btn-finish.pressed {
  background: #0070F0;
}
.button.btn-add {
  background: #13b5b1;
  color: white;
  border-bottom: #0d7e7b 3px solid;
}
.button.btn-add:hover {
  background: #42c3c0;
}
.button.btn-add:active, .button.btn-add.pressed {
  background: #42c3c0;
}

.hide {
  display: none;
}

.wrap{
  position: relative;
  padding: 0;
}
.logo-text{
  color: #FFF;
  font-size: 26px;
  font-style: oblique;
}

/* header */
.header-block {
  position: relative;
  margin-bottom: 11px;
  z-index: 9;
}
.header-block {
  zoom: 1;
}
.header-block:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.header-block .container {
  margin: 0 auto 15px auto;
  padding: 20px;
}
.header-block .container {
  zoom: 1;
}
.header-block .container:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.header-block .logo {
  float: left;
  height: 38px;
  margin-right: 2%;
}
.header-block .logo {
  zoom: 1;
}
.header-block .logo:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.header-block .logo img {
  display: inline-block;
  max-height: 50px;
  vertical-align: middle;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
  transition: 0.4s;
}
.header-block .logo .logo_demo{
	background: #666;
	border: #666 6px solid;
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    padding: 0 6px; 
    border-radius: 6px;
}
.header-block .top-msg {
	float: right;
	width: 50%;
	height: 38px;
	font-size: 28px;
	text-align: right;
	vertical-align: top;
	padding-top: 10px;
}
.header-block .top-msg li {
	display: inline-block;
  	margin-left: 10px;
}
.header-block .top-msg li:last-child {
  margin-bottom: 0;
}
.header-block .top-msg li {
  zoom: 1;
}
.header-block .top-msg li:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.header-block .top-msg a {
  color: #2290c6;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -ms-transition: 0.4s;
  transition: 0.4s;
}
.header-block .top-msg a:hover, .header-block .top-msg a:active {
  color: #7fbee5;
}
.header-block .top-msg .top-msg-content {
  width: 93%;
  display: block;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-block .top-msg .more {
  width: 7%;
  display: block;
  float: left;
}
@media only screen and (max-width: 1241px) {
  .header-block {
    padding: 0 15px;
  }
}
@media only screen and (max-width: 1000px) {
  .header-block .logo {
    width: 57%;
    margin-right: 1%;
  }
  .header-block .top-msg {
    width: 42%;
  }
}
@media only screen and (max-width: 768px) {
  .header-block .container {
    margin: 14px auto;
  }
  .header-block .logo {
    float: none;
    width: 100%;
    height: auto;
    line-height: 1;
    margin-bottom: 12px;
    margin-right: 0;
  }
  .header-block .logo img {
    max-width: 250px;
  }
  .header-block .top-msg {
    float: none;
    width: 100%;
    height: auto;
  }
}
@media only screen and (max-width: 568px) {
  .header-block {
    margin-bottom: 10px;
  }
  .header-block .logo img {
    max-width: 180px;
  }
  .header-block .logo h1 {
    font-size: 15px;
    margin-left: 7px;
  }
  .header-block .top-msg .top-msg-content {
    width: 90%;
  }
  .header-block .top-msg .more {
    width: 10%;
  }
}

.social {
  font-size:25px;
  padding:20px;
}
.social p {
  margin:0;
  padding:20px 0 5px 0;
  line-height:30px;
  font-size:13px;
}
.social p a {
  color:#34B484;
  text-decoration:none;
  margin:0;
  padding:0;
}
.social-icon {
  width:80px;
  height:50px;
  background:#e9e9e9;
  color:#333;
  display:inline-block;
  margin:0 20px;
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}
.social-icon:hover {
  background:#34B484;
  color:#f0f0f0;
}
.social-icon i {
  margin-top:12px;
}
@media screen and (max-width:48em) {
  .social {
    color:#c1c1c1;
    font-size:25px;
    padding:15px 0;
  }
  .social-icon {
    width:100%;
    height:50px;
    background:#fff;
    color:#333;
    display:block;
    margin:5px 0;
  }
}

/* contain */
.container {
  width: 100%;
  max-width: 1280px;
  position: relative;
  margin: 0 auto;
  padding: 0 20px;
}
.container {
  zoom: 1;
}
.container:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.container-body {
  padding: 40px 0 0;
  width: 100%;
  margin: 0 auto;
  background: #f2f2f2;
}
.container-body {
  zoom: 1;
}
.container-body:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.container-main{
  max-width: 1280px;
  min-height: 420px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .container{
    width: 100%;
    max-width: 100%;
  }
}