body,
form,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
figure,
figcaption,
fieldset,
legend {
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
input,
button,
textarea {
  font-family: Tahoma, Arial, 微軟正黑體;
  font-size: 14px;
  color: #333;
}

body.disableScroll {
  overflow: hidden;
}

h2 {
  color: #000;
  font-size: 24px;
}
ul,
ol {
  list-style: none;
}
p:nth-child(1) {
  margin-top: 0;
  padding-top: 0;
}
a {
  color: currentColor;
  text-decoration: none;
}
a[href]:hover {
  color: #999;
}
a[href].tLink1 {
  color: #ffa500;
  /* text-decoration: underline; */
}
a[href].tLink1:hover {
  text-decoration: none;
}
a[href].tLink2 {
  color: #fff;
  background: #999;
  border-radius: 3px;
  display: inline-block;
  padding: 0.1em 0.4em;
  margin: 0 0.4em;
}
a[href].tLink2:hover {
  background: #666;
}
.att {
  color: #c33;
}

/*********************************** 價格區間搜尋 start *****************************************/
.priceBlock {
  margin-top: 3%;
}

.priceBlock .method {
  display: flex;
  align-items: center;
}
.priceBlock .method > i {
  width: 14.42%;
  font-style: normal;
  font-size: 14px;
  color: #808080;
}
.priceBlock .method .ct {
  width: 70.19%;
}

/**************** 拖拉區 start ****************/
.priceBlock .useSlider .ct {
  display: flex;
  align-items: center;
}
.priceBlock .useSlider .ct button {
  position: relative;
  display: block;
  padding: 0;
  width: 26px;
  height: 26px;
  background: #ccc;
  border: none;
  outline: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 4;
}
.priceBlock .useSlider .ct button:hover {
  background: #999;
}
.priceBlock .useSlider .ct button span {
  position: relative;
  display: block;
  height: 100%;
  font-size: 0;
}
.priceBlock .useSlider .ct button span:before,
.priceBlock .useSlider .ct button span:after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  display: block;
  width: 50%;
  height: 3px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.priceBlock .useSlider .ct button.minus span:after {
  display: none;
}
.priceBlock .useSlider .ct button.plus span:after {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.priceBlock .slider {
  flex: 1;
  border: none;
  border-radius: 0;
  height: 3px;
  color: #b9413a;
  background: #ccc;
  opacity: 0;
}
.priceBlock .slider.ui-slider {
  opacity: 1;
}
.priceBlock .slider:before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1000%;
  transform: translateY(-50%);
}
.priceBlock .slider .ui-widget-header {
  border-radius: 0;
  color: currentColor;
  background: currentColor;
}
.priceBlock .slider .ui-slider-handle {
  top: -5px;
  margin-left: 0;
  width: 13px;
  height: 13px;
  background: none;
  border: none;
  outline: none;
  color: currentColor;
  cursor: ew-resize;
  transform: translateX(-50%);
}
.priceBlock .slider .ui-slider-handle:hover {
  z-index: 3;
}
.priceBlock .slider .ui-slider-handle:before {
  content: "";
  display: block;
  height: 100%;
  border-radius: 50%;
  background: currentColor;
  transition: transform 0.2s;
}
.priceBlock .slider .ui-slider-handle:after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  display: block;
  width: 500%;
  height: 500%;
  transform: translate(-50%, -50%);
}
.priceBlock .slider .ui-slider-handle:hover:before,
.priceBlock .slider .ui-slider-handle.ui-state-active:before {
  transform: scale(1.5);
}
.priceBlock .slider .ui-slider-handle span {
  position: absolute;
  white-space: nowrap;
  left: 50%;
  bottom: 170%;
  font-size: 14px;
  font-weight: bold;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s;
}
.priceBlock .slider .ui-slider-handle:hover span,
.priceBlock .slider .ui-slider-handle.ui-state-active span {
  opacity: 1;
}
/**************** 拖拉區 end ****************/

/**************** 輸入區 start ****************/
.priceBlock .useInput {
  margin-top: 3%;
}
.priceBlock input[type="number"] {
  -moz-appearance: textfield;
}
.priceBlock input[type="number"]::-webkit-inner-spin-button,
.priceBlock input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.priceBlock .useInput .ct {
  display: flex;
}
.priceBlock .useInput .ct .from,
.priceBlock .useInput .ct .to {
  border-radius: 4px;
  background: #fff;
  padding: 0.8em 1.2em;
  width: 38.35%;
  display: flex;
  align-items: center;
  color: #808080;
}
.priceBlock .useInput .ct .from:before,
.priceBlock .useInput .ct .to:before {
  content: "NT$";
  display: block;
  font-size: 1.3em;
  margin-top: 0.2em;
}
.priceBlock .useInput .ct .to {
  position: relative;
  margin-left: 7.94%;
}
.priceBlock .useInput .ct .to:after {
  position: absolute;
  content: "";
  display: block;
  right: 103.57%;
  top: 50%;
  width: 14%;
  border-top: 1px dotted;
}
.priceBlock .useInput .ct .input {
  border: none;
  outline: none;
  font-size: 1.8em;
  font-weight: bold;
  padding: 0;
  margin-left: 0.5em;
  color: #808080;
  min-width: 0;
  flex: 1;
}
.priceBlock .useInput .formBtn {
  padding: 0.9em 2em;
  font-size: 18px;
  border-radius: 5px;
  margin-left: 0.5em;
  flex: 1;
}
/**************** 輸入區 end ****************/
/*********************************** 價格區間搜尋 end *****************************************/

