/*-------------------------------------------------------------------
 *
 * File Name   : recipe.css

-------------------------------------------------------------------*/

/* ------ title_area ------ */
#recipe .title_area { min-height:240px; margin:0 auto; padding:30px 0 25px; background:url(../imgs/title_area_bg.jpg) no-repeat center top; }
#recipe .title_area .title { text-align:center; }
#recipe .title_area .title img { height:60px; }
#recipe .title_area .lead { text-align:center; }
#recipe .title_area .lead img { margin:0 auto; }

/* ------ main_area ------ */
#recipe .main_area { margin:0 auto; padding:0 0 50px; background:url(../../common/imgs/contents_bg.png) repeat top left; }

/* ------ search_area ------ */
#recipe .search_area { background:#fff; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; text-align:center; }
#recipe .search_area.bottom { margin-top:50px; }
#recipe .search_area_inr { width:1000px; margin:0 auto; padding:14px 0; background:url(../imgs/search_ico.png) no-repeat center left; }

#recipe .search_area li { display:inline-block; padding:0 5px; }
#recipe .search_area li + li { border-left:1px solid #d3d3d3; }
#recipe .search_area li a { display:block; padding:0; }

#recipe .area_title { margin-bottom:15px; text-align:center; }
#recipe .area_title img { height:46px; }
#recipe .arrow_ico_g a { padding-right:20px; background:url(../../common/imgs/arrow_ico_g.png) no-repeat center right; }
#recipe .more_recipe { font-size:13px; }
#recipe .more_recipe a { color:#323334; text-decoration:none; }
#recipe .more_recipe a:hover { text-decoration:underline; }

/*===================================================================
	recipe
===================================================================*/
/* ------ view_area ------ */
#recipe.recipe .view_area { width:100%; margin-top:20px; padding:40px 0; background:#fff; }
#recipe.recipe .view_area .view_cont { max-width:1000px; margin:0 auto; }
#recipe.recipe .view_area .view_box { float:left; width:486px; padding:25px 20px; background:#fff; }
#recipe.recipe .view_area .view_box + .view_box { margin-left:28px; }
#recipe.recipe .view_area .view_title img { width:100%; }
#recipe.recipe .view_area .view_main { margin-top:25px; }
#recipe.recipe .view_area .view_main a { display:block; }
#recipe.recipe .view_area .view_main img { width:100%; } 
#recipe.recipe .view_area .view_thum { margin-top:8px; }
#recipe.recipe .view_area .view_thum .thum_img { display:inline-block; width:20%; vertical-align:middle; }
#recipe.recipe .view_area .view_thum .thum_img img { width:100%; cursor:pointer; }
#recipe.recipe .view_area .view_thum .more_recipe { display:block; width:100%; margin-top:12px; text-align:right; }

/* ------ search_detail_area ------ */
#recipe.recipe .search_detail_area { width:100%; margin:50px auto 0; }
#recipe.recipe .search_detail_inner { max-width:1000px; margin:0 auto; }
#recipe.recipe .search_detail_area .search_detail_cont { padding:25px 0; background:#fff; border:1px solid #e6e7ed; border-radius:8px; -webkit-box-shadow:0 0 5px 0 #ebedf3; -moz-box-shadow:0 0 5px 0 #ebedf3; box-shadow:0 0 5px 0 #ebedf3; }
#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box { display:inline-block; width:20%; padding:5px 10px; text-align:center; }
#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box + .search_detail_box { border-left:1px dotted #cdcccc; }
#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box .search_detail_img { margin-bottom:10px; }
#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box .search_detail_img img { width:100%; }
#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box .search_detail_type { font-size:19px; font-weight:bold; }
#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box .more_recipe { margin-top:20px; }

/* ------ bnr_area ------ */
#recipe.recipe .bnr_area { width:100%; margin:70px auto 0; text-align:center; }
#recipe.recipe .bnr_inner { max-width:1000px; margin:0 auto; }
#recipe.recipe .bnr_area .bnr_cont { padding:40px 20px; background:#fff; border:1px solid #e6e7ed; border-radius:8px; -webkit-box-shadow:0 0 5px 0 #ebedf3; -moz-box-shadow:0 0 5px 0 #ebedf3; box-shadow:0 0 5px 0 #ebedf3; }
#recipe.recipe .bnr_area li { display:inline-block; width:410px; }
#recipe.recipe .bnr_area li + li { margin-left:25px; }
#recipe.recipe .bnr_area li a { display:block; }
#recipe.recipe .bnr_area li img{ width:100%; }

/*===================================================================
	recipe_search
===================================================================*/
/* ------ search_title ------ */
#recipe.recipe_search .search_title { width:1000px; margin:50px auto 50px; }
#recipe.recipe_search .search_title_cont { width:100%; min-height:66px; margin:0 auto; padding:8px 12px; background:#fff; border:1px solid #e6e7ed; border-radius:8px; -webkit-box-shadow:0 0 5px 0 #ebedf3; -moz-box-shadow:0 0 5px 0 #ebedf3; box-shadow:0 0 5px 0 #ebedf3; }
#recipe.recipe_search .search_title_head { display:inline-block; margin-right:13px; vertical-align:middle; }
#recipe.recipe_search .search_title_body { display:inline-block; padding-left:70px; vertical-align:middle; }
#recipe.recipe_search .search_title_body .result { font-size:22px; font-weight:bold; line-height:44px; }
#recipe.recipe_search .search_title_body.vege { background:url(../imgs/search_title_ico_vege.png) no-repeat center left; }
#recipe.recipe_search .search_title_body.fish { background:url(../imgs/search_title_ico_fish.png) no-repeat center left; }
#recipe.recipe_search .search_title_body.grain { background:url(../imgs/search_title_ico_grain.png) no-repeat center left; }
#recipe.recipe_search .search_title_body.sweets { background:url(../imgs/search_title_ico_sweets.png) no-repeat center left; }
#recipe.recipe_search .search_title_body.all { background:url(../imgs/search_title_ico_all.png) no-repeat center left; }

