@charset "utf-8";
/*-------ad-banner-----*/
.promo { width: 100%; padding: 0px; margin:0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; vertical-align:top; }
.promo div { width: 50%; margin:0; display: inline-flex; vertical-align: top; }
.promo div:nth-child(2){ margin-left:10px; margin-right:-15px;}
.promo div img { width: auto; margin: 0px auto; }
.promo figure{ width:100%; display:block;  margin:1% auto;}

.product { width: 100%; padding: 0px; margin:0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; vertical-align:top; }
.product .product-list .item { width:50%; display:inline-block; margin-right:-5px; }
.product .product-list .item:nth-child(2n){ margin-right:0px;} 

/*-------product -----*/
.product-list{ list-style: none; margin: 0 auto; padding: 0; display: block;  flex-wrap: wrap;  flex-direction:row; align-content:flex-start;  justify-content:flex-start;  /*just for pen positioning*/ }
.product-list .item { width:50%; display:inline-block; margin-right:-5px; }
.product-list .item:nth-child(2n){ margin-right:0px;} 
.item { width:100%; margin:1% auto; vertical-align:top;}
.series { padding: 2%; margin:auto; width: 90%; display: block; line-height: 0; text-align:left; }
.series h3 {margin:0 auto; padding:10px 0px 3px 0px; display: block; font-size: 1em; color: #4c4948; font-weight: 700; }
.series p { font-size:.85em; color: #4c4948; font-weight: 400;}
.series span.type{  display: block; margin:0 auto 3% auto;color:#999; font-size:.9em;}
.series a h3:hover, .series a p:hover { color: #3187bc; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; }
.series span.overline{ padding:0px 5px; text-decoration: line-through; }
.item figure { padding: 2%; margin: 2% auto; width: 96%; display: block; line-height: 0; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; }
.item figure img { max-width:100%; height:auto; background-color: #f7f7f7; margin: 0 auto; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; }
.item figure:hover img { background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); }
.item figure img a:hover { opacity: .5; }
/*----product  tag label------*/
.note { position: absolute; top: 0; left: 0; padding: 4px 8px; font-size: 0.9em; }
.note.on-sale { background:#e32d2c; color: #fff; }
.note.no-stock { background: #6394f8; color: #fff; }
/*product-show*/
.product-show{  margin: 0 auto; width: 100%; display: block; background:#f2f5f5;}
.leftwrap { width: 100%; padding: 0px 0px 20px 0px; display: block; vertical-align: top; text-align: left; }
.rightwrap { width: 96%; margin:auto; padding-top:5vh; display: block; }
.product-name { width: 100%; display: block; font-size:2.2em; color: #000; line-height: 1.5em; font-weight:700; text-align: left; }
.product-name::after { display: none; }
.label { color: #f5a623; font-size: 1em; font-weight:700; }
.model-name { color:#f5a623; font-weight: 700; }
.short-description { margin:auto; padding:2em .5em; display: block; width: 100%; }
.short-description p { font-size:1em; color: #333; line-height: 1.65em; font-weight: 700; }
.product-info { width: 100%; display: block; margin: 1% auto auto auto; }
.product-info li { margin-bottom: 1%; width: 100%; display: block; list-style: none; text-align: left; }
.product-extra { background-color: #fff; border: 1px solid #c9163a; border-radius: 4px; color: #c9163a; display: block; float: left; font-size: 13px; line-height: 24px; margin: 0 20px 0 0; text-align: center; width: 110px; }
.shipping-free { background-color: #c9163a; border-radius: 50%; color: #fff; display: block; font-size: 14px; height: 60px; right: 10%; line-height: 18px; padding: 10px 0 0; position: absolute; text-align: center; top: -10px; width: 64px; }
.product-price { margin: 10px auto 15px auto!important; border-bottom: 1px solid #e8eef4; padding:10px 0px 15px 0px; }
.product-price .desc { margin-bottom: 10px; color: #4c4948; display: inline-block; font-size: 13px;   }
.product-price .origin { margin-bottom: 10px; color: #4c4948; display: inline-block; font-size: 13px; text-decoration: line-through; }
.product-price .sale { color: #4c4948; font-size: 2em; font-weight:700; }
.product-info li.color-remark { color: #002752; display: block; float: left; font-size: 14px; font-weight: normal; line-height: 21px; overflow: hidden; padding: 0 0 0 60px; }
.product-info li.extra { font-size: 13px; margin-top: 5px; }
.product-info li.extra a { margin-right: 20px; }
.product-info .field {  display: inline-block; overflow: hidden; width: 15%; padding:0px 5px; font-size:.95em;  color: #313131; font-weight:700;  vertical-align: middle;}
.product-info .value {  display: inline-block;  width:50%; font-size:1em; line-height: 1.5em; color: #4b4b4b;vertical-align: top; }
.amount {  display: inline-block;  width:30%; font-size:1em; line-height: 1.5em; color: #4b4b4b;vertical-align: top; }
.add { width:100%; margin:2% auto; padding:5px 0; display: block; overflow: hidden; text-decoration: none; vertical-align: bottom; }
.product-info select { width: 90%; min-height: 2.5em; color:#959595; border: 1px solid #dddddd; -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
/***social-iconse*/
.rightwrap ul.social-icons { float: none; display: inline-block; width: 80%; margin: 0 auto; padding: .1%; }
.rightwrap ul.social-icons li a{ border:solid 1px #CCCCCC;}
.rightwrap ul.social-icons li.facebook a {  background-position:-726px -10px;  }
.rightwrap ul.social-icons li.google a {  background-position:-772px -10px;  }
.rightwrap ul.social-icons li.youtube a {  background-position:-822px -10px; }
/***tab size*/
.edit h3 { margin: 1% auto;  display: block;  -webkit-column-span: all;  column-span: all; color: #333; font-weight: 700; }
.edit{ width:96%; margin:2% auto; display: block; text-align:left; color:#838383; }
.edit p{ line-height:1.65em; color: #666;}
.edit p strong{ padding-bottom:2em; font-weight: 700; font-size:1.1em; color:#000; }
.edit .col-5 { width: 100%; }
/*related**/
.related { margin:2% auto 0 auto; padding: 1% 0px 7% 0px; width:100%; min-height: 300px; position: relative; display: block;  z-index:9999; background-color:#fff; }
.browse{ list-style: none; margin: 0 auto; padding: 0; display: block;  flex-wrap: wrap;flex-direction:row; align-content:flex-start;  justify-content:flex-start;  /*just for pen positioning*/ }
/*table*/
.datatable { display: block; vertical-align: top; text-align: left; margin: 2% auto; width: 100% !important; overflow-x: auto; white-space: nowrap; border-collapse: collapse; border-spacing: 0; }
.datatable th { padding: 6px 12px; border-bottom: 3px solid #339dd6; border-top: 1px solid #d9d7ce; border-left: 1px solid #d9d7ce; border-right: 1px solid #d9d7ce; font-size: .8em; color: #339dd6; font-weight: 700; text-align: left; text-transform: uppercase; background: #fff; }
.datatable tr:nth-child(even) { background: #eff2f6; }
.datatable tr:nth-child(odd) { background: #fff; }
.datatable td { padding: 6px 12px; font-size: .8em; font-weight: 500; border: 1px solid #d9d7ce; }
.datatable-v { display: flex; overflow: hidden; background: none; }
.datatable-v tbody { width: 100%; max-width: 800px; -webkit-overflow-scrolling: touch; }
.datatable-v thead { display: flex; flex-shrink: 0; min-width: min-content; }
.datatable-v tbody { display: flex; position: relative; overflow-x: auto; overflow-y: hidden; }
.datatable-v tr { display: flex; flex-direction: column; min-width: min-content; flex-shrink: 0; }
.datatable-v td, .datatable-v th { display: block; }
.datatable-v td { background-image: none !important; border-left: 0; }
.datatable-v th:not(:last-child), .datatable-v td:not(:last-child) { border-bottom: 0; }
.datatable-v tbody tr:first-child { background: #fff; }
.datatable-v tbody tr:last-child { background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%); background-repeat: no-repeat; background-position: 100% 0; background-size: 20px 100%; }
/**nav*/



@media (min-width:768px) {
/*.product { width:32%; margin:2% auto;   }*/
.leftwrap { width: 100%; padding: 0px 0px 20px 0px;   float:left; vertical-align: top; text-align: left;-webkit-transition: height 0.3s;     -moz-transition: height 0.3s;    transition: height 0.3s;  }
.rightwrap { width: 45%; margin: 0px auto; float:right; vertical-align: top; }
.datatable { display: inline-table; }
.product-list .item { width:33.3%; display:inline-block; margin-right:-5px; }
.product-list .item:nth-child(2n){ margin-right:-5px;} 
.product-list .item:nth-child(3n){ margin-right:0px;} 

.product .product-list .item { width:25%; display:inline-block; margin-right:-5px; }
.product .product-list .item:nth-child(2n){ margin-right:-5px;} 
.product .product-list .item:nth-child(4n){ margin-right:0px;} 


#needfixed{ width:50%; z-index:9; }


}