@import url(../../cckm-box.css);

.goods { padding-bottom: 20px; }
.goods .goods-tab { padding: 20px; }

/** 查詢條件 **/
	.goods .condition .check-radio .radio > div { display: inline; margin-right: 15px; padding-top: 10px; padding-bottom: 10px; }
	@media (max-width: 991px) {
		.goods .condition .cc-div-table .cc-div-table-cell { display: block; }
		.goods .condition .check-radio .radio > div { display: inline-block; }
	}
	@media (max-width: 767px) {
		.goods .condition .cc-div-table, .goods .condition .check-radio .radio { width: 100% !important } 
		.goods .condition .check-radio .radio.date-range { padding-right: 20px; }
		.goods .condition .check-radio .radio.date-range > div { margin-right: 0; width: 100%; }
	
		 /* 必須要扣掉 radio 寬度，元件才會顯示在 radio 後面 */
		.goods .condition .check-radio .radio.date-range .nearly-picker,
		.goods .condition .check-radio .radio.date-range .range-picker .month-picker {  width: calc(100% - 34px);  }
		.goods .condition .check-radio .radio.date-range .range-picker .end-ym { display: block; text-align: right; margin-top: 10px; }
		.goods .condition .check-radio .radio.date-range .range-picker .btn { width: calc(100% - 33px); float: right; margin-top: 10px; }
	}

/** 內容 **/
	.goods .data .box { margin-bottom: 0 }
	.goods .data .position, .goods .data .trend { margin-bottom: 30px; padding: 15px; }
	.goods .data .position .box-body > h2, .goods .data .trend .box-body > h2 { padding-bottom: 15px; }
	@media (max-width: 767px) {
		.goods .data .position .box-body > h2, .goods .data .trend .box-body > h2 { font-size: 24px; }
	}

/** 相對位置 **/
	.goods .data .position .info .latest-info, 
	.goods .data .position .info .high-info, 
	.goods .data .position .info .low-info {
		margin: 10px 0; padding: 10px 0;
	}
	.goods .data .position .info .date,  
	.goods .data .position .info .date-range {
		color: rgb(var(--gray-888-color)); font-size: 16px; margin-bottom: -10px;
	}
	.goods .data .position .info .value {
		font-size: 50px; font-weight: 700;  
	}
	@media (max-width: 991px) {
		.goods .data .position .info .value {
			font-size: 40px;
		}
	}
	.goods .data .position .info .unit {
		font-size: 14px; font-weight: 400; margin-top: -10px; 
	}
	.goods .data .position .info:before {
		content: ''; position: absolute; top: 10px; right: 10px; width: 140px; height: 140px; 
	    background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.15;
	}
	/** 糧食價格指數 **/
		.goods.fao-food .data .position .info:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/harvest.svg);
		}
		.goods.fao-food .data .position .info.MEAT:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/meat.svg);
		}
		.goods.fao-food .data .position .info.DAIRY:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/dairy-products.svg);
		}
		.goods.fao-food .data .position .info.CEREAL:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/cereal.svg);
		}
		.goods.fao-food .data .position .info.OIL:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/olive-oil.svg);
		}
		.goods.fao-food .data .position .info.SUGAR:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/sugar-cube.svg);
		}
	/** 大宗商品 **/
		.goods.commodity .data .position .info:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/corn.svg);
		}
		.goods.commodity .data .position .info.CORN:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/corn.svg);
		}
		.goods.commodity .data .position .info.SOY:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/soy.svg);
		}	
		.goods.commodity .data .position .info.WHT:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/wheat.svg);
		}	
		.goods.commodity .data .position .info.RIE:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/rice.svg);
		}	
		.goods.commodity .data .position .info.SGR:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/sugar-cube.svg);
		}	
		.goods.commodity .data .position .info.CTN:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/cotton.svg);
		}	
		.goods.commodity .data .position .info.RBR:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/wheel.svg);
		}	
	/** 金屬商品  **/
		.goods.metal .data .position .info:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/chemical-periodic-platinum.svg);
		}
		.goods.metal .data .position .info.PT:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/chemical-periodic-platinum.svg);
		}
		.goods.metal .data .position .info.AG:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/chemical-periodic-silver.svg);
		}
		.goods.metal .data .position .info.CU:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/chemical-periodic-copper.svg);
		}
		.goods.metal .data .position .info.AI:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/chemical-periodic-aluminum.svg);
		}
		.goods.metal .data .position .info.NI:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/chemical-periodic-nickel.svg);
		}
		.goods.metal .data .position .info.PB:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/chemical-periodic-lead.svg);
		}
		.goods.metal .data .position .info.ZN:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/chemical-periodic-zinc.svg);
		}
		.goods.metal .data .position .info.SN:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/chemical-periodic-tin.svg);
		}
	/** 石油與黃金  **/
		.goods.oil-and-gold .data .position .info:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/oil-barrel.svg);
		}
		.goods.oil-and-gold .data .position .info.OIL:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/oil-barrel.svg);
		}
		.goods.oil-and-gold .data .position .info.AU:before {
			background-image:url(https://d1r4509tniam8v.cloudfront.net/img/svg/gold-bars.svg);
		}