/* productlsit */
#productlsit{
    z-index: 0;
    position: relative;
}
#productlsit ul { font-size: 0; }
#productlsit ul li { position: relative; overflow: hidden; margin: 10px 20px; width: calc((100% / 3) - 40px); display: inline-block; vertical-align: top; }
#productlsit ul li a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 2; }
#productlsit ul li >div {position: relative;overflow: hidden;z-index: 1; }
/* productlsit */
#productlsitul { font-size: 0; }
#productlsitul li { position: relative;overflow: hidden;margin: 10px 20px;width: calc((100% / 3) - 40px);display: inline-block;vertical-align: top; }
#productlsitul li a {position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 2;}
#productlsitul li >div {position: relative;overflow: hidden;z-index: 1;}
#productlsitul li .img:before {position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, .5);top: 0;left: 0;opacity: 0;content: "";z-index: 1;}
#productlsitul li .img font.bg { background: no-repeat 50% / cover;display: block; }
#productlsitul li .img .price { position: absolute;padding: 0 10px;background: #fff;right: 0;bottom: 0;z-index: 3; }
#productlsitul li .img .price p , #productlsit ul li .img p font { margin-right: 5px;padding: 0 5px;display: inline-block;font-size: 18px;color: #d21a20;vertical-align: baseline; }
#productlsitul li .img p font { padding: 5px 0; }
#productlsitul li .img .price p font:first-child { font-weight: 300;font-size: 13px;color: #888; }
#productlsitul li .img .price p.old font:last-child { color: #535353; }
#productlsitul li .info { margin: 15px 20px 20px;height: 34px;font-size: 20px;font-weight: 400;-webkit-line-clamp: 1; }

/* productdetail */
#productdetail {margin-bottom: 30px;font-size: 0;display: flex;align-items: center;justify-content: center;}
#productdetail .row {margin-bottom: 0;width: 50%;display: inline-block;}
#productdetail #imglist >div a.photo {position: relative;background-size: contain;}
#productdetail #imglist >div a.photo img {width: 100%;}
#productdetail #imglist >div a.photo img:first-child {position: absolute;height: 100%;top: 0;left: 0;opacity: 0;z-index: -999;}
#productdetail #productinfo {margin-left: 3%;width: 30%;}
#productdetail #productinfoh2 { margin-bottom: 10px;font-size: 40px; }
#productdetail #productinfo .price {margin-bottom: 20px; }
#productdetail #productinfo .pricefont { display: inline-block;vertical-align: bottom;line-height: 100%;font-size: 28px; }
#productdetail #productinfo .pricefont.offer { color: #d21a20; }
#productdetail #productinfo .pricefont.old { margin-left: 10px;font-size: 15px;opacity: .6; }
#productdetail #productinfo .pricefont:nth-child(2) { text-decoration: line-through; }
#productdetail #productinfo .txt {overflow: hidden;margin: 5px 0;text-align: right;font-size: 0; }
#productdetail #productinfo .txtlabel { float: left;display: inline-block;line-height: 33px;font-size: 16px;color: #898989; }
#productdetail #productinfo .txta , #productdetail #productinfo .txt b { color: #212121; }
#productdetail #productinfo .info {margin: 15px 0; }
#productdetail #productinfo .info .txt {margin: 0;padding: 5px 15px;border-bottom: 1px #888 solid;/* border-color: #888 transparent #888; */display: flex;justify-content: space-between;align-items: center;}
#productdetail #productinfo .info .txtlabel {color: #16151b;}
#productdetail #productinfo .info .txta , #productdetail #productinfo .info .txt b {display: inline-block;font-weight: 400;color: #16151b;vertical-align: middle;}
#productdetail #productinfoarticle { font-size: 14px;color: #616161; }
#productdetail #orderfunctiona { padding: 5px 15px;border: 1px #222 solid;display: inline-block;color: #000;vertical-align: middle; }
#productdetail #orderfunctioninput { padding: 5px 15px;width: 40px;border: #262555 solid;border-width: 1px 0;text-align: center;vertical-align: middle; }
#productdetail #productinfo .btns {margin: 20px 0;text-align: left;}
#productdetail #productinfo .btnsa {padding: 15px 15px;display: flex;color: #000;position: relative;overflow: hidden;justify-content: center;}
#productdetail #productinfo .btnsa.addcar { background: #161414;color: #fff; }
#productdetail #productinfo .btnsa.ask { border: 1px #000 solid; }
#productdetail #productinfo .btnsa:after {
    position: absolute;width: 0;height: 100%;background: #3f5ca7;display: block;top: 0;left: 0;content: "";z-index: -1;-webkit-transition-duration: .2s;transition-duration: 0.3s;
}
#productdetail #productinfo .btnsa:hover:after {width: 500px;}
#productdetail #productinfo .btnsa:hover {
    color: #fff;
}

