锘緻charset "utf-8";
/* CSS Document */

/*璁剧疆鏈€澶栧洿鐨勫鍣紝鍖呰９閲岄潰鐨勫唴瀹癸紝鍥犱负閲岄潰鐨勫唴瀹规湁鍥剧墖锛屽拰div鐨勬枃鏈唴瀹癸紝涓轰簡鍦ㄥ悓涓€浣嶇疆鍙互鏄剧ず鍑烘潵锛屽洜姝よ繖涓渶澶栭潰鍖呰９鐨勫厓绱犺璁剧疆relative*/
.view_show_imgAndFont{border:1px solid #CCC; position:relative; background:#FFF; border-radius:5px;}

/*灞曠ず鐨勫浘鐗?涓婁紶鍥剧墖鐨勬椂鍊欏繀椤讳繚璇佽繖涓€鎵瑰浘鐗囩殑瀹介珮姣斾緥  瀹藉害浣跨敤澶栭潰鍖呰９鐨刣iv鐨勫搴︼紙淇濊瘉鍦ㄥ搷搴斿紡缃戦〉涓嬬殑姝ｅ父鏄剧ず锛?楂樺害鏍规嵁瀹藉害鑷€傚簲*/
.view_show_imgAndFont img{width:100%; padding:10px; height:auto;border-radius:5px;}

/*榧犳爣绉诲叆鏃朵骇鐢熺殑鏁堟灉   transition浜х敓鐨勫彉鍖栬櫧鐒跺奖鍝嶅埌鍏冪礌鐨剋idth鍜宧eight锛屼絾鏄敱transition寮曡捣鐨剋idth鍜宧eight骞朵笉浼氬奖鍝嶅闈㈠厓绱犺鎾戣捣鏉idth鍜宧eight*/
.view_show_imgAndFont:hover img{
	/*涓昏鏄负浜嗗吋瀹规祻瑙堝櫒  涓嶈繃澶ч儴鍒嗛兘鐢ㄤ笉鐫€  all鐨勬剰鎬濇槸杩囨浮鏁堟灉瀵逛簬鎵€鏈夌殑鏍峰紡鍙樺寲*/

	opacity:1;	
}

/*鍦ㄩ紶鏍囩Щ鍏ュ浘鐗囷紝鍥剧墖娑堝け鏃跺€欐樉绀虹殑鏂囧瓧    涓轰簡涓嶄細琚玦mg鎸や笅鍘伙紝鍥犳浣跨敤position:absolute; 杩囨浮鍔ㄧ敾鐨勬樉绀烘晥鏋滈兘鏄€愭笎鏄剧ず鍜屾樉绀猴紝鍥犳璁剧疆閫忔槑搴?*/
.view_show_imgAndFont .mask{position:absolute;top:0px;left:0px;filter:alpha(opacity=0); opacity:0;width:0px;height:0px;text-align:center;color:#00AEFF; }

/*width height 鍙樻崲鍍忕礌澶у皬  缁ф壙100%   rotate(360deg)琛ㄧず360搴︽棆杞?/
.view_show_imgAndFont:hover .mask{
	/*涓昏鏄负浜嗗吋瀹规祻瑙堝櫒  涓嶈繃澶ч儴鍒嗛兘鐢ㄤ笉鐫€  all鐨勬剰鎬濇槸杩囨浮鏁堟灉瀵逛簬鎵€鏈夌殑鏍峰紡鍙樺寲*/
	transition:all 2s;	
	-ms-transition:all 2s;
	-moz-transition:all 2s;
	-webkit-transition:all 2s;
	-o-transition:all 2s;

	opacity:1;
	filter:alpha(opacity=100);

	height:100%;
	width:100%;
	
	/*transform:scale(0,0) rotate(360deg);  鍙互杩炲啓*/
	
	/*涓昏鏄负浜嗗吋瀹规祻瑙堝櫒  涓嶈繃澶ч儴鍒嗛兘鐢ㄤ笉鐫€*/
	transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);

}


/*鍦╩ask閲岄潰鍔犱笂鐨勪竴灞傚寘瑁逛簡鏂囧瓧鐨刣iv 閫氳繃鏈€缁坉iv鐨勫搴︽椂100%锛岃繖鏍疯缃畃adding鍊肩殑鏃跺€欎笉浼氳瓒呭嚭锛岃缃袱杈圭殑padding锛岃皟鏁存枃瀛椾綅缃湅鐫€濂界湅鐐? height涓轰簡闃叉鏂囧瓧杩囬暱锛坅鏍囩鏄€氳繃absolute锛屼笉琚帶鍒讹級锛屽洜姝よ缃珮搴︿负80%*/
.font_count{margin:10px; overflow:hidden; height:90%;background:#e0e0e0;}

/*鍥犱负鏂囧瓧楂樺害鐨勪笉纭畾鎬э紝鍥犳浣跨敤absolute杩涜瀹氫綅锛屽畾浣嶅埌纭畾鐨勪綅缃紝瀹藉害鍙樺寲瀵艰嚧浣嶇疆涓嶆纭彧鑳介€氳繃濯掍綋鏌ヨ鍘诲仛*/
.view_show_imgAndFont:hover .mask a{ position:absolute;left:0px; bottom:13%;width:100%; text-align:center;}
/*閫氳繃padding 澧炲ぇ鏂囧瓧鐨勮儗鏅ぇ灏?/
.view_show_imgAndFont:hover .mask span{ background:#8EA330; color:#FFF; padding:3px 5px;}

.view_show_imgAndFont:hover .mask a:hover{ text-decoration:none;}

/*璁剧疆榧犳爣绉诲姩鍒皉eady more鐨勬椂鍊欑殑棰滆壊鍙樺寲*/
.view_show_imgAndFont:hover .mask a:hover span{
	/*涓昏鏄负浜嗗吋瀹规祻瑙堝櫒  涓嶈繃澶ч儴鍒嗛兘鐢ㄤ笉鐫€  all鐨勬剰鎬濇槸杩囨浮鏁堟灉瀵逛簬鎵€鏈夌殑鏍峰紡鍙樺寲*/
	transition:all 2s;	
	-ms-transition:all 2s;
	-moz-transition:all 2s;
	-webkit-transition:all 2s;
	-o-transition:all 2s;

	background-color:#000;
}