@charset "utf-8";

#contents{word-break:keep-all; word-wrap: break-word}
h3{color:#222; line-height:120%}
.intro{height:475px; margin-bottom:130px; word-break:keep-all; background:#0a8a5e url(/open_content/kitchen/images/sub/intro_ptrn.png) center top}
.intro>.conBox{margin:auto; position:relative; bottom:-17%; max-width:1500px; width:94%; height:94%; background:#fff; box-shadow:0px 1px 6px rgba(0,0,0,.48)}
.intro>.conBox>.con{text-align:center; margin:auto}
.intro h3{padding-top:7%; font-size:2.6em}
.intro .txt{margin-top:45px; padding-top:60px; font-size:1.11em; background:url(/open_content/kitchen/images/sub/intro_bg01.png) no-repeat center top}
.center .intro>.conBox{background:url(/open_content/kitchen/images/sub/center_bg.jpg) no-repeat center top}
.technique .intro>.conBox{background:url(/open_content/kitchen/images/sub/technique_bg.jpg) no-repeat center top}
.introduce .intro>.conBox{background:url(/open_content/kitchen/images/sub/introduce_bg.jpg) no-repeat center top}
.greeting .intro>.conBox{background:url(/open_content/kitchen/images/sub/greeting_bg02.png) no-repeat center 40px, url(/open_content/kitchen/images/sub/greeting_bg.jpg) no-repeat center top}
.greeting .intro h3{padding-top:10%}

h4{text-align:left; margin-top:70px; padding:13px 0px 3px; padding-left:55px; background:url(/open_content/kitchen/images/sub/bl.gif) no-repeat left 7px/46px; font-size:1.85em; color:#0a8a5e; line-height:120%}
.tbox{text-align:left; margin-top:20px; padding:35px 45px; border:10px solid #e9e9e9; line-height:170%}
.bl_list{margin:20px 5px 0px}
.bl_list>li{position:relative; padding-left:15px}
.bl_list>li:before{display:block; content:''; position:absolute; left:0px; top:15px; width:8px; height:1px; background:#666}
.step{display:table; margin-top:20px; width:100%; border-spacing:5px}
.step>li{display:table-cell; padding:40px 5px; width:20%; background:#f0f0f0}
.step>li p.num{text-align:center; font-size:1.66em; }
.step>li p.num:After{display:block; content:''; position:relative; left:-4px; margin:20px auto; width:5px; height:5px; background:#333; border-radius:10px; box-shadow:10px 0px 0px #333}
.step>li .con{text-align:center; margin:auto; max-width:200px; line-height:170%}
.step02{margin-top:30px}
.step02>li{display:table; width:100%; margin-top:10px}
.step02>li .tit{display:table-cell; position:relative; vertical-align:middle; width:35%; padding-left:4%; background:#f0f0f0}
/* .step02>li .tit p.num{position:absolute; left:50px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); font-size:1.66em} */
.step02>li .tit p.num{display:inline-block; vertical-align:middle; font-size:1.5em}
.step02>li .tit p.num:After{display:inline-block; content:''; vertical-align:middle; margin:-3px 30px 0px; width:5px; height:5px; background:#333; border-radius:10px; box-shadow:10px 0px 0px #333}
.step02>li .tit .txt{display:inline-block; vertical-align:middle; font-size:1.2em}
.step02>li .con{display:table-cell; padding:30px 40px; line-height:170%; border:7px solid #f0f0f0}
.con_photo{text-align:center; margin-top:20px;  font-size:0px; letter-spacing:0px; overflow:hidden}
.con_photo>li{float:left; margin-top:10px}
.con_photo.col3>li{width:33%; margin-right:.5%}
.con_photo.col4>li{width:24.4%; margin-right:.8%}
.con_photo>li:last-child{margin-right:0px !important}
.con_photo.col4>li span{display:block; margin-top:5px; padding:3px; font-size:16px; background:#f0f0f0}
.narrowCon{margin:auto; max-width:1000px}

/*  센터소개 */
.center_con01{position:relative; margin-top:60px; padding-left:52%}
.center_con01>div{position:Absolute; left:0px; top:0px; text-align:center; width:47%; height:100%; background:#e5e5e5}
.center_con01>div>p{display:inline-block; margin:15% auto 0px; padding-top:230px; max-width:260px; background:url(/open_content/kitchen/images/sub/center_img01.gif) no-repeat center top; font-size:1.2em; font-weight:bold}
.center_con01>ul{position:relative}
.center_con01>ul>li{position:relative; margin-top:12px; padding:18px 20px; font-size:1.05em; border:1px solid #ddd}
.center_con01>ul>li:first-child{margin-top:0px}
.center_con01>ul>li:nth-child(2n+1){background:#f0f0f0}
.center_con01>div:after,
.center_con01>ul:after,
.center_con01>ul>li:before{display:block; content:''; position:absolute; top:50%; width:5.5%; height:1px; background:#e5e5e5}
.center_con01>div:after{right:-5.5%; }
.center_con01>ul:after{left:-5.5%; top:9%; width:1px; height:82.5%}
.center_con01>ul>li:before{left:-5.5%}
.center_con02{margin:30px 0px 130px; padding-top:120px; background:url(/open_content/kitchen/images/sub/center_arr.gif) no-repeat center top}
.center_con02 p.name{display:inline-block; padding:25px 50px 23px; min-width:597px; font-size:1.94em; color:#fff; background:#0a8a5e; border-radius:100px}
.center_con02 p.sname{margin:10px 0px; font-size:1.27em}
.center_con02 p.txt{margin:20px auto; max-width:820px; font-size:1.1em}
.center_con02 p.txt:before{display:block; content:''; margin:0px auto 15px; width:2px; height:55px; background:#333}
.center_con03{margin-top:50px; margin-bottom:130px; padding:0px 55px; background:#e5e5e5}
.center_con03:After{display:block; content:''; clear:both}
.center_con03 p.img{float:left; position:relative; bottom:-55px; width:50%}
.center_con03 p.txt{float:left; text-align:left; padding:55px; width:47%; }
/* 농산물가공기술관 소개 */
.technique_con01{overflow:hidden}
.technique_con01>li{float:left; margin-top:10px; padding:35px 30px 33px 140px; width:49.5%; border:6px solid #ddd; background-repeat:no-repeat; background-position:10% center}
.technique_con01>li:nth-child(2n){float:right}
.technique_con01>li:nth-child(1){background-image:url(/open_content/kitchen/images/sub/technique_ic01.gif)}
.technique_con01>li:nth-child(2){background-image:url(/open_content/kitchen/images/sub/technique_ic02.gif)}
.technique_con01>li:nth-child(3){background-image:url(/open_content/kitchen/images/sub/technique_ic03.gif)}
.technique_con01>li:nth-child(4){background-image:url(/open_content/kitchen/images/sub/technique_ic04.gif)}
/* 농가의부엌소개 */
.introduce_con01{margin-top:30px; padding:0px 4%; overflow:hidden}
.introduce_con01>li{position:relative; padding:20px; padding-left:220px; height:215px; border-top:2px dashed #ddd}
.introduce_con01>li:first-child{border:0px}
.introduce_con01>li:before{display:block; content:''; position:absolute; left:0px; top:20px; width:155px; height:155px; border:10px solid rgba(0,0,0,.06); border-radius:200px; background-repeat:no-repeat; background-position:center center}
.introduce_con01>li:nth-child(1):before{background-image:url(/open_content/kitchen/images/sub/introduce_ic01.gif)}
.introduce_con01>li:nth-child(2):before{background-image:url(/open_content/kitchen/images/sub/introduce_ic02.gif); border-color:rgba(101,221,106,.4)}
.introduce_con01>li:nth-child(3):before{background-image:url(/open_content/kitchen/images/sub/introduce_ic03.gif)}
.introduce_con01>li div{position:relative; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%)}
.introduce_con01>li p{margin-bottom:10px; font-size:1.2em; font-weight:bold}
.introduce_con02{margin-top:30px}
.introduce_con02:After{display:block; content:''; clear:both}
.introduce_con02>li{position:relative; float:left; text-align:center; width:25%}
.introduce_con02>li:before{display:block; content:''; position:absolute; left:-2px; top:27px; width:30px; height:30px; background:#ddd; border-radius:30px}
.introduce_con02>li:last-child:after{display:block; content:''; position:absolute; right:-1px; top:27px; width:30px; height:30px; background:#0a8a5e; border-radius:30px}
.introduce_con02>li p.date{padding-bottom:7px; border-bottom:10px solid #ddd}
.introduce_con02>li:last-child p.date{border-color:#0a8a5e}
.introduce_con02>li p.txt{padding:20px}
.introduce_con03>div{margin:80px 0px 70px; text-align:center}
.introduce_con03>div p{margin-top:40px}
.introduce_con03>ul{overflow:hidden; margin:auto; max-width:1200px}
.introduce_con03>ul>li{position:relative; float:left; text-align:left; margin:.5%; width:24%; height:170px; font-size:0.8em; line-height:170%}
.introduce_con03>ul>li:first-child{width:49%}
.introduce_con03>ul>li:first-child>p{float:left; width:50%}
.introduce_con03>ul>li:first-child>p:last-child{text-align:right}
.introduce_con03>ul>li:before{display:block; content:''; margin-bottom:5px; height:50px; background:#ccc}
.introduce_con03>ul>li:nth-child(1):before{background:url(/open_content/kitchen/images/sub/introduce_color.jpg) center top/100%}
.introduce_con03>ul>li:nth-child(2):before{background-color:rgba(0,98,27,1)}
.introduce_con03>ul>li:nth-child(3):before{background-color:rgba(121,189,40,1)}
.introduce_con03>ul>li:nth-child(4):before{background-color:rgba(191,157,90,1)}
.introduce_con03>ul>li:nth-child(5):before{background-color:rgba(181,181,182,1)}
.introduce_con03>ul>li:nth-child(6):before{background-color:rgba(50,131,58,1)}
.introduce_con03>ul>li:nth-child(1):before{background-color:rgba(0,0,0,1)}
/* 인사말 */
.greeting_con{}
.greeting_con>div{padding:0px 10px; width:47%}
.greeting_con .conL{float:left}
.greeting_con .conR{float:right}
.greeting_con p.txt{margin-bottom:30px}
.greeting_con ul{margin-bottom:30px}
.greeting_con ul li{padding:12px 0px; border-bottom:1px dashed #aaa}
.greeting_con ul li:first-child{padding-top:0px}
.greeting_con p.sign{clear:both; text-align:right; margin-top:30px; padding-top:30px; border-top:1px solid #eee}
.greeting_con p.sign span{display:block; margin:5px 0px}
.greeting_con p.sign span img{vertical-align:bottom;}
/* 공동체별제픔소개 */
.community_intro{margin-top:115px; padding:0px 20px}
.community_intro h3{margin:30px 0px 40px; font-size:2.22em; font-weight:600}
.community_intro:After{display:block; content:''; clear:both}
.community_intro .photo{float:left; position:relative; margin-left:10px; width:45%; max-width:570px; font-size:0px; line-height:0px}
.community_intro .photo:before{display:block; content:''; position:absolute; left:-10px; bottom:-10px; width:100%; height:100%; background:#bf9d5b; z-index:0}
.community_intro .photo img{position:relative; z-index:1}
.community_intro .con{float:right; width:51.5%; font-size:.95em}
.community_intro .con p{margin-top:18px; line-height:170%}
.product_tab{margin-top:-70px; background:#f0f0f0}
#contents .product_tab:first-child{margin-top:0px; padding:40px 0px 20px}
.product_tab h3{clear:both; padding-top:80px; text-align:center; font-size:2.22em; font-weight:normal}
.product_tab ul{padding:70px 20px 60px; text-align:center}
.product_tab ul li{display:inline-block; position:relative; vertical-align:top; margin:0px 2px; /* width:13.688%; */ width:14.225%; max-width:255px}
.product_tab ul li:first-child:nth-last-of-type(1),
.product_tab ul li:first-child:nth-last-of-type(2),
.product_tab ul li:first-child:nth-last-of-type(2)~li,
.product_tab ul li:first-child:nth-last-of-type(3),
.product_tab ul li:first-child:nth-last-of-type(3)~li{width:18%}
.product_tab ul li.select{box-shadow:0px 5px 5px rgba(0,0,0,.17)}
.product_tab ul li.select:after,
.product_tab ul li.select:before{display:block; content:''; position:absolute; left:50%; bottom:-30px; width:20px; height:6px; background:#0a8a5e; box-shadow:0px 1px 0px rgba(0,0,0,.1)}
.product_tab ul li.select:after{margin-left:-11px; transform:rotate(45deg); -webkit-transform:rotate(45deg)}
.product_tab ul li.select:before{transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}
.product_tab ul li.select a{display:block; background:#fff}
.product_tab ul li.select a:before{display:block; content:''; position:absolute; width:100%; height:100%; border:6px solid #0a8a5e; box-sizing:border-box}
.product_tab ul li p.tit{padding:10px 10px 15px; }
.product_tab ul li p.txt{display:none}
.community_product{display:none; margin-top:80px; text-align:center}
.community_product#product01{display:block}
/* 찾아오시는길*/
.location h4{margin-top:90px}
.api_map{margin-top:20px; padding:10px; min-height:300px; border:7px solid #e9e9e9}


/*******************************************************************************************************************/


@media screen and (max-width:1320px){
	#detail_con{padding:0px 20px}
}

@media screen and (max-width:800px){
	/* .intro>.conBox{height:auto; min-height:94%; }
	.center .intro>.conBox{background-position:left 43% bottom !important; background-size:cover !important}
	.introduce .intro>.conBox{background-position:left 43% bottom !important; background-size:cover !important}
	.greeting .intro>.conBox{padding:70px 30px 0px; background-size:110% 100%, cover}
	.intro>.conBox>.con{padding:0px 40px}
	.intro .txt{padding:50px 0px} */
	.intro{height:auto; margin-bottom:40px}
	.intro>.conBox{padding:50px 30px; height:auto; background:none !important; box-shadow:none}
	.intro h3{padding-top:0px !important; font-size:2.5em; color:#fff}
	.intro .txt{color:#fff; background-image:url(/open_content/kitchen/images/sub/mb_intro_bg01.png)}
	h4:first-child{margin-top:40px}
	.step{display:block}
	.step>li{display:block; margin-top:10px; width:100%}
	.step>li .con{padding:0px 20px; max-width:100%}
	.step02>li{display:block}
	.step02>li .tit{display:block; text-align:center; padding:20px; width:100%}
	.step02>li .tit p.num{display:block}
	.step02>li .tit p.num:After{display:block; position:relative; left:-4px; margin:10px auto}
	.step02>li .con{display:block; padding:25px 30px}
	.con_photo.col4>li{width:48%; margin-right:2%}
	.center_con01{padding-left:0px}
	.center_con01>div{position:static; width:100%}
	.center_con01>div>p{margin:20px auto}
	.center_con01>ul{margin-top:20px}
	.center_con01>div:after,
	.center_con01>ul:after,
	.center_con01>ul>li:before{display:none}
	.center_con02{margin-bottom:30px; padding-top:120px; background:url(/open_content/kitchen/images/sub/center_arr.gif) no-repeat center top}
	.center_con02 p.name{padding:25px 0px 23px; min-width:95%; font-size:1.6em}
	.center_con02 p.sname{margin:10px 0px; font-size:1.27em}
	.center_con03{margin-top:50px; margin-bottom:50px; padding:20px; background:#e5e5e5}
	.center_con03:After{display:block; content:''; clear:both}
	.center_con03 p.img{float:none; bottom:0px; width:100%}
	.center_con03 p.txt{float:none; margin-top:20px; padding:0px; width:100%}
	.center_con04{display:block}
	.center_con04>li{display:block; margin-top:10px; padding-left:120px; width:100%}
	.technique_con01>li{float:none !IMPORTANT; padding:20px 20px 20px 120px; width:100%}
	.introduce_con01>li{padding:220px 0px 30px; height:auto}
	.introduce_con01>li:before{left:50%; margin-left:-75px; width:150px; height:150px; background-size:50%}
	.introduce_con01>li div{top:0px; transform:translateY(0px); -webkit-transform:translateY(0px)}
	.introduce_con02{position:relative}
	.introduce_con02:before{display:block; content:''; position:absolute; left:18px; top:20px; width:4px; height:80%; background:#ddd}
	.introduce_con02>li{float:none; text-align:left; margin-left:20px; padding:20px 30px; width:auto; border-top:1px dashed #ccc}
	.introduce_con02>li:first-child{border-top:0px}
	.introduce_con02>li:before{left:-10px; top:20px; width:20px; height:20px}
	.introduce_con02>li:last-child:after{display:none}
	.introduce_con02>li:last-child:before{background:#0a8a5e}
	.introduce_con02>li p.date{border-bottom:0px; font-weight:bold}
	.introduce_con02>li p.txt{padding:0px}
	.introduce_con03>div img{max-width:80%}
	.introduce_con03>ul>li{margin:.5% 1%; width:48%}
	.introduce_con03>ul>li:first-child{margin:.5% 0px; width:100%}
	.greeting_con>div{padding:0px 10px; width:100%}
	.greeting_con .conR{margin-top:30px}
	.greeting_con p.sign{border-top:0px}	
	.community_intro{margin-top:40px}	
	.community_intro .photo{float:none; margin:auto; width:80%; max-width:570px}
	.community_intro .photo img{position:relative; z-index:1}
	.community_intro .con{float:none; margin-top:50px; width:auto}
	.community_intro .con p{margin-top:18px; line-height:170%}
	.product_tab{margin-top:50px; padding-top:0px}
	#contents .product_tab:first-child{padding-top:0px}
	.product_tab h3{text-align:center; margin:0px 30px; padding-top:60px; font-size:2.22em; font-weight:normal}
	.product_tab ul{position:relative; padding:40px 20px 60px; text-align:center}
	.product_tab ul li{margin:10px .5%; width:31% !important; max-width:255px}
	.product_tab ul li:first-child:nth-last-of-type(1),
	.product_tab ul li:first-child:nth-last-of-type(2),
	.product_tab ul li:first-child:nth-last-of-type(2)~li{width:40% !important}
	.product_tab ul li.select:after,
	.product_tab ul li.select:before{display:none}
	.product_tab ul:after,
	.product_tab ul:before{display:block; content:''; position:absolute; left:50%; bottom:30px; width:20px; height:4px; background:#0a8a5e; box-shadow:0px 1px 0px rgba(0,0,0,.1)}
	.product_tab ul:after{margin-left:-11px; transform:rotate(45deg); -webkit-transform:rotate(45deg)}
	.product_tab ul:before{transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}
	.product_tab ul li.select a:before{border-width:4px}
	.product_tab ul li p.tit{padding:10px 10px 15px; }
	.product_tab ul li p.txt{display:none}
	.community_product{display:none; margin-top:80px; text-align:center}
	.community_product#product01{display:block}
	.location h4{margin-top:30px}
}