/*********************************** 自製 select start *****************************************/
.select {
  position: relative;
  display: inline-block;
  font-size: 13px;
  color: #333;
  white-space: nowrap;
}
.select.open {
  z-index: 1;
}
.select em {
  position: relative;
  display: block;
  font-style: normal;
  line-height: 1em;
  padding: 0.5em 3em 0.5em 0.8em;
  border-radius: 3px;
  background: #f4f4f4;
  cursor: pointer;
}
.select.open em {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.select em:before,
.select em:after {
  position: absolute;
  content: "";
  right: 10px;
  top: 0.9em;
  width: 8px;
  height: 2px;
  border-radius: 3px;
  background: #999;
}
.select em:before {
  transform: translateX(-3px) rotate(45deg);
}
.select em:after {
  transform: translateX(2px) rotate(-45deg);
}
.select:not(.disabled) em:hover:before,
.select:not(.disabled) em:hover:after {
  background: #666;
}
.select ul {
  position: absolute;
  left: 0;
  top: 26px;
  width: 100%;
  max-height: 200px;
  overflow: auto;
  padding-bottom: 0.5em;
  color: #999;
  background: #f4f4f4;
  border-radius: 3px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom: 1px solid #d2d2d2;
  z-index: 1;
  display: none;
}
.select.open ul {
  display: block;
}
.select ul li {
  cursor: pointer;
  padding: 0.5em 0.8em;
  margin-top: 1px;
}
.select ul li.disabled {
  cursor: default;
  opacity: 0.3;
}
.select ul li.selected,
.select ul li:not(.disabled):hover {
  color: #333;
  background: #d2d2d2;
}

.select.disabled {
  opacity: 0.3;
}
.select.disabled em {
  cursor: default;
}
/*********************************** 自製 select end *****************************************/

/*********************************** 表單按鈕 start *****************************************/
.formBtn {
  display: inline-block;
  background-color: #999;
  color: #fff;
  padding: 0.6em 1.2em;
  line-height: 1em;
  font-size: 14px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  -webkit-appearance: none;
}
.formBtn:not([disabled]):hover {
  background-color: #666;
}
.formBtn[disabled] {
  cursor: not-allowed;
  background-color: #ddd;
}
.formBtn.light {
  background-color: #f4f4f4;
  color: #666;
}
.formBtn.light:hover {
  background-color: #ddd;
}
/*********************************** 表單按鈕 end *****************************************/

/*********************************** slick start *****************************************/
.slick {
  margin: 0; /* 覆寫 slick-theme.css 的 .slick-slider 的 margin-bottom: 30px; */
}
.slickPN {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 60px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  font-size: 0;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s;
}
.slick:hover .slickPN {
  opacity: 1;
}
.slickPN.prev {
  left: 0;
  transform: translateY(-50%) scaleX(-1);
}
.slickPN.next {
  right: 0;
}
.slickPN:before,
.slickPN:after {
  position: absolute;
  content: "";
  left: 18px;
  width: 15px;
  height: 3px;
  background: #999;
  border-radius: 4px;
}
.slickPN:before {
  top: 19px;
  transform-origin: left top;
  transform: rotate(45deg);
}
.slickPN:after {
  top: 38px;
  transform-origin: left bottom;
  transform: rotate(-45deg);
}
.slickPN:hover {
  background: #ccc;
}
.slickPN:hover:before,
.slickPN:hover:after {
  background: #fff;
}

.slick-dots {
  bottom: 5%;
}
.slick-dots li {
  width: 10px;
  height: 10px;
}
.slick-dots li button {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none;
  background: #9a938b;
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.2);
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  background: #000;
}
.slick-dots li.slick-active button {
  background: #000;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  display: none;
}
.slick-dots li button:before {
  display: none;
}
.slick-dots li.slick-active button:before {
  display: none;
}

/***************** gallery 使用 start ******************/
.gallery .ct {
  background: #f4f4f4;
  padding: 3% 30px 4%;
}
.galleryList.slick .slickPN {
  width: 30px;
  height: 40px;
  background: none;
  border-radius: 0;
  opacity: 1;
}
.galleryList.slick .slickPN.prev {
  left: -30px;
}
.galleryList.slick .slickPN.next {
  right: -30px;
}
.galleryList.slick .slickPN:before,
.galleryList.slick .slickPN:after {
  left: 8px;
}
.galleryList.slick .slickPN:before {
  top: 10px;
}
.galleryList.slick .slickPN:after {
  top: 29px;
}
.galleryList.slick .slickPN:hover:before,
.galleryList.slick .slickPN:hover:after {
  background: #666;
}
.galleryList.slick li {
  float: left;
  padding: 5px;
}
.galleryList.slick li a {
  position: relative;
  display: block;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (min-width: 767px) {
  .galleryList.slick li a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .galleryList.slick li a:hover:after {
    opacity: 1;
  }
}
.galleryList.slick .slick-dots {
  bottom: -20px;
}
.galleryList.slick .slick-dots li {
  float: none;
  padding: 0;
}
/***************** gallery 使用 end ******************/
/*********************************** slick end *****************************************/

/************************ 商品數量 & 僅顯示現貨 & 排序方式 start ***************************/
.sortWrapper{
	position: relative;
	margin:20px 10px;
	display: flex;
	justify-content: space-between;
	z-index: 1;
}
.sortWrapper.sticky{
	position: sticky;
	left: 0;
	background: #FFF;
	width: 100%;
	margin: 0;
	padding: 20px 10px;
	border-bottom: 1px solid #DDD;
}

.sortWrapper p{
	margin: 0;
}
.sortWrapper .ui{
	display: flex;
}

/***************** 僅顯示現貨 start ******************/
.sortWrapper .ui > label{
	display: flex;
	align-items: center;
	cursor:pointer;
}
.sortWrapper .ui > label span{
	position: relative;
	border:1px solid;
	width:15px;
	height:15px;
	margin-right:7px;
}
.sortWrapper .ui > label span:before{
	position: absolute;
	content: "";
	display: block;
	left:3px;
	top:3px;
	width:7px;
	height:7px;
	background: currentColor;
	transition: transform 0.2s;
	transform:scale(0);
}
.sortWrapper .ui > label.active span:before{
	transform:none;
}
/***************** 僅顯示現貨 end ******************/

/***************** 排序方式 start ******************/
.sortWrapper .ui .method{
	position: relative;
	margin-left:28px;
}
.sortWrapper .ui .method label{
	cursor:pointer;
}
.sortWrapper .ui .method label:after{
	content:"";
	display: inline-block;
	margin:0 10px;
	border:1px solid;
	border-top:none;
	border-right:none;
	width:10px;
	height:10px;
	transform: translateY(-3px) rotate(-45deg);
}
.sortWrapper .ui .method ul {
	position: absolute;
	right: -10px;
	top: 35px;
	padding: 20px 22px;
	background: #f4f4f4;
	border-radius: 3px;
	border-bottom: 1px solid #d2d2d2;
	display: none;
}
.sortWrapper .ui .method ul:before {
	position: absolute;
	right: 15px;
	top: -10px;
	content: "";
	border: 10px solid transparent;
	border-top: none;
	border-bottom-color: #f4f4f4;
}
.sortWrapper .ui .method.active ul {
	display: block;
}
.sortWrapper .ui .method ul li{
	position: relative;
	white-space: nowrap;
	color:#666;
	padding-right:32px;
	cursor: pointer;
	transition: color 0.2s;
}
.sortWrapper .ui .method ul li+li{
	margin-top:12px;
}
.sortWrapper .ui .method ul li:hover,
.sortWrapper .ui .method ul li.active{
	font-weight: bold;
	color:#000;
}
.sortWrapper .ui .method ul li.active:before{
	position: absolute;
	content:"";
	display: block;
	right:0;
	top:4px;
	border:1px solid;
	border-top:none;
	border-right:none;
	width:14px;
	height:7px;
	transform: rotate(-45deg);
}
/***************** 排序方式 end ******************/

/**************** 單欄商品列表 loading 狀態 start ******************/
section.loading {
  position: relative;
}
section.loading:before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 2;
}
section.loading:after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 28px;
  margin: 20% auto 0;
  background: url(https://www.nordic.com.tw/images/loading.gif) center no-repeat;
  z-index: 2;
}
/**************** 單欄商品列表 loading 狀態 end ******************/
/*********************** 商品數量 & 僅顯示現貨 & 排序方式 end *****************************/
 
/*********************************** 商品列表 start *****************************************/
.productList {
  text-align: center;
}
.productList.slick {
  margin: 2.5% 0;
}
.productList:after {
  content: "";
  clear: both;
  display: block;
}
.productList > li {
  position: relative;
  float: left;
  padding: 0 5px;
  margin-top: 2.5%;
  width: 20%;
}

.withCategory .result .productList.inStock > li.show[data-in-stock="false"],
.productList.inStock > li[data-in-stock="false"]{
	display:none;
}

.productList li a {
  display: block;
  outline: none;
}
.productList li .img {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
}
.productList li .img img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
}
.productList li .img em {
  position: absolute;
  left: 5px;
  top: 5px;
  display: block;
  font-size: 12px;
  font-style: normal;
  line-height: 1em;
  color: #fff;
  background: #c33;
  padding: 0.5em 0.7em;
  border-radius: 4px 0;
}
.productList li a:hover .img img {
  transform: scale(1.05);
}

