/*---------------------------------- Featured Products (Spotlights 模組) + Recommend Products (Webcms 模組)-----------------------------------*/



/* Recommend Products 給 Hover Block 使用 >> 需搭配 Java Script */
#Featured_Products .markets-solutions-recommend-products .product-item:hover h3 a, 
.rec_Products .markets-solutions-recommend-products .product-item:hover h3 a {
    color: #01a6ea !important;
    text-decoration: none;
    transition: all .5s linear 0s !important;
}

/* Recommend Products 給 Hover Block 使用 >> 需搭配 Java Script */
#Featured_Products .markets-solutions-recommend-products .product-item:hover > a:last-child::before, 
.rec_Products .markets-solutions-recommend-products .product-item:hover > a:last-child::before {
    background-color: rgba(87, 106, 135, 0) !important;
	
	/*background: -o-radial-gradient(center, ellipse cover, rgba(171,184,198,0) 40%,rgba(171,184,198,0) 99%) !important;
	background: -ms-radial-gradient(center, ellipse cover, rgba(171,184,198,0) 40%,rgba(171,184,198,0) 99%) !important;
	background: radial-gradient(ellipse at center, rgba(171,184,198,0) 40%,rgba(171,184,198,0) 99%) !important;*/
}



#Featured_Products, 
.rec_Products {
    /*background: rgb(243, 245, 247);*/
	background: #fff;
}

#Featured_Products .home_spot_light, 
#featured_products_section {
	/*background: url(//assets.aten.com/webpage/shared/market/New_V2/Scenarios_BG_Gray_Left-9.png) no-repeat center center;*/
	background-size: auto;
	background-size: 100%;
}

#Featured_Products .home_spot_light, 
#Featured_Products div.markets-solutions-recommend-products, 
.rec_Products div.markets-solutions-recommend-products {
    padding: 115px 0 130px !important;
}

/* Recommend Products >> h2 */
#Featured_Products .markets-solutions-recommend-products h2, 
.rec_Products .markets-solutions-recommend-products h2 {
	margin-bottom: 50px;
}



#Featured_Products .markets-solutions-recommend-products .product-item h3 a, 
.rec_Products .markets-solutions-recommend-products .product-item h3 a {
    /*color: #003a92;*/
	color: #074576 !important;
    text-decoration: none !important;
    font-size: 1.07em !important;
    font-weight: 500 !important;
}

#Featured_Products .markets-solutions-recommend-products .product-item h3 a:hover, 
.rec_Products .markets-solutions-recommend-products .product-item h3 a:hover {
    color: #01a6ea !important;
    text-decoration: none;
    transition: all .5s linear 0s !important;
}



/*#Featured_Products .markets-solutions-recommend-products .product-item h3::before, 
 .rec_Products .markets-solutions-recommend-products .product-item h3::before {
	font-family: "Font Awesome 5 Free";
	content: "\f0da" !important;
	color: #07aed3;
	font-size: 1.4em;
	font-weight: 600;
	font-style: normal;
	font-variant: normal;
	margin: 0;
	position: relative;
	display: inline-block;
	line-height: 1.3em;
	left: -28px;
	top: 1px;
}
*/



/* 上方有虛線時
#Featured_Products .markets-solutions-recommend-products .product-item > a:last-child::before, 
.rec_Products .markets-solutions-recommend-products .product-item > a:last-child::before {
    content: "";
    display: inline-block;
    width: 207px;
    height: 135px;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center;
    position: absolute;
    top: 199px;
    transition: all 0.3s ease-in-out 0s;
    background-color: rgba(0,0,0,0.05);
    border-radius: 3px;
	z-index: 1;
}*/



#Featured_Products .markets-solutions-recommend-products .product-item:hover > a::before, 
.rec_Products .markets-solutions-recommend-products .product-item:hover > a::before {
    background-color: rgba(0,0,0,0) !important;

	/*background: -o-radial-gradient(center, ellipse cover, rgba(171,184,198,0) 40%,rgba(171,184,198,0) 99%) !important;
	background: -ms-radial-gradient(center, ellipse cover, rgba(171,184,198,0) 40%,rgba(171,184,198,0) 99%) !important;
	background: radial-gradient(ellipse at center, rgba(171,184,198,0) 40%,rgba(171,184,198,0) 99%) !important;*/

    transition: all .4s linear 0s !important;
}




