
/*--------------------------------商品區--------------------------------*/
.productArea {}
.productArea .wrap {
position: relative;
}
@media (min-width: 1201px) {
.productArea .wrap { display: flex; flex-wrap: wrap; padding: 110px 0px 60px 0px;}
}
@media (max-width: 1200px) {
.productArea .wrap { padding: 60px 20px;}
}
@media (max-width: 430px) {
.productArea .wrap { padding: 200px 0px 60px 0px;}
}
@media (max-width: 350px) {
.productArea .wrap { padding: 250px 0px 60px 0px;}
}

/*--------大商品文字寬----------*/
@media (min-width: 1551px) {
.productArea .productList {width: calc(40% - 220px);}
}
@media (min-width: 1181px) and (max-width: 1550px) {
.productArea .productList {width: calc(40% - 100px);padding-top: 80px;}
}
@media (max-width: 1180px) {
.productArea .productList {display: none;}
}

/*--------商品列表寬----------*/
.productArea .leftBox {position: relative;}
@media (min-width: 1551px) {
.productArea .leftBox {width: calc(60% + 220px);}
}
@media (min-width: 1181px) and (max-width: 1550px) {
.productArea .leftBox {width: calc(60% + 100px);}
}
@media (min-width: 1181px) {
.productArea .leftBox {overflow: hidden;}
}
@media (max-width: 1180px) {
.productArea .leftBox {padding: 0 30px;}
}
/*--------商品位置設定---------*/
.productArea .leftBox > .txtExp {color: #222;}


@media (min-width: 1551px) {
.productArea .leftBox > .txtExp {position: relative;z-index: 10;width: calc((100% - 50px) / 2);min-height: 110px;padding: 25px 0;}
}
@media (min-width: 1181px) and (max-width: 1550px) {
.productArea .leftBox > .txtExp {display: inline-block;vertical-align: top;width: calc(95% - 200px);padding: 20px 0 30px;}
}
@media (max-width: 1180px) {
.productArea .leftBox > .txtExp {padding-top: 20px;margin-top: 20px;}
}



/*-----------------------------------------------------------------*/
@media (min-width: 1181px) {
.productArea .productMoreList {width: 250%;margin-left: -50%;}
}
@media (min-width: 1701px) {
.productArea .productMoreList {margin-top: -110px;}
}
@media (min-width: 1551px) and (max-width: 1700px) {
.productArea .productMoreList {margin-top: -50px;}
}
@media (max-width: 1180px) {
.productArea .productMoreList {margin-top: 50px;}
}
@media (max-width: 640px) {
.productArea .productMoreList {margin-top: 30px;}
}

/*-----------------------------------------------------------------*/
@media (min-width: 701px) and (max-width: 1180px) {
.productList {padding: 0 30px;}
}
@media (max-width: 700px) {
.productList {padding: 0 10px;}
}
.productList li:not(:first-child) {display: none;}

@media (max-width: 1180px) {
.productList li {padding: 10px 20px;}

}
@media (min-width: 1181px) {
.productList .Img {display: none;text-align: center;}
}
.productList .Img img {-webkit-filter: drop-shadow(0 5px 8px rgba(133, 133, 133, 0.4));display: block;width: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
@media (min-width: 1181px) {
.productList .Txt {padding: 0 60px 0 10px; }
}
@media (max-width: 1180px) {
.productList .Txt {padding: 20px 0 0; }
}

/*--------------------------------商品名--------------------------------*/
.productList .item_name {display: block;letter-spacing: 0;}
@media (min-width: 1181px) {
.productList .item_name {font-size: 20px;font-family: 'Noto Serif TC', serif;font-weight: 700;}
}
@media (max-width: 1180px) {
.productList .item_name {font-size: 0.9rem;color: #525252;}
}
/*--------------------------------商品簡述--------------------------------*/
.productList .item_text {color: #000;}
@media (min-width: 1181px) {
.productList .item_text {padding-bottom: 20px;margin-bottom: 20px;font-size:0.9rem;}
}
@media (max-width: 1180px) {
.productList .item_text {font-weight: 400;}
}
.productList .item_text a:not(:hover) {color: #000;}
/*----------------------------------------------------------------*/
.productList .txtExp {height: calc(28px * 5);line-height: 28px;}
@media (max-width: 1180px) {
.productList .txtExp {display: none;}
}


/*----------------------------------------------------------------*/
@media (min-width: 401px) and (max-width: 1180px) {
.productMoreList { margin-left: -20px;  margin-right: -20px; }
}
@media (min-width: 1181px) {
.productMoreList li {  transition: opacity 0.5s ease, transform 0s 0.5s ease; text-align: center;  }
}
@media (min-width: 401px) and (max-width: 1180px) {
.productMoreList li { padding: 10px 20px; }
}
.productMoreList .item {position: relative; }

.productMoreList .slick-slide:after{pointer-events: none;}

@media (min-width: 1181px) {
.productMoreList .slick-active { opacity: 1; transform: scale(0.5) translateX(150%); transition: all 0.5s ease; }
.productMoreList .slick-active .Txt { opacity: 1; }
.productMoreList .slick-active + .slick-active { transform: scale(0.5) translateX(50%); }
.productMoreList .slick-active + .slick-active .Txt { transition: all 0.5s 0.2s ease; }
.productMoreList .slick-active + .slick-current { transform: scale(1);  opacity: 1; }
.productMoreList .slick-active + .slick-current .Txt {  opacity: 0; transition: all 0s ease; }
.productMoreList .slick-active + .slick-current .Img { padding-right: 50px; }
.productMoreList .slick-active + .slick-current .Img img { -webkit-filter: drop-shadow(0 0 5px rgba(133, 133, 133, 0.1)); }
.productMoreList .slick-current + .slick-active { transform: scale(0.5) translateX(-50%); }
.productMoreList .slick-current + .slick-active .Txt {  opacity: 0; transition: all 0s ease;  }
.productMoreList .slick-current + .slick-active .Img { opacity: 0;transition: all 0.5s ease; }
.productMoreList .slick-current + .slick-active + .slick-active {transform: scale(0.5) translateX(-150%); }
}
@media (min-width: 1181px) {
.productMoreList .Txt { display: none; position: absolute; top: 100%; left: 0;  z-index: 5; width: 50%; padding: 20px 15px 0 5px; opacity: 0; transform: scale(2); transform-origin: top left;  transition: all 0.5s ease; }
}
@media (max-width: 1180px) {
.productMoreList .Txt { padding-top: 20px;  }
}
.productMoreList .Txt .item_name { font-size: 14px; text-align: center; /*display: none;*/}
.productMoreList .Txt .item_text { font-size: 14px; color: #525252;  display: none;}
@media (min-width: 1181px) {
.productMoreList .Img { padding: 0;  }
}
@media (max-width: 400px) {
.productMoreList .Img { padding: 0 20px; }
}
.productMoreList .Img img { display: block; width: 70%;  -webkit-filter: drop-shadow(0 5px 8px rgba(133, 133, 133, 0.4));}
@media (max-width: 960px) {
.productMoreList .Img img {width: 100%; }
}

/***********************slick按鈕**************************/
.arrowBox{ width: auto; margin: auto;  }
.arrowPrev{ position: absolute; left:0px; z-index: 9999; } 
.arrowNext{ position: absolute; right:0px;z-index: 9999;  } 
.arrowPrev, .arrowNext { width: 40px; height: 79px;  cursor: pointer; -webkit-user-select: none; user-select: none; }
.arrowNext::before { content: " "; display: block; width:40px;height: 79px; background: url("../images/icon/arrow-r.png")  no-repeat right top; background-size: contain;}
.arrowPrev::before { content: " "; display: block; width:40px;height: 79px; background: url("../images/icon/arrow-l.png")  no-repeat left top; background-size: contain;}
.arrowPrev:hover, .arrowNext:hover {opacity: .5}
.arrowPrev:hover::before, .arrowNext:hover::before {opacity: .5}
@media (max-width: 767.98px) {
    .arrowBox{ display: none;}    
}