@charset "utf-8";

.intro_tit							{ margin:0; font-size:32px; letter-spacing:-.065em; line-height:1.3; text-align:center; color:#353535 }
.intro_tit span					{ display:block; margin-bottom:.8em}
.intro_tit strong				{ color:#347746; }
.intro_stit							{ margin:.7em 0 2em; font-weight:300; font-size:20px; color:#8d8d8d; letter-spacing:-.05em;}
.con_tit							{ margin:0 0 .5em; font-size:45px; letter-spacing:-.075em; font-weight:500; color:#000;text-align:center; }


/* 회사개요 */
.greeting									{ max-width:1400px; margin-top:100px; top:100px; text-align:center; opacity:0}
.greeting li								{ float:left; position:relative; width:25%; padding-top:2.5em;}
.greeting li::before						{ position:absolute; top:0; left:50%; width:1px; height:5em; background:#96cf4a; content:""}
.greeting li .circle						{ width:260px; height:260px; margin:0 auto; background:no-repeat 50% 35%; border-radius:50%; -webkit-box-shadow:0 0 30px rgba(0,0,0,.07); -moz-box-shadow:0 0 30px rgba(0,0,0,.07); box-shadow:0 0 30px rgba(0,0,0,.07)}
.greeting li:first-child .circle			{ background-image:url(/img/content/icon_greeting01.png) } 
.greeting li:nth-child(2) .circle		{ background-image:url(/img/content/icon_greeting02.png) } 
.greeting li:nth-child(3) .circle		{ background-image:url(/img/content/icon_greeting03.png) } 
.greeting li:last-child .circle			{ background-image:url(/img/content/icon_greeting04.png) } 
.greeting li span						{ display:block; padding-top:60%; font-size:19px; color:#585858; letter-spacing:-.075em; line-height:1.3;}
.greeting li:hover::before					{ display:none}
.greeting li:hover .circle						{ background-color:#96cf4a}
.greeting li:hover span						{ color:#fff; }
.greeting li:first-child:hover .circle			{ background-image:url(/img/content/icon_greeting01_on.png) } 
.greeting li:nth-child(2):hover .circle		{ background-image:url(/img/content/icon_greeting02_on.png) } 
.greeting li:nth-child(3):hover .circle		{ background-image:url(/img/content/icon_greeting03_on.png) } 
.greeting li:last-child:hover .circle			{ background-image:url(/img/content/icon_greeting04_on.png) } 

.tit_line									{ position:relative; margin:0; padding:0 3em;}
.tit_line img								{ vertical-align:top}
.tit_line::after							{ position:absolute; bottom:0; left:0; width:100%; height:1px; background:#006321; content:""}

.com_info .con_inner,
.location									{ max-width:1400px}
.com_info								{ position:relative; margin-top:100px; top:100px; padding:7em 0; background:#fafafa; opacity:0}
.com_info dl							{ padding:1.5em 4em; color:#000; border-bottom:1px solid #dfdfdf; *zoom:1}
.com_info dl::after						{ display:block; clear:both; content:""}
.com_info dl dt							{ float:left; width:15%; font-weight:700; font-size:18.5px; letter-spacing:-.05em;}
.com_info dl dd						{ float:left; width:85%; font-weight:500; font-size:18px; letter-spacing:-.045em;}

.location									{ position:relative; padding:100px 0; top:100px; opacity:0}
.location h3								{ margin-bottom:2em;}
.location dl								{ padding:0 3em; color:#000; font-size:18px; *zoom:1}
.location dl::after						{ display:block; clear:both; content:""}
.location dl dt							{ float:left; width:5em; font-weight:700; }
.location dl dd							{ float:left; font-weight:300;}
.location .root_daum_roughmap	{ margin-top:2.5em}


/* CI */
.ci											{ max-width:1400px}
.ci_top									{ position:relative; margin-top:100px; top:100px; text-align:center; opacity:0}
.ci .ci_grid								{ margin:5em 0; padding:8%; background:url(/img/content/bg_ci_grid.gif) repeat 0 0; border:1px solid #cecece}
.ci_detail									{ position:relative; margin:100px auto; top:100px; opacity:0}
.ci_detail .left							{ float:left; width:42%; }
.ci_detail h4								{ position:relative; margin:0 0 .5em; padding-left:.5em; color:#347746; font-size:26px;}
.ci_detail h4::after						{ position:absolute; bottom:.3em; left:0; width:1em; height:1px; background:#006321; content:""}
.ci_detail section + section			{ margin-top:4.5em;}
.ci_detail p								{ font-weight:300; font-size:18px; color:#737373; letter-spacing:-.05em;}
.ci_detail .ci_variation					{ padding:14% 12%; text-align:center; border:1px solid #cecece}
.ci_detail .ci_grid						{ margin:0; padding:14% 12%; text-align:center;  }
.ci_detail .ci_grid img					{ width:335px}
.ci_detail .right							{ float:right; width:54%; margin-left:4%; text-align:right;}


/* 핵심가치 */
.value_top								{ position:relative; margin-top:100px; top:100px; text-align:center; opacity:0 }
.value_top .intro_stit					{ margin-bottom:0}
.img_value								{ margin-top:-25px;}
.value_bg								{ position:relative; top:100px; max-width:1700px; height:675px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; margin:0 auto; padding-top:10%; text-align:center; color:#fff; background:url(/img/content/bg_value.jpg) no-repeat 50% 50%; opacity:0 }
.value_bg .con							{ width:510px; margin:0 auto; }
.value_bg .con h4						{ position:relative; display:inline-block; margin:0 0 .6em; font-size:43px; letter-spacing:-.07em; z-index:1}
.value_bg .con h4::after				{ position:absolute; bottom:0; left:0; width:100%; height:30%; background:rgba(150,207,75,.5); z-index:-1; content:""  }
.value_bg .con li						{ position:relative; padding:.9em 0 .9em 45px; text-align:left; font-weight:700; letter-spacing:-.07em; font-size:20px; background:no-repeat 0 50%}
.value_bg .con li + li::after			{ position:absolute; top:0; left:45px; width:89%; height:1px; background:rgba(255,255,255,.25);content:""}
.value_bg .con li:first-child			{ background-image:url(/img/content/bg_value_num01.jpg)}
.value_bg .con li:nth-child(2)		{ background-image:url(/img/content/bg_value_num02.jpg)}
.value_bg .con li:last-child			{ background-image:url(/img/content/bg_value_num03.jpg)}


/* 파인푸드란? */
.finefood											{ height:-webkit-calc(80vh - 75px); height:-moz-calc(80vh - 75px); height:calc(80vh - 75px); margin-top:-75px; padding-top:20vh; background:url(/img/content/bg_finefood.jpg) no-repeat 0 0 / cover; background-attachment:fixed; }
.finefood	 .txt									{ position:relative; top:100px; width:45%; margin:0 0 0 auto; opacity:0  }
.finefood	 .txt h3								{ margin:1.3em 0 0; font-size:45px; color:#fff; letter-spacing:-.05em;}
.finefood	 .txt .normal							{ color:#fff; font-size:22px; font-weight:500; letter-spacing:-.065em; line-height:1.5;}
.finefood	 .txt .keyword						{ font-size:21px; color:#96cf4b; letter-spacing:-.05em;}
.finefood	 .txt .keyword span				{ display:inline-block; *display:inline}
.finefood	 .txt .keyword span + span		{ margin-left:1em}
.finefood	 .txt a									{ display:block; width:240px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; margin-top:3em; padding:.7em 2.5em; font-weight:300; font-size:17px; color:#96cf4b; letter-spacing:-.08em; border:1px solid rgba(150,207,75,.5); border-radius:30px }
.finefood	 .txt a .arr							{ position:relative; display:inline-block; *display:inline; width:27px; height:8px; vertical-align:top; margin-top:.4em;}
.finefood	 .txt a .arr::before					{ position:absolute; bottom:0; left:0; width:100%; height:1px; background:#96cf4b; content:"";}
.finefood	 .txt a .arr::after					{ position:absolute; top:50%; right:0; width:8px; height:1px; background:#96cf4b; content:""; transform:rotate(45deg);}

/* 파인푸드랩 프로젝트 */
.project										{ background-image:url(/img/content/bg_project.jpg)}
.project .txt									{ margin:0 }

/* 생산자 협의회 */
.council										{ position:relative; margin-top:100px; text-align:center;  }
.council .img								{ margin:20px 0 100px}

/* 상품소개 */
.product_top							{ margin-top:5em; text-align:center;}
.product_top .tab li					{ display:inline-block; *display:inline; width:230px; margin:0 5px }
.product_top .tab li a					{ display:block; padding:.5em; font-size:19px; font-weight:700; color:#b9b9b9; letter-spacing:-.06em; border-radius:3em; border-bottom:1.5px solid #e9e9e9 }
.product_top .tab li.on a				{ color:#006320; border-color:#33824d}
.product_h3								{ margin:0; font-size:50px; font-weight:500; color:#006320; text-align:center; letter-spacing:-.075em;}
.fullpage .con_inner					{ max-width:1400px}
.fullpage .basic							{ margin:.7em 0 2em; font-size:18px; font-weight:300; color:#585858; text-align:center; letter-spacing:-.05em; }
.fullpage .basic + .basic				{ margin-top:-.9em}
.fullpage .img							{ position:relative; text-align:center;}
.fullpage .img img						{ max-height:70vh; }
.fullpage .section						{ position:relative; display:table; table-layout:fixed; height:100vh; width:100%}
.fullpage .table_md					{ display:table-cell; vertical-align:middle; }
.fullpage .line_tit						{ position:relative; padding:1.5em 0 .8em; font-size:30px; color:#000; }
.fullpage .line_tit::after				{ position:absolute; top:0; left:0; width:75px; height:1px; background:#000; content:""}
.fullpage .line_tit p					{ margin:0; font-weight:300; letter-spacing:-.065em; }
.fullpage .line_tit p strong			{ font-weight:500;}
.fullpage .line_tit h4					{ margin:0; font-size:1.5em; line-height:1.2; font-weight:500; letter-spacing:-.065em; }
.fullpage .fl								{ float:left; width:33%; margin-right:2%}
.fullpage .fl .basic						{ text-align:left;}
.fullpage .fr								{ float:right; width:65%;}
.fullpage .full							{ float:left; width:100%; margin-top:1em}
.fullpage .txt + .txt					{ margin-top:2.4vh}
.fullpage .txt .grey						{ margin:0; font-size:35px; letter-spacing:-.065em; color:#a3a3a3}
.fullpage .txt li							{ margin:.5em 0; font-size:17px; letter-spacing:-.05em; color:#343434}
.fullpage .txt li p						{ margin:0;}
.fullpage .txt strong					{ font-size:1.17em;}
.fullpage .list							{ margin:20% 0 0; font-size:20px; font-weight:500; letter-spacing: -.07em; color:#a3a3a3}
.fullpage .list li							{ position:relative; padding-left:.7em;}
.fullpage .list li::before				{ content:"-"; position:absolute; display:inline-block; top:0; left:0;  }
.product02 .txt li						{ margin-top:0;}

/* Navi */
.nav								{ position:fixed; top:50%; right:3.5%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); z-index:101}
.nav ul li							{ margin:7px 0; }
.nav ul li a *						{ vertical-align:middle}
.nav ul li a .circle				{ display:block; position:relative; color:#ddd;}
.nav ul li a:hover .circle,		
.nav ul li.act a .circle			{ color:#006320 }