#Featured_Products .markets-solutions-recommend-products .product-item, 
.rec_Products .markets-solutions-recommend-products .product-item {
	/*border-top: 1px solid #f8f8f8;*/
	/*border-radius: 6px !important;*/
	border-radius: 5px !important;
	/*border: 1px solid #f3f6f7;*/
	/*border: 1px solid #c4c8c9;*/
	border: 1px solid #d8dcde !important;
	border-bottom: 1px solid #cbcdce !important;
	background-color: #fff !important;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2) !important;
	/*padding: 35px 28px 40px !important;*/
	padding: 35px 28px 0px !important;
	margin: 0 13px 50px !important;
	min-height: 330px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s !important;
}

/* 當白底時 (加 .rec_white) */
#Featured_Products.rec_white .markets-solutions-recommend-products .product-item, 
.rec_Products.rec_white .markets-solutions-recommend-products .product-item {
	border: 1px solid #e9ebee !important;
	border-bottom: 1px solid #dddfe0 !important;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.07) !important;
}


#Featured_Products .markets-solutions-recommend-products .product-item:hover, 
.rec_Products .markets-solutions-recommend-products .product-item:hover {
    -webkit-transform: translateY(-10px) !important;
    -ms-transform: translateY(-10px) !important;
    transform: translateY(-10px) !important;
    box-shadow: 0 22px 43px rgba(0, 0, 0, 0.15) !important;
}


#Featured_Products .markets-solutions-recommend-products .product-item p, 
.rec_Products .markets-solutions-recommend-products .product-item p {
	font-weight: 400 !important;
	font-size: .89em !important;
	font-size: .85em !important;
	opacity: 0.85;
	/*border-bottom: 2px dotted #eaeaea;
	margin-bottom: 25px;*/
}


/* Product Image >> Position */
#Featured_Products .markets-solutions-recommend-products .product-item img, 
.rec_Products .markets-solutions-recommend-products .product-item img {
    top: 0px;
    position: relative;
}



/* Button > Learn More (Recommend Products)*/
.markets-solutions-recommend-products .markets-solutions-applications a.btn.btn-primary {
	color: #fff;
	background-color: #75b719;
	border: solid 2px #75b719;
	transition: all 0.3s ease-in-out 0s;
  }

/* Button (白底綠字) > Learn More (Recommend Products)*/
.Button_LineG .markets-solutions-recommend-products .markets-solutions-applications a.btn.btn-primary {
	color: #75b719 !important;
	background-color: #fff;
	border: solid 2px #75b719 !important;
	float: none;
	transition: all 0.3s ease-in-out 0s;
}


/* Button > Learn More > Hover (Recommend Products) */
.Button_LineG .markets-solutions-recommend-products .markets-solutions-applications a.btn.btn-primary:hover, 
.markets-solutions-recommend-products .markets-solutions-applications a.btn.btn-primary:hover {
	color: #fff !important;
	background-color: rgba(159, 226, 40, 1.0) !important;
	border: solid 2px rgba(159, 226, 40, 1.0) !important;
	transition: all 0.3s ease-in-out 0s;
}


/* 大分類標 (Recomment Products) > wording_block */
.rec_Products .markets-solutions-recommend-products .wording_block {
	text-align: center;
	margin-bottom: 50px;
  }
  
  /* 大分類標 (Recomment Products) > wording_block > h3 */
  .rec_Products .markets-solutions-recommend-products .wording_block h3 {
	font-weight: 200;
	font-size: 45px;
	line-height: 68px;
	letter-spacing: -0.01em;
	word-spacing: 0.01em;
	padding-bottom: 20px;
  }
  
  /* 大分類標 (Recomment Products) > wording_block > h4 */
  .rec_Products .markets-solutions-recommend-products .wording_block h4 {
	font-size: 1.1em;
	font-weight: 300;
	font-weight: 400;
	line-height: 1.6em;
	padding-bottom: 10px;
	opacity: 0.85;
	opacity: 0.55;
	margin-right: 0em;
  }


