@charset "utf-8";
@import url(reset.css);

/*color #65abce   #7f6145   #592448   #7d426c*/
/*h2:font-size:0;   
  h3:font-size:font:32px/1.5 "roboto"; font-weight:400;color:#65abce;

*/

/*=====================================================section new*/

.new {
    max-width:1900px;
}
h2 {
    font-size:0;
}
.new_wrap{
    width:1272px;
    margin:50px auto;
}
.new_wrap>h3 {
    text-align:center;
    color:#65abce;
    font:32px/1.5 "roboto";
    font-weight:100;
}

.line {
    width:100%;
    height:36px;
    margin:50px auto;
    background: url(../img/common/layoutpattern.png) no-repeat center center;
}

.new_wrap >.new_menu {
    width:100%;
	margin:0 25px 0 25px;
    /*background: #faf9f0;*/
    /*background: #fff;*/
}
.new_wrap >.new_menu>.know{
    width:100%;
	text-align:center;
}
.new_wrap >.new_menu>.know>li {
    margin-top:100px;
	
}
.know>li>span{
    display: inline-block;
    width:190px;
    height:50px; 
    color:#666;
    font-size:12px;
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    text-align:center;
    border:0px solid #777;
    padding-right:15px;
}


/*=======================================================section eventbox*/


.eventbox {
    max-width:1272px;
    /*background: #ddd;*/
    height:650px;
	margin:0 auto;
}

.event>h3 {
	color:#592448;
    font-size:55px;
    font-family: 'roboto';
    font-style: normal;
    font-weight: 100;
    text-align:center;
    padding-bottom:20px;
    margin-top:20px; 
}
.eventbox>.event {
    width:36.3207547169811%;
	float:left;
}
 
/*------------------------------------------------------ourmenu*/

.ourmenu {
	width:61.7924528%;
	height:650px;
    float:right;
	overflow:hidden;
}
.eventbox::before{
  content: "Our Menu";
  margin-left:-1000px;
  transition:margin-left 2.5s linear;
  opacity:0;
}
.ourmenu>h3 {
    color:#592448;
    font-size:55px;
    font-family: 'roboto';
    font-style: normal;
    font-weight: 100;
    text-align:center;
    padding-bottom:20px;
    margin-top:20px; 
}

.ourmenu .menu_wrap {
    width:100%;
    position:relative;
}


.main_tab>li {
    float:left;
    width:16.6666666%;
    height:50px;
    text-align:center;
    color:#592448;
    font-size:16px;
    font-family: 'roboto';
    font-style: normal;
    font-weight: 400;
    padding-top:15px;
    cursor:pointer;
    
}

.main_tab>li.active {
    background:#65abce;   /*#592448*/
    color:#fff;
    border-bottom:4px solid #592448;
}


/*------------------------------------------------------------#bread_sub*/

.b_sub,.k_sub,.c_sub, .s_sub,.bev_sub,.g_sub{                            
    background:url('../img/common/ourmenu_bg3.jpg') no-repeat;
    position:absolute;
    top:50px;
    height:462px;
}
.b_sub>ul,.k_sub>ul ,.c_sub>ul,.s_sub>ul,.bev_sub>ul,.g_sub>ul{
    width:100%;
    margin-top:15px;
    margin-bottom:15px;
}
.b_sub li,.k_sub li,.c_sub li,.s_sub li,.bev_sub li,.g_sub li{
    width:33.333333%;
    /*height:231px;*/
    /*background: #888;*/
    float:left;
    padding-left: 4.166666%;
    padding-right:2%;
    padding-top:40px;
    position:relative;
    
}
.b_sub li .menu_img,.k_sub li .menu_img,.c_sub li .menu_img,.s_sub li .menu_img,.bev_sub li .menu_img,.g_sub li .menu_img {
    display:block;
    width:100%;
    padding:20px 10px;
    text-align:center;
}

.b_sub .menu_hover,.k_sub .menu_hover,.c_sub .menu_hover,.s_sub .menu_hover,.bev_sub .menu_hover,.g_sub .menu_hover {
    position:absolute;
    top:50%;
    left:50%;
    width:80%;
    margin-top:-20%;
    margin-left:-40%;
    height:80%;
    background:rgba(51,51,51,0.4);
    border-radius:3px;
    display:none;
}

.b_sub .menu_hover .hover_wrap,.k_sub .menu_hover .hover_wrap,.c_sub .menu_hover .hover_wrap,.s_sub .menu_hover .hover_wrap,.bev_sub .menu_hover .hover_wrap,.g_sub .menu_hover .hover_wrap {
    position:absolute;
    top:50%;
    margin-top:-45px;
    left:50%;
    margin-left:-45px;
    width:100px;
    text-align:center;
}

.b_sub .menu_hover .hover_wrap>img,.k_sub .menu_hover .hover_wrap>img,.c_sub .menu_hover .hover_wrap>img,.s_sub .menu_hover .hover_wrap>img,.bev_sub .menu_hover .hover_wrap>img,.g_sub .menu_hover .hover_wrap>img {
    display:block;
    position:absolute;
    top:0px;
    left:50%;
    margin-left:-25px;
}

.b_sub .menu_hover .hover_wrap>span,.k_sub .menu_hover .hover_wrap>span,.c_sub .menu_hover .hover_wrap>span,.s_sub .menu_hover .hover_wrap>span,.bev_sub .menu_hover .hover_wrap>span,.g_sub .menu_hover .hover_wrap>span{
    display:block;
    padding-top:55px;
    padding-bottom:10px;
    text-align:center;
    font-size:12px;
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    color:#fff;
}
.b_sub .menu_hover .hover_wrap>button,.k_sub .menu_hover .hover_wrap>button,.c_sub .menu_hover .hover_wrap>button,.s_sub .menu_hover .hover_wrap>button,.bev_sub .menu_hover .hover_wrap>button,.g_sub .menu_hover .hover_wrap>button {
    display:block;
    position:absolute;
    left:50%;
    top:80px;
    margin-left:-22.5px;
}

