@charset "utf-8";

#wrap{width:100%}

/* header */
#header{width:100%}
#header .header_area{position:relative; width:100%; height:100px; background:#fff; z-index:2000}
#header .header_area .top{position:relative; width:1200px; height:100px; margin:0 auto}
#header .header_area .top h1{position:absolute; left:0; top:33px}
#header .header_area .top ul.nav{position:absolute; right:54px; top:0; height:100px}
#header .header_area .top ul.nav > li{position:relative; float:left}
#header .header_area .top ul.nav > li > a{display:block; padding:4px 24px 0; font-family:"Khand"; font-size:20px; line-height:96px; color:#000; text-decoration:none; letter-spacing:1px}
#header .header_area .top ul.nav > li > ul.sub{display:none; position:absolute; left:0; top:100px; width:230px; background:#cddc29; text-align:center; padding:23px 0}
#header .header_area .top ul.nav > li > ul.sub li a{font-family:"Khand"; font-weight:500; font-size:16px; line-height:30px; color:#000; letter-spacing:1px}
#header .header_area .top ul.nav > li > a.over{background:url(../images/common/nav_point.png) center bottom no-repeat}
#header .header_area .top ul.nav > li > a:hover{color:#b0b300}
#header .header_area .top ul.nav > li.nav2 > ul.sub{left:-70px}
#header .header_area .top ul.nav > li.nav3 > ul.sub{left:-59px}
#header .header_area .top ul.nav > li.on > a{color:#b0b300}
#header .header_area .top .btn_sitemap{position:absolute; right:0; top:34px; width:30px; height:30px}
#header .header_area .top .btn_sitemap a{display:block; width:30px; height:30px; background:url(../images/common/ico_sitemap.png) center no-repeat; font-size:0; line-height:0; letter-spacing:0; overflow:hidden}
#header .header_area .top .btn_sitemap a.on{background:url(../images/common/ico_sitemap_on.png) center no-repeat}
#header .header_area .top .btn_sitemap a:hover{background:url(../images/common/ico_sitemap_on.png) center no-repeat}

#header .top_main .top h1{position:absolute; left:-8.5px; top:33px}
#header .top_main .top ul.nav{position:absolute; right:62.5px; top:0; height:100px}
#header .top_main .top .btn_sitemap{position:absolute; right:8.5px; top:34px; width:30px; height:30px}

body.main #header{position:fixed; left:0; top:0; z-index:3000}


/* container */
#container{position:relative; width:100%}


/* sub */
#container .sub > .top{width:100%; height:170px}
#container .sub > .top .inner{position:relative; width:1200px; margin:0 auto; z-index:1000}
#container .sub > .top .inner p.location{position:absolute; left:0; top:15px; font-family:"Khand"; font-size:15px; line-height:20px; letter-spacing:1px}
#container .sub > .top .inner p.title{font-family:"Khand"; font-size:87px; line-height:90px; letter-spacing:1px; text-align:center; padding-top:46px}
#container .sub > .content{width:1200px; margin:50px auto 130px}
#container .sub > .content:after{content:''; display:block; clear:both}