/* 客製化 (recommend-products) >> H2 > SecTitle(變次標題不需要綠線) > 刪除 ::after   */
.rec_SecTitle .markets-solutions-recommend-products h2:after, 
.rec_SecTitle div.markets-solutions-recommend-products h2::after {
	content: none !important;
}

/* 客製化 (recommend-products) >> H2 > SecTitle(變次標題不需要綠線) > 刪除底線   */
.rec_SecTitle .markets-solutions-recommend-products h2, 
.rec_SecTitle div.markets-solutions-recommend-products h2 {
	border-bottom: none !important;
}

/* 客製化 (recommend-products) >> H2 > SecTitle(變次標題不需要綠線) > 下三角形   */
.rec_Products.rec_SecTitle.arrow-Down .markets-solutions-recommend-products h2::after, 
#series_products.rec_SecTitle.arrow-Down h2::after {
	font-family: "Font Awesome 5 Free";
	content: "\f078" !important;
	color: #21add8;
	color: #74bcf1;
	color: rgba(142, 194, 31, 1.0);
	font-size: 0.65em !important;
	font-weight: 600 !important;
	font-style: normal;
	font-variant: normal;
	margin: 0;
	position: relative;
	display: inline-block;
	line-height: 1.3em;
	top: -1px;
	left: 15px;
	clip-path: polygon(0 33%, 100% 33%, 100% 100%, 0% 100%);
	height: unset !important;
	width: unset !important;
	background-color: unset !important;
  }














/* ========================================================================================================================

                         .Auto-Gray-Odd (奇數 ) / .Auto-Gray-Even (偶數 ) >> 隔一個 Section >> 自動套灰底 

	                                【 自動套淺灰底色 >> 奇數(Odd) / 偶數(Even) >> 套灰色 】

                                  >> 第一個不要灰色(.Auto-Gray-Odd) >> 第 2, 4, 6....變灰色

                                  >> 第一個要灰色 (.Auto-Gray-Even) >> 第 1, 3, 5....變灰色

                                  >> Section 只能單獨使用 .Auto-Gray-Odd 或者 .Auto-Gray-Even

                                  >> 若要套用 : 隔一個 Section >> 自動套灰底, 每個 Section 都要填入同一組樣式名
                                  
======================================================================================================================== */


/* 限定套用 .Auto-Gray-?? 的 div -- 奇數(Odd)/ 偶數(Even)自動灰底 (Recommended Products 模組) >> 刪除灰線 */
section[class*="Auto-Gray-"].rec_Products + section.rec_Products::before, 
section.rec_Products+section.rec_Products[class*="Auto-Gray-"]::before {
	content: none !important;
}


/* 限定套用 .Auto-Gray-?? 的 div -- 奇數(Odd)/ 偶數(Even)自動灰底 (Recommended Products 模組) >>  */
#products[class*="Auto-Gray-"]:nth-of-type(odd) .markets-solutions-recommend-products, 
[class*="Auto-Gray-"].rec_Products.rec_white:nth-of-type(odd) div.markets-solutions-recommend-products,
.rec_Products.rec_white[class*="Auto-Gray-"]:nth-of-type(odd) div.markets-solutions-recommend-products, 

#products[class*="Auto-Gray-"]:nth-of-type(even) .markets-solutions-recommend-products, 
[class*="Auto-Gray-"].rec_Products.rec_white:nth-of-type(even) div.markets-solutions-recommend-products,
.rec_Products.rec_white[class*="Auto-Gray-"]:nth-of-type(even) div.markets-solutions-recommend-products {
	
}


/* 限定套用 .Auto-Gray-?? 的 div -- 奇數(Odd)/ 偶數(Even)自動灰底 (Recommended Products 模組) >> 加灰色底 */
#products.Auto-Gray-Odd:nth-of-type(odd) .markets-solutions-recommend-products, /* 奇數 */
.Auto-Gray-Odd.rec_Products.rec_white:nth-of-type(odd) div.markets-solutions-recommend-products, /* 奇數 */
.rec_Products.rec_white.Auto-Gray-Odd:nth-of-type(odd) div.markets-solutions-recommend-products, /* 奇數 */