.b_sub>ul>li,.k_sub>ul>li,.c_sub>ul>li,.s_sub>ul>li,.bev_sub>ul>li,.g_sub>ul>li {
    transition:all 3s;
}
.b_sub>ul>li:hover .menu_hover,.k_sub>ul>li:hover .menu_hover,.c_sub>ul>li:hover .menu_hover,.s_sub>ul>li:hover .menu_hover,.bev_sub>ul>li:hover .menu_hover,.g_sub>ul>li:hover .menu_hover {
    display:block;
}


/*------------------------------------------------------------#kitchen_sub*/


.k_sub li .menu_img {
    padding:0px 10px;
}

.k_sub .menu_hover {
    margin-left:-37%;
}



/*------------------------------------------------------------#cake_sub*/

.c_sub ul>li {
    padding-top:50px;
}
.c_sub li .menu_img {
    padding:0px 10px;
}

.c_sub .menu_hover {
    margin-left:-37%;
    height:80%;
}



/*--------------------------------------------------------#sandwich_sub*/


.s_sub ul>li {
    padding-top:150px;
}
.s_sub li .menu_img {
    padding:0px 10px;
}

.s_sub .menu_hover {
    margin-top:5%;
    margin-left:-37%;
    height:60%;
}


/*--------------------------------------------------------#beverage_sub*/

.bev_sub li {
    padding-top:10px;
    
}
.bev_sub li .menu_img {
    padding:10px 10px;
}

.bev_sub .menu_hover {
    margin-top:-30%;
    height:80%;
}


/*--------------------------------------------------------#gift_sub*/

.g_sub li {
    padding-top:20px;
    
}
.g_sub li .menu_img {
    padding:5px 10px;
}

.g_sub .menu_hover {
    margin-top:-30%;
    height:80%;
}

/*-----------------------------------------------------------------*/
.tab_none {
    display:none;
}

/*==================================================section brandstory*/

.brandstory {
    max-width:1900px;
    background: url(../img/brandhistory/history_bg.png)no-repeat;
    background-size: cover;
    height:512px;
}

.brandstory::before{
  content: "Brandstory";
  margin-left:-1000px;
  transition:margin-left 1s linear;
}
.story_outwrap {
    width:1272px;
    margin:0 auto;
}

.story_outwrap>.text {
    width:36.556603773584906%;
    float:left;
    margin-top:70px;
}

.story_outwrap >.story_wrap {
    float:right;
    width:61.79245283018868%;
    height:512px;
    margin:30px 0;
	overflow-y:hidden;
}

.story_outwrap>.text >img {
    display:block;
    width:319px;
    margin-left:75px;
    margin-top:50px;
}

.story_outwrap>.text .p1 {
    width:100%;
    font-size:32px;
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 700;
    color:#7f6145;
    line-height:1.5;
    text-align:center;
    margin:30px 0;

}

.story_outwrap>.text .p2 {
    width:100%;
    font-size:14px;
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    color:#7f6145;
    line-height:1.8;
    text-align:center;
    margin:30px 0;
}


.story_wrap>div{
    width:50%;
    height:50%;
    float:left;
    transition:all 2s;
}


.story_wrap>.story_box_1{
   background: url("../img/brandhistory/history_bg1.png")no-repeat center center;
   background-size: cover;
   position:relative;
   transition:all 1.5s;
   -webkit-transition:all 1.5s;
}

.story_wrap>.story_box_2{
   background: url("../img/brandhistory/history_bg2.png")no-repeat center center;
   background-size:cover;
   position:relative;
   overflow:hidden;
   transition:all 1.5s;
   -webkit-transition:all 1.5s;
}

.story_wrap>.story_box_3{
   background: url("../img/brandhistory/history_bg3.png")no-repeat center center; 
   overflow:hidden;
   background-size: cover;
   position:relative;
   transition:all 1.5s;
   -webkit-transition:all 1.5s;
}

.story_wrap>.story_box_4{
   background: url("../img/brandhistory/history_bg4.png")no-repeat center center; 
   overflow:hidden;
   background-size: cover;
   position:relative;
   transition:all 1.5s;
   -webkit-transition:all 1.5s;
}

.story_wrap>div>.hover_box {
    text-align:center;
    width:100%;
    height:512px;
    background: rgba(70,70,70,0.6);
    display:none;
}
.story_wrap>div>.hover_box>a{
    display:block;
    font-size:26px;
    font-family:'Nanum Gothic';
    font-style: normal;
    font-weight: 700;
    color:#fff;
    padding-top:100px;
    border-bottom:1px solid #fff;
    padding-bottom:10px;
}

.story_wrap>div:hover >.hover_box{
    display:block;
}


.sub_box1 {
    position:absolute;
    width:30px;
    height:30px;
    right:0;
    bottom:0;
    background:#fff;
    opacity:0.6;
    transition:all 0.3s;
}

.sub_box2 {
    position:absolute;
    width:30px;
    height:30px;
    left:0;
    bottom:0;
    background:#ead8c6;
    opacity:0.6;
    transition:all 0.3s;
}

.sub_box3 {
    position:absolute;
    width:30px;
    height:30px;
    right:0;
    top:0;
    background:#65abce;
    opacity:0.6;
    transition:all 0.3s;
}
.sub_box4 {
    position:absolute;
    width:30px;
    height:30px;
    left:0;
    top:0;
    background:#fff;
    opacity:0.6;
    transition:all 0.3s;
}
.story_wrap>.story_box_1:hover,.story_wrap>.story_box_2:hover,.story_wrap>.story_box_3:hover,.story_wrap>.story_box_4:hover{
    /*background-size:101%;
    -webkit-background-size:101%;*/
    
}