/* main */
#container .main > ul.nav{position:fixed; left:50%; margin-left:570px; top:50%; margin-top:-130px; z-index:2000; width:30px}
#container .main > ul.nav li a{display:block; width:30px; height:30px; background:url(../images/main/thum.png) no-repeat; font-size:0; line-height:0; letter-spacing:0; overflow:hidden}
#container .main > ul.nav li.on a{background:url(../images/main/thum_on.png) no-repeat}
#container .main > ul.nav_b li a{background:url(../images/main/thum_b.png) no-repeat}
#container .main > ul.nav_b li.on a{background:url(../images/main/thum_b_on.png) no-repeat}
#container .main > .section1{position:relative}
#container .main > .section1 .inner{position:absolute; left:50%; margin-left:-496px; top:50%; margin-top:-475px; width:992px; height:915px; text-align:center; background:url(../images/main/section1_blur.png) no-repeat; text-align:center}
#container .main > .section1 .inner p.t1{position:absolute; left:0; top:303px; width:100%}
#container .main > .section1 .inner p.t2{position:absolute; left:0; top:372px; width:100%; font-family:"Khand"; letter-spacing:2px; font-size:20px; line-height:20px; color:#fff; text-shadow:1px 1px 1px #000; }
#container .main > .section1 .inner p.t3{position:absolute; left:0; top:392px; width:100%; font-size:18px; line-height:30px; color:#fff; margin-top:47px; text-shadow:1px 1px 1px #000; }
#container .main > .section1 .inner .scroll{position:absolute; left:50%; margin-left:-30px; bottom:96px; width:60px; height:100px; background:url(../images/main/scroll.png) center 26px no-repeat}
#container .main > .section1 .inner .scroll p{font-family:"Khand"; letter-spacing:1px; font-size:15px; line-height:20px; color:#fff; font-weight:700; text-align:center}
#container .main > .section2{position:relative}
#container .main > .section2 .inner{position:absolute; left:50%; margin-left:-567px; top:50%; margin-top:-262px; width:1134px; height:624px; background:url(../images/main/section2_box.png) no-repeat}
#container .main > .section2 .inner .text{position:absolute; left:112px; top:114px}
#container .main > .section2 .inner .text p.t1{position:absolute; left:0; top:0; font-family:"Khand"; letter-spacing:4px; font-size:87px; line-height:80px; color:#000}
#container .main > .section2 .inner .text p.t1 span{font-weight:700}
#container .main > .section2 .inner .text p.t2{position:absolute; left:4px; top:174px; width:400px; font-size:16px; line-height:25px; color:#000}
#container .main > .section2 .inner .text a{position:absolute; left:4px; top:338px; display:block; width:127px; padding-left:17px; height:44px; font-family:"Khand"; letter-spacing:0; font-size:18px; line-height:48px; color:#000; font-weight:700; overflow:hidden; border:3px solid #000; text-decoration:none}
#container .main > .section2 .inner .text a:hover{background:#000; color:#fff}
#container .main > .section3{position:relative}
#container .main > .section3 .inner{position:absolute; left:50%; margin-left:96px; top:50%; margin-top:-278px; width:400px; height:400px}
#container .main > .section3 .inner p.t1{position:absolute; left:0; top:0; font-family:"Khand"; letter-spacing:4px; font-size:87px; line-height:80px; color:#fff}
#container .main > .section3 .inner p.t1 span{font-weight:700}
#container .main > .section3 .inner p.t2{position:absolute; left:4px; top:174px; font-size:16px; line-height:25px; color:#fff}
#container .main > .section3 .inner a{position:absolute; left:4px; top:272px; display:block; width:127px; padding-left:17px; height:44px; font-family:"Khand"; letter-spacing:0; font-size:18px; line-height:48px; color:#fff; font-weight:700; overflow:hidden; border:3px solid #fff; text-decoration:none}
#container .main > .section3 .inner a:hover{border:3px solid #cddc29; color:#cddc29}
#container .main > .section3 .inner2{position:absolute; left:50%; margin-left:36px; top:72%; margin-top:0; width:570px; height:400px}
#container .main > .section3 .inner2 ul li{position:relative; float:left; width:190px; height:190px; overflow:hidden; cursor:pointer}
#container .main > .section3 .inner2 ul li .blind{position:absolute; left:0; top:0; width:190px; height:190px; background:url(../images/main/section3_tool.png) no-repeat; z-index:100}
#container .main > .section4{position:relative}
#container .main > .section4 .inner{position:absolute; left:50%; margin-left:-550px; top:50%; margin-top:-323px; width:1100px; height:950px}
#container .main > .section4 .inner p.t1{position:absolute; left:0; top:0; width:100%; font-family:"Khand"; letter-spacing:4px; font-size:87px; line-height:80px; color:#000; text-align:center}
#container .main > .section4 .inner p.t1 span{font-weight:700}
#container .main > .section4 .inner p.t2{position:absolute; left:0; top:80px; width:100%; font-size:16px; line-height:25px; color:#000; margin-top:16px; text-align:center}
#container .main > .section4 .inner .gallery{position:relative; width:900px; margin:195px auto 0}
#container .main > .section4 .inner .gallery .bx-wrapper{width:100%; height:100%}
#container .main > .section4 .inner .gallery .bx-wrapper .bx-controls-direction{position:absolute; left:0; top:172px; width:100%}
#container .main > .section4 .inner .gallery .bx-wrapper .bx-controls-direction a.bx-prev{position:absolute; left:-122px; top:0; display:block; text-indent:-9999em; width:60px; height:80px; background:url(../images/menu/btn_prev.png) 0 0 no-repeat}
#container .main > .section4 .inner .gallery .bx-wrapper .bx-controls-direction a.bx-prev:hover{background:url(../images/menu/btn_prev_on.png) 0 0 no-repeat}
#container .main > .section4 .inner .gallery .bx-wrapper .bx-controls-direction a.bx-next{position:absolute; right:-122px; top:0; display:block; text-indent:-9999em; width:60px; height:80px; background:url(../images/menu/btn_next.png) 0 0 no-repeat}
#container .main > .section4 .inner .gallery .bx-wrapper .bx-controls-direction a.bx-next:hover{background:url(../images/menu/btn_next_on.png) 0 0 no-repeat}
#container .main > .section4 .inner .gallery .info{width:100%; margin-top:24px}
#container .main > .section4 .inner .gallery .info p.t{float:left; font-size:16px; line-height:26px; color:#000}
#container .main > .section4 .inner .gallery .info p.d{float:right; font-family:"Khand"; font-size:20px; line-height:26px; color:#000; margin-top:3px}
#container .main > .section4 .inner .gallery .info a{color:#000}