#products.Auto-Gray-Even:nth-of-type(even) .markets-solutions-recommend-products, /* 偶數 */
.Auto-Gray-Even.rec_Products.rec_white:nth-of-type(even) div.markets-solutions-recommend-products, /* 偶數 */
.rec_Products.rec_white.Auto-Gray-Even:nth-of-type(even) div.markets-solutions-recommend-products /* 偶數 */ {
	background: rgba(245, 248, 250, 1) !important;
}









/* =====================================================================================================
   RWD   >>  Featured Products + Recommended Products
   ===================================================================================================== */



/* 橫向智慧手機到竪立平板電腦解析度 >> 978 以上 */
@Media (min-width: 978px) { 
	
	
	/* #Featured_Products 上方無虛線時 
	#Featured_Products .markets-solutions-recommend-products .product-item > a:last-child::before, 
	.rec_Products .markets-solutions-recommend-products .product-item > a:last-child::before {
	content: "";
	display: inline-block !important;
	width: 206px !important;
	height: 140px !important;
	background-size: 100% !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	position: absolute !important;
	transition: all 0.3s ease-in-out 0s;
	background-color: rgba(87, 106, 135, 0.07) !important;
	border-radius: 3px !important;
	z-index: 1;
	}
	*/


	/* #Featured_Products 上方無虛線時 */
	#Featured_Products .markets-solutions-recommend-products .product-item > a:last-child::before, 
	.rec_Products .markets-solutions-recommend-products .product-item > a:last-child::before {
	content: "";
	display: inline-block !important;
	width: 90% !important;
	height: 44.5% !important;
	background-size: 100% !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	position: absolute !important;
	transition: all 0.3s ease-in-out 0s;
	background-color: rgba(87, 106, 135, 0.07) !important;
	/*background: -o-radial-gradient(center, ellipse cover, rgba(171,184,198,000.1) 40%,rgba(171,184,198,0.1) 99%) !important;
	background: -ms-radial-gradient(center, ellipse cover, rgba(171,184,198,000.1) 40%,rgba(171,184,198,0.1) 99%) !important;
	background: radial-gradient(ellipse at center, rgba(171,184,198,000.1) 40%,rgba(171,184,198,0.1) 99%) !important;*/
	border-radius: 3px !important;
	left: 12px;
	bottom: 12px;
	z-index: 1;
	}
	
	
}


