@charset "utf-8";

/* 초기화 */
body,div,article,section,h1,h2,h3,nav,ul,li,img,p,hr{margin: 0; padding: 0;}
ul,li{list-style: none;}
img,iframe,hr{border: none;}
a{color: #000; text-decoration: none;}
.hidden{display: none;}

body{font-family: "Noto Sans KR", serif;}

/* header_area (topmenu 및 header) */
div#header_area {width: 1170px; position: absolute;
left: 50%; margin-left: -585px; text-transform: uppercase;z-index: 9999; }
div#header_area > div.top_menu{height: 30px; line-height: 30px;}
div#header_area > div.top_menu ul{float: right; height: 30px;}
div#header_area > div.top_menu ul > li{float: left; padding: 0 14px; height: 30px; line-height: 30px; }
div#header_area > div.top_menu ul > li:last-child{padding-right: 0;}
div#header_area > div.top_menu ul > li a{float: left; color: #fff; font-size: 11px; }
div#header_area > div.top_menu ul > li:last-child a{float: left; margin: 0 5px 0 5px; width: 14px; height: 14px; text-indent: -9999px; font-size: 0; background-image: url(../imges/icon_sns_01.png); background-size: 400% 100%; margin-top: 9px;}
div#header_area > div.top_menu ul > li a.instagram{background-position: -28px 0;}
div#header_area > div.top_menu ul > li a.facebook{background-position: -42px 0;}
div#header_area > div.top_menu ul > li::after{content: ""; width: 1px; height: 10px; background-color: #dddcdc; float: right; position: relative; top: 11px; right: -14px;}
div#header_area > div.top_menu ul > li:nth-child(n+4)::after{display: none;}

div#header_area > header > div.menubar{width: 100%; height: 90px; background-color: #fff; position: absolute;}

div#header_area > header {height: 90px; background-color: rgba(236, 236, 236, 0.95); overflow: hidden;}
div#header_area > header > h1{position: absolute; margin-left: 30px; margin-top: 10px; line-height: 90px;}
div#header_area > header > nav{float: right; z-index: 999; height: 440px;}
div#header_area > header > nav > ul > li{float: left; padding-right: 30px; position: relative; width: 80px; text-align: center;}
div#header_area > header > nav > ul > li:nth-child(6){width: 100px;}
div#header_area > header > nav > ul > li:nth-child(8){padding-right: 30px;}
div#header_area > header > nav > ul > li > a{color: #333; font-weight: bold; font-family: "Roboto", serif; line-height: 93px; position: relative;}
div#header_area > header > nav > ul > li:hover > a{color: #f6ca00;}
div#header_area > header > nav > ul > li > a::after{content: ""; width: 100%; height: 6px; background-color: #f6ca00;position: absolute; left: 0; bottom: -34px;  transform: scale(0,1); transition: all 0.5s; }
div#header_area > header > nav > ul > li:hover > a::after{transform: scale(1,1);}


div#header_area > header > nav > ul > li > div.slide1 {position: absolute; width: 80px;}
div#header_area > header > nav > ul > li > div.slide1 > ul > li {font-size: 13px; color: #5c5953; padding-top: 20px; text-align: center; font-weight: 500; cursor: pointer;}
div#header_area > header > nav > ul > li:nth-child(6) > div > ul > li {width: 100px;}
div#header_area > header > nav > ul > li > div.slide1 > ul > li.on {color: #333; text-decoration: underline; text-underline-offset: 3px;}

div.bot{width: 1170px; height: 350px; background-color: rgba(236, 236, 236, 0.95); position: absolute; margin-top: 90px; display: none;}

