@charset "utf-8";
/***************************************
    copyright by MakeAPP.tw 
***************************************/
/*------------------------ 
  	結構
-------------------------*/
#side_menu {
	float: left;
	display: inline-block;
	width: 15%;
	min-width:100px;
	min-height:400px;
	margin:24px 0 0 0;
	padding: 12px;
	/*background-color: #FFF; */
}
#side_menu li a {
	display: block;
	margin: 0;
	padding: 0 0 0 12px;
	text-decoration: none;
	/*border: 1px solid #F00;*/
}

/*------------------------ 
  	標籤
-------------------------*/
#block_tag {
	margin: 12px 0;
}
#block_tag li {
	padding: 0;
	list-style-type: none;
	margin: 12px 0 15px 0;
}
#block_tag li a {
	font-size: 1em;
	font-weight: 700;
	/*border-left-width: 3px;
	border-left-style: solid;*/
}

/*------------------------ 
  	類別
-------------------------*/
#block_catalog {
	margin: 12px 0;
}
#block_catalog li {
	padding: 7px 0;
}
#block_catalog > ul > li {
	margin:0 0 12px 0;
	list-style-type: none;
	/*border: 1px solid #F00;*/
}
/* 大分類(含次分類) */
#block_catalog > ul > li a {
	/*
	border-left-width: 3px;
	border-left-style: solid;
	*/
	font-size: 1em;
	font-weight: 700;
}
#block_catalog ul ul {
	/*margin: 0 7px;*/
}
#block_catalog ul ul li {
	margin: 0 0 0 0px;
	padding: 0;
	/*list-style-type: circle;*/
}
/* 次分類 */
#block_catalog ul ul li a {
	font-size: 0.9em;
	font-weight: normal;
	margin: 5px 0;
	/*border-width: 1px;
	border-style: solid;*/
}
#block_catalog ul ul li a:hover {
	font-size: 0.9em;
	font-weight: normal;
	margin: 5px 0;
	/*color: #777;*/
}
#block_catalog li a.active {
	/*border-width: 1px;
	border-style: solid;*/
}

/*------------------------ 
  	商品
-------------------------*/
.tag_promote {
	position: absolute;
	display: inline-block;
	margin: 5px 0 0 -80px;
	padding: 3px 5px;
	font-size: 0.9em;
	z-index: 2;
}
.tag_new {
	position: absolute;
	display: inline-block;
	margin: 5px 0 0 40px;
	padding: 3px 5px;
	font-size: 0.9em;
	z-index: 2;
}
h1.product_title {
	font-size: 1.3em;
	margin: 12px 0 24px 7px;
}

#side_products {
	display: inline-block;
	min-height:395px;
	margin: 24px 0;
	width: calc( 100% - 240px );
	/*background-color: #FFF; */
	/*border:1px solid #0CF;*/
}
#side_products li {
	display: inline-block;
	/*width: 250px;*/
	width: 23%;
	max-width: 250px;
	min-width: 130px;
	/*height: 300px;*/
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-color: #EEE;
	margin: 0 8px 28px 2px;
	vertical-align: top;
	box-shadow: 1px 1px 2px rgba(0,0,0,.2);
}
.btn_add_cart {
	background-position: 5px 5px;
}
#side_products li .pd_img {
	width:100%;
	min-width: 120px;
	height:220px;
	line-height:220px;
	text-align : center;
	overflow: hidden;
	/*background: url(https://lh3.googleusercontent.com/fYKXFYaB1kKJsZkX4FMOav2XgCMtBvQgLe83aaGgjljD559ZrHARjB02mWElEwFPg16og4QbIb-dYc68oxxCWGiAsuieChwi6EZ3cMpjFWJAIRObwKmS-UoDjdGOGQx7qg4o7IeMmD2UL6rKx6nZ7W2NP7CmEKrPSG0qUgNKfE9BjROB3vRUPFZ5eJM76ssnXAC1IU9-BZS3bnw8NIsXfWz27LZzesj5WnBu9DqaSls2UQe6iRb-Ydh0znUG-K3b5QCX6_-WYQCro6Uxa-RyaFDpvc4JZxF5EhGxXNDTvWlUT-QwGE2z7eQJSP2AF81mRWW4MhTZeEDdTZ79MHprVhNHL-raySlhw4w6UAEctmxFuYLSNNepItw2ILkrEO4JF-t8VeyNSO8jNomJ84NFmP0H5i9CWektljJF5mSM4b5WnMRbqKlD05ogcq8DjGs4WPhWubYuupVdoHoOJgmDCxyX2-8rNjABZ1MN6FAdgQOm5F82_juvi-v1Kw-Akx_l_GZ3RW9LlRgB1nm7wUJbp_0hjtXEOWGyWzT0Jb5Xcz_Ph_2UOltKvMSDtKkyqrI4tMGUYNBjC1Aegu48WXx272mwuqAAG5o1xI4-HSiwDXf9trE-1Peb1e17_3X7zl2FeRZW2JJ_77aPN2VPdTEJIeBPAkCeBgq1XCzsArXwiDyjarZUx1E53w=s220-no) center;*/
}
#side_products li .pd_img img {
	display:inline-block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	vertical-align : middle;
	/*border:1px solid #F00;*/
	transition: all 0.4s ease-in-out;
}
#side_products li:hover .pd_img img {
	transform: scale(1.1,1.1);
  	-webkit-filter:brightness(.8);
  	/*-webkit-filter:blur(1px);*/
}
#side_products .pd_name {
	height: 38px;
	font-size: 0.9em;
	margin: 24px 0 7px 0;
	padding: 0 2px;
	font-weight: bold;
	/*border: 1px solid #F00;*/
}
#side_products .pd_price {
	/*float: left;*/
	margin: 1px 0 0 0;
}
#side_products .pd_price1 {
	margin:0 5px;
}
#side_products .pd_price2 {
	margin:0 5px;
}