/* 橫向智慧手機到竪立平板電腦解析度 >> 1024 以上 */
@Media (min-width: 1024px) { 
	
	/*------------------- Featured Products -----------------*/	
	#Featured_Products .home_spot_light, 
	#Featured_Products div.markets-solutions-recommend-products, 
	.rec_Products div.markets-solutions-recommend-products {
	padding: 115px 0 130px !important;
	}

	.rec_Products div.markets-solutions-recommend-products {
		padding: 115px 0 100px !important;
	}

	#Featured_Products .home_spot_light {
	padding: 115px 0 130px !important;
	background-size: 150% !important;
	}

	/* Product Image >> Position */
	#Featured_Products .markets-solutions-recommend-products .product-item img, 
	.rec_Products .markets-solutions-recommend-products .product-item img {
	top: 10px;
	}


	/* Product Image (白底時.rec_white) >> Position */
	#Featured_Products.rec_white .markets-solutions-recommend-products .product-item img, 
	.rec_Products.rec_white .markets-solutions-recommend-products .product-item img {
	top: 6px;
	padding: 3%;
	}

	/* Product Image >> Position > Get Quote */
	#Featured_Products.Get-Quote .markets-solutions-recommend-products .product-item img, 
	.rec_Products.Get-Quote .markets-solutions-recommend-products .product-item img {
	top: 0px;
	}

	#Featured_Products .markets-solutions-recommend-products .col-md-3.product-item, 
	.rec_Products .markets-solutions-recommend-products .col-md-3.product-item {
	width: 22% !important;
	}

   /* Recommend Products (置左) */
   #products-1.float_Left .markets-solutions-recommend-products .product-item, 
   #products.float_Left .markets-solutions-recommend-products .product-item, 
   .float_Left div.markets-solutions-recommend-products .product-item, 
   .rec_Products.float_Left .markets-solutions-recommend-products .product-item {
   float: left !important;
   }

	/* Recommend Products (置中) */
	#products-1.float_None .markets-solutions-recommend-products .product-item, 
	#products.float_None .markets-solutions-recommend-products .product-item, 
	.float_None div.markets-solutions-recommend-products .product-item, 
	.rec_Products.float_None .markets-solutions-recommend-products .product-item, 
	#products-1.float_Center .markets-solutions-recommend-products .product-item, 
	#products.float_Center .markets-solutions-recommend-products .product-item, 
	.float_Center div.markets-solutions-recommend-products .product-item, 
	.rec_Products.float_Center .markets-solutions-recommend-products .product-item, 
	#products-1.float_center .markets-solutions-recommend-products .product-item, 
	#products.float_center .markets-solutions-recommend-products .product-item, 
	.float_center div.markets-solutions-recommend-products .product-item, 
	.rec_Products.float_center .markets-solutions-recommend-products .product-item{
	float: none !important;
	}

	.rec_Products .markets-solutions-recommend-products .wording_block {
	margin-bottom: 6%;
	}

	.rec_Products .markets-solutions-recommend-products .wording_block h3 {
	font-size: 53px;
	}

	/* recommend-products) >> H2 > SecTitle(變次標題) > 縮小字級  */
	#series_products.rec_SecTitle h2, 
	.rec_Products.rec_SecTitle .markets-solutions-recommend-products h2 {
	font-size: 35px !important;
	}

	.rec_Products .markets-solutions-recommend-products .wording_block h4 {
	display: inline-block;
	width: 87%;
	}


	/* 最後一則 (Recommended Products 模組) >> 底部距離 footer 加高 */
	section[id*="products-"]:last-of-type .markets-solutions-recommend-products,
	.rec_Products.rec_white:last-of-type div.markets-solutions-recommend-products,
	.rec_Products:last-of-type div.markets-solutions-recommend-products {
	padding-bottom: 100px !important;
	}



}




/* 中螢幕 >> 1050 ~1770 */
@Media (min-width: 1050px) and (max-width: 1770px) { 

	#featured_products_section, 
	#Featured_Products .home_spot_light {
	background-size: 170% !important;
	}
	
}


/* 中螢幕 >> 1023 ~1999 */
@Media (min-width: 1023px) and (max-width: 1999px) { 
	
	#Featured_Products .home_spot_light {
	padding: 100px 0 100px !important;
	}	
	
	
}


/* 橫向智慧手機到竪立平板電腦解析度 >> 2000 以上 */
@Media (min-width: 2000px) { 
	
	/****************** Featured_Products *******************/

	#Featured_Products .home_spot_light, #featured_products_section, 
	.rec_Products {
	background-size: 130% !important;
	}

	#Featured_Products .home_spot_light {
	padding: 70px 0 70px !important;
	}
	
}


/* Bowei 筆電寬螢幕 */
@Media (min-width: 1281px) and (max-width: 1366px)  { 
	
	
	/*------------------- Featured Products -----------------*/	
	#featured_products_section, 
	#Featured_Products .home_spot_light {
	background-size: 170% !important;
	}

	.rec_Products .markets-solutions-recommend-products .wording_block h3 {
	font-size: 45px;
	}
	
	
}



/* 橫向智慧手機 >> 970 以下 */
@Media (max-width: 970px)  { 
	
	
	#Featured_Products .markets-solutions-recommend-products .product-item, 
	.rec_Products .markets-solutions-recommend-products .product-item {
		float: none !important;
	}

	#Featured_Products .markets-solutions-recommend-products .product-item .img-responsive, 
	.rec_Products .markets-solutions-recommend-products .product-item .img-responsive {
		margin: 0 auto 20px !important;
	}

	#Featured_Products .markets-solutions-recommend-products .product-item > a, 
	.rec_Products .markets-solutions-recommend-products .product-item > a {
		padding-top: 20%;
		display: block;
	}

	#Featured_Products .markets-solutions-recommend-products .product-item > a:last-child::before, 
	.rec_Products .markets-solutions-recommend-products .product-item > a:last-child::before {
		height: 40% !important;
	}

	.markets-solutions-recommend-products .btn-group {
	width: 100%;
	margin: 0 auto;
	}
	  
 }


 /* 810以下 (iPad) */