/****** 顏色色塊 start *******/
.color {
}
.color ul {
  margin-top: 10px;
  overflow: hidden;
  height: 24px;
}
.color.only1Color ul {
  display: none;
}
.productList.withColor .color {
  margin-top: 10px;
  overflow: hidden;
  height: 24px;
}
.productList.withColor .color ul {
  margin-top: 0;
}
.color ul li {
  display: inline-block;
  border: 1px solid #fff;
  margin: 0 0.5px;
  padding: 1px;
}
.color ul li:not(.more):hover,
.color ul li.now {
  border-color: #999;
}

.productList.inStock .color ul li[data-in-stock="false"]{
	display:none;
}

.color ul li a,
.color ul li span {
  position: relative;
  display: block;
  height: 20px;
}
.color ul li a,
.color ul li:not(.more) span {
  width: 20px;
}
.color ul li.more {
  overflow: hidden;
}
.color.hideMore ul li.more {
  display: none;
}
.color ul li.more span {
  font-size: 12px;
  line-height: 0;
  padding: 0.75em 0.8em 0;
  background: #f4f4f4;
}
.color ul li.more:hover span {
  color: #fff;
  background: #ccc;
}
.color ul li a:after,
.color ul li:not(.more) span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 1px 1px rgba(20, 20, 20, 0.2) inset;
}
/****** 顏色色塊 end *******/

.productList li .name {
  width: 80%;
  margin: 10px auto 0;
  font-size: 13px;
  line-height: 1.4em;
  min-height: 2.8em;
  overflow: hidden;
}
.productList li .price {
  margin-top: 10px;
  font-size: 13px;
  color: #c33;
  line-height: 1em;
  min-height: 1.5em;
}
.productList li .price em {
  font-style: normal;
  color: #0a72ce;
}
.productList li .price strong {
  font-size: 18px;
  font-weight: bold;
}
.productList li .price del {
  margin-top: 10px;
  display: block;
  color: #0a72ce;
  height: 1.5em;
}
.productList li .cta {
  margin-top: 10px;
  height: 30px;
}
.productList li .cta > a {
  display: inline-block;
}
.productList li .cta .select {
  width: 35%;
  text-align: left;
}
.productList li .cta .formBtn {
  width: 22%;
  height: 26px;
  margin-left: 5px;
  background-image: url(https://www.nordic.com.tw/images/cart.svg);
  background-position: center;
  background-repeat: no-repeat;
}
.productList li .cta .store {
  position: relative;
  display: inline-block;
  margin-left: 5px;
}
.productList li .cta .store:before {
  position: relative;
  top: 5px;
  content: "";
  display: block;
  width: 19px;
  height: 18px;
  background: url(https://www.nordic.com.tw/images/productDetailAside.svg) no-repeat;
  cursor: pointer;
  transition: background-position 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.productList li .cta .store ul {
  position: absolute;
  right: -15px;
  top: 35px;
  padding: 10px;
  background: #f4f4f4;
  white-space: nowrap;
  font-size: 12px;
  text-align: left;
  border-radius: 3px;
  border-bottom: 1px solid #d2d2d2;
  z-index: 1;
  display: none;
}
.productList li .cta .store ul:before {
  position: absolute;
  content: "";
  right: 15px;
  top: -10px;
  border: 10px solid transparent;
  border-top: none;
  border-bottom-color: #f4f4f4;
}
.productList li .cta .store ul li + li {
  margin-top: 0.2em;
}
.productList li .cta .store.active ul {
  display: block;
}
.productList li .cta .store:hover:before,
.productList li .cta .store.active:before {
  background-position: 0 bottom;
}
/*********************************** 商品列表 end *****************************************/

/**************************** 覆寫 mCustomScrollbar start ********************************/
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: rgba(200, 200, 200, 0.75);
}
.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: rgba(102, 102, 102, 0.75);
}
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: rgba(0, 0, 0, 0.05);
}
/**************************** 覆寫 mCustomScrollbar end ********************************/

/*********************************** 無滑動頁籤按鈕(居中) start *****************************************/
.tabBtnBlock {
}
.tabBtnBlock ul {
  text-align: center;
}
.tabBtnBlock ul li {
  display: inline-block;
  width: 15%;
}
.tabBtnBlock ul li:not(:last-child) {
  padding: 0 2px 5px 0;
}
.tabBtnBlock ul li a {
  display: block;
  border-radius: 3px;
  background: #fff;
  font-size: 13px;
  line-height: 1em;
  padding: 0.8em 0;
  color: #666;
  transition: background 0.2s;
}
.tabBtnBlock ul li a:hover,
.tabBtnBlock ul li.now a {
  background: #f4f4f4;
  color: #000;
}
/*********************************** 無滑動頁籤按鈕(居中) end *****************************************/

/******************************** 滑動頁籤按鈕 start *******************************************/
* + .tabBlock {
  margin-top: 5%;
}