/* about */
#container .about > .top{height:560px; background:url(../images/about/top.jpg) center no-repeat; color:#000}
#container .about > .content{width:100%; height:2190px; background:url(../images/about/bg.png) center 152px no-repeat #f7f7f7}
#container .about > .content .inner{position:relative; width:1200px; margin:0 auto}
#container .about > .content .inner .text1{position:absolute; left:0; top:-37px; font-family:"Khand"; letter-spacing:4px; font-size:85px; line-height:85px; color:#000; font-weight:600}
#container .about > .content .inner .text1 p{margin-left:10px}
#container .about > .content .inner .text2{position:absolute; right:0; top:45px; width:500px}
#container .about > .content .inner .text2 p.t1{font-size:30px; line-height:32px; color:#000}
#container .about > .content .inner .text2 p.t1 span{font-weight:700}
#container .about > .content .inner .text2 p.t2{font-size:15px; line-height:26px; color:#000; margin-top:33px}
#container .about > .content .inner .item1{position:absolute; left:0; top:376px; width:554px}
#container .about > .content .inner .item1 .img{position:relative; width:554px; height:387px}
#container .about > .content .inner .item1 .img img{position:absolute; left:0; top:0; z-index:100}
#container .about > .content .inner .item1 .img .bg{position:absolute; right:0; bottom:0; width:515px; height:370px; background:#e6e6e6}
#container .about > .content .inner .item1 .info{margin:46px 0 0 39px}
#container .about > .content .inner .item2{position:absolute; right:0; top:535px; width:503px}
#container .about > .content .inner .item2 .img{position:relative; width:503px; height:555px}
#container .about > .content .inner .item2 .img img{position:absolute; left:0; top:34px; z-index:100}
#container .about > .content .inner .item2 .img .bg{position:absolute; right:0; top:0; width:367px; height:514px; background:#e6e6e6}
#container .about > .content .inner .item2 .info{margin:53px 0 0 116px}
#container .about > .content .inner .item3{position:absolute; left:0; top:1157px; width:515px}
#container .about > .content .inner .item3 .img{position:relative; width:515px; height:595px}
#container .about > .content .inner .item3 .img img{position:absolute; right:0; top:0; z-index:100}
#container .about > .content .inner .item3 .img .bg{position:absolute; left:0; top:65px; width:470px; height:530px; background:#e6e6e6}
#container .about > .content .inner .item3 .info{margin:46px 0 0 40px}
#container .about > .content .inner .item4{position:absolute; right:0; top:1683px; width:534px}
#container .about > .content .inner .item4 .img{position:relative; width:534px; height:407px}
#container .about > .content .inner .item4 .img img{position:absolute; left:0; top:0; z-index:100}
#container .about > .content .inner .item4 .img .bg{position:absolute; right:0; top:37px; width:515px; height:370px; background:#e6e6e6}
#container .about > .content .inner .item .info p.t{font-family:"Khand"; letter-spacing:2px; font-size:50px; line-height:50px; color:#000}
#container .about > .content .inner .item .info p.t span{font-weight:700}
#container .about > .content .inner .item .info p.c{font-size:16px; line-height:25px; color:#000; margin-top:23px}
#container .about > .content .inner .item .info a{display:block; width:127px; padding-left:17px; height:44px; font-family:"Khand"; letter-spacing:0; font-size:18px; line-height:48px; color:#000; font-weight:700; overflow:hidden; border:3px solid #000; margin-top:27px; text-decoration:none}
#container .about > .content .inner .item .info a:hover{background:#000; color:#fff}
#container .about > .content .inner .item .img img{opacity:0}
#container .about > .contact{width:100%; margin:103px 0 120px}
#container .about > .contact .inner{width:1200px; margin:0 auto}
#container .about > .contact .inner p.title{font-family:"Khand"; letter-spacing:4px; font-size:87px; line-height:87px; color:#000; text-align:center}
#container .about > .contact .inner p.title span{font-weight:700}
#container .about > .contact .inner #map{width:1199px; height:349px; margin-top:19px; border:1px solid #efefef}
#container .about > .contact .inner .bottom{position:relative; margin-top:11px}
#container .about > .contact .inner .bottom ul li{clear:both; width:100%; height:30px; overflow:hidden}
#container .about > .contact .inner .bottom ul li:after{content:''; display:block; clear:both}
#container .about > .contact .inner .bottom ul li p.t{float:left; font-family:"Khand"; letter-spacing:1px; font-size:18px; line-height:34px; color:#000; font-weight:700; width:103px}
#container .about > .contact .inner .bottom ul li p.c{float:left; font-size:16px; line-height:30px; color:#000}
#container .about > .contact .inner .bottom a{position:absolute; right:0; top:9px; display:block; width:144px; font-size:16px; line-height:44px; color:#000; text-align:center; font-weight:700; border:3px solid #000; text-decoration:none}
#container .about > .contact .inner .bottom a:hover{background:#000; color:#fff}