@Media (max-width: 810px) {

	.rec_Products .markets-solutions-recommend-products .wording_block h4 {
	text-align: left;
	}
  
	.markets-solutions-recommend-products .btn-group {
	width: 100%;
	margin: 0 auto;
	}
  
  }



/* 橫向智慧手機 >> 480 以下 */
@Media (max-width: 480px)  { 
	
	
   #Featured_Products .markets-solutions-recommend-products .product-item, 
   .rec_Products .markets-solutions-recommend-products .product-item {
    width: 80% !important;
    margin: 0 auto 50px !important;
   }
	
	
}













/*---------------------------------- Get Quote for Recommend Products (Webcms 模組)-----------------------------------*/



/* Images > Get Quote (Recommend Products) */
#Featured_Products.get-quote-cart .markets-solutions-recommend-products .product-item img, 
.get-quote-cart .markets-solutions-recommend-products .product-item img {
 top: 0 !important;
}

/* Button > Add to Quote Cart (Recommend Products) */
.markets-solutions-recommend-products .btn.btn-primary.add_quote_cart {
	font-weight: 600 !important;
	font-size: 1.1em !important;
	background-color: #85c12f !important;
	color: #fff !important;
	border: solid 2px #85c12f !important;
	border-radius: 4px;
	padding: 9px 12px;
	margin-top: 25px;
	transition: all 0.3s ease-in-out 0s;
}

/* Button > Add to Quote Cart (Recommend Products) */
.get-quote-cart .markets-solutions-recommend-products .btn.btn-primary.add_quote_cart {
	margin: 8% auto 15%;
}


/* Button > Add to Quote Cart >> Hover (Recommend Products) */
.markets-solutions-recommend-products .btn.btn-primary:hover.add_quote_cart {
	color: #fff !important;
	background-color: rgba(159, 226, 40, 1.0) !important;
	border: solid 2px rgba(159, 226, 40, 1.0) !important;
	transition: all 0.3s ease-in-out 0s;
}

/* Button > Add to Quote Cart >> Title (Recommend Products) */
#gqc_preview .modal-header h4 {
	font-weight: 500 !important;
  }


/* Button-1 (View Cart) > Added to Quote Cate (Lightbox) */
#gqc_preview a.add-to-cart.button.nomargin.btn-full-width {
	width: 45% !important;
	display: inline-block;
	padding: 5px 0;
	font-size: 1.1em;
	font-weight: 500 !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	height: unset;
	border-radius: 5px;
	margin: 0 7px !important;
	background-color: #85c12f !important;
	border: 2px solid transparent;
}

/* Button-2 (Select more products) > Added to Quote Cate (Lightbox) */
#gqc_preview a#gqc_close.add-to-cart.button.nomargin.btn-full-width {
	background-color: #fff !important;
	text-shadow: none;
	color: #75b719 !important;
	border: 2px solid #75b719 !important;
}

/* Button All >> Hover > Added to Quote Cate (Lightbox) */
#gqc_preview a.add-to-cart.button:hover.nomargin.btn-full-width, 
#gqc_preview a#gqc_close.add-to-cart.button:hover.nomargin.btn-full-width {
	color: #fff !important;
	background-color: rgba(159, 226, 40, 1.0) !important;
	border: solid 2px rgba(159, 226, 40, 1.0) !important;
	transition: all 0.3s ease-in-out 0s;
}




/* ===============================================================================================
                            RWD >> Get Quote (for Recommend Products)
============================================================================================== */

/* 810以下 (iPad) */
@Media (max-width: 810px) {

	.get-quote-cart .markets-solutions-recommend-products .btn-group {
	width: 100%;
	}

}