.tabBlock .tabBtn {
  position: relative;
  font-size: 13px;
  line-height: 1em;
}
.tabBlock .tabBtn .bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #f4f4f4;
  border-radius: 3px;
  z-index: 0;
}
.tabBlock .tabBtn ul {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.tabBlock .tabBtn ul li {
  float: left;
  font-weight: bold;
  padding: 0.8em 0;
  cursor: pointer;
  text-align: center;
  line-height: 1.5;
}
.tabBlock .tabBtn ul li:hover,
.tabBlock .tabBtn ul li.now {
  color: #000;
}

.tabBlock .tabCT {
  margin-top: 6.25%;
  font-size: 13px;
  line-height: 1.8em;
  height: 250px;
  overflow: auto;
}
.tabBlock .tabCT section > h3 {
  display: none;
}
.info .tabBlock .tabCT section .ct a[href] {
  text-decoration: underline;
}
.info .tabBlock .tabCT section .ct a[href]:hover {
  text-decoration: none;
}
.info .tabBlock .tabCT section .ct b {
  color: #333;
}
/******************************** 滑動頁籤按鈕 end *******************************************/

/********************************** 滑動頁籤按鈕(居中, 內容為列表) start **********************************/
.tabBlock.forList {
}

.tabBlock.forList .tabBtn {
  position: relative;
  font-size: 18px;
  line-height: 1em;
  display: inline-block;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}
.tabBlock.forList .tabBtn .bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #f4f4f4;
  border-radius: 3px;
  z-index: 0;
}
.tabBlock.forList .tabBtn ul {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.tabBlock.forList .tabBtn ul li {
  float: left;
  padding: 0.6em 0;
  cursor: pointer;
  width: 130px;
}
.tabBlock.forList .tabBtn ul li:hover,
.tabBlock.forList .tabBtn ul li.now {
  color: #000;
}
.tabBlock.forList .tabCT {
  margin-top: 2.5%;
  height: auto;
  overflow: visible;
}
/********************************** 滑動頁籤按鈕(居中, 內容為列表) end **********************************/

/********************************** 表格樣式 start **********************************************/
.table {
  width: 100%;
  border-collapse: collapse;
}
.table tr:not(:first-child) {
  border-bottom: 1px solid #f4f4f4;
}
.table th,
.table td {
  vertical-align: middle;
}
.table th {
  color: #fff;
  background: #ccc;
  padding: 10px 20px;
  font-size: 12px;
  text-align: left;
}
.table th:first-child,
.table th:last-child {
  border-radius: 3px;
}
.table th:not(:only-child):first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.table th:not(:only-child):last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.table td {
  padding: 10px 20px;
}
.table td i {
  font-style: normal;
  display: none;
}

* + .table.orderData,
* + .table.orderList {
  margin-top: 3%;
}
.table.orderData th,
.table.orderList th {
  padding: 10px;
}
.table.orderData td,
.table.orderList td {
  padding: 10px;
}
.table.orderData td:first-child {
  min-width: 7em;
}
.table.orderData td.ps {
  line-height: 1.6em;
}
.table.orderList td.total {
  font-weight: bold;
  color: #000;
  text-align: right;
  padding-right: 10px;
}
/********************************** 表格樣式 end **********************************************/

/********************************** 會員制度說明 表格 start *********************************************/
.cardTable {
  margin-top: 10px;
  width: 100%;
  font-size: 12px;
  color: #666;
  border-collapse: collapse;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
}
.cardTable td {
  padding: 10px 0;
  text-align: center;
  line-height: 1.6em;
  border-bottom: 1px solid #ddd;
  color: #333;
}
.cardTable td.brand,
.cardTable td.brand_s {
  border-right: 1px solid #ddd;
  color: #000;
}
.cardTable td.brand span {
  white-space: nowrap;
}
.cardTable td.brand_s {
}
.cardTable td.c1 {
  background: linear-gradient(to bottom, #e1f0f2, #d1e4e7);
}
.cardTable td.c2 {
  background: linear-gradient(to bottom, #bddff2, #a7cde3);
}
.cardTable td.c3 {
  background: linear-gradient(to bottom, #f8f8f8, #e7e7e7);
}
.cardTable td.c4 {
  background: linear-gradient(to bottom, #ccc, #b2b2b2);
}
.cardTable tr:not(:last-child) td.c1,
.cardTable tr:not(:last-child) td.c2,
.cardTable tr:not(:last-child) td.c3,
.cardTable tr:not(:last-child) td.c4 {
  border-bottom-color: #fff;
}
.cardTable td.c1 span,
.cardTable td.c2 span,
.cardTable td.c3 span,
.cardTable td.c4 span {
  opacity: 0.5;
}
.cardType td {
  border-bottom: 2px solid #666;
  background: #ddd;
}
.cardType td + td {
  border-left: 2px solid #fff;
}
.cardType h5 {
  color: #000;
  font-size: 14px;
}
.cardPic .card {
  margin: 0 auto;
  width: 100%;
  max-width: 80px;
}
.cardPic .card span {
  display: block;
  padding-top: 65%;
  background: url(https://www.nordic.com.tw/images/clubCard_s.png) no-repeat;
  background-size: 100% auto;
}
.cardPic td:nth-child(4) .card span {
  background-position: 0 0;
}
.cardPic td:nth-child(5) .card span {
  background-position: 0 50%;
}
.cardPic td:nth-child(6) .card span {
  background-position: 0 100%;
}

.cardTablePS {
  font-size: 12px;
  line-height: 1.8em;
  padding: 1em 3em;
}
.cardTablePS strong {
  color: #333;
}
.cardTablePS strong:not(:first-child) {
  margin-top: 1em;
  display: inline-block;
}
.cardTablePS ol,
.cardTablePS ul {
  padding-left: 20px;
}
.cardTablePS ol {
  list-style: decimal;
}
.cardTablePS ul {
  list-style: disc;
}
/********************************** 會員制度說明 表格 end *********************************************/

/********************************** 說明區塊 start **********************************************/
.statement {
  border-radius: 3px;
  background: #f4f4f4;
  padding: 1.5em 3em;
  font-size: 12px;
  color: #666;
  margin-top: 2%;
  line-height: 1.8em;
}
.statement.brief {
  text-align: center;
}
.statement strong {
  color: #333;
}
.statement strong:not(:first-child) {
  margin-top: 1em;
  display: inline-block;
}
.statement ol,
.statement ul {
  padding-left: 20px;
}
.statement ol {
  list-style: decimal;
}
.statement ul {
  list-style: disc;
}
.statement li .ex {
  color: #aaa;
}
/********************************** 說明區塊 end **********************************************/

/********************************** 購物車 & 會員 表單區塊 start **********************************************/
fieldset {
  border: none;
}
*:not([type="hidden"]) + fieldset {
  margin-top: 3%;
}

fieldset legend {
  border-radius: 3px;
  color: #fff;
  background: #ccc;
  padding: 10px 20px;
  font-size: 12px;
  width: 100%;
}
fieldset legend span {
  color: #333;
}
fieldset legend span label {
  display: inline-block;
  margin-left: 1em;
  cursor: pointer;
}
fieldset legend span label input[type="checkbox"] {
  position: relative;
  top: 2px;
}

fieldset .ct {
  margin-top: 3%;
  color: #333;
}

fieldset .ct .item {
}
fieldset .ct .item + .item {
  margin-top: 2%;
}

fieldset .ct .item > label {
  width: 100px;
  display: inline-block;
  padding-left: 20px;
  vertical-align: top;
}

.inputWrapper {
  position: relative;
}
fieldset .inputWrapper {
  display: inline-block;
}
fieldset .inputWrapper .input,
fieldset .inputWrapper textarea {
  color: #333;
  background: #f4f4f4;
  border: none;
  border-radius: 3px;
  padding: 4px 10px 5px;
  width: 100%;
  outline-width: 1px;
}
fieldset .inputWrapper .input.error,
fieldset .inputWrapper textarea.error {
  border: 1px solid #C33;
}

fieldset .inputWrapper.addressPre,
fieldset .inputWrapper.mobile,
fieldset .inputWrapper.tel,
fieldset .extT {
  vertical-align: top;
}
fieldset .extT {
  position: relative;
  top: 2px;
}

fieldset label i {
  font-style: normal;
}
fieldset .inputWrapper .select {
  width: 100%;
}

fieldset .hintTxt {
  color: #999;
  font-size: 12px;
  margin-left: 1em;
  vertical-align: top;
  display: inline-block;
  margin-top: 2px;
}

fieldset .ct .verifyP img {
  vertical-align: top;
  width: 70px;
  height: 26px;
}
fieldset .ct .verifyP .reloadVerifyP {
  border: none;
  background: url(https://www.nordic.com.tw/images/reload.svg) no-repeat center;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  width: 26px;
  height: 26px;
}

label.error {
  display: block;
  color: #c33;
  font-size: 12px;
  font-weight: bold;
  margin-top: 0.5em;
}
label.error:before {
  content: "!";
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  padding: 0.1em 0;
  margin-right: 0.2em;
  text-align: center;
  background: #c33;
  color: #fff;
  font-weight: bold;
}
/********************************** 購物車 & 會員 表單區塊 end **********************************************/

/********************************* 左欄 nav 之兩欄頁面 start ****************************************/
section.withNav {
  overflow: hidden;
}
section.withNav .main {
  float: right;
  width: 64.16%;
  margin-right: 2.5%;
}
section.withNav .main > h2 {
  font-size: 20px;
  margin-top: 3.5%;
}
section.withNav .main > .ct {
  margin-top: 5%;
  line-height: 1.8em;
  font-size: 13px;
}
section.withNav .main > .ct > .item {
  display: none;
}
section.withNav .main > .ct h3 {
  margin-top: 5%;
  font-size: 16px;
  color: #333;
}
section.withNav .main > .ct h4 {
  margin-top: 5%;
  font-size: 14px;
  color: #333;
}
section.withNav .main > .ct > img {
  max-width: 100%;
  border: none;
}
section.withNav .main .ct > a {
  color: #ffa500;
  text-decoration: underline;
}
section.withNav .main .ct > a:hover {
  text-decoration: none;
}

section.withNav nav {
  float: left;
  width: 28.33%;
  min-height: 400px;
  margin-right: 5%;
  padding: 1.66% 20px 5%;
  background: #f4f4f4;
}
section.withNav nav ul {
  list-style: none;
}
section.withNav nav ul li {
  line-height: 1.6em;
}
section.withNav nav ul li a {
  display: block;
}
section.withNav nav > ul > li + li,
section.withNav nav ul li ul li {
  margin-top: 1em;
}
section.withNav nav > ul > li > a {
  padding: 0.6em 0;
  border-bottom: 3px solid #fff;
}
section.withNav nav ul li ul {
  font-size: 12px;
  margin-left: 2.5em;
}
section.withNav nav ul li a[href]:hover,
section.withNav nav ul li.now > a {
  color: #000;
  font-weight: bold;
}
/********************************* 左欄 nav 之兩欄頁面 end ****************************************/

/**************************** 左欄 類別選單 之兩欄頁面 start **************************************/
.withCategory {
  display: flex;
}
.withCategory.hide {
  display: none;
}

/******************** 選單 start *********************/
.withCategory .category {
  width: 15.5%;
  border-right: 1px solid #ddd;
  margin: 0 2% 0 2.5%;
  font-size: 14px;
  color: #666;
}
.withCategory .category > ul.fixed {
  position: fixed;
}
.withCategory .category > ul > li + li {
  margin-top: 1.5em;
}
.withCategory .category > ul > li {
  position: relative;
}
.withCategory .category > ul > li:last-child {
  margin-bottom: 3em;
}
.withCategory .category > ul > li span {
  display: block;
  cursor: pointer;
}
.withCategory .category select {
  display: none;
}
.withCategory .subWrapper {
  position: absolute;
  left: 5.8em;
  top: -1.75em;
  white-space: nowrap;
  background: #f4f4f4;
  border-radius: 3px;
  padding: 2em;
  font-size: 13px;
  line-height: 1em;
  z-index: 1;
  display: none;
}
.withCategory .subWrapper:before {
  position: absolute;
  right: 100%;
  top: 2em;
  content: "";
  display: block;
  border: 8px solid transparent;
  border-left: none;
  border-right: 9px solid #f4f4f4;
}
.withCategory .subWrapper ul li {
  cursor: pointer;
}
.withCategory .subWrapper ul li + li {
  margin-top: 1.5em;
}
.withCategory .category > ul > li.active span,
.withCategory .subWrapper ul li.active {
	color: #000;
	font-weight: bold;
}
/******************** 選單 end *********************/

/****************** result start *******************/
.withCategory .result {
  width: 80%;
  min-height: 300px;
}
.withCategory .result h3 {
  color: #000;
  font-size: 24px;
  text-align: center;
}
.withCategory .result .productList > li {
  width: 25%;
  display: none;
}
.withCategory .result .productList > li.show {
  display: block;
}

.withCategory .result.loading {
  position: relative;
}
.withCategory .result.loading:before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 2;
}
.withCategory .result.loading:after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 28px;
  margin: 20% auto 0;
  background: url(https://www.nordic.com.tw/images/loading.gif) center no-repeat;
  z-index: 2;
}
/****************** result end *******************/
/**************************** 左欄 類別選單 之兩欄頁面 end **************************************/

/********************************** 頁面兩側之前後按鈕 start *******************************************/
.sidePN {
  position: fixed;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50px);
  z-index: 1;
}
.sidePN li {
  position: absolute;
  transition: transform 0.2s;
}
.sidePN li.prev {
  left: 0;
  transform: translateX(-100%);
}
.sidePN li.next {
  right: 0;
  transform: translateX(100%);
}
.sidePN.show li.prev,
.sidePN.show li.next {
  transform: none;
}
.sidePN li a {
  position: relative;
  display: block;
  background: #f4f4f4;
  padding: 5px;
}
.sidePN li.prev a {
  border-radius: 0 4px 4px 0;
}
.sidePN li.next a {
  border-radius: 4px 0 0 4px;
}
.sidePN li a .ctContainer {
  position: relative;
  width: 0;
  height: 90px;
  overflow: hidden;
  transition: width 0.2s;
}
.sidePN li a:hover .ctContainer,
.sidePN li a .ctContainer .ct {
  width: 210px;
}
.sidePN li.prev a .ctContainer {
  margin-left: 40px;
}
.sidePN li.next a .ctContainer {
  margin-right: 40px;
}
.sidePN li a .ctContainer .ct {
  position: absolute;
  top: 0;
  height: 100%;
}
.sidePN li.prev a .ctContainer .ct {
  right: 0;
}
.sidePN li.next a .ctContainer .ct {
  left: 0;
}
.sidePN li a .ctContainer .ct .img {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 33.33%;
}
.sidePN li a .ctContainer .ct em {
  display: block;
  font-style: normal;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 5px;
}
.sidePN a:before,
.sidePN a:after {
  position: absolute;
  content: "";
  width: 15px;
  height: 3px;
  background: #999;
  border-radius: 4px;
}
.sidePN li.prev a:before,
.sidePN li.prev a:after {
  left: 25px;
}
.sidePN li.next a:before,
.sidePN li.next a:after {
  right: 10px;
}
.sidePN a:before {
  top: 41px;
  transform-origin: left top;
}
.sidePN a:after {
  top: 60px;
  transform-origin: left bottom;
}
.sidePN li.prev a:before {
  transform: scaleX(-1) rotate(45deg);
}
.sidePN li.prev a:after {
  transform: scaleX(-1) rotate(-45deg);
}
.sidePN li.next a:before {
  transform: rotate(45deg);
}
.sidePN li.next a:after {
  transform: rotate(-45deg);
}
.sidePN a:hover:before,
.sidePN a:hover:after {
  background: #666;
}
.sidePN a:hover {
  color: currentColor;
}

/*************** 正方圖類型 start ********************/
.sidePN.square li a:hover .ctContainer,
.sidePN.square li a .ctContainer .ct {
  width: 200px;
}
.sidePN.square li a .ctContainer .ct .img {
  position: absolute;
  top: 0;
  background-color: #fff;
  background-size: contain;
  width: 90px;
  padding-top: 45%;
}
.sidePN.square li.prev a .ctContainer .ct .img {
  left: 0;
}
.sidePN.square li.next a .ctContainer .ct .img {
  right: 0;
}
.sidePN.square li a .ctContainer .ct em {
  position: absolute;
  top: 50%;
  overflow: visible;
  white-space: normal;
  line-height: 1.6em;
  margin-top: 0;
  transform: translateY(-50%);
}
.sidePN.square li.prev a .ctContainer .ct em {
  left: 100px;
}
.sidePN.square li.next a .ctContainer .ct em {
  right: 100px;
  text-align: right;
}
/*************** 正方圖類型 end ********************/
/********************************** 頁面兩側之前後按鈕 end *******************************************/

/********************************** overlay start **********************************************/
.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}
.overlay .closeBtn {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.overlay .closeBtn:before,
.overlay .closeBtn:after {
  position: absolute;
  content: "";
  right: 0;
  top: 10px;
  width: 22px;
  height: 2px;
  background: #999;
  border-radius: 1px;
}
.overlay .closeBtn:before {
  transform: rotate(-45deg);
}
.overlay .closeBtn:after {
  transform: rotate(-135deg);
}
.overlay .closeBtn:hover:before,
.overlay .closeBtn:hover:after {
  background: #666;
}

/***************** overlayCenter start **********************/
.overlayCenter {
  background: rgba(240, 240, 240, 0.9);
}
.overlayCenter .overlayCT {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 90%;
  height: 90%;
  background: #fff;
  border-radius: 5px;
  padding: 30px;
  /*
	iOS 會強制把 iframe 的高度設為 iframe 內容的高度並且無法覆寫,
	所以 iframe 永遠不會有 scrollbar 以至於無法上下滑動,
	解法是把 iframe 的外層設定以下兩行,
	讓外層產生 scrollbar 來代替
	*/
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}
.overlayCenter .overlayCT iframe {
  border: none;
  display: block;
  width: 100%;
  height: 100%;
}

.overlayCenter.img {
  background: rgba(255, 255, 255, 1);
}
.overlayCenter.img .overlayCT {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  border-radius: 0;
  padding: 0;
}
.overlayCenter.img .overlayCT img {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
}

/********* 聯絡我們 start ***********/
.overlayCenter.form .overlayCT {
  max-width: 500px;
  height: 650px;
  transition: all 0.2s;
}
.overlayCenter.form .overlayCT._product {
  height: 680px;
}
.overlayCenter.form .overlayCT.done {
  height: 200px;
  padding: 0;
}
fieldset.contact .ct .item + .item {
  margin-top: 3%;
}
fieldset.contact .ct .inputWrapper {
  width: calc(100% - 120px);
}
fieldset.contact .ct .inputWrapper.qCT textarea {
  height: 150px;
  line-height: 1.6em;
}
fieldset.contact .ct .inputWrapper.companyTel {
  width: calc((100% - 120px) * 0.59);
}
fieldset.contact .ct .inputWrapper.companyTelExt {
  width: calc((100% - 120px) * 0.39 - 30px);
}
fieldset.contact .ct .inputWrapper.sendDate {
  width: calc((100% - 120px) * 0.33 - 20px);
}
fieldset.contact .ct .inputWrapper.piece,
fieldset.contact .ct .inputWrapper.budget {
  width: calc((100% - 120px) * 0.495);
}
fieldset.contact .ct .inputWrapper input[type="file"] {
  cursor: pointer;
}
fieldset.contact .ct .inputWrapper.verify {
  width: calc((100% - 120px) - 105px);
}
fieldset.contact .ct .item.use {
  overflow: hidden;
}
fieldset.contact .ct .item.use > label {
  float: left;
}
fieldset.contact .ct .item.use .itemCT {
  display: block;
  overflow: hidden;
}
fieldset.contact .ct .item.use .itemCT > span {
  display: inline-block;
  margin: 0 5px 5px 0;
}
fieldset.contact .ct .item.use .itemCT > span label {
  cursor: pointer;
}
fieldset.contact .ct .item.use .itemCT > span.inputWrapper {
  width: calc(100% - 73px);
}
fieldset.contact .ct .ps {
  margin: 3% 20px 0;
}
fieldset.contact .btmBtn {
  margin-top: 5%;
  text-align: center;
}

fieldset.contact.done .ct h3,
fieldset.contact.done .ct p {
  text-align: center;
}
/********* 聯絡我們 end ***********/

/********* 一般內容 start ***********/
.overlayCenter.data .overlayCT {
  max-width: 800px;
}
/********* 一般內容 end ***********/
/***************** overlayCenter end **********************/

/***************** overlayFull start ***********************/
.overlayFull {
  background: rgba(255, 255, 255, 1);
}
.overlayFull .overlayCT {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.overlayFull .overlayCT .slick li > div {
  position: relative;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.overlayFull .overlayCT .slick li > div iframe {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.overlayFull .overlayCT .txtBlock {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 1em;
  text-align: center;
  background: rgba(244, 244, 244, 0.8);
  color: #000;
  line-height: 1.6em;
  transform: translateY(100%);
  transition: transform 0.5s;
}
.overlayFull .overlayCT .txtBlock.show {
  transform: translateY(0%);
}
/***************** overlayFull end ***********************/

/****************** overlayModal start **********************/
.overlayModal {
  background: rgba(0, 0, 0, 0.8);
}
.overlayModal .overlayCT {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 400px;
  background: #fff;
  border-radius: 5px;
  padding: 30px;
  text-align: center;
}
.overlayModal .overlayCT .modalTxt {
  line-height: 1.8em;
}
.overlayModal .overlayCT .formBtnGroup {
  margin-top: 2em;
}
/****************** overlayModal end ***********************/
/********************************** overlay end **********************************************/

/********************************** 左下訂閱電子報 start **********************************************/
.extraSubscribe {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  z-index: 1;
  transition: transform 0.5s;
  transform: translateY(100%);
}
.extraSubscribe.show {
  transform: translateY(-18px);
}

.extraSubscribe .closeBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: rgba(150, 150, 150, 0.8);
  width: 2.14em;
}
.extraSubscribe .closeBtn span {
  position: relative;
  display: block;
  width: 1.3em;
  height: 1.3em;
  transition: transform 0.2s;
}
.extraSubscribe .closeBtn:hover span {
  transform: rotate(-90deg);
}
.extraSubscribe .closeBtn span:before,
.extraSubscribe .closeBtn span:after {
  position: absolute;
  left: 0;
  top: 50%;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
}
.extraSubscribe .closeBtn span:before {
  transform: translateY(-50%) rotate(-45deg);
}
.extraSubscribe .closeBtn span:after {
  transform: translateY(-50%) rotate(45deg);
}

.extraSubscribe .main {
  display: flex;
  align-items: center;
  background: rgba(100, 100, 100, 0.8);
  border-radius: 0.85em;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0 2.14em;
  height: 3.57em;
  color: #fff;
  transition: background 0.2s;
}
.extraSubscribe:not(.expand) .main {
  cursor: pointer;
}
.extraSubscribe:not(.expand) .main:hover {
  background: rgba(100, 100, 100, 0.9);
}
.extraSubscribe.expand .main strong,
.extraSubscribe .main .form {
  display: none;
}
.extraSubscribe.expand .main .form {
  display: block;
}
.extraSubscribe.expand .main .form input[type="email"] {
  border: none;
  border-bottom: 1px solid #aaa;
  background: transparent;
  padding: 0.1em;
  outline: none;
  color: #fff;
  width: 13em;
}
.extraSubscribe input[type="email"]::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}
.extraSubscribe input[type="email"]::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #fff;
}
.extraSubscribe input[type="email"]:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #fff;
}
.extraSubscribe.expand .main .form button {
  border: none;
  border-left: 1px solid #aaa;
  background: transparent;
  margin-left: 0.8em;
  padding: 0.1em 0 0.1em 1em;
  outline: none;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}
/********************************** 左下訂閱電子報 end **********************************************/

/*************************************** 處理中 start *********************************************/
.loadingWrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.loadingWrapper:before {
  content: "";
  display: block;
  width: 40px;
  height: 28px;
  background: url(https://www.nordic.com.tw/images/loading.gif) center no-repeat;
  margin-top: -10em;
}
.loadingWrapper span {
  display: block;
  margin-top: 1em;
}
/*************************************** 處理中 end *********************************************/

/*************************************** 分頁 start *********************************************/
.pagination {
  display: flex;
  margin-top: 2em;
  justify-content: center;
}
.pagination li {
  margin: 0 0.3em;
}
.pagination li.disabled {
  opacity: 0.25;
}
.pagination li:first-child,
.pagination li:last-child {
  width: 2em;
  height: 2em;
  flex-shrink: 0;
}
.pagination li:first-child {
  margin-right: 1em;
}
.pagination li:last-child {
  margin-left: 1em;
}
.pagination li > * {
  border-radius: 3px;
  padding: 0.5em;
  display: block;
  line-height: 1em;
  transition: all 0.2s;
}
.pagination li:first-child > *,
.pagination li:last-child > * {
  font-size: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination li:last-child > * {
  transform: scaleX(-1);
}
.pagination li:first-child > *:before,
.pagination li:last-child > *:before {
  content: "";
  display: block;
  width: 30%;
  height: 30%;
  border: 1px solid;
  border-right: none;
  border-bottom: none;
  transform: translateX(20%) rotate(-45deg);
}

.pagination a:hover,
.pagination li.active > * {
  background: #ccc;
  color: #fff;
}
/*************************************** 分頁 end *********************************************/

@media screen and (min-width: 1024px) {
  /**************************** 左欄 類別選單 之兩欄頁面 start **************************************/
  /******************** 選單 start *********************/
  .withCategory .category > ul.fixed {
    width: 10em;
    z-index: 1;
  }
  .withCategory .category > ul > li:hover .subWrapper {
    display: block;
  }
  .withCategory .category > ul > li:hover span,
  .withCategory .subWrapper ul li:hover {
    color: #000;
  }
  .withCategory .category > ul > li:hover span {
    font-weight: bold;
  }
  /******************** 選單 end *********************/
  /**************************** 左欄 類別選單 之兩欄頁面 end **************************************/
}

@media screen and (min-width: 1001px) and (max-width: 1200px) {
  /*********************************** 商品列表 start *****************************************/
  .productList > li {
    width: 25%;
  }
  /*********************************** 商品列表 end *****************************************/
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
  /*********************************** 商品列表 start *****************************************/
  .productList > li {
    width: 33.33%;
  }
  /*********************************** 商品列表 end *****************************************/
}

@media screen and (max-width: 768px) {
  /*********************************** 商品列表 start *****************************************/
  .productList > li {
    width: 50%;
  }
  /*********************************** 商品列表 end *****************************************/
}

@media screen and (max-width: 1023px) {
  /*********************************** 價格區間搜尋 start *****************************************/
  .priceBlock .method {
    display: block;
  }
  .priceBlock .method > i,
  .priceBlock .method .ct {
    width: auto;
  }
  .priceBlock .method .ct {
    margin-top: 6%;
  }
  /**************** 輸入區 start ****************/
  .priceBlock .useInput {
    margin-top: 6%;
  }
  .priceBlock .useInput .ct {
    flex-wrap: wrap;
  }
  .priceBlock .useInput .ct .from,
  .priceBlock .useInput .ct .to {
    width: 47%;
  }
  .priceBlock .useInput .ct .to {
    margin-left: 6%;
  }
  .priceBlock .useInput .ct .from:before,
  .priceBlock .useInput .ct .to:before {
    font-size: 1em;
  }
  .priceBlock .useInput .ct .to:after {
    width: 6%;
  }
  .priceBlock .useInput .ct .input {
    font-size: 1.4em;
    margin-left: 0.4em;
  }
  .priceBlock .useInput .formBtn {
    flex-basis: 100%;
    margin: 5% 0 0;
  }
  /**************** 輸入區 end ****************/
  /*********************************** 價格區間搜尋 end *****************************************/

  /********************************** 滑動頁籤按鈕 start ************************************/
  .tabBlock .tabBtn {
    display: none;
  }
  .tabBlock .tabCT {
    margin-top: 0;
    height: auto;
  }
  .tabBlock .tabCT section {
    display: block !important;
  }
  .tabBlock .tabCT section + section {
    margin-top: 5%;
  }
  .tabBlock .tabCT section > h3 {
    display: block;
    color: #000;
    font-size: 15px;
    padding: 0.4em 1em;
    background: #f4f4f4;
    border-radius: 3px;
    margin-bottom: 5%;
  }
  /********************************** 滑動頁籤按鈕 end ************************************/

  /********************************** 滑動頁籤按鈕(居中, 內容為列表) start **********************************/
  .tabBlock.forList .tabBtn {
    display: none;
  }
  .tabBlock.forList .tabCT {
    margin-top: 0;
  }
  .tabBlock.forList .tabCT section {
    margin-top: 5%;
  }
  .tabBlock.forList .tabCT section > h3 {
    margin-bottom: 2.5%;
  }
  /********************************** 滑動頁籤按鈕(居中, 內容為列表) end **********************************/

  /*********************************** slick start *****************************************/
  /***************** gallery 使用 start ******************/
  .gallery .ct {
    padding-top: 0;
    padding-bottom: 3rem;
  }
  .galleryList.slick li {
    padding: 1px;
  }
  /***************** gallery 使用 end ******************/
  /*********************************** slick end *****************************************/

  /********************************* 左欄 nav 之兩欄頁面 start ****************************************/
  section.withNav .main {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 10px;
  }
  section.withNav nav {
    float: none;
    width: auto;
    min-height: 0;
    margin: 5% 0 0;
    padding: 10px 10px 10%;
  }
  /********************************* 左欄 nav 之兩欄頁面 end ****************************************/

  /**************************** 左欄 類別選單 之兩欄頁面 start **************************************/
  .withCategory {
    display: block;
  }

  /******************** 選單 start *********************/
  .withCategory .category {
    position: relative;
    width: auto;
    border-right: none;
    margin: 0;
    z-index: 3;
  }
	
  .withCategory .category > ul {
	position: relative;
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
    margin: 0;
    padding: 0 8em 1em 0.5em;
    background: #fff;
	width:100%; 
	height:50px;
	display: flex;
	overflow:auto;
  }
  .withCategory .category > ul::-webkit-scrollbar{
    display: none;
  }
  .withCategory .category > ul > li,
  .withCategory .category > ul > li + li {
    margin-top: 1em;
  }
  .withCategory .category > ul > li {
    display: inline-block;
    white-space: nowrap;
    width: 6em;
    text-align: center;
	flex-shrink: 0;
  }
  .withCategory .category > ul > li:last-child {
    margin-bottom: 0;
  }
  .withCategory .subWrapper {
    display: none;
  }
  .withCategory .category select {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
  }

  /******** 滑動提示 start ******/
  .dragHint{
	position: absolute;
	right:0;
	top:1px;
	width:100%;
	height:calc(100% - 2px);
	pointer-events: none;
  }
  .category[style] .dragHint{
	position: fixed;
	right:0;
	top:47px;
	height:49px;
  }
  .dragHint:before,
  .dragHint:after{
    position: absolute;
	content:"";
	display: block;
  }
  .dragHint:before{
	right:0;
	top:0;
	width:16em;
	height:calc(100% - 1px);
	background: linear-gradient(to left, #FFF 12%, rgba(255, 255, 255, 0));
  }
  .dragHint:after{
	right:1em;
	top:1.1em;
	width:1.4em;
	height:1.4em;
	background: url(https://www.nordic.com.tw/images/icon_drag_hint.svg) no-repeat center/contain;
	animation:dragHint 2s ease-in-out 1s 3 backwards;
  }
  @keyframes dragHint{
	  0%{
		 opacity:0;
	  }
	  30%{
		 opacity:1;
	  }
	  100%{
		 opacity:0;
		 transform: translateX(-180%);
	  }
  }
  /******** 滑動提示 end ******/
  /******************** 選單 end *********************/
	
  /****************** result start *******************/
  .withCategory .result {
    width: auto;
    margin-top: 10%;
  }
  .withCategory .result h3 {
    font-size: 18px;
  }
  .withCategory .result .productList > li {
    width: 33.33%;
  }
  /****************** result end *******************/
  /*********************************** 左欄 類別選單 之兩欄頁面 end *****************************************/

  /********************************** 頁面左右兩側之前後按鈕 start *******************************************/
  .sidePN {
    display: none;
  }
  /********************************** 頁面左右兩側之前後按鈕 end *******************************************/
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
  /*********************************** 左欄 類別選單 之兩欄頁面 start *****************************************/
  /****************** result start *******************/
  .withCategory .result .productList > li {
    width: 33.33%;
  }
  /****************** result end *******************/
  /*********************************** 左欄 類別選單 之兩欄頁面 end *****************************************/
}

@media screen and (max-width: 768px) {
  /*********************************** 左欄 類別選單 之兩欄頁面 start *****************************************/
  /****************** result start *******************/
  .withCategory .result .productList > li {
    width: 50%;
  }
  /****************** result end *******************/
  /*********************************** 左欄 類別選單 之兩欄頁面 end *****************************************/
}

@media screen and (max-width: 767px) {
  /*********************************** 表格樣式 start ************************************/
  .table:not(.orderData):not(.orderData):not(.orderList),
  .table:not(.orderData):not(.orderList) tbody,
  .table:not(.orderData):not(.orderList) tr,
  .table:not(.orderData):not(.orderList) th,
  .table:not(.orderData):not(.orderList) td {
    display: block;
  }
  .table:not(.orderData):not(.orderList) tr {
    padding: 10px 0;
  }
  .table:not(.orderData):not(.orderList) tr:first-child {
    display: none;
  }
  .table:not(.orderData):not(.orderList) tr:after {
    content: "";
    clear: both;
    display: block;
  }
  .table:not(.cartList):not(.cartFav):not(.orderData):not(.orderList) td {
    padding: 5px 0;
  }
  .table:not(.orderData):not(.orderList) td i {
    display: inline-block;
  }
  /*********************************** 表格樣式 end ************************************/

  /********************************** 會員制度說明 表格 start *********************************************/
  .cardTablePS {
    padding-left: 10px;
    padding-right: 10px;
  }
  /********************************** 會員制度說明 表格 end *********************************************/

  /********************************** 說明區塊 start **********************************************/
  .statement {
    padding-left: 10px;
    padding-right: 10px;
  }
  /********************************** 說明區塊 end **********************************************/

  /********************************** 購物車 & 會員 表單區塊 start **********************************************/
  fieldset:not(.contact) legend {
    padding: 10px;
  }
  fieldset:not(.contact) legend span label {
    margin-left: 0.5em;
  }
  fieldset:not(.contact) .ct .item > label {
    width: 100%;
    display: block;
    padding-left: 0;
  }
  fieldset:not(.contact) .ct .item + .item {
    margin-top: 4%;
  }
  fieldset:not(.contact) .ct .item .itemCT {
    width: 100%;
    display: block;
    margin-top: 5px;
  }
  fieldset:not(.contact) .inputWrapper .input {
    padding-left: 5px;
    padding-right: 5px;
  }
  fieldset:not(.contact) .hintTxt {
    margin: 5px 0 0;
    width: 100%;
  }
  /********************************** 購物車 & 會員 表單區塊 end **********************************************/

  /********************************** overlay start **********************************************/
  /***************** overlayCenter start **********************/
  .overlayCenter:not(.form) .overlayCT {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 40px 0 0;
  }
  .overlayCenter.img .overlayCT img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /***************** overlayCenter end **********************/
  /********************************** overlay end **********************************************/
}

@media screen and (max-width: 629px) {
  /*********************************** 表格樣式 start ************************************/
  .table.orderList,
  .table.orderList tbody,
  .table.orderList tr,
  .table.orderList th,
  .table.orderList td {
    display: block;
  }
  .table.orderList tr {
    padding: 10px 0;
  }
  .table.orderList tr:first-child {
    display: none;
  }
  .table.orderList td {
    padding: 5px 0;
  }
  .table.orderList td i {
    display: inline-block;
    padding: 0.2em 0.5em;
    margin-right: 5px;
    background: #ccc;
    color: #fff;
    border-radius: 3px;
    min-width: 5em;
    text-align: center;
  }
  /*********************************** 表格樣式 end ************************************/
}

@media screen and (max-width: 500px) {
  /********************************** overlay start **********************************************/
  /***************** overlayCenter start **********************/
  /********* 聯絡我們 start ***********/
  html.done,
  html.done body {
    height: 100%;
  }
  html.done body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .overlayCenter.form .overlayCT:not(.done) {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 40px 10px 10px;
  }
  /********* 聯絡我們 end ***********/
  /***************** overlayCenter end **********************/

  /****************** overlayModal start **********************/
  .overlayModal {
    width: 100%;
  }
  .overlayModal .overlayCT {
    width: 90%;
    min-width: 0;
  }
  /****************** overlayModal end ***********************/
  /********************************** overlay end **********************************************/
}

@media screen and (max-width: 400px) {
  /********************************** overlay start **********************************************/
  /***************** overlayCenter start **********************/
  /********* 聯絡我們 start ***********/
  fieldset.contact:not(.done) {
    padding-bottom: 5em;
  }
  fieldset.contact .ct .inputWrapper.qCT textarea {
    height: 100px;
  }
  fieldset.contact .ct .inputWrapper.sendDate {
    width: calc(100% - 140px);
  }
  fieldset.contact .ct .inputWrapper.sendDate.month,
  fieldset.contact .ct .inputWrapper.sendDate.date {
    margin: 10px 0 0 105px;
  }
  /********* 聯絡我們 end ***********/
  /***************** overlayCenter end **********************/
  /********************************** overlay end **********************************************/

  /********************************** 左下訂閱電子報 start **********************************************/
  .extraSubscribe {
    font-size: 0.85em;
  }
  .extraSubscribe .main {
    padding: 0 1.4em;
  }
  .extraSubscribe.expand .main .form input[type="email"] {
    font-size: 0.95em;
    width: 11.5em;
  }
  .extraSubscribe.expand .main .form button {
    font-size: 0.95em;
  }
  /********************************** 左下訂閱電子報 end **********************************************/
}