/* menu */
#container .menu{margin-bottom:130px}
#container .menu > .dinner_m{width:100%; height:560px}
#container .menu > .dinner_m .inner{position:relative; width:1200px; margin:0 auto; z-index:100}
#container .menu > .dinner_m .inner a{display:block; position:absolute; right:0; top:140px; width:350px; height:280px}
#container .menu > .dinner_m .inner a p{position:absolute; left:40px; top:35px; font-family:"Khand"; letter-spacing:0px; font-size:70px; line-height:70px; color:#cddc29; z-index:500}
#container .menu > .dinner_m .inner a p span{font-weight:700}
#container .menu > .dinner_m .inner a .ico{position:absolute; right:40px; bottom:40px; width:30px; height:30px; background:url(../images/menu/ico_green.png) no-repeat; z-index:500}
#container .menu > .dinner_m .inner a .bg{position:absolute; left:0; left:0; width:350px; height:280px; background:#000; opacity:0.7; filter:alpha(opacity=70)}
#container .menu > .dinner_m .inner a:hover p{color:#000}
#container .menu > .dinner_m .inner a:hover .ico{background:url(../images/menu/ico_white.png) no-repeat}
#container .menu > .dinner_m .inner a:hover .bg{background:#cddc29; opacity:1; filter:alpha(opacity=100)}
#container .menu > .dinner_m .img_area{position:absolute; left:50%; margin-left:-960px; top:0; width:1920px; height:560px; overflow:hidden}
#container .menu > .dinner_m .img_area .img{visibility:hidden; width:1920px; height:560px; background:url(../images/menu/dinner_menu.jpg) center top no-repeat}
#container .menu > .dinner_c{position:relative; width:100%; height:750px}
#container .menu > .dinner_c a{display:block; position:absolute; left:50%; top:150px; margin-left:-600px; width:1200px; height:450px; background:url(../images/menu/dinner_course.jpg) no-repeat; z-index:500}
#container .menu > .dinner_c a p{font-family:"Khand"; letter-spacing:2px; font-size:70px; line-height:70px; color:#fff; z-index:500}
#container .menu > .dinner_c a p.t1{position:absolute; left:75px; top:75px; font-weight:700; letter-spacing:3px}
#container .menu > .dinner_c a p.t2{position:absolute; left:75px; top:145px}
#container .menu > .dinner_c a .ico{position:absolute; left:298px; top:81px; width:30px; height:30px; background:url(../images/menu/ico_green.png) no-repeat; z-index:500}
#container .menu > .dinner_c a:hover p{color:#cddc29}
#container .menu > .dinner_c .bg{position:absolute; left:0; top:0; width:100%; height:375px; background:#cddc29}
#container .menu > .lunch{position:relative; width:100%; height:393px}
#container .menu > .lunch a{display:block; position:absolute; left:50%; top:0; margin-left:15px; width:700px; height:391px; background:url(../images/menu/lunch_menu.jpg) no-repeat; z-index:500}
#container .menu > .lunch a p{font-family:"Khand"; letter-spacing:2px; font-size:70px; line-height:70px; color:#000; text-align:right; z-index:500}
#container .menu > .lunch a p.t1{position:absolute; left:-90px; top:70px; font-weight:700; letter-spacing:3px}
#container .menu > .lunch a p.t2{position:absolute; left:-56px; top:140px}
#container .menu > .lunch a .ico{position:absolute; left:106px; top:77px; width:30px; height:30px; background:url(../images/menu/ico_green.png) no-repeat; z-index:500}
#container .menu > .lunch a:hover p{color:#cddc29}
#container .menu > .promotion{position:relative; width:100%; height:378px; margin-top:-216px}
#container .menu > .promotion .inner{position:absolute; left:50%; top:0; margin-left:-1295px; width:1280px; height:378px; background:url(../images/menu/promotion_menu.jpg) right top no-repeat}
#container .menu > .promotion .inner a{display:block; position:absolute; right:0; top:0; width:585px; height:378px; z-index:500}
#container .menu > .promotion .inner a .box{position:absolute; left:462px; top:252px; width:438px; height:200px; background:#cddc29; z-index:500}
#container .menu > .promotion .inner a .box p{font-family:"Khand"; letter-spacing:2px; font-size:70px; line-height:70px; color:#000}
#container .menu > .promotion .inner a .box p.t1{position:absolute; left:37px; top:35px; font-weight:700; letter-spacing:3px}
#container .menu > .promotion .inner a .box p.t2{position:absolute; left:37px; top:105px}
#container .menu > .promotion .inner a .box .ico{position:absolute; left:201px; top:112px; width:30px; height:30px; background:url(../images/menu/ico_white.png) no-repeat; z-index:500}
#container .menu > .promotion .inner a:hover .box{background:#000}
#container .menu > .promotion .inner a:hover .box p{color:#cddc29}

#container .menu > .cafe{position:relative; width:100%; height:400px; margin:250px 0 0;}
#container .menu > .cafe a{display:block; position:absolute; left:50%; top:0; margin-left:-600px; width:1200px; height:400px; background:url(../images/menu/cafe_menu.jpg) no-repeat; z-index:500}
#container .menu > .cafe a p{font-family:"Khand"; letter-spacing:2px; font-size:70px; line-height:70px; color:#000; z-index:500}
#container .menu > .cafe a p.t1{position:absolute; left:75px; top:50%; margin:-29px 0 0; font-weight:700; letter-spacing:3px}
#container .menu > .cafe a .ico{position:absolute; left:233px; top:50%; margin:-23px 0 0; width:30px; height:30px; background:url(../images/menu/ico_green.png) no-repeat; z-index:500}
#container .menu > .cafe a:hover p{color:#cddc29}
#container .menu > .cafe .bg{position:absolute; left:0; top:0; width:100%; height:375px; background:#cddc29}

#container .menu > .etc{width:1200px; margin:150px auto 0}
#container .menu > .etc ul{width:1230px; height:408px; margin-left:-15px}
#container .menu > .etc ul:after{content:''; display:block; clear:both}
#container .menu > .etc ul li{float:left; width:380px; margin:0 15px}
#container .menu > .etc ul li a{position:relative; display:block; text-decoration:none}
#container .menu > .etc ul li a p{position:absolute; left:0; top:338px; font-family:"Khand"; letter-spacing:3px; font-size:70px; line-height:70px; color:#000; font-weight:700}
#container .menu > .etc ul li a .ico{position:absolute; left:0; top:345px; width:30px; height:30px; background:url(../images/menu/ico_green.png) no-repeat; z-index:500}
#container .menu > .etc ul li.wine a .ico{left:164px}
#container .menu > .etc ul li.beer a .ico{left:161px}
#container .menu > .etc ul li.beverage a .ico{left:305px}
#container .menu > .etc ul li a:hover p{color:#cddc29}


