body {
margin:0;
}
html {
font-family: 'source_sans_pro';
color:#222;
font-size:1em;
font-size:1rem;
box-sizing:border-box;
}
.main {
margin:0 auto;
width:100%;
height:auto;
overflow:auto;
background-color: #0869BD;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
*,:after,:before {
box-sizing:inherit
}
div {
}
article {
display:block;
background-color:#ACC94F;
}
h1 {
font-size:2rem;
margin:0;
padding:.25em;
}
h2 {
font-size:1.5rem;
}
h3 {
font-size:1.17rem;
}
h4 {
font-size:1rem;
}
h5 {
font-size:.83rem;
}
h6 {
font-size:.67rem;
}
/* acts as a spacer between title and grid cells */
.alert {
margin:0;;
padding:0 0 4px 0;
}
/*==|Grid|=====*/
.flex-container {
flex: 0 1 100%;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
width:100%;
height: auto;
padding:4px;
margin:0 auto;
background-color: transparent;
}
/* box holds all the product information */
.box
{
flex: 0 1 auto;
position:relative;
height:100%;
width:100%;
border-top: 3px solid #ACC94F;
border-right: 2px solid #ACC94F;
border-bottom: 3px solid #ACC94F;
border-left: 2px solid #ACC94F;
background-color: #fff;
border-radius: 8px;
}
.boxpadding {
border:2px solid #458916;
border-radius: 8px;
}
.box img {
width:100%;
height:100%;
overflow:hidden;
border-collapse: collapse;
border:1px dotted lightgray;
border-left:3px solid #fff;
border-right:3px solid #fff;
border-bottom:none;
border-top-right-radius:8px;
border-top-left-radius:8px;
}
.item-name {
position:relative;
padding:4px;
width:auto;
display:block;
width:100%;
text-align: center;
color:#044D8B;
font-size:1.1em;
font-weight:bold;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.price {
font-size:1em;
font-size:1rem;
position:absolute;
bottom:36px;
right:10px;
padding:2px;
max-width:90%;
background-color:rgba(255,255,255,1.0) ;
color:red;
z-index:30;
border:1px solid navy;
border-radius: 4px;
font-weight: bold;
}
.dongxi {
position:relative;
width:auto;
display:block;
width:100%;
background-color:navy;
color:#fff;
text-align: center;
font-size:1.59em;
font-weight:normal;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.desc {
font-size:.8em;
height:1.2em;
height:1.2rem;
color:#576C7E;
color:#868C8D;
}
.regprice {
color:brown;
font-size:.8em;
font-size:.8rem;
text-decoration:line-through;
}
.regprice:after {
content:" ";
}
.number1{
order:1;
}
.number2 {
order: 2;
}
.number3 {
order: 3;
}
.number4 {
/*background-color: cornflowerblue;*/
order: 4;
}
.number5 {
order:5;
}
.number6 {
order:6;
}
.number7 {
order:7;
}
.number8 {
order:8;
}
.number9 {
order:9;
}
.number10 {
order:10;
}
.number11 {
order:11;
}
.number12 {
order:12;
}
.number13 {
order:13;
}
.number14 {
order:14;
}
.number15 {
order:15;
}
.number16 {
order:16;
}
.number17 {
order:17;
}
.number18 {
order:18;
}
.number19 {
order:19;
}
.number20 {
order:20;
}
.number21 {
order:21;
}
.number22 {
order:22;
}
.number23 {
order:23;
}
.number24 {
order:24;
}
.number25 {
order:25;
}
.number26 {
order:26;
display:none;
}
.number27 {
order:27;
display:none;
}
.number28 {
order:28;
display:none;
}
/****************** end ***************/
/****************** print size 11" x 17" ***************/
@page {
size:A3;
/*width:297mm;
height:420mm;*/
margin-left: auto;
margin-right: auto;
}
@media print {
.main {
box-shadow: none;
width:100%;
background-color: #0869BD;
}
div.header-table {
display: none;
}
.heading {
padding: 0;
margin:0 auto;
color: #fff;
background-color: #0869BD;
height:auto;
width:100%;
clear:both;
}
table.header-table {
width:100%;
height:90px;
padding:2px;
border:0px;
margin:0;
clear:both;
}
.header-table td {
padding:0;
margin:0;
}
div.alert {
display: none;
}
td.logo-ch {
height:90px;
width:auto;
}
td.logo-wcs {
height:90px;
}
td.logo-ch img {
padding:0;
margin:0;
width:auto;
height:90px;
}
td.logo-wcs img {
padding:0;
margin:0;
width:auto;
height:80px;
}
td.head-info {
color:#fff;
}
.sale-date {
color:yellow;
font-weight: bold;
}
td.map {
width:auto;
}
td.map img {
height:90px;
border:2px solid #534417;
}
td.qrcode1 {
margin-right:20px;
}
td.qrcode1 img {
width:90px;
height:90px;
border:1px solid #000;
}
div.header-table {
display: none;
}
#footer {
background-color: #0869BD;
width:100%;
min-height:88px;
height:auto;
padding:4px;
color:#fff;
clear:both;
line-height: 1.2em;
overflow:auto;
text-align:left;
}
.footer-left {
float:left;
padding:6px 10px 0 6px;
text-align: left;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
.wcs-txt {
font-size:1.2em;
font-size: 1.2rem;
font-weight: bold;
font-style: italic;
}
.footer-middle1 {
float:left;
padding: 4px 20px 0 20px;
text-align: left;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
.footer-middle2 {
float:left;
padding: 4px 20px 0 20px;
font-weight:bold;
font-style:italic;
font-size:.9em;
font-size:.9rem;
color:yellow;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
img.qrcode2 {
width:88px;
height:88px;
border:1px solid #000;
}
#wechat {
float:right;
text-align:center;
color:#fff;
padding: 4px 10px 0;
text-shadow: 2px 2px 4px #000000;
border:1px solid transparent;
}
.footer-right {
float:right;
margin-right:20px;
width:90px;
border:1px solid transparent;
}
.box
{
flex-basis: 20%;
max-width:20%;
}
.box.number26 {
order:26;
display:none;
}
.box.number27 {
order:27;
display:none;
}
.box.number28 {
order:28;
display:none;
}
}
/****************** end of print size ***************/
/****************** desktop size ***************/
@media screen and (min-width:1000px) {
div.header-table {
display: none;
}
.heading {
padding: 0;
margin:0 auto;
color: #fff;
background-color: #0869BD;
height:auto;
width:100%;
clear:both;
}
table.header-table {
width:100%;
height:90px;
padding:2px;
border:0px;
margin:0;
clear:both;
}
.header-table td {
padding:0;
margin:0;
}
td.logo-ch {
height:90px;
width:auto;
}
td.logo-wcs {
height:90px;
}
td.logo-ch img {
padding:0;
margin:0;
width:auto;
height:90px;
}
td.logo-wcs img {
padding:0;
margin:0;
width:auto;
height:80px;
}
td.head-info {
color:#fff;
}
.sale-date {
color:yellow;
font-weight: bold;
}
td.map {
float:right;
margin-right:50px;
width:auto;
}
td.map img {
height:90px;
border:2px solid #534417;
}
td.qrcode1 {
display:none;
}
div.header-table {
display: none;
}
#footer {
background-color: #0869BD;
width:100%;
min-height:88px;
height:auto;
padding:4px;
color:#fff;
clear:both;
line-height: 1.2em;
overflow:auto;
text-align:left;
}
.footer-left {
float:left;
padding:6px 10px 0 6px;
text-align: left;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
.wcs-txt {
font-size:1.2em;
font-size: 1.2rem;
font-weight: bold;
font-style: italic;
}
.footer-middle1 {
float:left;
padding: 4px 40px 0 40px;
text-align: left;
font-weight:bold;
font-style:italic;
color:yellow;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
.footer-middle2 {
float:left;
padding: 4px 40px 0 40px;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
img.qrcode2 {
width:88px;
height:88px;
border:1px solid #000;
}
#wechat {
float:right;
text-align:center;
color:#fff;
padding: 4px 10px 0;
text-shadow: 2px 2px 4px #000000;
border:1px solid transparent;
}
.footer-right {
float:right;
margin-right:20px;
width:90px;
border:1px solid transparent;
}
.box
{
flex-basis: 20%;
max-width:20%;
}
.box.number26 {
display:none;
}
.box.number27 {
display:none;
}
.box.number28 {
display:none;
}
}
/****************** end of desktop size***************/
/******************laptop size ***************/
@media screen and (min-width:800px) and (max-width:999px) {
div.header-table {
display: none;
}
.heading {
padding: 0;
margin:0 auto;
color: #fff;
background-color: #0869BD;
height:auto;
width:100%;
clear:both;
}
table.header-table {
width:100%;
height:90px;
padding:2px;
border:0px;
margin:0;
clear:both;
}
td {
border:1px solid transparent;
}
.header-table td {
padding:0;
margin:0;
}
td.logo-ch {
height:90px;
width:auto;
}
td.logo-wcs {
height:90px;
}
td.logo-ch img {
padding:0;
margin:0;
width:auto;
height:90px;
}
td.logo-wcs img {
padding:0;
margin:0;
width:auto;
height:80px;
}
td.head-info {
color:#fff;
text-align: right;
padding-right:4px;
}
.sale-date {
color:yellow;
font-weight: bold;
text-align: right;
padding-right:4px;
}
td.map {
min-width:100px;
}
td.map img {
width:100%;
height:90px;
border:2px solid #534417;
}
td.qrcode1 {
display: none;
}
div.header-table {
display: none;
}
#footer {
background-color: #0869BD;
width:100%;
min-height:88px;
height:auto;
padding:4px;
color:#fff;
clear:both;
line-height: 1.2em;
overflow:auto;
text-align:left;
}
.footer-left {
float:left;
padding:6px 10px 0 6px;
text-align: left;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
.wcs-txt {
font-size:1.2em;
font-size: 1.2rem;
font-weight: bold;
font-style: italic;
}
.footer-middle1 {
float:left;
padding: 4px 10px 0 10px;
text-align: left;
font-weight:bold;
font-style:italic;
color:yellow;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
.footer-middle2 {
float:left;
padding: 4px 10px 0 10px;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
img.qrcode2 {
width:88px;
height:88px;
border:1px solid #000;
}
#wechat {
float:right;
text-align:center;
color:#fff;
padding: 4px 10px 0;
text-shadow: 2px 2px 4px #000000;
border:1px solid transparent;
}
.footer-right {
float:right;
margin-right:20px;
width:90px;
border:1px solid transparent;
}
.box
{
flex-basis: 25%;
max-width:25%;
}
.box.number26 {
display:inline;
}
.box.number27 {
display:inline;
}
.box.number28 {
display:inline;
}
}
/****************** end***************/
/******************tablet-small laptop size ***************/
@media screen and (min-width:650px) and (max-width:799px) {
div .heading {
display: none;
}
div.header-table {
padding:10px 10px 6px 10px;
width:100%;
min-height:90px;
height:auto;
overflow:auto;
margin:0;
clear:both;
background-color: #0869BD;
}
div.logo-ch {
float:left;
width:auto;
height:90px;
}
div.logo-ch img {
padding:0;
margin:0;
width:100%;
height:90px;
}
div.logo-wcs {
padding-left:20px;
height:90px;
float:left;
width:auto;
}
div.logo-wcs img {
padding:0;
margin:0;
width:100%;
height:80px;
}
div.head-info {
float:left;
width:70%;
margin:0 auto 8px;
height:auto;
text-align: center;
color:#fff;
box-sizing: border-box;
}
div.head-contact {
padding:0;
font-size:1em;
font-size:1rem;
}
div.sale-date {
font-size:1.2em;
font-size:1.2rem;
font-weight:bold;
font-style: italic;
color:yellow;
text-shadow: 2px 2px 4px #053E70;
}
div.map {
display:inline;
float:right;
width:30%;
height:auto;
box-sizing: border-box;
}
div.map img {
height:90px;
min-width:120px;
border:2px solid #534417;
}
div.qrcode1 {
display: none;
}
#footer {
background-color: #0869BD;
width:100%;
min-height:90px;
height:auto;
padding:4px;
color:#fff;
clear:both;
line-height: 1.2em;
overflow:auto;
text-align:left;
}
.footer-left {
float:left;
padding:6px 10px 0 6px;
margin-bottom:4px;
text-align: left;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
.wcs-txt {
font-size:1.2em;
font-size: 1.2rem;
font-weight: bold;
font-style: italic;
}
.footer-middle1 {
float:left;
padding: 4px 8px 0 8px;
font-weight:bold;
font-style:italic;
font-size:.9em;
font-size:.9rem;
color:yellow;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
.footer-middle2 {
float:left;
margin-bottom:4px;
padding: 4px 18px 0 8px;
text-align: left;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
border:1px solid transparent;
}
img.qrcode2 {
width:88px;
height:88px;
border:1px solid #000;
}
div {
}
#wechat {
float:left;
text-align:center;
color:#fff;
padding: 4px 8px 0;
text-shadow: 2px 2px 4px #000000;
border:1px solid transparent;
clear:right;
}
.footer-right {
float:left;
margin-right:10px;
width:90px;
border:1px solid transparent;
}
.box
{
flex-basis: 33%;
max-width:33%;
}
.box.number26 {
display:inline;
}
.box.number27 {
display:inline;
}
.box.number28 {
display:none;
}
}
/******************end ***************/
/******************tablet size ***************/
@media screen and (min-width:451px) and (max-width:649px) {
div .heading {
display: none;
}
div.header-table {
padding:20px;
width:100%;
min-height:90px;
height:auto;
overflow:auto;
margin:0;
clear:both;
background-color: #0869BD;
}
div.logo-ch {
float:left;
width:auto;
height:90px;
}
div.logo-ch img {
padding:0;
margin:0;
width:100%;
height:90px;
}
div.logo-wcs {
padding-left:20px;
height:90px;
float:left;
width:auto;
}
div.logo-wcs img {
padding:0;
margin:0;
width:100%;
height:80px;
}
div.head-info {
float:left;
width:70%;
height:auto;
text-align: center;
color:#fff;
box-sizing: border-box;
}
div.head-contact {
padding:0;
margin:0;
font-size:1em;
font-size:1rem;
}
div.sale-date {
font-size:1.2em;
font-size:1.2rem;
font-weight:bold;
font-style: italic;
color:yellow;
padding:6px 0 12px 0;
text-shadow: 2px 2px 4px #053E70;
}
div.map {
display:inline;
float:right;
width:30%;
height:auto;
box-sizing: border-box;
}
div.map img {
height:90px;
width:100%;
border:2px solid #534417;
}
div.qrcode1 {
display: none;
}
#footer {
position: relative;
background-color: #0869BD;
width:100%;
height:auto;
min-height:144px;
width: auto;
padding:10px;
color:#fff;
clear:both;
line-height: 1.2em;
overflow:auto;
text-align:left;
}
.footer-left {
position: relative;
clear: both;
text-align: center;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
}
.wcs-txt {
font-size:1.2em;
font-size: 1.2rem;
font-weight: bold;
font-style: italic;
}
.footer-middle1 {
position: relative;
clear: both;
padding: 4px;
text-align: center;
font-weight:bold;
font-style:italic;
font-size:.9em;
font-size:.9rem;
color:yellow;
text-shadow: 2px 2px 4px #053E70;
}
.footer-middle2 {
float:left;
padding: 4px 20px 0;
text-align: left;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
}
#wechat {
float:right;
text-align:center;
color:#fff;
padding: 4px 10px 0 0 ;
text-shadow: 2px 2px 4px #000000;
border:1px solid transparent;
}
.footer-right {
float:right;
padding:4px 10px 0 0 ;
width:90px;
border:1px solid transparent;
}
img.qrcode2 {
float:right;
width:88px;
height:88px;
border:1px solid #000;
}
.box
{
flex: 1 auto;
flex-basis: 50%;
max-width:50%;
}
.box.number26 {
display:inline;
}
.box.number27 {
display:none;
}
.box.number28 {
display:none;
}
}
/******************end ***************/
/******************cell phone size ***************/
@media screen and (max-width:450px) {
.main {
min-width:300px;
}
div .heading {
display: none;
}
div.header-table {
padding:20px;
width:100%;
min-height:90px;
height:auto;
overflow:auto;
margin:0;
clear:both;
background-color: #0869BD;
border:1px solid transparent;
}
div.logo-ch {
float:left;
width:auto;
height:90px;
clear:both;
border:1px solid transparent;
}
div.logo-ch img {
padding:0;
margin:0;
width:auto;
height:90px;
}
div.logo-wcs {
margin:0 auto;
height:90px;
float:left;
width:auto;
border:1px solid transparent;
}
div.logo-wcs img {
padding:0;
margin:0;
width:100%;
height:80px;
}
div.head-info {
position:relative;
margin:0 auto 5px;
clear:both;
color:#fff;
overflow:auto;
border:1px solid aqua;
}
div.head-contact {
text-align: center;
font-size:1em;
font-size:1rem;
text-align: center;
border:1px solid transparent;
}
div.sale-date {
font-size:1.2em;
font-size:1.2rem;
font-weight:bold;
font-style: italic;
color:yellow;
/*text-decoration-line: underline;*/
padding:6px 0 12px 0;
text-shadow: 2px 2px 4px #053E70;
text-align: center;
border:1px solid transparent;
}
div.map {
position:relative;
margin:0 auto;
padding-top:6px;
max-width:200px;
height:100px;
border:1px solid transparent;
clear:left;
}
div.map img {
height:100%;
width:100%;
border:2px solid #534417;
}
div.qrcode1 {
display: none;
}
.box
{
flex: 1 auto;
flex-basis: 100%;
max-width:100%;
}
.box.number26 {
display:none;
}
.box.number27 {
display:none;
}
.box.number28 {
display:none;
}
#footer {
background-color: #0869BD;
width:100%;
min-height:88px;
height:auto;
padding:10px;
color:#fff;
clear:both;
line-height: 1.2em;
overflow:auto;
text-align:left;
}
.footer-left {
position:relative;
margin:0 auto;
text-align: center;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
}
.wcs-txt {
font-size:1.2em;
font-size: 1.2rem;
font-weight: bold;
font-style: italic;
}
.footer-middle1 {
position:relative;
margin:4px auto;
text-align: center;
font-weight:bold;
font-style:italic;
font-size:.9em;
font-size:.9rem;
color:yellow;
text-shadow: 2px 2px 4px #053E70;
}
.footer-middle2 {
float:left;
padding: 4px 20px 0;
text-align: left;
font-weight:bold;
font-size:.9em;
font-size:.9rem;
text-shadow: 2px 2px 4px #053E70;
}
#wechat {
float:right;
text-align:center;
color:#fff;
padding: 4px 10px 0 0 ;
text-shadow: 2px 2px 4px #000000;
border:1px solid transparent;
}
.footer-right {
float:right;
padding:4px 10px 0 0 ;
width:90px;
border:1px solid transparent;
}
img.qrcode2 {
float:right;
width:88px;
height:88px;
border:1px solid #000;
}
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE5/Mac \*/
* html .clearfix {
height: 1px;
}
.clearfix {
display: block;
}
/* End hide from IE5/Mac */
@media only screen and (min-width:850px) {
.expired {
height:78vh;
}
}