@charset "utf-8";
/* CSS Document */

a.link{color:#005ddc !important;}
a:hover.link{ text-decoration:underline;}

.red{color:#C00 !important;}
.blue{color:#0470F2 !important;}
.green{color:#390 !important;}
.gray{color:#999 !important;}
.orange{color:#f68b1f !important;}

.bgRed{background:#C00 !important; color:#fff !important;}
.bgBlue{background:#0470F2 !important; color:#fff !important;}
.bgGreen{background:#390 !important; color:#fff !important;}
.bgGray{background:#999 !important; color:#fff !important;}


.bgorage{background:#f68b1f !important; color:#fff !important;}
.bgbrown{background:#6a3800 !important; color:#fff !important;}


.bglightGray{background:#f3f3f3 !important;}
.bglightBlue{background:#effcff !important;}
.bglightYellow{background:#fffdef !important;}

/* ==================================================
	main
================================================== */
.main_cont{position:relative; width:100%; margin:30px auto;  overflow:hidden; height:100%;}
.main_cont h2{text-align:center; font-size:36px; color:#282828; font-weight:600; letter-spacing:-2px;}
.main_cont h2 span{display:block; font-size:16px; color:#5d5b59; font-weight:400; letter-spacing:-1px;}
.maxWid{max-width:1200px; margin:0 auto; position:relative; overflow:hidden;}
/*.mainBg{background:#f3f3f3 url(/img/main_bg.gif) repeat-y center;}*/
.main_cont .mToday{background:url(/img/main_today_line.jpg) repeat-x left 50px;}
.main_cont .mStory{position:relative; width:73%; margin-right:2%; float:left; padding:30px 0; background:url(/img/main_story_line.gif) repeat-x left 80px;} 
.main_cont .mOrder{position:relative; width:25%; float:left; padding:30px 0; background:#dddddd; }
.main_cont h3{color:#282828; font-size:22px; margin-bottom:10px;}
.main_cont .main_cont_footer{position:relative; overflow:hidden;}
.main_cont .mMenu{position:relative; width:22%; margin-right:3%; float:left;}
.main_cont .mDelivery{position:relative; width:22%; margin-right:3%; float:left;}
.main_cont .mBanking{position:relative; width:22%; margin-right:3%; float:left;}
.main_cont .mCscenter{position:relative; width:25%; float:left;}
.mToday h2{line-height:40px; display:block; width:240px; margin:0 auto; background:#fff;}
.mStory h2{display:block; width:240px; margin:0 auto; background:#f3f3f3;}
.mToday > ul {margin:20px 0 30px; overflow:hidden;}
.mToday > ul > li{width:23.5%; float:left; margin-right:2%;}
.mToday > ul > li:last-child{margin-right:0;}
.mToday > ul > li dl{width:100%;}
.mToday > ul > li dt img{width:100%;}
.mToday > ul > li dd.date{color:#666; font-size:15px; font-weight:400; padding:10px 0;}
.mToday > ul > li dd{font-size:16px; text-align:center; color:#363533; font-weight:600; width:90%; margin:0 5%;}
.mStory > ul {margin:20px 0 20px; overflow:hidden;}
.mStory > ul > li{width:32%; float:left; margin-right:2%;}
.mStory > ul > li:last-child{margin-right:0;}
.mStory > ul > li dl{width:100%; background:#fff; padding:20px; min-height:380px; position:relative;}
.mStory > ul > li dt{color:#333; font-weight:600; font-size:18px;}
.mStory > ul > li dd{color:#6c6b6a; font-size:14px; font-weight:400; margin-top:10px;}
.mStory > ul > li dd img{width:100%; }
.mStory > ul > li dd.name{font-size:14px; position:absolute; bottom:20px; left:20px;}
.mStory > ul > li dd span.date{font-size:13px;  margin-top:0; display:block;}
.mOrder > ul{width:80%; margin:0 10%; border-top:1px dashed #b8b8b8; margin-top:18px;}
.mOrder > ul > li{border-bottom:1px dashed #b8b8b8; text-align:center; padding:8px 0;font-size:16px;   color:#363533; font-weight:400;}
.mOrder > ul > li span{display:block;color:#666; font-size:15px; font-weight:400;}
.mMenu dl{position:relative; overflow:hidden; width:100%; padding-left:25%; background:url(/img/main_menu_ico.png) no-repeat left center; height:50px;}
.mMenu dt{width:20%; float:left; line-height:22px; vertical-align:middle;}
.mMenu dd{width:70%; float:left; color:#95c93d; font-size:20px; font-weight:600;  line-height:22px; vertical-align:middle;}
.mMenu p.menu{width:100%; padding-left:25%;  background:url(/img/main_menu_ico.png) no-repeat left 5px; color:#95c93d; font-size:16px; font-weight:800; height:60px;  vertical-align:middle;}
.mDelivery p.time{width:100%; padding-left:24%; background:url(/img/main_delivery_ico.png) no-repeat left 5px; color:#95c93d; font-size:16px; letter-spacing:-1px; font-weight:800; height:60px;  vertical-align:middle;}
.mDelivery p.time span{font-size:14px; display:inline-block; color:#666; padding-right:5px;}
.mBanking dl{position:relative; overflow:hidden; width:100%; padding:10px 0;}
.mBanking dt{width:25%; float:left; line-height:22px; vertical-align:middle; clear:both;}
.mBanking dd{width:70%; float:left; line-height:22px; vertical-align:middle;  font-weight:600;}
.mCscenter p.tel{width:100%; padding-left:15%; background:url(/img/main_cscenter_tel.png) no-repeat left 5px; color:#f68b1f; font-size:20px; font-weight:800; height:70px;  line-height:22px; vertical-align:middle;}
.mCscenter dl{position:relative; overflow:hidden; width:100%; padding:10px 0 0;}
.mCscenter dt{width:25%; float:left; line-height:22px; vertical-align:middle; clear:both;}
.mCscenter dd{width:70%; float:left; line-height:22px; vertical-align:middle;  font-weight:600;}
.mCscenter dt.wid100{width:100%;}
.mCscenter p.tel .kakao{font-size:16px; color:#6a3800;}

/*메인수정 20170905 */

.m_story{width:50%; float:right;}
.m_notice{width:50%; float:left;}
.mStory > div > h2{margin-bottom:15px;}
.mStory dl{background:#fff; margin-bottom:1px; padding:8px 20px;}
.mStory dt{color:#333; font-weight:600; font-size:17px; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mStory dd{color:#6c6b6a; font-size:14px; font-weight:400;}
.mStory dd span{position:relative; margin-left:5px; padding-left:10px;}
.mStory dd span:before{content:""; position:absolute; left:0;  top:3px; width:1px; height:12px; background:#CCC; z-index:1;}

/* ==================================================
	sub
================================================== */
.contents .top{text-align:center; font-size:16px; color:#6a3800; font-weight:400;}
.intro{width:100%; position:relative;}
.intro .visual{width:100%; background:url(/img/intro_index_img.png) no-repeat center center; height:283px; margin-bottom:30px;}
.intro > p{margin-bottom:30px; text-align:center; font-size:16px;}
.intro > p > strong{font-weight:600;}
.txt20{font-size:20px !important;}
.intro .greenfood{width:100%; border:10px solid #efefef; padding:4%;}
.intro .greenfood > p.img{ text-align:right; margin-left:0;}
.intro .greenfood > p{width:40%; display:inline-table; text-align:center; font-size:16px; color:#0a9882; margin-left:10%; vertical-align:middle;}

/*소개*/
.intro .point dl{text-align:center;}
.intro .point dt{font-size:24px; font-weight:800; position:relative;}
.intro .point dt:after{content:""; position:absolute; bottom:-10px; left:50%; margin-left:-50px; width:100px; height:1px; background:#cad0d1;}
.intro .point dt span{color:#f68b1f;}
.intro .point dd{padding:20px 0 30px 0; font-size:16px; margin:0 auto;}
.intro .point dd span{display:block;}
.intro .point dd strong{font-weight:600; color:#333;}
.intro .step dl{width:19.2%; margin-right:1%; float:left; border:1px solid #CCC; overflow:hidden; position:relative; border-radius:20px; margin-top:10px;}
.intro .step dl:last-child{margin-right:0;}
.intro .step dt{background:#95c93d; color:#fff; font-weight:600; font-size:22px; padding:10px; text-align:center;}
.intro .step dd{padding:10px; text-align:center; min-height:100px;}
.intro .step dd.img{width:100%;}
.intro .step dd.img img{width:100%; border-radius:10px;}

#maptitle{width:160px; padding:15px; text-align:center;}
.map .info{width:100%; position:relative; overflow:hidden; margin-top:40px;}
.map .info li{width:32%; margin-right:2%; float:left; border:4px solid #efefef; padding:2%; text-align:center;}
.map .info li:last-child{margin-right:0 !important;}
.map .info li span{display:block; padding-top:50px; color:#95c93d;}
.map .info li  > p{min-height:48px; font-size:16px; font-weight:600;}
.map .info li.address{background:url(/img/location_ico01.png) no-repeat center 20px; }
.map .info li.tel{background:url(/img/location_ico02.png) no-repeat center 20px; }
.map .info li.mail{background:url(/img/location_ico03.png) no-repeat center 20px; }
.shop{width:100%; position:relative;}
.shop .visual{width:100%; background:url(/img/intro_shop_img.png) no-repeat center center; height:283px; margin-bottom:30px;}

/*매장사진*/
.div_preview { position:relative; min-width:300px; margin: 0 auto 70px;}
.div_preview .img_slide {min-width:300px; margin:0 auto; height:auto; position:relative; overflow:hidden;}
.div_preview .img_slide .big_img {width:100%; height:660px!important; padding-bottom:58.2%; position:relative;}
.div_preview .img_slide .big_img img {width:100%; display:block; position:absolute; top:0; left:0;}
.div_preview .img_slide .big_img .prev {z-index:100;}
.div_preview .img_slide .big_img .current {z-index:101;}
.div_preview .img_slide .big_img .bn {position:absolute; top:50%; width:31px; height:58px; margin-top:-29px; z-index:110;}
.div_preview .img_slide .big_img .bn a {display:block; text-align:center; width:100%; height:100%;}
.div_preview .img_slide .big_img .bn a img {display:inline-block;}
.div_preview .img_slide .big_img .bn_left {left:10px;}
.div_preview .img_slide .big_img .bn_right {right:10px;}

.div_preview .img_slide .bns_area {clear:both; width:100%; position:relative;}
.div_preview .img_slide .bns_area .imgs {position:relative; width:100%;}
.div_preview .img_slide .bns_area .imgs li {width:20%; height:auto; float:left; margin:0; border-top:8px solid #fff;}
.div_preview .img_slide .bns_area .imgs li.selected { border-top:8px solid #95c93d;}
.div_preview .img_slide .bns_area .imgs li a { display:block; width:100%; height:100%; display:block;}
.div_preview .img_slide .bns_area .imgs li.selected a {}
.div_preview .img_slide .bns_area .imgs li a img {width:100%;}

.order > ul > li{width:48%; margin-right:2%; float:left; border:4px solid #efefef; padding:70px 2% 10px; text-align:center; margin-bottom:20px; font-size:15px; min-height:280px;}
.order > ul > li:last-child{margin-right:0 !important;}
.order > ul > li strong{font-size:18px; font-weight:600; color:#6a3800;}
.order > ul > li  span{display:block;}
.order > ul > li.step01{background:url(/img/order_step01.png) no-repeat center top;}
.order > ul > li.step02{background:url(/img/order_step02.png) no-repeat center top;}
.order > ul > li.step03{background:url(/img/order_step03.png) no-repeat center top;}
.order > ul > li.step04{background:url(/img/order_step04.png) no-repeat center top;}
.order > ul > li.step05{background:url(/img/order_step05.png) no-repeat center top;}
.order > ul > li.step06{background:url(/img/order_step06.png) no-repeat center top;}
.order > ul > li.step07{background:url(/img/order_step07.png) no-repeat center top;}
.order > ul > li.step08{background:url(/img/order_step08.png) no-repeat center top;}
.order > ul > li.step09{background:url(/img/order_step09.png) no-repeat center top;}
.order > ul > li.step10{background:url(/img/order_step10.png) no-repeat center top;}
.order p{clear:both; width:100%; text-align:center;  font-size:16px; color:#6a3800; font-weight:400;}
p.delivery{clear:both; width:100%; text-align:center; font-size:16px; color:#6a3800; font-weight:400; }
p.delivery span{font-size:24px;  font-weight:800;}

.ing{position:relative;  background:#efebe4 url(/img/ing_img.png) no-repeat center 30%; padding:10% 0; border-radius:30px; min-height:400px;}
.ing p{position:absolute; bottom:20%; font-size:24px; color:#6a3800; font-weight:600; text-align:center; width:100%; padding:0 10%; margin:0;}

.orderTop{border:3px solid #e8ece0; text-align:center; font-size:20px;  color:#78b51a; padding:20px 0;}



@media screen and (max-width:1024px){	
	.intro .greenfood > p.img{width:40%;}
	.intro .greenfood > p{width:50%; margin-left:3%;}
	.intro .greenfood > p br{display:none;}
	.main_cont .mMenu{position:relative; width:45%; margin:0 2% 10px; float:left;}
	.main_cont .mDelivery{position:relative; width:45%; margin:0 2% 10px; float:left;}
	.main_cont .mBanking{position:relative; width:45%; margin:0 2%; clear:both;}
	.main_cont .mCscenter{position:relative; width:45%; margin:0 2%;  float:left;}
	
.main_cont .main_cont_footer{position:relative; overflow:hidden; margin:0 5%; width:90%;}
.mToday{margin:0 5%; width:90%;}
.mToday > ul > li{width:49%; float:left; margin-right:2%;}
.mToday > ul > li:nth-child(even){margin-right:0;}
.mStory > ul > li dl > dd.title{min-height:100px;}

.main_cont .mStory{position:relative; margin:0 5%; width:90%; padding:30px 0; background:url(/img/main_story_line.gif) repeat-x left 80px;} 
.main_cont .mOrder{position:relative; margin:0 5%; width:90%; padding:30px 0; background:#dddddd; }

.mStory > ul > li{width:49%; float:left; margin-right:2%;}
.mStory > ul > li:nth-child(even){margin-right:0;}
.mStory > ul > li:nth-child(3){display:none;}

.intro .step dl{width:32.666%; margin-right:1%;}
.intro .step dl:nth-child(3n) {margin-right:0;}

.m_story{width:100%; float:none;}
.m_notice{width:100%; float:none;}


}
@media screen and (max-width:768px){
.order > ul > li{width:100%; margin-right:0; min-height:auto;}
.orderTop span{display:block;}
}
@media screen and (max-width:640px){
	.intro .greenfood > p.img{width:30%;}
	.intro .greenfood > p.img img{width:100%;}
	.intro .greenfood > p{width:65%; margin-left:3%; font-size:14px;}
	.map .info li{width:100%; margin-right:0; margin-bottom:10px;}
	.map .info li span{padding-top:60px;}
	
	.ing p{font-size:20px;}
	.shop .visual{height:180px; background-size:cover;}
	.div_preview .img_slide .bns_area .imgs li { border-top:5px solid #fff;}
.div_preview .img_slide .bns_area .imgs li.selected { border-top:5px solid #95c93d;}

	.intro .point dt {font-size:20px;}
	.intro .point dd {font-size:14px;}
	.intro .point dt span{display:block;}
	
	.intro .step dl{width:49.5%; margin-right:1%;}

.intro .step dl:nth-child(3n) {margin-right:1%;}
.intro .step dt {font-size:18px;}
.intro .step dd {font-size:13px;}
	.intro .step dl:nth-child(2n) {margin-right:0;}

}
@media screen and (max-width:480px){
	.intro .greenfood{border:5px solid #efefef;}
	.intro .greenfood > p{ font-size:12px;}
	.main_cont .mMenu{position:relative; width:90%; margin:0 5% 20px;}
	.main_cont .mDelivery{position:relative; width:90%; margin:0 5% 20px; clear:both;}
	.main_cont .mBanking{position:relative; width:90%; margin:0 5% 20px; clear:both;}
	.main_cont .mCscenter{position:relative; width:90%; margin:0 5%; clear:both;}

.mToday > ul > li{width:100%; margin-right:0; margin-bottom:10px;}
.mToday > ul > li:nth-child(even){margin-right:0;}

.mStory > ul > li{width:100%; margin-right:0; margin-bottom:10px;}
.mStory > ul > li:nth-child(even){margin-right:0;}

.mStory > ul > li dl > dd.title{min-height:100px;}

.intro .step dt {font-size:16px;}
.intro .step dd{padding:10px; text-align:center; min-height:120px;}
}