/* menu_view */
#container .menu_view > .top{background:url(../images/menu/top.jpg) center no-repeat; color:#000}
#container .menu_view > .content .title{position:relative; text-align:center; z-index:1000}
#container .menu_view > .content .title .box{position:relative; display:inline-block; padding-right:50px}
#container .menu_view > .content .title .box p{font-family:"Khand"; letter-spacing:1px; font-size:50px; line-height:50px; color:#000}
#container .menu_view > .content .title .box a{display:block; position:absolute; right:0; top:5px; width:34px; height:34px; background:url(../images/menu/ico_menu_open.png) no-repeat; font-size:0; line-height:0; letter-spacing:0; overflow:hidden}
#container .menu_view > .content .title .box a.on{background:url(../images/menu/ico_menu_close.png) no-repeat}
#container .menu_view > .content .title .pop_menu{display:none; position:absolute; left:50%; top:60px; margin-left:-275px; width:550px; height:350px; background:url(../images/menu/menu_bg.png) no-repeat}
#container .menu_view > .content .title .pop_menu ul.menu1{position:absolute; left:50px; top:45px}
#container .menu_view > .content .title .pop_menu ul.menu2{position:absolute; right:50px; top:45px}
#container .menu_view > .content .title .pop_menu ul li{margin-bottom:20px}
#container .menu_view > .content .title .pop_menu ul li a{display:block; width:178px; height:48px; padding-left:20px; font-family:"Khand"; letter-spacing:1px; font-size:20px; line-height:48px; color:#fff; text-align:left; border:1px solid #fff; text-decoration:none}
#container .menu_view > .content .title .pop_menu ul li a:hover{color:#cddc29; border:1px solid #cddc29}
#container .menu_view > .content .title .pop_menu ul li.on a{color:#cddc29; border:1px solid #cddc29}
#container .menu_view > .content .title p.date{position:absolute; right:0; top:20px; font-family:"Khand"; letter-spacing:1px; font-size:20px; line-height:20px; color:#000}
#container .menu_view > .content .snb{width:100%; height:60px; border-top:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; text-align:center; margin-top:38px}
#container .menu_view > .content .snb ul.menu{display:inline-block; *display:inline; zoom:1}
#container .menu_view > .content .snb ul.menu li{float:left}
#container .menu_view > .content .snb ul.menu li a{display:block; font-family:"Khand"; font-size:18px; line-height:60px; color:#000; letter-spacing:1px; padding:0 10px; margin:0 20px}
#container .menu_view > .content .snb ul.menu li a:hover{text-decoration:none}
#container .menu_view > .content .snb ul.menu li.on a{color:#b0b300; border-bottom:1px solid #b0b300}
#container .menu_view > .content .visual{position:relative; width:100%; margin-top:50px}
#container .menu_view > .content .visual .bx-wrapper{width:100%; height:100%}
#container .menu_view > .content .visual .bx-wrapper .bx-pager{position:absolute; left:0; top:573px; width:100%; text-align:center; z-index:2000}
#container .menu_view > .content .visual .bx-wrapper .bx-pager .bx-pager-item{display:inline-block; *display:inline; zoom:1}
#container .menu_view > .content .visual .bx-wrapper .bx-pager .bx-pager-item a.bx-pager-link{display:block; width:30px; height:30px; background:url(../images/menu/thum.png) 0 0 no-repeat; text-indent:-9999em}
#container .menu_view > .content .visual .bx-wrapper .bx-pager .bx-pager-item a.active{background:url(../images/menu/thum_on.png) 0 0 no-repeat}
#container .menu_view > .content .visual .bx-wrapper .bx-controls-direction{position:absolute; left:0; top:236px; width:100%; z-index:1000}
#container .menu_view > .content .visual .bx-wrapper .bx-controls-direction a{opacity:0.3; filter:alpha(opacity=30)}
#container .menu_view > .content .visual .bx-wrapper .bx-controls-direction a:hover{opacity:1.0; filter:alpha(opacity=100)}
#container .menu_view > .content .visual .bx-wrapper .bx-controls-direction a.bx-prev{position:absolute; left:20px; top:0; display:block; text-indent:-9999em; width:60px; height:80px; background:url(../images/menu/btn_prev.png) 0 0 no-repeat}
#container .menu_view > .content .visual .bx-wrapper .bx-controls-direction a.bx-next{position:absolute; right:20px; top:0; display:block; text-indent:-9999em; width:60px; height:80px; background:url(../images/menu/btn_next.png) 0 0 no-repeat}
#container .menu_view > .content .btn{width:100%; margin-top:100px; text-align:right}
#container .menu_view > .content .btn a{display:inline-block; font-family:"Khand"; letter-spacing:1px; font-size:18px; height:34px; overflow:hidden; line-height:38px; color:#fff; background:url(../images/menu/ico_pdf.png) 121px center no-repeat #000; padding:0 38px 0 13px; text-decoration:none}
#container .menu_view > .content ul.list{width:100%; border-top:1px solid #dcdddd; margin-top:20px}
#container .menu_view > .content ul.list li{border-bottom:1px solid #dcdddd; padding:45px 0}
#container .menu_view > .content ul.list li p.t1{font-family:"Khand"; font-weight:600; letter-spacing:1px; font-size:20px; line-height:30px; color:#000}
#container .menu_view > .content ul.list li p.t2{font-size:17px; line-height:30px; color:#000}


/* gallery */
#container .gallery > .top{background:url(../images/gallery/top.jpg) center no-repeat; color:#fff}
#container .gallery > .top a{color:#fff}
#container .gallery > .snb{width:100%; height:60px; border-bottom:1px solid #e2e2e2}
#container .gallery > .snb .inner{position:relative; width:1200px; margin:0 auto; text-align:center}
#container .gallery > .snb .inner ul.menu{display:inline-block; *display:inline; zoom:1; margin-right:80px}
#container .gallery > .snb .inner ul.menu li{float:left}
#container .gallery > .snb .inner ul.menu li button{display:block; font-family:"Khand"; font-size:18px; line-height:60px; color:#000; letter-spacing:1px; padding:0 10px; margin:0 20px;background:transparent;cursor:pointer}
#container .gallery > .snb .inner ul.menu li button:hover{text-decoration:none}
#container .gallery > .snb .inner ul.menu li.on button{color:#b0b300; border-bottom:1px solid #b0b300; font-weight:600}
#container .gallery > .snb .inner .search_area{position:absolute; right:0; top:0; width:328px; height:60px; text-align:left; overflow:hidden}
#container .gallery > .snb .inner .search_area a.btn{position:absolute; left:0; top:0; display:block; width:60px; height:60px; background:url(../images/gallery/ico_search.png) center no-repeat; font-size:0; line-height:0; letter-spacing:0; overflow:hidden}
#container .gallery > .snb .inner .search_area .search{display:; position:absolute; left:-308px; top:15px; width:308px; height:30px; background:url(../images/gallery/search_bg.gif) no-repeat}
#container .gallery > .snb .inner .search_area .search input[type=text]{float:left; width:242px; padding-right:10px; height:30px; font-size:13px; line-height:30px; color:#000; margin-left:20px; background:#f4f4f4}
#container .gallery > .snb .inner .search_area .search input[type=submit]{float:left; width:36px; height:30px; background:url(../images/gallery/btn_search.gif) no-repeat; font-size:0; line-height:0; letter-spacing:0; overflow:hidden; cursor:pointer}
#container .gallery > .content .search_result{font-size:30px; line-height:32px; color:#000; text-align:center; margin-bottom:50px}
#container .gallery > .content .search_result span{color:#b0b300}

