@charset "utf-8";
/*******************************************************************************
 * Version 1.0 Release 2015.12.23;
 * Copyright 2015, "ryan"<ryan@dotmore.com.tw>. All rights reserved.
 ******************************************************************************/
/*推薦產品內容*/
.ProductIntro{
	background: #fff;
	border: 1px solid #c1cace;
	-webkit-box-shadow: 0px 2px 2px rgba(69, 90, 100, .2);/*safari、chrome*/
	-moz-box-shadow: 0px 2px 2px rgba(69, 90, 100, .2);/*firefox*/
	box-shadow: 0px 2px 2px rgba(69, 90, 100, .2);
	position: relative;
	vertical-align: top;
	margin: 0 0 1.875em 0;/*30/16*/
}
/*圖片區*/
.ProductIntro > .ImgBoxWrap{
	position: relative;
}
/*圖片*/
.ProductIntro > .ImgBoxWrap > .ImgBox{
}
.ProductIntro > .ImgBoxWrap > .ImgBox > a > img{
}
.ProductIntro > .ImgBoxWrap > .ImgBox > img{
}
/*資訊*/
.ProductIntro > .Info{
	padding: 0 5.2% 0.9375em;/*15/16, 15/288*/
	/*position: relative;*/
}
/*案件名*/
.ProductIntro > .Info > h1{
	font-size: 1.25em;/*20/16*/
	color: #455a64;
	line-height: 1.2;/*24/20*/
	margin: 0 -5.2%;/*8/20*/
	overflow: hidden;
	padding: 0.9375em 5.2%;
}
/*描述*/
.ProductIntro > .Info > .Desc{
	margin: 0 -5.2% 20px;/*8/20*/
	padding: 0 5.2% 0.9375em;
	border-bottom:1px solid #e6f0f5;
}
/*mircodata(隱藏)*/
.ProductIntro > .Info > .Brand,
.ProductIntro > .Info > .Offers{
	display: none;
}
/*回來做*/
.ProductIntro > .Info .BoxExchange{
	width: 100%;
	border: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
/*標題(隱藏)*/
.ProductIntro > .Info .BoxExchange > .BoxTitle{
	display: none;
}
/*區塊-內容*/
.ProductIntro > .Info .BoxExchange > .BoxBody {
	line-height: 1.6;
	clear: both;
}
/*一般表單-表單內的橫列*/
.ProductIntro > .Info .BoxExchange > .BoxBody > .Row {
	display: block;
	padding: 0.375em 0;/*6px/16px*/
}
.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn{
}
.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > span{
	display: none;
}
.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > select{
	min-height: 46px;
}
/*一般表單-左側欄位(名稱)*/
.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > label,
.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > .Expend > .Row > label{
	font-size: 0.9375em;/*15px/16px*/
	color: #455a64;
	display: inline-block;
	font-weight: bold;
	margin: 3px 0;
	width: 100%;
	/*display: none;*/
}
/*一般表單-必填欄位出現錯誤時反應-第1、2層*/
.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > .MsgError,
.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > .Expend > .Row > .FillIn > .MsgError{
	display: block;
	color: #ff0000;
	padding: 5px 0 0;
	margin: 0;
	height: 1.5em;
	line-height: 1.3;
}
/*一般表單-展開區塊(當有動作時)*/
.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > .Expend {
	display: none;
}
.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > .Expend.Show{
	display: block;
}
/* 頁籤 */
.Tab{
	margin-bottom: -14px;
}
.Tab > li:last-child > a{
	border-right: 1px solid #c1cace;
}
/* 商品介紹、注意事項 */
.ExchangeDesc,
.ExchangeNote,
.UserReview{
	display: none;
}
.ExchangeDesc.Show,
.ExchangeNote.Show,
.UserReview.Show{
	display: block;
}
/*第一則box隱藏標題*/
.Box.BoxExchangeDesc > .BoxTitle,
.Box.BoxExchangeInfo > .BoxTitle,
.Box.BoxUserReview > .BoxTitle{
	display: none;
}
/*如果使用者之視窗寬度>=568px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 568px) {
}

/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	/*推薦商品內容*/
	.ProductIntro{
		overflow: hidden;
		padding: 30px;
	}
	/*圖片區*/
	.ProductIntro > .ImgBoxWrap{
	}
	/*圖片*/
	.ProductIntro > .ImgBoxWrap > .ImgBox{
	}
	/*回饋金tag*/
	.ProductIntro > .ImgBoxWrap > .TagBonus{
	}
	/*資訊*/
	.ProductIntro > .Info{
		/*padding: 0 0 0 325px;376/268*/
	}
	/*案件名*/
	.ProductIntro > .Info > h1{
		font-size: 2.5em;/*40/16*/
		/*margin: 0 0 0.4em;10/40*/
		line-height: 1.2;/*24/24*/
		border: none;
	}
	.ProductIntro > .Info > .Desc {
	    margin: 0 0 20px;
	    padding: 0;
	    border-bottom: none;
	    /*max-height: 72px;*/
	    overflow: hidden;
	}
	ul.RadioBtn > li{
		width: 47.5%;
	}
	.ProductIntro > .Info .BoxExchange > .BoxBody{
	}

	.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > label{
		/*display: none;*/
	}
	.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > .SelectMd{
		width: 100%;
	}
	.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > .InStock{
		display: inline-block;
		margin: 0 0 0 10px;
	}
	.ProductIntro > .Info .BtnBox > .Btn{
		width: 100%;
	}
	.LightBox .Box > .BoxBody > .Row > .FillIn ul.RadioBtn > li{
		width: 154px;
	}
	.LightBox .Box > .BoxBody > .Row > .FillIn > a{
		margin: 0 0 0 10px;
	}
}
/*如果使用者之視窗寬度>=1024px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1024px) {
	/*推薦商品內容*/
	.ProductIntro{
		margin: 0 auto 30px;
	}
	/*圖片區*/
	.ProductIntro > .ImgBoxWrap{
		width: 320px;
		float: left;
	}
	/*資訊*/
	.ProductIntro > .Info{
		padding: 0 0 0 350px;
	}
	.ProductIntro > .Info > h1{
		padding: 0;
		margin: 0 0 10px 0;
	}
	.ProductIntro > .Info .BoxExchange:after{
		content: " ";
		display: block;
		clear: both;
		line-height: 0;
		height: 0;
		visibility: hidden;
	}
	/*一般表單-左側欄位(名稱)*/
	.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > label{
	}
	/*一般表單-展開區塊(當有動作時)*/
	.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > .Expend {
		visibility: hidden;
		display: block;
	}
	.ProductIntro > .Info .BoxExchange > .BoxBody > .Row > .FillIn > .Expend.Show{
		visibility: visible;
	}
	/*回來做*/
	.ProductIntro > .Info .BoxExchange + .BtnBox{
		width: 233px;
	}
}