.story_wrap>div:hover >.sub_box1{
    border-radius:100% 0 0 0;
}
.story_wrap>div:hover >.sub_box2{
    border-radius:0 100% 0 0;
}
.story_wrap>div:hover >.sub_box3{
    border-radius:0 0 0 100%;
}
.story_wrap>div:hover >.sub_box4{
    border-radius:0 0 100% 0;
}

/*================================================section webzine_store*/

.webzine_store {
    max-width:1900px;
}

.webzine_store_wrap {
    width:1272px;
    height:750px;
    margin:30px auto;
}

.webzine {
    width:462px;
    float:left;
}

.web_imgs {
    width:100%;
    height:700px;
    
}
.web_slide1,.web_slide2,.web_slide3 {
    width:100%;
    position:relative; 
}
.web_slide3>img{
    border:1px solid #ddd;
}
 .web_hover1,.web_hover2,.web_hover3 {
    width:462px;
    height:700px;
    position:absolute;
    top:0;
    left:0;
    text-align:center;
    
    
    
}
.web_hover1>.web_p1>a::before,.web_hover2>.web_p1>a::before,.web_hover3>.web_p1>a::before {
    content:"";
    display:block;
    width:28px;
    height:7px;
    background:#7d426c;
    position:absolute;
    left:95px;
    top:73px;
    transition:all 0.4s;
}
 .web_hover1>.web_p1,.web_hover2>.web_p1,.web_hover3>.web_p1 {
    font:55px/1.5 "roboto"; 
    font-weight:100;
    color:#fff;
    padding:60px 0;
}

 .web_hover1>.web_bg1,.web_hover2>.web_bg1,.web_hover3>.web_bg1 {
    background: url(../img/common/web_pattern.png)no-repeat center center;
}

 .web_hover1>.web_p2,.web_hover2>.web_p2,.web_hover3>.web_p2{
    font:20px/1.5 "Nanum Gothic"; 
    font-weight:400;
    color:#fff;
    padding:60px 0 0 0;
}
.web_hover1>.web_p3,.web_hover2>.web_p3,.web_hover3>.web_p3 {
    font:14px/1.5 "Nanum Gothic"; 
    font-weight:400;
    color:#fff;
    padding:5px 0;
}

.web_hover1>.web_bg2,.web_hover2>.web_bg2,.web_hover3>.web_bg2 {
    width:156px;
    height:91px;
    margin:40px auto;
    background: url(../img/common/croissant.png)no-repeat center center;
	background-size: contain;
}
.web_hover1>span,.web_hover2>span,.web_hover3>span {
    display:block;
    margin:60px 0;
    text-align:center;
}
.web_hover1>span>a,.web_hover2>span>a,.web_hover3>span>a{
    border:1px solid #fff;
    margin:60px 0 0 0;
    color:#fff;
    padding: 5px 15px; 
    line-height:35px;
    
    
}

.web_p1:hover >a:before {
    transform:rotateZ(30deg);
	background:#65abce;
}

.web_hover1>span:hover>a,.web_hover2>span:hover>a,.web_hover3>span:hover>a {
    background:#fff;
    color:#7d426c;
}

.web_hover1:hover,.web_hover2:hover,.web_hover3:hover{
    background: rgba(70,70,70,0.4);
}
/*--------------------------------------------------------------store*/

.store {
    float:right;
    width:786px;
	margin: 0 0;
}
.store>.cafe {
    float:left;
    width:381px;
    margin-right:24px;
    height:750px;
}

.store>.kitchen {
    float:right;
    width:381px;
    height:750px; 
} 
.cafe {
    position:relative;
}
.cafe>p{
    font:14px/1.8 "Nanum Gothic"; 
    font-weight:400;
    color:#7f6145;
}
.cafe>.cafe_line>img{
	width:45px;
	height:110px;
	position:absolute;
	right:50px;
	top:0px;
	animation:cafe_line 3s normal infinte;
	transform-origin:50% 0px;
}
@keyframes cafe_line {
	0% {
		transform:rotateZ(20deg);
	}
	50% {
		transform:rotateZ(-20deg);
	}
	100% {
		transform:rotateZ(20deg);
	}
}
.cafe>h3>a{
    display:block;
    font:55px/1.5 "roboto"; 
    font-weight:100;
    color:#65abce;
    top:250px;
	position:absolute;
}
.cafe>h3>a:hover {
	color:#592448;
}
.cafe>h3>a::after {
    content:"";
    display:block;
    width:28px;
    height:7px;
    background:#7d426c;
    position:absolute;
    left:120px;
    top:25px;
    transition:all 0.4s;
}
.cafe>.store_img {
    background: url("../img/store/cafe.jpg")no-repeat top left;
    background-size:cover;
    width:100%;
    height:420px;
    position:absolute;
    bottom:0;
}

.cafe>.store_img>.store_hover{
    width:100%;
    height:100%;
    text-align:center;
    display:none;
    transition:all 2s;
}
.cafe>.store_img>.store_hover>button>img{
    /*display:none;*/
    width:70px;
    margin:0 auto;
    padding-top:150px;
    transition:all 2s;
}
.cafe>.store_img>.store_hover>span {
    display:block;
    width:70px;
    border:1px solid #fff;
    margin:40px auto;
    color:#fff;
    padding: 0 15px; 
    line-height:33px;
    transition:all 0.2s;
}


.cafe>h3>a:hover::after {
    transform:rotateZ(-30deg);
	background:#65abce;
}

.cafe>.store_img:hover>.store_hover {
    display:block;
}
.cafe>.store_img>.store_hover>span:hover{
    background:#fff;
    color:#7d426c;
}
.kitchen {
    position:relative;
}
.kitchen>.store_img {
    background: url("../img/store/kitchen.jpg")no-repeat top left;
    background-size:cover;
    width:100%;
    height:420px;
    position:absolute;
    top:0;
}