/* productTabs */
#productTabsul.tabs { margin: 50px 0 35px;padding: 0 15px;border-bottom: 1px #e5e5e5 solid;text-align: center;font-size: 0; }
#productTabsul.tabs li { display: inline-block;vertical-align: top; }
#productTabsul.tabs li a { padding: 10px 25px;background: #fff;border: #eee solid;border-width: 1px 1px 0 0;display: inline-block;color: #8a8d91; }
#productTabsul.tabs li:first-child a { border-left-width: 1px; }
#productTabsul.tabs li.active a {background: #2b4894;border-width: 0 1px 1px;border-color: #2b4894;color: #fff;}

@media screen and (max-width:1440px) {
 #productlsit ul li { width: 320px; }
}
@media screen and (min-width:1281px) {
 #productlsit ul li:hover .img:before { opacity: 1; }
 #productlsit ul li:hover .img font.bg {-webkit-transform: translate(0) scale(1.2);transform: translate(0) scale(1.2);background-size: contain;}
 #productTabs ul.tabs li:hover a {background: #425ca1;border-color: #718bcf;color: #fff;}
}
@media screen and (max-width:1280px) {
 #productlsit ul li { margin: 15px 15px 15px 0;width: calc(50% - 17px);border: 1px #e8e8e8 solid; }
 #productlsit ul li:nth-child(2n) {margin: 15px 0 15px 15px; }
 #productdetail .row {width: 55%; }
 #productdetail #productinfo {width: 42%; }
}
@media screen and (max-width:980px) {
 #productdetail {text-align: center;display: flex;flex-direction: column;}
 #productdetail .row , #productdetail #productinfo {margin-left: 0;width: 80%;}
 #productTabs ul.tabs {padding: 0;border-bottom: 0; }
 #productTabs ul.tabs li a , productTabs ul.tabs li.active a {margin: 5px;border-width: 1px; }
}
@media screen and (max-width:640px) {
 #productlsit ul { text-align: center; }
 #productlsit ul li , #productlsit ul li:nth-child(2n) {margin: 15px 0;width: 90%; }
}

@media screen and (max-width:500px){
 #productdetail #productinfo h2{
    font-size: 32px;
}
 #productdetail #productinfo .info .txt label{font-size: 13px;
 }
 #productdetail #productinfo .info .txt a, #productdetail #productinfo .info .txt b{font-size: 13px;
 }
};}/* (←為什麼要寫兩次? 是因為這個括號沒刪到嗎?) */
#productlsit ul li .img:before { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); top: 0; left: 0; opacity: 0; content: ""; z-index: 1; }
#productlsit ul li .img font.bg {background: no-repeat 50% / cover;display: block;background-size: contain;background-color: #fff;}
#productlsit ul li .img .price { position: absolute; padding: 0 10px; background: #fff; right: 0; bottom: 0; z-index: 3; }
#productlsit ul li .img .price p , #productlsit ul li .img p font { margin-right: 5px; padding: 0 5px; display: inline-block; font-size: 18px; color: #d21a20; vertical-align: baseline; }
#productlsit ul li .img p font { padding: 5px 0; }
#productlsit ul li .img .price p font:first-child { font-weight: 300; font-size: 13px; color: #888; }
#productlsit ul li .img .price p.old font:last-child { color: #535353; }
#productlsit ul li .info {margin: 15px 20px 20px;height: 60px;font-size: 20px;font-weight: 400;text-align: center;}
#productlsit ul li .info p{
    text-align: center;
}