.price_remove {
	color: #777;
	text-decoration: line-through;
}
.price_active {
	color: #F4452C;
}

.infinite-scroll-request {
	display: none;
	width: 100%;
	height: 36px;
	margin-bottom: 30px;
	background: url(https://lh3.googleusercontent.com/bpP4BUX0SYnXyjfPegsWbFKQGviv119t_2Xevu4C3iSLR0AGxk_uNGq1smKDMcrdvpZJGnBIa74H4BtlJ6-OEjsb__agg5GqQhKUZ02dBTqmKU9e7_s6X3qEcHTOPD3HOEnsTyns7xV22PK2DYw1YBEfIygjhScFmMcrvUeCwrxMLmb0DC12vQZjIy9ARz-DMSgvkY1gfPzjJE-q0ba0_U0vm5Eg9wZDwluA9Hw0P99E_Pdscp5EkfuKqkslljrtwMuQNZHRl9f9PwLn-wqJGZHEzSVOpNZFhM9gWedRONEYRWq21XhEbyY525vai6OMXQgCmXVyZdo5x1gVmjDnu_G17GHApw4DEpeIjHTqBiwFj6Ee-YBQVUH7XuXmgMHw1w4KNWHEVT0dsHbj3z8s-AQUs1z2ak7VSQiZhIFOHw8wdh0nC679Lf3in9JRcZvA0dgGyA7TM-1H5a06aBq-VdXbYqPkRaLQ5TQE8_Rfipj6qqeMrkj61_JbQQKb6RdWJEqIU8XQFG32KqW3L-BZ41TxU1Vc3tkUlRDZfknjcIn_ZLTNdugKNJEUBxsR3ID544SSOQUZbqdYxaVk7SJhKaWdMl1M1fR-ulyiOIr0scpUCCD8XEYXcEuLiP5e3zxmfvmn-L5epRuVfIKULFZPagDuHw=s256-no) no-repeat center;
	background-size: 120px;
}

/*@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}*/
.follow {
	/*-webkit-animation: fadein 0.5s; 
       -moz-animation: fadein 0.5s;
        -ms-animation: fadein 0.5s;
         -o-animation: fadein 0.5s;
            animation: fadein 0.5s;*/

	display: none;
	position: absolute;
	width: 50px;
	height: 50px;
	margin: -255px 0 0 -105px;
	/*border: 1px solid #F00;*/
	border-radius: 3px;
	background: rgba(255,255,255,0.9) url(https://i.imgur.com/0YxRIE0.png) no-repeat center;
	cursor: pointer;

	transition:all 2s;
	-moz-transition:all 2s; /* Firefox 4 */
	-webkit-transition:all 2s; /* Safari and Chrome */
	-o-transition:all 2s; /* Opera */
}
#side_products li:hover .follow {
	display: inline-block;
}

.follow.active {
	display: inline-block;
	width: 50px;
	height: 50px;
	background: rgba(255,255,255,0.7)  url(https://i.imgur.com/qs1DyFz.png) no-repeat center;
}

#catalog_ads {
	overflow: hidden;
}
#catalog_ads img {
	width: 100%;
	transition: all 0.7s ease-in-out;
}
#catalog_ads:hover img {
	transform: scale(1.03,1.03);
  	-webkit-filter:brightness(.8);
  	/*-webkit-filter:blur(1px);*/
}

/*
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|  iPad
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

@media only screen and (max-width: 1005px) {
	#side_products {
		margin: 24px 0;
		width: 99%;
		max-width: calc( 100% - 180px );
		/*border:1px solid #0CF;*/
	}
	#side_products li {
		display: inline-block;
		width: calc( 100%/3 - 20px );
		text-align: center;
		border-width: 1px;
		border-style: solid;
		margin: 0 8px 28px 2px;
		vertical-align: top;
		box-shadow: 1px 1px 2px rgba(0,0,0,.1);
	}
}


/*
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|  mobile
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media only screen and (max-width: 750px) {
#side_menu {
	display: none;
}
.follow {
	display: inline-block;
	margin: -330px 0 0 -20%;
	background: rgba(255,255,255,0.7) url(https://i.imgur.com/0YxRIE0.png) no-repeat center;
}
/*------------------------ 
  	商品
-------------------------*/
#side_products {
	display: inline-block;
	/*width:767px;*/
	width: 100%;
	max-width: 767px;
	min-width: 300px;
	min-height:395px;
	margin:0px 0px;
	padding: 0;
	/*border:1px solid #0CF;*/
}
#side_products li {
	display: inline-block;
	/*width: 250px;*/
	width: 45%;
	max-width: 250px;
	min-width: 130px;
	height: 280px;
	text-align: center;
	/*border:1px solid #0CF;*/
	margin: 0 5px 15px 5px;
	vertical-align: top;
}
#side_products li .pd_img {
	width:100%;
	min-width: 120px;
	height:180px;
	line-height:180px;
	text-align : center;
	/*border:1px solid #CCC;*/
}
#side_products li .pd_img img {
	display:inline-block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	vertical-align : middle;
	/*border:1px solid #F00;*/
}
#side_products .pd_name {
	font-size: 1em;
	line-height: 1.2em;
	margin: 5px 0 7px 0;
}

h1.product_title {
	font-size: 1.5em;
	margin: 12px 7px;
	margin: 24px 0 36px 12px;
}
#side_products .pd_price1 {
	margin-right: 7px;
}


}