.kitchen>p{
    font:14px/1.8 "Nanum Gothic"; 
    font-weight:400;
    color:#7f6145;
    position:absolute;
    bottom:0;
    right:0;
    text-align:right;
}
.kitchen>h3>a{
    display:block;
    font:55px/1.5 "roboto"; 
    font-weight:100;
    color:#65abce;
    padding:415px 0 28px 0;
    text-align:right;
}
.kitchen>h3>a:hover {
	color:#592448;
}
.kitchen>h3>a::before {
    content:"";
    display:block;
    width:28px;
    height:7px;
    background:#7d426c;
    position:absolute;
    right:190px;
    bottom:278px;
    transition:all 0.4s;
}


.kitchen>h3>a:hover::before {
    transform:rotateZ(30deg);
	background:#65abce;
}


.kitchen>.store_img>.store_hover{
    width:100%;
    height:100%;
    text-align:center;
    display:none;
    transition:all 2s;
}
.kitchen>.store_img>.store_hover>button>img{
    width:70px;
    margin:0 auto;
    padding-top:150px;
    transition:all 2s;
}
.kitchen>.store_img>.store_hover>span {
    display:block;
    width:70px;
    border:1px solid #fff;
    margin:40px auto;
    color:#fff;
    padding: 0 15px; 
    line-height:33px;
    transition:all 0.2s;
}

.kitchen>.store_img:hover>.store_hover {
    display:block;
}
.kitchen>.store_img>.store_hover>span:hover{
    background:#fff;
    color:#7d426c;
}

/*=================================================section reservation*/

.resertitle_box {
    display:none;
}
.reservation {
    max-width:1900px;
    height:500px;
    background: url("../img/reservation/reservation_bg.jpg") no-repeat center center;
}

.reser_wrap {
    width:1272px;
    height:500px;
    margin:0px auto;
}

.reser_title {
    width:462px;
    float:left;
}

.reser_title {
    text-align:center;
}

.reser_title > .web_p1 {
    font:55px/1.5 "roboto"; 
    font-weight:100;
    color:#fff;
    padding:50px 0 20px 0;
    text-align:center;
}

.reser_title > .reser_p2 {
    font:14px/1.8 "Nanum Gothic"; 
    font-weight:400;
    color:#fff;
    padding-top:30px;
}

article {
    width:13%;
    position:relative;
    overflow:hidden;
    float:right;
    height:500px;
    border-left:1px solid #fff;
}

article video {
    height:100%;
    width:auto;
    /*display:none;*/
    margin-left:-100px;
    opacity:0;
    z-index:1;
}

article h3 a {
    position:absolute;
    top:230px;
    left:10px;
    font:18px/1 'roboto';
    font-weight:100;
    color:#fff;
    transition:all 0.5s; 
    border-left:0px solid #fff;
    padding-left:10px;
    z-index:3;
}

article div {
    position:absolute;
    left:0;
    top:239px;
    width:100%;
    height:0px;
    background: #000;
    opacity:0.5; 
    z-index:2;
    transition:all 0.5s;
}


article p {
    position:absolute;
    top:350px;
    right:-310px;
    width:150px;
    font:12px/1.5 "Nanum Gothic";
    font-weight:100;
    color:#fff;
    text-align:right;
    z-index:6;
    word-break: keep-all;
    padding-right:5px;
    opacity:0.8;
}

article:hover h3 a{
    border-left:15px solid #fff;
}

article:hover div {
    top:215px;
    height:50px;
}
article:hover video {
    opacity:1;
}

/*=============================================================footer*/

footer {
    max-width:1900px;
    margin-top:100px;
    border-top:1px solid #65abce;
}
.footer_wrap {
    width:1272px;
    margin:30px auto;
}

.footer_logo {
    width:462px;
    float:left;
    text-align:center;
}
.footer_info {
    width:786px;
    float:left;
    position:relative;
}

.footer_co{
    float:left;
}

.footer_co>ul>li>a {
    color:#7f6145;
    font:12px/1.5 "Nanum Gothic";
    vertical-align:top;
    
}
address {
    float:left;
}
address>p{
    color:#7f6145;
    font:12px/1.75 "Nanum Gothic";
    vertical-align:top;
    padding-left:20px;
}