/*2017/11/01 Frank 新增會員等級*/

/*數量選項父層*/
.NumSelect {
	font-size: 0;
	border: 1px solid #9eafb7;
}

@media (min-width: 768px) {
	.NumSelect {
		margin: 6px 0;
	}
}

@media (min-width: 1024px) {
	.NumSelect {
		margin: 0;
	}
}

/*增加減少輸入數量共同樣式*/
.Subtract,
.InputCount,
.Add {
	display: inline-block;
	vertical-align: middle;
}

/*輸入欄位*/
.InputCount {
	outline: 0;
	font-size: 16px;
	margin: 0;
	width: calc(100% - 88px);
	text-align: center;
}

/*增加減少數量按鈕*/
.Subtract,
.Add {
	background: #fff;
	width: 44px;
	height: 44px;
}

/*增加減少數量按鈕圖示*/
.IconMinus,
.IconPlus {
	position: relative;
}

.IconMinus:before,
.IconPlus:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 7px;
	height: 1px;
	background: #485a64;
}

.IconPlus:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 7px;
	width: 1px;
	background: #485a64;
}

/*兌換鈕*/
.ProductIntro > .Info .BtnBox {
	margin: 20px 0;
}

@media (min-width: 768px) {
	.ProductIntro > .Info .BtnBox {
		margin: 30px 0;
		clear: both;
	}
}

@media (min-width: 1024px) {
	.ProductIntro > .Info .BoxBody .BtnBox {
		display: inline-block;
		vertical-align: bottom;
		margin: 8px 0 0 20px;
	}
}

/*依照設計稿按鈕寬高覆蓋用class*/
.Btn.TradeBtn {
	line-height: 44px;
	padding: 0;
	margin: 0;
}

@media (min-width: 1024px) {
	.Btn.TradeBtn {
		min-width: 220px;
	}
}

/*兌換選單及數量父層 RWD 變動*/
@media (min-width: 768px) {
	.ProductIntro > .Info .BoxExchange > .BoxBody > .Row:first-child {
		width: calc(100% / 2 - 20px);
		display: inline-block;
	}

	.ProductIntro > .Info .BoxExchange > .BoxBody > .Row:nth-child(2) {
		width: calc(100% / 2 - 20px);
		display: inline-block;
		float: right;
	}
}


@media (min-width: 1024px) {
	.ProductIntro > .Info .BoxExchange > .BoxBody > .Row:first-child {
		width: 100%;
	}

	.ProductIntro > .Info .BoxExchange > .BoxBody > .Row:nth-child(2) {
		float: none;
		max-width: 160px;
		padding: 0;
		margin-top: 8px;
	}
}

/*剩餘數量*/
.InStock {
	color: #dd4f4e;
}

@media (min-width: 1024px) {
	.InStock {
		display: inline-block;
		vertical-align: bottom;
		margin-left: 12px;
	}
}