#container .gallery > .content .search_btn span{position:relative;float:right;top:-80px;left:-235px;}} /*20170213 카페인 추가*/

#container .gallery > .content .grid{width:100%}
#container .gallery > .content .grid:after{content:''; display:block; clear:both}
#container .gallery > .content .grid .grid-item{padding-bottom:24px}
#container .gallery > .content .grid .grid-item a{text-decoration:none}
#container .gallery > .content .grid .grid-item a:hover ul{background:#cddc29}
#container .gallery > .content .grid .grid-item a ul{width:382px;border:1px solid #e2e2e2; } /*20170209 카페인 수정*/
#container .gallery > .content .grid .grid-item a ul li{position:relative}
#container .gallery > .content .grid .grid-item a ul li.img{overflow:hidden; }
#container .gallery > .content .grid .grid-item a ul li.img img{width:384px;  }
#container .gallery > .content .grid .grid-item a ul li.info{padding:25px 30px} /*20170209 카페인 수정*/
#container .gallery > .content .grid .grid-item a ul li .top{width:100%}
#container .gallery > .content .grid .grid-item a ul li .top:after{content:''; display:block; clear:both}
#container .gallery > .content .grid .grid-item a ul li .top p.ctg{float:left; font-family:"Khand"; font-size:25px; line-height:28px; color:#000; letter-spacing:1px}
#container .gallery > .content .grid .grid-item a ul li .top p.date{float:right; font-family:"Khand"; font-size:18px; line-height:28px; color:#000; letter-spacing:1px}
#container .gallery > .content .grid .grid-item a ul li .text{clear:both; height:50px; font-size:16px; line-height:25px; color:#000; margin-top:12px}
#container .gallery > .content .grid .grid-item a ul.video li.img .ico{position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/gallery/ico_video.png) center no-repeat; z-index:1000}
#container .gallery > .content .btn{text-align:center; margin-top:75px}
#container .gallery > .content .btn a.more{display:inline-block; width:200px; height:60px; line-height:64px; background:#000; font-family:"Khand"; letter-spacing:1px; font-size:20px; color:#fff; text-align:center; overflow:hidden}
#container .gallery > .content .btn a:hover{text-decoration:none}


/* list_viewe */
#container .list_view > .content .top{width:100%; height:75px; border-bottom:1px solid #dcdddd}
#container .list_view > .content .top:after{content:''; display:block; clear:both}
#container .list_view > .content .top .title{float:left; font-size:25px; line-height:27px; color:#000}
#container .list_view > .content .top .title span.subject{font-weight:300}
#container .list_view > .content .top .title span.ctg{font-family:"Khand"; letter-spacing:1px; line-height:30px}
#container .list_view > .content .top .title span.line{background:url(../images/gallery/line.gif) center no-repeat; padding:0 22px}
#container .list_view > .content .top .date{float:right; font-family:"Khand"; letter-spacing:1px; font-size:18px; line-height:38px; color:#000}
#container .list_view > .content .text{font-size:16px; line-height:30px; color:#000; padding:45px 0}
#container .list_view > .content ul.bottom{width:100%; border-top:1px solid #dcdddd; border-bottom:1px solid #dcdddd}
#container .list_view > .content ul.bottom:after{content:''; display:block; clear:both}
#container .list_view > .content ul.bottom li{float:left; height:69px}
#container .list_view > .content ul.bottom li.prev{width:600px; border-right:1px solid #dcdddd; background:url(../images/gallery/ico_prev.png) 30px center no-repeat}
#container .list_view > .content ul.bottom li.next{width:599px; background:url(../images/gallery/ico_next.png) 76px center no-repeat}
#container .list_view > .content ul.bottom li a{display:block; width:100%; text-decoration:none}
#container .list_view > .content ul.bottom li a .ico{font-family:"Khand"; letter-spacing:1px; font-size:20px; line-height:73px; color:#000}
#container .list_view > .content ul.bottom li.prev a .ico{padding:0 26px 0 46px}
#container .list_view > .content ul.bottom li.next a .ico{padding:0 43px 0 29px}
#container .list_view > .content ul.bottom li a .subject{font-size:16px; line-height:69px; color:#000}
#container .list_view > .content ul.bottom li a:hover .subject{text-decoration:underline}
#container .list_view > .content .btn{text-align:center; margin-top:50px}
#container .list_view > .content .btn a{display:inline-block; width:200px; height:60px; line-height:64px; background:#000; font-family:"Khand"; letter-spacing:1px; font-size:20px; color:#fff; text-align:center; overflow:hidden}
#container .list_view > .content .btn a:hover{text-decoration:none}


