@charset "utf-8";

body, a {font: 14px/1.8 'Noto Sans KR', sans-serif;}
a {color:#333;}
h2 {margin:0; padding:120px 0; line-height:.8; font-size:2.5em; color:white; text-align:center; }
h2 span {display:inline-block; width:50px; margin-top:28px; border-bottom:1px solid rgb(255, 255, 255);}
h3 {font-size:1.4em; font-weight:400;}

/* 헤더 */
/* 상단 고정 메뉴 */
#inner_header {z-index:999; position: fixed; width:100%; background:rgba(51,51,51,0.5);}
#inner_header h1 {width:180px; margin:0;}
#inner_header a {color:#fff;}
#inner_header .shop {float:right; margin-top:20px; color:#fff; border:1px solid #fff; border-radius:5px; padding:10px 20px;}
#inner_header .shop:hover {border:1px solid #e9c623;  color:#e9c623;}

/* 탑 메뉴, 로고, 온라인 주문 버튼 */
#inner_header .top_menu {position:relative; padding:0 360px; height:80px; line-height:80px;}
#inner_header .top_menu .member {float:left;}
#inner_header .top_menu .member li {display:inline-block; margin-left:20px;}
#inner_header .top_menu .member a:hover {color:#e9c623;}
#inner_header .top_menu .logo {position: absolute; left:50%; top:83%; margin-top:-40px; margin-left:-90px;}
#inner_header .top_menu .logo img {width:100%;}

/* 메인 메뉴 */
#inner_header .gnb {height:59px; padding:0 360px; border-top:1px solid rgba(255, 255, 255, 0.5)}
#inner_header .gnb .logo {opacity:0; float:left; padding:0; margin:0; line-height:0; margin-top:16px;}
#inner_header .gnb .logo img {width:100%;}
#inner_header .gnb .shop {opacity:0; margin-top:11px; border:1px solid rgb(65, 65, 65); color:rgb(65, 65, 65);}
#inner_header .gnb .shop:hover {background:rgb(44, 44, 44); color:#fff;}
#inner_header .gnb ul {width:780px; margin:0 auto;}
#inner_header .gnb li {float:left; width:156px; text-align:center; line-height:60px;}
#inner_header .gnb li a {font-size:1.2em;}
#inner_header  li a:hover {color:#e9c623;}

/* 메인이미지 */
/* 캐러셀 */
#mainimg {position:relative; height:100vh; overflow:hidden;}
#mainimg img {width:100%;}
#mainimg .bx-wrapper {top:-100px; border:none; background:transparent; box-shadow:none;}

/* 슬라이드 텍스트 */
#mainimg .txt {position:absolute; left:50%; transform: translate(-50%,-50%); top:50%; text-align: center; color:#fff;}
#mainimg .txt h3 {position: relative; top:0; margin:0; font-size:45px; line-height:1.3em; font-weight:300;}
#mainimg .txt p {position: relative; top:0; font-size:18px; font-weight: 300; line-height: 0.7em;}

/* 자세히 보기 버튼 */
#mainimg .txt .img_btn li {display:inline-block; margin-top:15px; padding:10px 20px; border:1px solid #FFF; margin-right:5px;}
#mainimg .txt .img_btn li:hover {border:1px solid #e9c623;}
#mainimg .txt .img_btn li a {color:#fff;}
#mainimg .txt .img_btn li:hover a {color:#e9c623; }


/* 좌우 버튼 */
#mainimg .btn {position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px;  line-height:50px; border-radius:25px; color:#fff; background:rgba(255, 255, 255, .2); font-size:2em; text-align: center; }
#mainimg .btn:hover {color:#fff; background:#e9c623;}
#mainimg .pBtn {left:70px; }
#mainimg .nBtn {right:70px; }

/* 페이저 */
#mainimg .pager {position:absolute; left:50%; bottom:5%; transform:translateX(-41%); width:58%;}
#mainimg .pager li {position:relative; float:left; border-bottom:4px solid #999; width:16%; cursor:pointer; transition:.3s;}
#mainimg .pager li p {opacity:0; color:#999; transition:.5s; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; padding:10px; text-align: center;}
#mainimg .pager li p:hover {color:#fff; padding:10px; box-sizing: border-box;}
#mainimg .pager li.active {border-bottom:4px solid #eee;}
#mainimg .pager li.active span {position:absolute; width:0; animation: bar 4s infinite; border-bottom:4px solid #e9c623; color:#fff;}

@keyframes bar {
   0% {width:0;}
   100% {width:100%;}
}

/* 실행, 정지 버튼 */
#mainimg .pager li:last-of-type {border:none; width:2%; color:#fff; font-size:1.2em; padding:87px 0 0 20px;}

/* 섹션1 브랜드 */
#brand {position:relative; height:100vh; background:url('../images/b_bg04.png') no-repeat 0 0/cover;}
#brand .slogan {position:absolute; left:370px; top:320px; width:510px;}
#brand .slogan div,
#brand .slogan h3,
#brand .slogan p {position: relative; opacity:0;}
#brand .story {position:absolute; left:980px; top:320px;  width:590px; opacity:0; }
#brand .story img {float:left; width:180px; margin-right:20px; box-sizing:border-box; border-radius: 90px; background:#e9c623;}
#brand .town {position:absolute; left:980px; top:580px; width:590px; opacity:0;}
#brand .town img {float:left; width:180px; margin-right:20px; border-radius: 90px; background:#e9c623;}
#brand .slogan, .story, .town h3 {color:white;}
#brand .slogan, .story, .town p {color:white;}


/* 섹션2 메뉴 소개 */
#menu {position:relative; height:100vh; background:url('../images/b_bg05.png') no-repeat 0 0/cover;}
#menu h2 {position:relative; padding-bottom:60px;}
#menu #tabs {position:relative; left:50%; top:0px; width:1200px; height:554px; border-radius:20px 20px 0 0; margin-left:-620px; padding:30px 20px; background:#fff; border:1px solid rgb(219, 219, 219)}

/* 탭 메뉴 - 버튼 */
#menu .list {position:relative;}
#menu .list li {float:left; width:180px; padding:15px 0px 10px; margin:0 10px; text-align:center; background:#f7f7f9; border-radius:10px 10px 0px 0px;}
#menu .list li a {font-size:1.2em;}
#menu .list .active {background:#fad221;}

/* 탭 메뉴 버튼의 아이콘 */
#menu .list li span {display:block; width:50px; height:50px; background:no-repeat 0 0/100% 100%; margin:0 auto;}
#menu .list li:nth-of-type(1) span {background-image:url(../images/icon8.png);}
#menu .list li:nth-of-type(2) span {background-image:url(../images/icon4.png);}
#menu .list li:nth-of-type(3) span {background-image:url(../images/icon7.png);}
#menu .list li:nth-of-type(4) span {background-image:url(../images/icon6.png);}
#menu .list li:nth-of-type(5) span {background-image:url(../images/icon5.png);}
#menu .list li:nth-of-type(6) span {background-image:url(../images/icon3.png);}


/* 탭 메뉴 - 내용 */
#menu .cont {position:relative; top:20px; display: none;}
#menu .cont.active {display: block;}
#menu .cont ul {width:1180px; height:1px; margin-top:82px; margin-left:10px; border-bottom:1px solid #fad221;}
#menu .cont li {position: relative; float:left; width:280px; height:429px; border:1px solid #d1d1d1; box-sizing:border-box; margin:0 10px; text-align:center; color:#333;}
#menu .cont li:hover {border:2px solid #fad221;}
#menu .cont li:first-of-type {margin-left:0;}
#menu .cont li:last-of-type {margin-right:0;}
#menu .cont li img {width:100%;}
#menu .cont li h3 {font-size:1.7em; margin-top:8px;}
#menu .cont li p {margin-top:-20px; padding:0 50px; letter-spacing:-.2px; line-height:20px; font-size:1em;}
#menu .cont li b {display:inline-block; margin-top:15px; font-size:1.1em; color:#999;}
#menu .cont li:hover div {display:block; opacity:1; transition:0.5s;}
#menu .cont li:hover b {opacity:0;}

/* 탭 메뉴 - hover시 버튼 */
#menu .cont div {opacity:0; display:none; position: absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3);}
#menu .cont div button {position: absolute; left:0; bottom:0; width:49.6%; height:45px; background:#f7f7f9; font-size:1.1em; transition:0.5s;}
#menu .cont div button:hover {background:#fad221;}
#menu .cont div button:nth-of-type(1) {left:0;}
#menu .cont div button:nth-of-type(2) {left:50.5%;}

/* 섹션3 레시피 */
#recipe {height:100vh;}
/* 배경 이미지 - 패럴렉스 */
#recipe h2 {margin-top:-145px; padding:0;}
#recipe h2 span {width:auto; border-bottom:none; color:#fff; font-size:0.5em; font-weight:300; margin-top:15px;}
#recipe .recipe_bg:after {content:""; display:block; width:100%; height:245px; background:url(../images/artistbg.jpg) no-repeat 50% 50%/cover fixed;}

/* 레시피 목록 */
#recipe .recipe_list {width:1200px; margin:135px auto 0;}
#recipe .recipe_list li {float:left; position:relative; width:280px; height:220px; background:rgb(47, 0, 255); overflow:hidden; margin:10px; color:#fff;}
#recipe .recipe_list li img {width:100%;}
#recipe .recipe_list li h3 {position:absolute; left:20px; bottom:13px;}
#recipe .recipe_list li p {position:absolute; left:20px; bottom:2px; font-size:0.8em;}

/* 레시피 목록 이미지 */
#recipe .recipe_list li div {width:100%; height:100%; background:no-repeat 50% 50%/100%; transition:.5s;}
#recipe .recipe_list li:nth-of-type(1) div {background-image:url(../images/artist01.jpg);}
#recipe .recipe_list li:nth-of-type(2) div {background-image:url(../images/artist02.png);}
#recipe .recipe_list li:nth-of-type(3) div {background-image:url(../images/artist03.png);}
#recipe .recipe_list li:nth-of-type(4) div {background-image:url(../images/artist04.png);}
#recipe .recipe_list li:nth-of-type(5) div {background-image:url(../images/artist055.png);}
#recipe .recipe_list li:nth-of-type(6) div {background-image:url(../images/artist06.jpg);}
#recipe .recipe_list li:nth-of-type(7) div {background-image:url(../images/artist07.png);}
#recipe .recipe_list li:nth-of-type(8) div {background-image:url(../images/artist09.png);}

/* 레시피 목록 이미지를 어둡게 처리 */
#recipe .recipe_list li div span {display:block; width:100%; height:100%; background:rgba(0,0,0,0.5);}

/* 레시피 목록 이미지 모션 */
#recipe .recipe_list li:hover div {background-size:110%;}
#recipe .recipe_list li:hover span {background:none;}

/* 레시피 목록 버튼 */
#recipe .recipe_index {text-align:center; margin-top:30px;}
#recipe .recipe_index li {display:inline-block; width:30px; height:30px; line-height:28px; border:1px solid #ccc; box-sizing:border-box; cursor:pointer; }
#recipe .recipe_index li.active {background:#ccc;} 

#recipe .recipe_btn {width:397px; height:10px; margin:-30px auto 0;}
#recipe .recipe_btn li {width:30px; height:30px; line-height:30px; box-sizing:border-box; text-align:center; background:#e9c623; cursor:pointer; color:#fff; font-weight: 500; }
#recipe .recipe_btn li:nth-of-type(1) {float:left; padding-right:7px;}
#recipe .recipe_btn li:nth-of-type(2) {float:right; padding-left:7px;}

/* 섹션4 - 매장안내 */
#store {text-align:center; height:65vh;}
#store h2 {padding-top:70px; padding-bottom:30px; background:rgb(19, 18, 18);}
#store > div {padding-bottom:70px; background:rgb(19, 18, 18);}

/* 검색창 */
#store form {position:relative; display:inline-block; padding:10px; background:#e9c623; text-align:center;}
#store form > div {display:inline-block; width:120px; height:30px; display:inline-blocK; padding:2px 5px 5px 10px; box-sizing:border-box; background:#fff; cursor: pointer;}
#store form > div i {margin-left:60px;}
#store form .store_search {position:absolute; left:10px; top:41px; width:120px; background:rgb(241, 241, 241); display:none;}
#store form .store_search li { cursor: pointer; text-align:left; padding-left:14px;}
#store form .store_search li:hover {background:#ccc;}
#store form input {width:300px; height:30px; padding-left:20px; vertical-align: top; background:#fff;}
#store form button {width:100px; height:30px; background:#ffffff;}

/* 국내뉴스, 해외뉴스 */
#store .store_list {width:1200px; height:30px; margin:60px auto; cursor: pointer;}
#store .store_list li {float:left; width:580px; margin:10px; color:#fff; background:no-repeat 50% 50%/cover; text-align:center; box-sizing:border-box;}
#store .store_list li:nth-of-type(1) {background-image:url(../images/news1.jpg);}
#store .store_list li:nth-of-type(2) {background-image:url(../images/news2.jpg);}
#store .store_list li div {position:relative; width:100%; padding:50px 0; background:rgba(0,0,0,0.5);}
#store .store_list li h3, #store .store_list li p {margin:0;}

/* 라인 모션 */
#store .store_list li div span {position: absolute; width:0px; height:0px; background:#ccc; transform-origin:0 0;}
#store .store_list li div span:nth-of-type(1) {left:2%; top:5%;}
#store .store_list li div span:nth-of-type(2) {left:98%; top:5%;}
#store .store_list li div span:nth-of-type(3) {left:98.1%; top:95%;}
#store .store_list li div span:nth-of-type(4) {left:2%; top:95%;}

#store .store_list li div:hover span:nth-of-type(1) {animation:scale1 0.2s linear forwards;}
#store .store_list li div:hover span:nth-of-type(2) {animation:scale2 0.2s 0.2s linear forwards;}
#store .store_list li div:hover span:nth-of-type(3) {animation:scale3 0.2s 0.4s linear forwards;}
#store .store_list li div:hover span:nth-of-type(4) {animation:scale4 0.2s 0.6s linear forwards;}

@keyframes scale1 {
   0% {transform:scaleX(0); width:1px; height:1px;}
   100% {transform:scaleX(1); width:96%; height:1px;}
}
@keyframes scale2 {
   0% {transform:scaleY(0); width:1px; height:1px;}
   100% {transform:scaleY(1); width:1px; height:90%;}
}
@keyframes scale3 {
   0% {transform:scaleX(0); width:1px; height:1px;}
   100% {transform:scaleX(-1); width:96%; height:1px;}
}
@keyframes scale4 {
   0% {transform:scaleY(0); width:1px; height:1px;}
   100% {transform:scaleY(-1); width:1px; height:90%;}
}


/* 섹션 5- 프로모션 */
#promotion {height:100vh; background:url(../images/newsbg.png)}
#promotion h2{padding-bottom:70px; color:#fff;}
#promotion h2 span {border:1px solid #fff;}

/* 캐러셀 */
#s5_carousel {width:1200px; margin:0 auto; }
#s5_carousel .bx-wrapper {height:450px; border:none; background:transparent; box-shadow:none;}

/* 캐러셀의 좌우버튼 */
#s5_carousel .bx-wrapper .bx-controls-direction .bx-prev {left:0; background:url('../images/left_btn.png') no-repeat 50% 50% rgb(51, 51, 51, 0.5);}
#s5_carousel .bx-wrapper .bx-controls-direction .bx-next {right:0; background:url('../images/right_btn.png') no-repeat 50% 50% rgb(51, 51, 51, 0.5);}

/* 캐러셀의 내용 */
#s5_carousel .vd {float:left; width:800px; height:450px; }
#s5_carousel .vd video {width:100%;}
#s5_carousel .vd_txt {float:right; width:400px; height:450px; padding:40px; box-sizing:border-box; background:rgb(255, 255, 255);}
#s5_carousel .vd_txt h3 {margin-bottom:5px; margin-top:0; font-size:1.1em; color:#e9c623;}
#s5_carousel .vd_txt h4 {font-size:1.8em; margin:0; color:rgb(32, 30, 30,);}
#s5_carousel .vd_txt p:nth-of-type(1) {color:rgb(95, 95, 95);}
#s5_carousel .vd_txt p:nth-of-type(2) {position: absolute; right:40px; bottom:30px; font-size:0.9em; color:rgb(143, 143, 143);}
#s5_carousel .vd_txt button {border:1px solid #4b4b4b; margin-top:168px; padding:10px 15px; color:#2f2f2f; border-radius:5px;}
#s5_carousel .vd_txt button i {margin-left:10px;}

/* 푸터 */
#footer {height:200px; padding:20px 0; background:rgb(15, 15, 15); color:#fff; border-top:1px solid #e9c623;}
#footer a {color:#fff;}
#footer > div {width:1200px; margin:0 auto;}
#footer > div > div:nth-of-type(1) {float:left;}
#footer > div > div:nth-of-type(2) {float:right;}
#footer .bnb li {display:inline-block;}
#footer .bnb li span {color:#e9c623;}
#footer .sns li {display:inline-block; margin-right:18px;  transition: .3s;}
#footer .sns li:hover {transform:scale(1.3, 1.3);}
#footer .sns li:hover i {color:#e9c623;}
#footer .sns li i {font-size:2em;}