@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');

*{padding:0; margin:0;}
ul,ol{list-style: none;}
a{text-decoration: none;color:#bbb}
body{position: fixed;width: 100%;height: 100%;background: #111;}

/* 배경동영상 - full screen */
.vid{width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;opacity: 0.9; z-index:-1;}
.vid video{
  width: 100%; 
  min-width: 1600px; /* 1600px이상 */
  filter: saturate(140%); /* 영상의 채도 변경 */
}

/* Mom's Touch 로고 */
h1{position: fixed;bottom:10px;right:10px;z-index:10; opacity:0.5;}
h1 img{width: 280px;height: auto;}
header{
  width: 700px;
  height: 100%;
  position:fixed;
  background: #74675C;
  transform: skewX(-10deg);
  right: -400px;
  /* opacity:0.7; */
}

/* 본 메뉴 */
#gnb{width:220px;position:absolute;top:150px;right:480px; opacity:1.0;}
#gnb>li{position:relative;}
#gnb>li>a{display: block;width: 220px;height: 50px;font: bold 18px/3 play;color: #222;box-sizing: border-box;padding-right: 40px;text-align: right;}
#gnb>li.on>a{background: #111;color: #fff;}
#gnb>li:hover>a{background: #616161;color: #F9AE17;}
#gnb em{display: inline-block;transform: skewX(10deg);}
#gnb em i{margin-right: 20px;}

/* 세부 메뉴 */
#gnb ul{
  position: absolute; /* 자식의 position:absolute. grouping. */
  right:0px;
  top:0px;
  opacity: 0; /* 안보이게 */ 
  transition: 0.4s; /* 0.4초동안 animation효과 */
}
#gnb>li:hover ul{
  opacity: 0.8; /* 보이게 */
  right:205px; /* 오른쪽에서 왼쪽으로 405px이동 */
} 
#gnb ul a{display: block;width: 150px;height: 40px;background: #222;border-bottom: 1px solid #74675C;font: bold 16px/2.5 arial;color:#fff;box-sizing: border-box;padding-left: 50px;margin-bottom: 3px;transition:0.5s;}
#gnb ul a:hover{background: #74675C;color:#333;}

/* 햄버거 모양 아이콘 애니메이션 */
#gnb .on i {
  animation: ani01 1s infinite alternate;
}
@keyframes ani01 {
  0% { transform: scale(1.0) translateX(10px); }
  100% { transform: scale(2.0) translateX(-10px); }
}

/* 간편 주문 링크 */
#easy-order a {
  position: fixed;
  bottom: 25px;
  right: 400px;
}

/* sns 버튼 */
#sns{position: fixed;top:40px;right:220px;}
#sns li{float:left;margin-right: 30px;}
#sns .fa{font-size: 40px;color:#74675C;opacity: 0.5;transform: scale(1);transition: 0.5s;}
#sns .fa:hover{opacity: 1;transform: scale(1.4);}
/* side 내부의 sns 버튼 */
#sns_in{position: fixed; bottom:180px; right:50px;}
#sns_in li{float:left;margin-right: 15px;}
#sns_in .fa{font-size: 40px;color:#ffffff;opacity: 1.0;transform: scale(1);}

/* contents 레이아웃 */
#side { width:800px; height:100%; position:fixed; bottom:0px; left:-850px; background:#111; opacity:0.5; transform:skewX(40deg); transition:all 0.5s;}
#side:hover { left:-250px; opacity:0.8; transform: skewX(0deg);}
#side .con{
  width:400px;
  height: 100%;
  position: absolute;
  left:-100px;
  bottom: 0px;
  background: #000;
  box-sizing: border-box;
  padding:10px;
  transition: 1s;
}
#side:hover .con{
  left:10px;
  transform: skewX(0deg);
}

/* contents 내 썸네일 */
#side .con p {width:300px; height: 100px; position: absolute; left:50px;}
#side .con p em{display: inline-block; font: bold 16px/1.7 arial; color: #74675C; transform: skewX(0deg);}
#side .con p img{width:300px; height: 250px; opacity: 0.3; transition:all 0.5s; }
#side .con p img:hover{opacity:1;}
#side .con p:nth-child(1){top:70px; transform:translateX(200px); transition: all 0.4s; }
#side .con p:nth-child(2){top:350px; transform:translateX(200px); transition: all 0.8s; }
#side .con p:nth-child(3){bottom:190px; transform:translateX(200px); transition: all 1.2s; }

/* 자동롤링 버튼 */
#side .btnContents { width:150px; height:50px; position:absolute;  bottom:40px; left:650px; color:#74675C;	transform:skewX(-40deg); }
#side:hover .btnContents { left:-700px;}	
.btnContents i { font-size:60px; position:absolute; bottom:0px; right:0px; opacity:0;}
.btnContents i:nth-of-type(1) { animation:ani linear 1.5s 0s infinite;}
.btnContents i:nth-of-type(2) { animation:ani linear 1.5s 0.5s infinite;}
.btnContents i:nth-of-type(3) { animation:ani linear 1.5s 1.0s infinite;}

@keyframes ani {
  0% {right:100px; transform: scale(1); opacity: 0;}
  100% { right:0px; transform: scale(1.5); opacity: 1;}
}