/* productdetail (為什麼要寫兩次?) */ 
#productdetail {margin-bottom: 30px;font-size: 0;display: flex;align-items: center;justify-content: space-around;flex-wrap: wrap;}
#productdetail .lemleftbox{
    display: flex;
    flex-direction: column;
    width: 40%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 20px;
}
#productdetail .lemrightbox{
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 50px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#productdetail .sub-pro-img{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 15px;
}
#productdetail .sub-pro-img .slick-slide p{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#productdetail .sub-pro-img .slick-slide a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#productdetail .sub-pro-img .slick-slide img{
    width: 100%;
}

#productdetail .super-show .slick-slide p{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#productdetail .super-show.slick-slide a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#productdetail .super-show .slick-slide img{
    width: 100%;
}
#productdetail .slick-slide{
    opacity: 0;
}
#productdetail .slick-slide.slick-active{
    opacity: 1;
    background-color: white;
}
#productdetail .row {margin-bottom: 0;width: 50%;display: inline-block;}
#productdetail #imglist >div a.photo {position: relative;background-size: contain;}
#productdetail #imglist >div a.photo img {width: 100%;}
#productdetail #imglist >div a.photo img:first-child {position: absolute;height: 100%;top: 0;left: 0;opacity: 0;z-index: -999;}
#productdetail #productinfo {margin-left: 0%;width: 100%;}
#productdetail #productinfo h2 { margin-bottom: 10px; font-size: 40px; }
#productdetail #productinfo .price { margin-bottom: 20px; }
#productdetail #productinfo .price font { display: inline-block; vertical-align: bottom; line-height: 100%; font-size: 28px; }
#productdetail #productinfo .price font.offer { color: #d21a20; }
#productdetail #productinfo .price font.old { margin-left: 10px; font-size: 15px; opacity: .6; }
#productdetail #productinfo .price font:nth-child(2) { text-decoration: line-through; }
#productdetail #productinfo .txt { overflow: hidden; margin: 5px 0; text-align: right; font-size: 0; }
#productdetail #productinfo .txt label { float: left; display: inline-block; line-height: 33px; font-size: 16px; color: #898989; }
#productdetail #productinfo .txt a , #productdetail #productinfo .txt b { color: #212121; }
#productdetail #productinfo .info { margin: 15px 0; }
#productdetail #productinfo .info .txt {margin: 0;padding: 5px 15px;border-bottom: 1px #888 solid;/* border-color: #888 transparent #888; */display: flex;justify-content: space-between;align-items: center;}
#productdetail #productinfo .info .txt label {color: #16151b;}
#productdetail #productinfo .info .txt a , #productdetail #productinfo .info .txt b {display: inline-block;font-weight: 400;color: #16151b;vertical-align: middle;}
#productdetail #productinfo article { font-size: 14px; color: #616161; }
#productdetail #orderfunction a { padding: 5px 15px; border: 1px #222 solid; display: inline-block; color: #000; vertical-align: middle; }
#productdetail #orderfunction input { padding: 5px 15px; width: 40px; border: #262555 solid; border-width: 1px 0; text-align: center; vertical-align: middle; }
#productdetail #productinfo .btns {margin: 20px 0;text-align: left;}
#productdetail #productinfo .btns a {padding: 15px 15px;display: flex;color: #000;position: relative;overflow: hidden;justify-content: center;}
#productdetail #productinfo .btns a.addcar { background: #161414; color: #fff; }
#productdetail #productinfo .btns a.ask { border: 1px #000 solid; }
#productdetail #productinfo .btns a:after {
    position: absolute;
    width: 0;
    height: 100%;
    background: #3f5ca7;
    display: block;
    top: 0;
    left: 0;
    content: "";
    z-index: -1;
    -webkit-transition-duration: .2s;
    transition-duration: 0.3s;
}
#productdetail #productinfo .btns a:hover:after {width: 100%;}
#productdetail #productinfo .btns a:hover {
    color: #fff;
}
#productdetail .sub-pro-img .slick-next:before
{
    content: '→';
    color: #000;
    font-size: 40px;
}
#productdetail .sub-pro-img .slick-prev{
    left: -40px;
}
#productdetail .sub-pro-img .slick-prev:before
{
    content: '←';
    color: #000;
    font-size: 40px;
}
#productdetail .super-show{
    display: none;
}
/* productTabs */
#productTabs ul.tabs { margin: 50px 0 35px; padding: 0 15px; border-bottom: 1px #e5e5e5 solid; text-align: center; font-size: 0; }
#productTabs ul.tabs li { display: inline-block; vertical-align: top; }
#productTabs ul.tabs li a { padding: 10px 25px; background: #fff; border: #eee solid; border-width: 1px 1px 0 0; display: inline-block; color: #8a8d91; }
#productTabs ul.tabs li:first-child a { border-left-width: 1px; }
#productTabs ul.tabs li.active a {background: #2b4894;border-width: 0 1px 1px;border-color: #2b4894;color: #fff;}