.familysite {
    position:absolute; 
    top:1px; 
    right:50px; 
    width:150px; 
    background-color:#fff;}
.familysite button {
    width:100%; 
    height:32px; 
    padding-left:11px; 
    border-radius:5px; 
    border:1px solid #d1cecc; 
    background:transparent url(../img/common/family_size_off.png) no-repeat 100% 0; 
    color:#b1ab9f; 
    font-size:11px; 
    text-align:left; 
    -webkit-box-shadow:2px 2px 2px 0px rgba(234,233,232,0.8);
	-moz-box-shadow:2px 2px 2px 0px rgba(234,233,232,0.8); 
    box-shadow:2px 2px 2px 0px rgba(234,233,232,0.8);}
.familysite button.on {
    background-image:url(../img/common/family_size_on.png);}
.familysite ul {
    display:none; 
    position:absolute; 
    left:0; 
    bottom:28px; 
    width:100%; 
    padding:5px 0; 
    border-radius:5px 5px 0 0; 
    border:1px solid #d1cecc; 
    background:#fff; 
    box-sizing:border-box;}
.familysite .on + ul {
    display:block;
}
.familysite a {
    display:block; 
    height:25px; 
    padding-left:15px;
    font:12px/1 "Nanum Gothic";
    color:#726454; 
    line-height:25px;}
.familysite a:hover,
.familysite a:focus {background:#efefef;}
/*========================================================@media screen 1272\\\\*/

@media screen and (max-width: 1272px){

.new {
    max-width:100vw;
}

.new_wrap{
    width:100vw;
    margin:3.93081761vw auto;
}
.new_wrap>h3 {
    text-align:center;
    color:#65abce;
    font:32px/1.5 "roboto";
    font-weight:400;
}

.line {
    width:100%;
    height:2.83018867924vw;
    margin:3.93081761vw auto;
}

.new_wrap >.new_menu {
    width:100%;
	margin-left:1.9654088050vw;
}

.new_wrap >.new_menu>.know>li {
    margin-top:7.8616352201vw;
}
.know>li>span{
    width:14.93710691823vw;
    height:3.930817610vw; 
    padding-right:1.17924528301vw;
}
    
.event_menu {
    height:51.10062893081762vw; /*650px*/
}
.main_tab>li {
    height:3.930817610062893vw;
    padding-top:1.179245283018868vw;  
}
.b_sub,.k_sub,.c_sub, .s_sub,.bev_sub,.g_sub{ 
    height:36.32075471698113vw;
    top:3.930817610062893vw;
}  

.brandstory {
    background-size: cover;
    max-width:100vw;
    height:40.25157232704403vw;  
}
.story_outwrap {
    width:100vw;
	height:40.25157232704403vw;
}

.story_outwrap>.text {
    width:36.556603773584906vw;
    margin-top:0.68359375vw;  /*70px*/
}

.story_outwrap >.story_wrap {
    width:61.79245283018868vw;
    height:40.25157232704403vw;  /*512px*/
    margin:1vw 0; /*30px*/
}

.story_outwrap>.text >img {
    width:31.15234375vw; /*319px*/
    margin-left:3.32421875vw; /*75px*/
    margin-top:4.8828125vw; /*50px*/
}

.story_outwrap>.text .p1 {
    
    margin:2.9296875vw 0;  /*30px*/

}

.story_outwrap>.text .p2 {
    margin:2.9296875vw 0;  /*30px*/
}


.story_wrap>div{
    width:30.89622641509434vw;
	height:19vw;
}

.story_wrap>div>.hover_box {
    height:50vw;
}
.story_wrap>div>.hover_box>a{
    padding-top:9.976057462090982vw; /*100px*/
    padding-bottom:0.9976057462090982vw; /*10px*/
} 
/*---------------------------------------------------------\\\\\\\ 1272*/
.webzine_store {
    max-width:100vw;
	
}

.webzine_store_wrap {
	width:100vw;
    height:58.9622641509434vw;
    margin:2.358490566037736vw auto;
}

.webzine {
    width:36.32075471698113vw;
}

.web_imgs {
    height:55.0314465408805vw;
    
}

 .web_hover1,.web_hover2,.web_hover3 {
    width:36.32075471698113vw;
    height:55.0314465408805vw;
}
.web_hover1>.web_p1>a::before,.web_hover2>.web_p1>a::before,.web_hover3>.web_p1>a::before {
    left:6.468553459119497vw;
    top:6.738993710691824vw;
}

.web_hover1>.web_bg2,.web_hover2>.web_bg2,.web_hover3>.web_bg2 {
    width:12.264150943396226vw;
    height:7.154088050314465vw;
    margin:3.1446540880503145vw auto;
}
	
.web_hover1>span,.web_hover2>span,.web_hover3>span {
    margin:4.716981132075472vw 0;
}
/*--------------------------------------------------------\\\\\\\ 1272*/
.store {
    width:61.79245283018868vw;
}
.store>.cafe {
    float:left;
    width:29.952830188679247vw;
    margin-right:1.8867924528301886vw;
    height:58.9622641509434vw;
}

.store>.kitchen {
    float:right;
    width:29.952830188679247vw;
    height:58.9622641509434vw; 
} 

.cafe>h3>a{
   top:19.65408805vw;
}
.cafe>h3>a::after {
    left:120px;/*120  280*/
    top:1.965408805031vw;
}
.cafe>.store_img, .kitchen>.store_img{
    height:33.0188679245283vw;
}

.cafe>.store_img>.store_hover>button>img,.kitchen>.store_img>.store_hover>button>img{
    width:5.5031446540880505vw;
    padding-top:11.79245283018868vw;
}
.cafe>.store_img>.store_hover>span,.kitchen>.store_img>.store_hover>span {
    width:5.5031446540880505vw;
    margin:3.1446540880503145vw auto;
    padding: 0 1.179245283018868vw; 
    line-height:2.5943396226415096vw;
}
.kitchen>p{
    right:2vw;
}

.kitchen>h3>a{
    padding:32.625786163522014vw 2vw 2.20125786163522vw 0;
}
.kitchen>h3>a::before {
    right:210px;
    bottom:21.055345911949686vw;
}
/*------------------------------------------------------------\\\\\\\ 1272*/
	
.reservation {
    max-width:100vw;
    height:39.308176100628933vw;
}

.reser_wrap {
    width:100vw;
    height:39.308176vw;
}

.reser_title {
    width:36.32075471698113vw;
    float:left;
}


.reser_title > .web_p1 {
    padding:3.930817vw 0 1.5723270vw 0;
}

.reser_title > .reser_p2 {
    padding-top:2.3584905660377vw;
}

article {
    width:13.2%;
    height:39.308176vw;
}

article video {
    margin-left:-7.86163522012vw;
}

article h3 a{
    top:18.081761006289307vw;
    left:0.7861635220vw;
    padding-left:0.3vw;
    font:1.4150943396226415vw/1vw 'roboto';
} 

article div {
    top:18.78930817610063vw;
}


article p {
    top:27.51572327044025vw;
    right:-24.371069182389937vw;
    width:11.79245283018868vw;
    padding-right:0.393081761vw;
}

article:hover h3 {
    border-left:1.179245283018868vw solid #fff;
}

article:hover div {
    top:16.90251572327044vw;
    height:3.930817610062893vw;
}
article:hover h3 a{
    border-left:1.179245283018868vw solid #fff;
}
}

/*===============================================@media screen 1024&&&&*/
@media screen and (max-width:1024px){
.new {
    max-width:100vw;
}
.new_wrap{
    width:100vw;
    margin:4.8828125vw auto;
}

.line {
    width:100vw;
    height:3.515625vw;
    margin:4.8828125vw auto;
}

.new_wrap >.new_menu {
    width:130%;
	margin-left:2.44140625vw;
	
}
.new_wrap >.new_menu>.know{
    width:130%;
}
.new_wrap >.new_menu>.know>li {
    margin-top:9.765625vw;
	
}
.know>li>span{
    display: inline-block;
    width:190px;
    height:50px; 
    color:#666;
    font-size:12px;
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    text-align:center;
    border:0px solid #777;
    padding-right:15px;
}

.new_wrap{
    width:100%;
}

.know>li>span{
    text-indent:-20px;

} 

/*-------------------------------------------------eventbox 1024*/
.eventbox {
    max-width:100%;
    height:63.4765625vw;
	margin:0 auto;
	position:relative;
}
.eventbox::before{
    content:"Our Menu";
    display:block;
    width:100%;
    color:#592448;
    font-size:55px;
    font-family: 'roboto';
    font-style: normal;
    font-weight: 100;
    text-align:center;
    padding-bottom:20px;
    margin-top:20px;
    margin-left:0px;
    opacity:1;
}
.eventbox>.event {
    display:none;
}
 
/*------------------------------------------------------ourmenu 1024*/

.ourmenu {
	width:100%;
	height:63.4765625vw;
}

    
.ourmenu>h3 {
    display:none;
}
.eventbox::before{
    content:"Our Menu";
    display:block;
    width:100%;
    color:#592448;
    font-size:55px;
    font-family: 'roboto';
    font-style: normal;
    font-weight: 100;
    text-align:center;
    padding-bottom:20px;
    margin-top:20px;
    margin-left:0px;
    opacity:1;
}

.ourmenu .menu_wrap {
	width:75%;
    position:relative;
	margin:0 auto;
}


.main_tab>li {
    float:left;
    width:16.6666666%;
    height:50px;
    text-align:center;
    color:#592448;
    font-size:16px;
    font-family: 'roboto';
    font-style: normal;
    font-weight: 400;
    padding-top:15px;
    cursor:pointer;
    
}

.main_tab>li.active {
    background:#65abce;   /*#592448*/
    color:#fff;
    border-bottom:4px solid #592448;
}


/*-----------------------------------------------------#bread_sub 1024*/

.b_sub,.k_sub,.c_sub, .s_sub,.bev_sub,.g_sub{                            
    background:url('../img/common/ourmenu_bg3.jpg') no-repeat;
    position:absolute;
    top:50px;
    height:46.875vw;
}


.b_sub .menu_hover,.k_sub .menu_hover,.c_sub .menu_hover,.bev_sub .menu_hover,.g_sub .menu_hover {
    margin-top:-23%;
}

.s_sub .menu_hover  {
    margin-top:0;
}

/*-----------------------------------------------&&&&&&&&& brandstory1024*/  
 .brandstory {
    background-size: 0% 0%;
    max-width:100vw;
    height:598px;
}
.brandstory::before{
    content:"Brandstory";
    display:block;
    width:100%;
    color:#592448;
    font-size:55px;
    font-family: 'roboto';
    font-style: normal;
    font-weight: 100;
    text-align:center;
    padding-bottom:20px;
    margin-top:20px;
    margin-left: 0;
}

.story_outwrap {
    width:75%;
    height:51vw;
	margin:0 auto;
}

.story_outwrap>.text {
    display:none;
    /*margin-top:0.68359375vw;*/  /*70px*/
}

.story_outwrap >.story_wrap {
    width:100%;
    height:51vw;
    /*margin:2.9296875vw 0;*/ /*30px*/
    /*left:50%;
    margin-left:-35.25%;*/
    /*position:absolute;*/
	
}

.story_wrap>div{
    width:50%;
    height:25vw;
    
}

.story_wrap>div>.hover_box {
    height:25vw;
}
.story_wrap>div>.hover_box>a{
    padding-top:9.765625vw; /*100px*/
    padding-bottom:0.9765625vw; /*10px*/
}      
/*-----------------------------------------------------&&&&&&&&& webzine 1024*/
 .webzine_store {
    width:100%;
}

.webzine_store_wrap {
    width:75%;
    margin:0 auto;
}

.webzine {
   display:none;
}



/*--------------------------------------------------&&&&&&&&store 1024*/

.store {
    width:100%;
    margin:60px auto;
}
.store>.cafe {
 
    width:49.2%;
    height:73.2421875vw;
    margin-right:0;
}

.store>.kitchen {
   
    width:49.2%;
    height:73.2421875vw;
    margin-right:0;
} 
	
.cafe>h3>a{
    top:24.4140625vw;
}
.cafe>h3>a::after {
   display:none;
}
.cafe>.store_img {
    height:41.015625vw;
}

.cafe>.store_img>.store_hover>button>img{
    width:6.8359375vw;
    padding-top:14.6484375vw;
}
.cafe>.store_img>.store_hover>span {
    width:6.8359375vw;
    margin:3.90625vw auto;
    padding: 0 1.46484375vw; 
    line-height:3.22265625vw;
}

.kitchen>.store_img {
    height:41.015625vw;
}

.kitchen>h3>a{
    padding:40.5273437vw 0 2.734375vw 0;
}
.kitchen>h3>a::before {
    display:none;
}

/*.kitchen>.store_img>.store_hover>button>img{
    width:6.8359375vw;
    padding-top:14.6484375vw;
}
.kitchen>.store_img>.store_hover>span {
    width:6.8359375vw;
    margin:3.90625vw auto;
    padding: 0 1.46484375vw; 
    line-height:3.22265625vw;
}*/
/*-------------------------------------------&&&&&&&&& reservation 1024*/
.reservation {
    max-width:100vw;
    height:48.828125vw;
}

.reser_wrap {
    width:100vw;
    height:48.828125vw;
}

.reser_title {
    width:10vw;
	transition:transform 2s;
	position:relative;
}
    
.reser_title > .web_p1 {
    font:5.37109375vw/1.5em "roboto"; 
	transform:rotate(90deg);
	font-weight:100;
	padding-bottom:30vw;
	position:absolute;
	top:30px;
	
}
.reser_title img {
	display:none;
}
.reser_title > .reser_p2 {
    display:none;
}

article {
    width:13.7%;
    height:48.828125vw;
}

article video {
    margin-left:-9.765625vw;
}

article h3 a{
    top:22.4609375vw;
    left:0.9765625vw;
    font:1.7578125vw/1em 'roboto';
    padding-left:0.48828125vw;
    font-weight:100;
}

article div {
    top:23.33984375vw;
}


article p {
    top:34.1796875vw;
    right:-30.2734375vw;
    width:14.6484375vw;
    padding-right:0.48828125vw;
}

article:hover h3 {
    border-left:15px solid #fff;
}

article:hover div {
    top:20.99609375vw;
    height:4.8828125vw;
}
article:hover h3 a{
    border-left:1.46484375vw solid #fff;
}
/*--------------------------------------------------------------&&&&&&&footer 1024*/
	
footer {
    max-width:100vw;
    margin-top:9.765625vw;
}
.footer_wrap {
    width:100vw;
    margin:2.9296875vw auto;
}

.footer_logo {
    width:100vw;
	padding-bottom:30px;
	text-align:left;
	padding-left:1.953125vw;
}
.footer_info{
	margin:0 auto;
    position:relative;
}

.footer_co li{
	padding-left:1.953125vw;
}
address>p{
    padding-left:1.953125vw;
}

.familysite {
  
    }

/*===================================================@media screen640px  &&&&&&&&& 640*/
@media screen and (max-width:640px){

.new {
    max-width:100vw;
}

.new_wrap{
    width:100vw;
    margin:0 0;
}
.new_wrap>h3 {
    font:5vw/1.5 "roboto";
	background:#65abce;
	color:#fff;
	margin-bottom:2vw;
	font-weight: 100;
}

.line {
    /*width:100%;
    height:5.625vw;
    margin:1.8125vw 0 0 0;*/
	display:none;
}

.new_wrap >.new_menu {
    width:180%;
	padding:0 15% 0 0%;
}
.new_wrap >.new_menu>.know{
    width:180%;
}
.new_wrap >.new_menu>.know>li {
    margin-top:15.625vw; 
}
.know>li>span{
    display: inline-block;
    width:29.6875vw;
    height:7.8125vw; 
    color:#666;
    font-size:12px;
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    text-align:center;
    border:0px solid #777;
	text-indent:-50px;
    padding-right:0.34375vw;
}
/*--------------------------------------------------------------------event&&&&& 640*/
.eventbox {
    max-width:100vw;
    height:80vw;
}
.eventbox::before{
    content:"Our Menu";
    display:block;
    width:100%;
    color:#592448;
    font-size:5vw;
    font-family: 'roboto';
    font-style: normal;
    font-weight: 100;
    text-align:center;
    padding-bottom:20px;
    margin-left:0px;
    opacity:1;
}
.event>h3 {
    font:5vw/1.5 "roboto";
	color:#592448;
	font-weight: 100;
    padding-bottom:3.125vw;
    margin-top:3.125vw; 
}
.eventbox>.event {
	display:none;
}	

.ourmenu {
	width:100vw;
	height:80vw;
}

.ourmenu>h3 {
    color:#592448;
    font-size:5vw;
	line-height:5vw;
    padding-bottom:3.125vw;
    margin-top:3.125vw; 
}

.ourmenu .menu_wrap {
    width:100vw;
    position:relative;
}

.main_tab>li {
    width:16.6666666vw;
    height:40px;
    line-height:40px;
    padding-top:0;
    
}

.b_sub,.k_sub,.c_sub, .s_sub,.bev_sub,.g_sub{   
    top:40px;
    height:65vw;
}
.b_sub>ul{
    margin-top:2.34375vw;
    margin-bottom:2.34375vw;
}
.b_sub li{

padding-top:6.25vw;

}
 
.k_sub>ul.c_sub>ul,.s_sub>ul,.bev_sub>ul,.g_sub>ul {
    margin-top:1vw;
    margin-bottom:1vw;
}    
.k_sub li,.c_sub li,.s_sub li,.bev_sub li,.g_sub li{
  padding-top:1vw;
}


.b_sub li .menu_img,.k_sub li .menu_img,.c_sub li .menu_img,.s_sub li .menu_img,.bev_sub li .menu_img,.g_sub li .menu_img {
    display:block;
    width:100vw;
    padding:2.525vw 1.5625vw;
    text-align:center;
}
.k_sub .menu_hover {
    top:10.5vw;
    position:absolute;
}    
.k_sub .menu_hover .hover_wrap {
    /*top:5.5vw;
    position:absolute;*/
    }

.b_sub .menu_hover .hover_wrap,.c_sub .menu_hover .hover_wrap,.s_sub .menu_hover .hover_wrap,.bev_sub .menu_hover .hover_wrap,.g_sub .menu_hover .hover_wrap {
    margin-top:-8.25vw;
    margin-left:-7.03125vw;
    width:14.0625vw;
    height:80vw;
    
}

.b_sub .menu_hover .hover_wrap>img,.k_sub .menu_hover .hover_wrap>img,.c_sub .menu_hover .hover_wrap>img,.s_sub .menu_hover .hover_wrap>img,.bev_sub .menu_hover .hover_wrap>img,.g_sub .menu_hover .hover_wrap>img {
   margin-bottom:2.90625vw;
    margin-left:-3.90625vw;
}

.b_sub .menu_hover .hover_wrap>span,.k_sub .menu_hover .hover_wrap>span,.c_sub .menu_hover .hover_wrap>span,.s_sub .menu_hover .hover_wrap>span,.bev_sub .menu_hover .hover_wrap>span,.g_sub .menu_hover .hover_wrap>span{
    
    padding-top:8.59375vw;
    padding-bottom:1.5625vw;
    text-align:center;
    font-size:12px;
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    color:#fff;
}
.b_sub .menu_hover .hover_wrap>button,.k_sub .menu_hover .hover_wrap>button,.c_sub .menu_hover .hover_wrap>button,.s_sub .menu_hover .hover_wrap>button,.bev_sub .menu_hover .hover_wrap>button,.g_sub .menu_hover .hover_wrap>button {
    display:block;
    position:absolute;
    left:50%;
    top:12.5vw;
    margin-left:-3.515625vw;
}
/*-----------------------------------------------------------brandstory&&&&&&& 640*/
.brandstory {
    max-width:100vw;
    height:64vw;
    background:transparent;
}
.brandstory::before{
    content:"Brandstory";
    display:block;
    width:100%;
    color:#592448;
    font-size:5vw;
    font-family: 'roboto';
    font-style: normal;
    font-weight: 100;
    text-align:center;
    margin-top:20px;
    margin-left: 0;
}
.story_outwrap {
    width:100vw;
	height:auto;
}

.story_outwrap>.text {
    display:none;
}

.story_outwrap >.story_wrap {
    width:100vw;
    height:64vw;
    margin:0 0;
}

.story_wrap>div{
    width:50vw;
    height:32vw;
}

.story_wrap>div>.hover_box {
    height:32vw;
}
.story_wrap>div>.hover_box>a{
    padding-top:12vw;
    padding-bottom:1.5vw;
}
/*---------------------------------------------------------.webzine_store&&&&&& 640*/
    

.webzine_store {
    max-width:100vw;
}

.webzine_store_wrap {
    width:100vw;
    height:117.1875vw;
    margin:4.6875vw auto;
}

.webzine {
    display:none;
}


.store {
    width:100vw;
    
}
 
.store>.cafe {
    width:48vw;
    height:750px;
    margin-right:0px;
}

.store>.kitchen {
    float:right;
    width:48vw;
    height:750px;
    margin-right:0px;
} 
.cafe>p {
    padding-left:3vw;
}
.cafe>h3>a{
    top:39.0625vw;
}
.cafe>h3>a::after {
    left:18.75vw;
    top:43.75vw;
   
}
.cafe>.store_img {
    width:100%;
    height:420px;
}

.cafe>.store_img>.store_hover{
    width:100%;
    height:100%;
}
.cafe>.store_img>.store_hover>button>img{
    /*display:none;*/
    width:70px;
    margin:0 auto;
    padding-top:150px;
    transition:all 2s;
}
.cafe>.store_img>.store_hover>span {
    display:block;
    width:70px;
    border:1px solid #fff;
    margin:40px auto;
    color:#fff;
    padding: 0 15px; 
    line-height:33px;
    transition:all 0.2s;
}

.kitchen>.store_img {
    background: url("../img/store/kitchen.jpg")no-repeat top left;
    background-size:cover;
    width:100%;
    height:420px;
    position:absolute;
    top:0;
}

.kitchen>p{
    padding-right:3vw;
}
.kitchen>h3>a{
    padding:415px 3vw 28px 0;
}
.kitchen>h3>a::before {
    right:32.03125vw;
    bottom:43.4375vw;
}


.kitchen>.store_img>.store_hover{
    width:100%;
    height:100%;
    text-align:center;
    display:none;
    transition:all 2s;
}
.kitchen>.store_img>.store_hover>button>img{
    width:70px;
    margin:0 auto;
    padding-top:150px;
    transition:all 2s;
}
.kitchen>.store_img>.store_hover>span {
    display:block;
    width:70px;
    border:1px solid #fff;
    margin:40px auto;
    color:#fff;
    padding: 0 15px; 
    line-height:33px;
    transition:all 0.2s;
}

.kitchen>.store_img:hover>.store_hover {
    display:block;
}
.kitchen>.store_img>.store_hover>span:hover{
    background:#fff;
    color:#7d426c;
}
    
 /*---------------------------------------------------------reservation&&&&&&& 640*/
 .reservation {
    max-width:100vw;
    height:50vw;   /*78.125vw*/
}

.reser_wrap {
    width:100vw;
    height:50vw;  /*78.125vw*/
}

.reser_title {
    width:10vw;
	transition:transform 2s;
	position:relative;
}
    
.reser_title > .web_p1 {
    font:5.37109375vw/1.5em "roboto"; 
	transform:rotate(90deg);
	font-weight:100;
	padding-bottom:20vw;
	position:absolute;
	top:50px;
	
}

.reser_sub {
    margin-right:19px;
}
article {
    width:13%;
    height:50vw;   /*78.125vw*/
    
}

article video {
    height:100%;
    width:auto;
    margin-left:-15.625vw;
}

article h3 a {
    top:25vw;
    left:5px;
    font:2.1875vw/1 'roboto';
    padding-left:0.5625vw;
    font-weight:100;
}

article div {
    display:none;
}

article p {
    display:none;
}

article:hover h3 a{
    border-left:0px solid #fff;
}

/*-------------------------------------------------------------------footer 640*/

footer {
    max-width:100vw;
    margin-top:10.625vw;
}
.footer_wrap {
    width:100vw;
    margin:4.6875vw auto;
}

.footer_logo {
    width:100vw;
	text-align:center;
}
.footer_info {
    width:100vw;
    padding-top:2vw;
}

.footer_co{
  display:none;
}

address {
    width:100vw;
}
address>p{
    text-align:center;
}

.familysite {
    display:none;
    }

}