/* recipes */
#container .recipes > .top{background:url(../images/recipes/top.jpg) center no-repeat; color:#000}
#container .recipes > .content ul.list{width:100%; padding-bottom:20px}
#container .recipes > .content ul.list li{clear:both; width:100%; border-bottom:1px solid #dcdddd; padding-bottom:66px; margin-bottom:30px}
#container .recipes > .content ul.list li:after{content:''; display:block; clear:both}
#container .recipes > .content ul.list li .img{position:relative; margin-bottom:28px}
#container .recipes > .content ul.list li .img .ico_new{position:absolute; right:0; top:0;}
#container .recipes > .content ul.list li .title{float:left}
#container .recipes > .content ul.list li .title a{color:#000}
#container .recipes > .content ul.list li .title p{font-size:17px; line-height:20px; color:#000}
#container .recipes > .content ul.list li .title p span{font-family:"Khand"; letter-spacing:1px; font-size:19px; line-height:24px}
#container .recipes > .content ul.list li .date{float:right; font-family:"Khand"; letter-spacing:1px; font-size:19px; line-height:24px; color:#000}


/* news */
#container .news > .top{background:url(../images/news/top.jpg) center no-repeat; color:#000}
#container .news > .content .grid{width:100%}
#container .news > .content .grid:after{content:''; display:block; clear:both}
#container .news > .content .grid .grid-item{padding-bottom:25px}
#container .news > .content .grid .grid-item a{text-decoration:none}
#container .news > .content .grid .grid-item a:hover ul li.info{background:#cddc29; border:1px solid #cddc29}
#container .news > .content .grid .grid-item a:hover ul li.info p.subject span{background:#000; color:#cddc29}
#container .news > .content .grid .grid-item a:hover ul.text li.info{background:#cddc29; border:1px solid #cddc29}
#container .news > .content .grid .grid-item a ul.text li.info{}  /*20170209 카페인 수정*/
#container .news > .content .grid .grid-item a ul{width:382px;border:1px solid #e2e2e2;}  /*20170209 카페인 수정*/
#container .news > .content .grid .grid-item a ul li{position:relative}
#container .news > .content .grid .grid-item a ul li.img{overflow:hidden; z-index:100}
#container .news > .content .grid .grid-item a ul li.img img{width:384px;}
#container .news > .content .grid .grid-item a ul li.info{padding:29px 0 25px; text-align:center; margin-top:-1px}
#container .news > .content .grid .grid-item a ul li.info p.ctg{display:inline-block; font-family:"Khand"; letter-spacing:1px; font-size:20px; line-height:20px; color:#000; border-bottom:1px solid #000}
#container .news > .content .grid .grid-item a ul li.info p.subject{font-size:16px; line-height:25px; color:#000; margin-top:15px;    word-break: keep-all;}
#container .news > .content .grid .grid-item a ul li.info p.subject span{display:inline-block; font-size:13px; line-height:20px; background:#b0b300; color:#fff; padding:0 5px; margin-top:3px}
#container .news > .content .grid .grid-item a ul li.info p.date{font-family:"Khand"; letter-spacing:1px; font-size:18px; line-height:20px; color:#000; margin-top:38px}
#container .news > .content .btn{text-align:center; margin-top:75px}
#container .news > .content .btn a.more{display:inline-block; width:200px; height:60px; line-height:64px; background:#000; font-family:"Khand"; letter-spacing:1px; font-size:20px; color:#fff; text-align:center; overflow:hidden}
#container .news > .content .btn a:hover{text-decoration:none}


/* map */
#container .map > .map_area{width:100%; height:560px}
#container .map > .map_area .top{position:absolute; left:0; top:0; width:100%; z-index:1000}
#container .map > .map_area .top .inner{position:relative; width:1200px; margin:0 auto; z-index:1000; color:#000}
#container .map > .map_area .top .inner p.location{position:absolute; left:0; top:15px; font-family:"Khand"; font-size:15px; line-height:20px; letter-spacing:1px}
#container .map > .map_area .top .inner p.title{font-family:"Khand"; font-weight:700; letter-spacing:3px; font-size:87px; line-height:90px; text-align:center; padding-top:46px}
#container .map > .map_area .top .inner p.title span{font-family:"Noto Sans KR"; font-weight:400; font-size:75px; line-height:76px; letter-spacing:0}
#container .map > .map_area .top .bg{position:absolute; left:0; top:0; width:100%; height:170px; background:#cddc29; opacity:0.8; filter:alpha(opacity=80)}
#container .map > .map_area #map{width:100%; height:560px}
#container .map > .content .left{float:left; width:330px; height:590px; background:#f7f8f8}
#container .map > .content .left dl{margin:26px 0 0 30px; font-family:"Khand"; letter-spacing:1px; font-size:18px; line-height:30px; color:#000}
#container .map > .content .left dl dt{clear:both; float:left; font-weight:700; width:100px}
#container .map > .content .left dl dd{float:left; margin-bottom:30px}
#container .map > .content .left dl dd p.t{font-weight:700; margin-top:30px}
#container .map > .content .left dl dd p.t:first-child{margin-top:0}
#container .map > .content .left dl dd p.c span{display:block;}
#container .map > .content .left dl dd p.c span em{display:inline-block;}
#container .map > .content .left dl dd p.c span em:first-child{width:65px;}

#container .map > .content .left dl dd.addr{margin-top:-2px}
#container .map > .content .left dl dd p.kr{font-family:"Noto Sans KR"; letter-spacing:0; font-size:16px; line-height:30px; color:#000}
#container .map > .content .right{float:right}
#container .map > .content .right h2{font-family:"Khand"; font-weight:700; letter-spacing:1px; font-size:18px; line-height:30px; color:#000; margin:33px 0 11px}
#container .map > .content .right p{font-size:16px; line-height:30px; color:#000}
#container .map > .content .right p.t{font-weight:700}
#container .map > .content .right p.c{margin-bottom:30px}