/* #비주얼영역 (배너슬라이드 */
article{height: 650px; position: relative; text-indent: -9999px; font-size: 0;}
article div.slide{width: 100%; height: 100%; position: relative; overflow: hidden;}
article div.slide li{width: 100%; height: 650px; position: absolute;}
article div.slide li a{display: block; width: 100%;height: 100%;}
article div.slide li:nth-child(1){background-image: url(../imges/slide1.jpg);}
article div.slide li:nth-child(2){left: 100%; background-image: url(../imges/slide2.jpg);}
article div.slide li:nth-child(3){left: 200%; background-image: url(../imges/slide3.jpg);}
article div.slide li:nth-child(4){left: 300%; background-image: url(../imges/slide4.jpg);}
article div.slide li:nth-child(5){left: 400%; background-image: url(../imges/slide5.jpg);}
article div.slide li:nth-child(6){left: 500%; background-image: url(../imges/slide6.jpg);}
article div.slide li:nth-child(7){left: 600%; background-image: url(../imges/slide7.jpg);}
article div.slide li:nth-child(8){left: 700%; background-image: url(../imges/slide8.jpg);}
article div.slide li:nth-child(9){left: 800%; background-image: url(../imges/slide9.jpg);}
article div.paging{width: 1170px; height: 30px; position: absolute; top: 570px; left: 50%; margin-left: -585px;}
article div.paging ul{float: left;margin-top: 10px; margin-right: 23px;}
article div.paging li{width: 50px; height: 4px; background-color: #cfc6bc; float: left; margin-right: 7px; cursor: pointer;}
article div.paging li.on{background-color: #f2c000;}
article div.paging span.but1 a{position: absolute; width: 30px;height: 30px; background-image: url(../imges/icon_play.png); background-size: 200% 100%; left: 535px;}
article div.paging span.but2 a{position: absolute; width: 30px;height: 30px; background-image: url(../imges/icon_play.png); background-size: 200% 100%; background-position: -30px;  left: 535px; display: none;}

/* #youtube 영상보기 */
div#youtube{width: 1170px; height: 625px; margin: 60px auto;}

/* #cont01 주변점포찾기등 */
section#cont01{width: 1170px; height: 1024px; margin: 0 auto 60px;}
section#cont01 li{float: left; margin-right: 30px; width: 570px; position: relative; background-color: #373737;}
section#cont01 li a{display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
section#cont01 li img{float: left; width: 100%;}
section#cont01 li div.text_area{float: left; background-color: #eeecec; width: 100%; height: 165px;
font-size: 24px; line-height: 34px; padding: 25px 26px; box-sizing: border-box; overflow: hidden;}
section#cont01 li div.text_area strong{font-weight: 450;}
section#cont01 li div.text_area::after{content: ""; display: block; height: 6px; width: 100%; position: absolute; bottom: 0; left: 0; background-color: #f6ca00; transition: all 0.5s; transform: scale(0,1);}
section#cont01 li:hover div.text_area::after{transform: scale(1,1);}
section#cont01 li div.text_area p{position: absolute; bottom: 30px; height: 20px; line-height: 20px; font-size: 13px; color: #5c5953; font-weight: 550;}
section#cont01 li div.text_area p::before{content: ""; width: 20px; height: 20px; float: left; margin-right: 5px;}

section#cont01 li:nth-child(-n+2) img{width: 570px; height: 354px;}
section#cont01 li:nth-child(-n+2){height: 525px; margin-bottom: 59px;}
section#cont01 li:nth-child(n+3){width: 370px; height: 440px;}
section#cont01 li:nth-child(n+3) div{height: 204px;}
section#cont01 li:nth-child(3n-1){margin-right: 0;}
section#cont01 li:nth-child(3){background-color: #f6ca00; padding: 40px 30px; box-sizing: border-box;}
section#cont01 li:nth-child(3) p.title{height: 135px; font-size: 36px; line-height: 48px; font-weight: bold; overflow: hidden; margin-bottom: 15px; position: relative; color: #333;}
section#cont01 li:nth-child(3) p.title::after{content: ""; display: block; width: 40px; height: 4px; 
background-color: #333; position: absolute; bottom: 0;}
section#cont01 p.content{font-size: 15px; color: #333;}

section#cont01 li div.text_area p::before{content: ""; display: inline-block; width: 20px; height: 20px; 
position: relative; margin-right: 8px; background-image: url(../imges/btn_link.png); background-size: 200% 100%;
transition: all 0.5s}
section#cont01 li:hover div.text_area p::before{background-position: -20px;}

/* #cont02 브랜드철학 */
section#cont02{width: 100%; height: 600px; position: relative; overflow: hidden;}
section#cont02 img{width: 100%; float: left; transform: scale(1,1); transition: all 1s; }
section#cont02 img:hover{transform: scale(1.1,1.1);}
section#cont02 li{float: left; width: 370px; height: 600px; background-color: rgba(50, 50, 50, 0.9); position: absolute; left: 370px;}
section#cont02 li p.title{width: 310px; height: 117px; margin-left: 30px; margin-top: 75px; font-size: 36px; font-weight: 500; position: relative; line-height: 45px;}
section#cont02 li p.title::after{content: ""; width: 40px; height: 4px; background-color: #fff; display: block; bottom: 0; position: absolute; bottom: -60px;}
section#cont02 li p.content{width: 350px; margin-left: 30px; margin-top: 75px; position: relative; font-size: 14.5px; color: #dad8d8; line-height: 30px;}
section#cont02 li p{color: #fff;}
section#cont02 li p.philosophy{width: 170px;height: 60px; margin-top: 90px; margin-left: 30px;
text-align: center; line-height: 60px; border: 2px solid #fff; transition: all 0.5s;}
section#cont02 li p.philosophy a{color: #fff; transition: all 0.5s; width: 170px; height: 60px; display: block;}
section#cont02 li p.philosophy a:hover{background-color: #fff; color: #000;}