@media screen and (min-width:1281px) {
	#productlsit ul li:hover .img:before { opacity: 1; }
	#productlsit ul li:hover .img font.bg { -webkit-transform: translate(0) scale(1.2); transform: translate(0) scale(1.2); }
	#productTabs ul.tabs li:hover a {background: #425ca1;border-color: #718bcf;color: #fff;}
}
@media screen and (max-width:1280px) {
	#productlsit ul li { margin: 15px 15px 15px 0; width: calc(50% - 17px); border: 1px #e8e8e8 solid; }
	#productlsit ul li:nth-child(2n) { margin: 15px 0 15px 15px; }
	#productdetail .row { width: 55%; }
	#productdetail #productinfo {width: 100%;}
	#productdetail .lemrightbox{
    padding: 10px;
}
}
@media screen and (max-width:980px) {
	#productdetail {text-align: center;display: flex;flex-direction: column;margin-bottom: 0;}
	#productdetail .lemleftbox , #productdetail .lemrightbox{
    width: 100%;
    margin-bottom: 2px;
}
	#productdetail .row , #productdetail #productinfo {margin-left: 0;width: 100%;}
	#productdetail #productinfo h2{
    font-size: 34px;
}
	#productTabs ul.tabs { padding: 0; border-bottom: 0; }
	#productTabs ul.tabs li a , productTabs ul.tabs li.active a { margin: 5px; border-width: 1px; }
}
@media screen and (max-width:640px) {
	#productlsit ul { text-align: center; }
	#productlsit ul li , #productlsit ul li:nth-child(2n) { margin: 15px 0; width: 90%; }
}

@media screen and (max-width:500px){
	#productdetail #productinfo h2{
    font-size: 24px;
    text-align: center;
    margin-top: 30px;
}
	#productdetail #productinfo .info .txt label{
		font-size: 13px;
	}
	#productdetail #productinfo .info .txt a, #productdetail #productinfo .info .txt b{
		font-size: 13px;
	}
	#productdetail .sub-pro-img .slick-prev:before, #productdetail .sub-pro-img .slick-next:before{
    font-size: 30px;
}
	#productdetail .sub-pro-img .slick-prev{
    left: -30px;
}
}