/* footer */
#footer{clear:both; width:100%}
#footer .copyright{width:100%; background:#f3f3f3; padding:35px 0 55px}
#footer .copyright .inner{position:relative; width:1200px; margin:0 auto}
#footer .copyright .inner p{font-size:16px; line-height:30px; color:#000}
#footer .copyright .inner ul.sns{position:absolute; right:0; top:0;}
#footer .copyright .inner ul.sns li{float:left; margin:0 5px}
#footer .bottom{width:100%; height:70px; background:#000}
#footer .bottom .inner{position:relative; width:1200px; margin:0 auto}
#footer .bottom .inner .family_site{position:absolute; left:0; top:10px}
#footer .bottom .inner .family_site > a{position:relative; display:block; width:194px; height:44px; line-height:48px; font-size:18px; font-family:"Khand"; font-weight:700; color:#fff; letter-spacing:1px; border:3px solid #fff; background:url(../images/common/ico_family.png) 159px center no-repeat #000; z-index:1000}
#footer .bottom .inner .family_site > a.on{background:url(../images/common/ico_family_down.png) 159px center no-repeat #000}
#footer .bottom .inner .family_site > a > span{margin-left:20px}
#footer .bottom .inner .family_site > a:hover{text-decoration:none}
#footer .bottom .inner .family_site > .list{position:absolute; left:0; bottom:50px; width:200px; height:0; background:#000; overflow:hidden}
#footer .bottom .inner .family_site > .list > ul{margin-top:24px}
#footer .bottom .inner .family_site > .list > ul li{margin-left:29px}
#footer .bottom .inner .family_site > .list > ul li a{font-family:"Khand"; letter-spacing:1px; font-size:16px; line-height:26px; color:#fff}
#footer .bottom .inner .family_site > .list > ul li a:hover{color:#cddc29}
#footer .bottom .inner a.top{position:absolute; right:0; top:0; font-family:"Khand"; letter-spacing:1px; font-size:18px; line-height:70px; color:#fff}


/* simtemap */
#sitemap{position:fixed; right:-314px; top:0; width:314px; background:url(../images/common/sitemap_bg.png) repeat-y; z-index:5000}
#sitemap .inner{width:300px; margin-left:14px; background:#fff}
#sitemap .inner .top{height:100px; background:#000}
#sitemap .inner .top .box{position:absolute; left:50%; top:41px; margin-left:-100px; width:200px}
#sitemap .inner .top .box a{position:absolute; right:0; top:0}
#sitemap .inner .list ul.menu > li > a{display:block; height:60px; overflow:hidden; font-family:"Khand"; letter-spacing:1px; font-size:18px; line-height:64px; color:#000; padding-left:50px; text-decoration:none}
#sitemap .inner .list ul.menu > li:hover{background:#cddc29}
#sitemap .inner .list ul.menu > li > ul.sub{display:none; background:#f2f2f3; padding:22px 0 20px}
#sitemap .inner .list ul.menu > li > ul.sub li{margin-left:70px}
#sitemap .inner .list ul.menu > li > ul.sub li a{font-family:"Khand"; letter-spacing:1px; font-size:16px; line-height:30px; color:#000;}


/* paginate */
.paginate{width:100%; text-align:center; font-family:"Khand"; letter-spacing:1px; font-size:20px; line-height:20px; color:#000}
.paginate a{color:#000; display:inline-block}
.paginate a.btn{padding:0 16px}
.paginate a.num,
.paginate a.curr{padding:0 10px}
.paginate a.curr{font-weight:700}

.ready_text{font-size:30px; line-height:90px; letter-spacing:1px; text-align:center; padding-top:96px;padding-bottom:50px; color:#000;} /* 20170213 카페인 수정 */


/* static 으로 전환하면서 추가된 */
.search_area{display:none;}
#container .gallery > .snb .inner ul.menu{margin-right:0;}

/* strapi 적용하면서 추가된 */
.current-cat,nav,#container .gallery .inner .top .tab{text-transform:uppercase}
#container .menu_view ul.list li p.t2{word-break: keep-all;}
.spinner{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  overflow:hidden;
  background: #fff;
  z-index: 99999;
}
.spinner:after,
.grid:after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:0.4;fill:%23b0b300;%7D.fa-primary%7Bfill:%23b0b300;%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M224 32c0-17.7 14.3-32 32-32C397.4 0 512 114.6 512 256c0 46.6-12.5 90.4-34.3 128c-8.8 15.3-28.4 20.5-43.7 11.7s-20.5-28.4-11.7-43.7c16.3-28.2 25.7-61 25.7-96c0-106-86-192-192-192c-17.7 0-32-14.3-32-32z'/%3E%3Cpath class='fa-secondary' d='M256 64C150 64 64 150 64 256s86 192 192 192c70.1 0 131.3-37.5 164.9-93.6l.1 .1c-6.9 14.9-1.5 32.8 13 41.2c15.3 8.9 34.9 3.6 43.7-11.7c.2-.3 .4-.6 .5-.9l0 0C434.1 460.1 351.1 512 256 512C114.6 512 0 397.4 0 256S114.6 0 256 0c-17.7 0-32 14.3-32 32s14.3 32 32 32z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  background-size:100px 100px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.spinner.spinner-sticky{
  position:sticky;
  height:60px;
  margin:20px 0;
  background:none;
}
.spinner.spinner-sticky:after{
  background-size:auto 100%;
}
.grid{
  transition:height .3s;
  overflow:hidden;
  min-height:100px;
}
.grid:after{
  top:auto;bottom:0;
  height:60px;
  background-size:auto 100%;
  transition:opacity .3s;
  opacity:0;
  pointer-events: none;
}
.grid.isLoading:after{
  opacity:1;
}
.grid-item .img img{
  transition:.5s;
}
.grid-item:hover .img img{
  transform:scale(1.2);
}