/* ------ result_area ------ */
#recipe.recipe_search .result_area { width:1000px; margin:0 auto; }
#recipe.recipe_search .recipe_list { width:772px; margin:0 auto 25px; }
#recipe.recipe_search .recipe_list .recipe_box { display:inline-block; width:183px; margin:0 3px; vertical-align:top; }
#recipe.recipe_search .recipe_list .recipe_box .name { margin:7px 0; font-weight:bold; }
#recipe.recipe_search .recipe_list .recipe_box img { width:100%; height:auto; }

/* ------ bnr_area ------ */
#recipe.recipe_search .bnr_area { width:1000px; margin:0 auto; }
#recipe.recipe_search .bnr_area li { float:left; width:487px; }
#recipe.recipe_search .bnr_area li + li { margin-left:25px; }
#recipe.recipe_search .bnr_area li a { display:block; }
#recipe.recipe_search .bnr_area li img{ width:100%; }

@media screen and (max-width: 640px) {
	/* ------ title_area ------ */
	#recipe .title_area { min-height:0; margin:0; padding:30px 0 40%; background:url(../imgs/sp/title_area_bg.jpg) no-repeat center top; background-size:100% auto; }
	#recipe .title_area .title img { width:100%; height:auto; }
	#recipe .title_area .lead { margin-top:25px; }
	#recipe .title_area .lead img { width:100%; }
	
	/* ------ main_area ------ */
	#recipe .main_area { padding:0; }

	/* ------ search_area ------ */
	#recipe .search_area { display:block; padding:25px 4%; text-align:left; }
	#recipe .search_area.bottom { margin-top:25px; }
	#recipe .search_area_inr { width:100%; padding:0; background:none; }
	#recipe .search_area_title img { width:100%; }
	#recipe .search_area .search_list { margin-top:15px; }
	#recipe .search_area li.no1 { width:25%; }
	#recipe .search_area li.no2 { width:40%; }
	#recipe .search_area li.no3 { width:35%; }
	#recipe .search_area li img { width:100%; }
	
	#recipe .area_title { margin-bottom:10px; }
	#recipe .area_title img { width:100%; height:auto; }
	
	/*===================================================================
		recipe
	===================================================================*/
	
	/* ------ view_area ------ */
	#recipe.recipe .view_area { width:100%; padding:0 4.5%; }
	#recipe.recipe .view_area .view_box { float:none; width:100%; padding:15px 4%; }
	#recipe.recipe .view_area .view_box + .view_box { margin-left:0; margin-top:20px; }
	#recipe.recipe .view_area .view_thum { padding:0 5%; }
	#recipe.recipe .view_area .view_thum .thum_cont { background:#0d1f6b; }
	#recipe.recipe .view_area .view_thum .thum_img { display:inline-block; width:33.33%; }
	#recipe.recipe .view_area .view_thum .more_recipe { margin-top:0; padding:0; text-align:center; }
	#recipe.recipe .view_area .view_thum .more_recipe a{ display:block; padding:20% 0; color:#fff; }
	#recipe.recipe .view_area .view_thum .arrow_ico_g a{ padding-right:0; background:none; }
	
	/* ------ search_detail_area ------ */
	#recipe.recipe .search_detail_area { width:100%; margin:30px auto 0; padding:0 4.5%; }
	#recipe.recipe .search_detail_area .search_detail_cont { padding:25px 4%; }
	#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box { width:50%; padding:10px 3% 15px; }
	#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box + .search_detail_box {  border-left:none; } 
	#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box:nth-child(odd) { border-right:1px dotted #cdcccc; }
	#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box.bottom_line { border-bottom:1px dotted #cdcccc; }
	#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box .search_detail_type { font-size:14px; }
	
	/* ------ bnr_area ------ */
	#recipe.recipe .bnr_area { width:100%; margin:30px auto 0; padding:0 4% 20px; }
	#recipe.recipe .bnr_area .bnr_cont { padding:25px 4%; }
	#recipe.recipe .bnr_area li { display:block; width:100%; }
	#recipe.recipe .bnr_area li + li { margin-left:0; margin-top:10px; }
	

	/*===================================================================
		recipe_search
	===================================================================*/

	/* ------ search_title ------ */
	#recipe.recipe_search .search_title { width:100%; min-height:66px; margin:30px auto 30px; padding:0 4%; }
	#recipe.recipe_search .search_title_head { margin-right:0; }
	#recipe.recipe_search .search_title_body .result { font-size:16px; }
	#recipe.recipe .search_detail_area .search_detail_cont .search_detail_box .more_recipe { margin-top:15px; font-size:12px; }

	/* ------ result_area ------ */
	#recipe.recipe_search .result_area { width:100%; padding:0 4.5%; }
	#recipe.recipe_search .recipe_list { width:100%; margin:0; }
	#recipe.recipe_search .recipe_list .recipe_box { width:46%; margin:0 1.5%; }

	/* ------ bnr_area ------ */
	#recipe.recipe_search .bnr_area { width:100%; margin-top:20px; padding:0 4.5%; }
	#recipe.recipe_search .bnr_area li { float:none; width:100%; }
	#recipe.recipe_search .bnr_area li + li { margin-left:0; margin-top:15px; }
	
}