@charset "utf-8";



/* 1 no */
.warp1{ position: relative;
    width: 1600px; margin: 0 auto; padding-top: 90px;
}
.bgimg1{position: relative;
    display: flex;justify-content: center;align-items: center;
    height: 750px; width: 100%;    
    background: url("../img/bg_01.jpg") no-repeat;}
.bgimg1 img{
   width: 350px; margin-left: 130px; margin-top: -400px;
}
.line{position: absolute;top: 0; z-index: 5;
    width: 0%; height: 750px;
    border-top:2px solid #3b3229;
    border-bottom:2px solid #3b3229;transition: 0.4s ease;}
.bgimg1:hover .line{width: 115%;}


/* 2 no left */
.bgimg2{width: 1600px; text-align: center; padding-top: 30px;
    position: relative; margin: 20px auto; z-index: 3;
}
.bgimg2 h2{margin: 150px 0 50px;}
.bgimg2_left{position: absolute;left: 100px;top: 350px; width: 605px; height: 605px;
    /* border: 1px solid red; */
}
.foodmanu1{width: 300px;height: 300px;float: left;position: relative;
 transition: 0.4s ease;cursor: pointer;
}
.foodmanu1 img{position: absolute;left: 50px;top: 50px;z-index: 6;
    transition: 0.4s ease;}
.foodmanu1 p{position: absolute;left: 0px;top: 130px;z-index: 7;
    text-align: center; width: 300px;
    font-size: 30px;font-weight: 600;color: #fff; letter-spacing: 2px;
    transition: 0.4s ease;}
.lineW{position: absolute;left: 0;top: 0; z-index: 5; margin: 20px 0px;
    width: 300px; height: 260px; border-left:1px solid #3b3229;
    border-right:1px solid #3b3229;transition: 0.4s ease;
}
.lineH{position: absolute;left: 0;top: 0; z-index: 5;margin: 0px 20px;
    width: 260px; height: 300px; border-top:1px solid #3b3229; 
    border-bottom:1px solid #3b3229;transition: 0.4s ease;
}
.lineroude{border:1px solid #3b3229; border-radius: 150px;
    width: 250px;height: 250px; text-align: center;
}
.bagrodcolor{position: absolute;left: 0;top: 0; z-index: 6;
    width: 300px;height: 300px;border: 5px solid #ffffff; opacity: 0;
}
.ro{position: absolute;left: 0;top: 0; z-index: 5;
    width: 300px;height: 300px;
    display: flex;justify-content: center;align-items: center;
}
.foodmanu1:hover .ro{transform: rotate(45deg);}
.foodmanu1:hover .lineW{width:200px ;margin: 20px 50px;
border-left:2px solid #3b3229; border-right:2px solid #3b3229;}
.foodmanu1:hover .lineH{height:200px ;margin: 50px 20px;
 border-top:2px solid #3b3229; border-bottom:2px solid #3b3229;}
.foodmanu1:hover img{top: 25px; }
.foodmanu1:hover p{color: #3b3229; top: 195px;scale: 0.9; }

.foodmanu1:hover .bagrodcolor{transform: scale(1.01);opacity: 1;}

 /* 2 no right */
.bgimg2_right{ float: right;
    height: 750px; width: 580px;  position: relative;
     /* border: 1px solid rgb(255, 25, 0);     */
}
.bgimg2_right img:nth-child(1){position: absolute;right: 0;bottom: 0;
    width: 750px;
}
.bgimg2_right img:nth-child(2){position: absolute;right: 0;top: 220px;
    width: 500px; animation: ani1 5s infinite;
}
@keyframes ani1{
    0%{top:220px;}
    50%{top:0px;}
    100%{top:220px;}
} 
 /* 3 no  */
.warp3{
    width: 100%;height: 650px; margin: 820px auto 0;
    background: url("../img/bg_00.png") no-repeat;
    background-size: cover;
    position: relative;
}
.bg3{width: 100%; height: 580px; 
    position: absolute; top: 35px; left: 0; z-index: 1;   
    overflow: hidden;   
    background:url(../img/bg_03.jpg) ;    
    background-size: cover;
    background-position: center;
    background-attachment: fixed;   
}
.bg3 >img{width: auto; height: 200px; transition: 0.8s ease;
    position: absolute; top: 180px; left: 200px; z-index: 3;
}
.bg3 .color{ width: 100%; transform: scaleY(0.0); transition: 0.8s;
    height: 230px;
    position: absolute; top: 175px; left: 0; z-index: 2;
    background-color: rgba(24, 14, 10, 0.7);
   text-align: center; padding: 15px;  
}
.bg3:hover .color{transform: scaleY(1);}
.bg3:hover img{left: 1100px;}
  
/* 4 no */
.warp4{width: 1600px; margin: 0 auto;text-align: center; margin-top: 150px;}

.bg4a{width: 1400px; height: 600px;position: relative;
    margin: 50px auto;}
.bg4a>p{position: absolute;left: 0;top: 0; width: 1200px; height: 500px;
     overflow: hidden;}
.bg4a>p>img{position: absolute;left: 0;top: 0;width: 1260px;}
.bg4a:hover >p> img{transform: scale(1.3);left: 150px;top: 0;transition: 0.4s;}
.bg4a:hover .colorW>img{scale: 0.9;opacity: 1;}
.colorW{position: absolute;bottom: 0;right: 0; width: 660px; height: 500px;
    background-color: #fff; border: 1px solid #888;border-radius: 50px;
}
.colorW img{margin: 50px auto; opacity: 0.6;transition: 0.4s;}
.colorW p{font-size: 30px;font-weight: 500; font-family: "휴먼매직체";color: #25231e;}
.colorW button{font-size: 20px; font-weight: 500; font-family: "HY헤드라인M"; margin-top: 30px;
    width: 130px; height: 50px; border:1px solid #25231e; border-radius: 25px;
    background-color: #fff; color: #25231e; position: relative;cursor: pointer;
}
.colorW button img{rotate: -90deg;position: absolute;top: -34px;left: 20px;
    opacity: 0;transition: 0.4s;
}
.colorW button:hover{ background-color: #25231e;}
.colorW button:hover img{opacity: 1; left: 90px;}

.bg4b{width: 1400px; height: 600px;position: relative;
    margin: 0px auto;
}
.bg4b>p{position: absolute;right: 0;bottom: 0; width: 1200px; height: 500px;
     overflow: hidden;}
.bg4b>p>img{position: absolute;right: 0;bottom: 0;width: 1260px;}
.bg4b:hover >p> img{transform: scale(1.3);right: 100px;bottom: 0;transition: 0.4s;}
.bg4b:hover .colorB>img{scale: 0.9;opacity: 1;}
.colorB{position: absolute;top: 0;left: 0; width: 660px; height: 500px;
    background-color: #25231e; border: 1px solid #888; border-radius: 50px;
}
.colorB img{margin: 50px auto; opacity: 0.6;transition: 0.4s;}
.colorB p{font-size: 30px;font-weight: 500; font-family: "휴먼매직체";color: #ddd;}
.colorB button{font-size: 20px; font-weight: 500; font-family: "HY헤드라인M"; margin-top: 30px;
    width: 130px; height: 50px; border:1px solid #fff; border-radius: 25px;
    background-color: #fff; color: #25231e; position: relative;cursor: pointer;
}
.colorB button img{rotate: -90deg;position: absolute;top: -34px;left: 20px;
    opacity: 0;transition: 0.4s;
}
.colorB button:hover{ background-color: #25231e;}
.colorB button:hover img{opacity: 1; left: 90px;}

/* 5 no */
.warp5{width: 1600px;height: 750px; margin: 100px auto 0; text-align: center;  
    background: url(../img/bg_05.jpg) no-repeat; background-size: cover; background-position: center;
}
.warp5>h2 img{margin-top: 80px;}
#vido_in{ position: relative; margin-top: 50px;
    /* border: 1px solid rgb(255, 25, 0);  */
}
#vido_in div{width: 350px; height: 350px; position: absolute;
   }
#vido_in p{width: 350px; height: 350px; background-color: #3b3229;
    position: absolute; top: 0px;left: 0px;}
#vido_in p img{width: 100%; height: 100%;}
#vido_in p video{width: 100%; height: 100%;}
#vido_in div:nth-child(1){perspective: 1000px; top: -60px;left: 60px;scale: 0.5; 
    opacity: 0.5;
}
#vido_in div:nth-child(2){perspective: 1400px; top: -35px;left: 280px;scale: 0.7; 
    opacity: 0.7;
}
#vido_in div:nth-child(3){ top: 0px;left: 625px;     
}
#vido_in div:nth-child(4){perspective: 1400px; top: -35px;right: 280px;scale: 0.7; 
    opacity: 0.7;
}
#vido_in div:nth-child(5){perspective: 1000px; top: -60px;right: 60px;scale: 0.5; 
    opacity: 0.5;
}
#vido_in a{position: absolute;top: 480px;left: 700px;z-index: 5; font-size: 30px;
 float: left; transition: 0.4s ease-in;}
#vido_in a>img{width: 40px; height: auto;}
#vido_in a>span{float: right; margin: -5px 20px 0;}
#vido_in a:hover{letter-spacing: 10px;}

/* 6 no */
.warp6{width: 1600px;height: 750px; margin: 20px auto 20px; text-align: center;  
    background: url(../img/bg_06.jpg) no-repeat ;position: relative; 
    background-size: cover; background-position: center;
}
.warp6>h2 img{margin-top: 80px;}
#vido_out {margin-top: 50px;position: relative;
    /* border: 1px solid rgb(255, 25, 0); */
} 
#vido_out a{position: absolute;top: 480px;left: 700px;z-index: 5; font-size: 30px;
 float: left; transition: 0.4s ease-in; }
#vido_out a> img{width: 40px; height: auto;}
#vido_out a>span{float: right; margin: -5px 20px 0;color: #fff}
#vido_out a:hover{letter-spacing: 10px;}