/* #cont03 식재료 및 더 많은 이야기 */
section#cont03{width: 1170px; height: 900px; margin: 60px auto 100px;}
section#cont03 div.wrap img{float: left;}
section#cont03 div.wrap {width: 1170px; height: 450px; background-color: #000;}
section#cont03 div.wrap div.text_area{width: 370px; height: 444px; background-color: #eeecec; float: left; position: relative;}
section#cont03 div.wrap div.text_area strong{font-size: 36px !important; font-weight: bold; position: absolute; top: 40px; left: 25px; font-size: 30px; color: #373737; line-height: 50px;}
section#cont03 div.wrap div.text_area strong::after{content: ""; width: 40px; height: 4px; background-color: #000;display: block; position: absolute; bottom: -38px;}
section#cont03 div.wrap div.text_area p.cont {position: absolute ;top: 245px; left: 25px; font-size: 15px; color: #333; line-height: 25px; font-weight: 450;}
section#cont03 div.wrap div.text_area p.bot{position: absolute; bottom: 25px; left: 25px; height: 20px; font-size: 13px; color: #5c5953; font-weight: 550; line-height: 20px;}
section#cont03 div.wrap div.text_area p.bot::before{content: ""; width: 20px; height: 20px;  float: left; margin-right: 8px; background-image: url(../imges/btn_link.png); background-size: 200% 100%;transition: all 0.5s}
section#cont03 div.wrap:hover  div.text_area p.bot::before{background-position: -20px;}

section#cont03 div.wrap div.text_area::after{content: ""; width: 370px; height: 6px; background-color: #f2c000; display: block; bottom: -6px; 
    position: absolute; transform: scale(0,1); transition: all 0.5s;}
section#cont03 div.wrap:hover div.text_area::after{transform: scale(1,1);}

section#cont03 h3{font-size: 24px; width: 100%; float: left; height: 22px; line-height: 20px; margin-top: 100px; margin-bottom: 60px; color: #373737;}
section#cont03 h3::after{content: ""; width: 1005px; height: 16px; background-color: #373737; float: right; margin-top: 3px;}

section#cont03 ul {clear: both; width: 1170px; height: 266px;}
section#cont03 ul li img{float: left; width: 100%; position: absolute;}
section#cont03 ul li {float: left; margin-right: 30px; width: 370px; height: 266px; position: relative;}
section#cont03 ul li:last-child{margin-right: 0;}
section#cont03 ul li div.text_area{height: 61px; width: 370px; background-color: #373737; float: left; position: absolute; bottom: 0;}
section#cont03 ul li div.text_area strong{color: #fff; line-height: 61px; margin-left: 30px; transition: all 0.5s; font-size: 15px; font-weight: 500;}
section#cont03 ul li div.text_area strong::after{content: ""; width: 6px; height: 10px; display: block; position: absolute; bottom: 25px; left: 342px; background-image: url(../imges/icon_cont_more.png); background-size: 200% 100%;}
section#cont03 ul li:hover div.text_area strong{color: #f2c000;}
section#cont03 ul li:hover div.text_area strong::after{background-position: -6px;}
/* #footer_area 푸터영역 */
div#footer_area{height: 310px; background-color: #f2c000; color: #373737;}
div#footer_area footer{width: 1170px; height: 280px; margin: 0 auto; position: relative;}
div#footer_area footer ul{height: 90px; display: flex; justify-content: center; }
div#footer_area footer li{display: inline; margin-right: 12px; text-align: center; top: 47px; position: relative;}
div#footer_area footer ul+img{float: right; position: absolute; right: 0; top: 0;}
div#footer_area footer img.webaward{margin-top: 15px;}
div#footer_area footer li::after{content: ""; width: 2px; height: 14px; background-color: #000; float: right;
margin-top: 4px; margin-left: 10px;}
div#footer_area footer li:last-child::after{display: none;}
div#footer_area footer li:nth-child(5){font-weight: bold;}

div#footer_area footer hr{margin-bottom: 27px; height: 1px; background-color: rgba(50, 50, 50, 0.1);}

div#footer_area footer address{text-align: center; font-style: normal;}
div#footer_area footer address span{font-size: 13px;}

div#footer_area footer p {text-align: center; margin-top: 30px; font-size: 13px;}

div#footer_area footer div{width: 94px; height: 40px; position: absolute; bottom: 0; left: 50%; margin-left: -47px;}
div#footer_area footer div a{float: left; width: 40px; height: 40px;text-indent: -9999px; font-size: 0;
background-image: url(../imges/icon_sns_02.png); background-size: 200% 100%;}
div#footer_area footer div a.facebook{float: right; background-position: -40px;}