@charset "UTF-8";
/* Web Fonts CDN - S */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");/* font-family: 'Pretendard'; */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');/* font-family: 'Playfair Display', serif; */
/* Web Fonts CDN - E */

*{ 
  margin: 0; padding: 0; 
  box-sizing: border-box;
}
a{text-decoration: none; color: inherit;}
body {
  font-family: 'Pretendard';
  overflow: hidden;
}
ul, li{list-style: none;}

/* VISUAL - S */
.visual { 
  width: 100%; height: 100vh;
  background: url(img/visual-img-01.png) no-repeat center center / cover;
}
.logo a{
  display: block;
  width: 156px; height: 38px; 
  text-indent: -9999px;
  position: absolute; left: 50px; top: 30px; z-index: 999;
  background: url(./img/logo.png) no-repeat center center;
}
.visual .preview-txt {
  color: #fff;
  position: absolute; left: 50px; bottom: 60px;
}
.visual .preview-txt h1{
  margin-bottom: 6px;
  font-size: 100px; line-height: 120px; font-family: 'Playfair Display', serif; font-weight: 300;
}
.visual .preview-txt span{font-size: 24px; line-height: 36px; font-weight: 300;}
/* VISUAL - E */

/* ALL MENU - S */
.all-menu {
  display: none;
  height: 100vh; width: 100%;
  position: fixed;
  background-image: url(./img/all-menu-bg.png);
}
.nav {
  height: 100%; width: 56%;
  position: absolute; right: 0; z-index: 1000;
  background-color: rgba(255,255,255,0.7)
}
.nav ul {
  font-family: 'Playfair Display', serif;
  transform: translateY(-50%);
  position: absolute; left: 10%; top: 50%;
}
.nav ul li a {
  font-size: 60px; line-height: 100px; color: #20321F;
  position: relative; 
}
.nav ul li a:before {
  content: '';
  width: 0; height: 40%;
  position: absolute; bottom: 0; left: 0; z-index: -1;
  background-color: #fff;
  transition: 0.5s;
}
.nav ul li a:hover:before {width: 100%;}
/* ALL MENU - E */

/* front-btn, back-btn - S */
.front-btn,
.back-btn {
  width: 60px; height: 100px;
  font-size: 26px; color: #fff; line-height: 100px; text-align: center;
  background-color: rgba(0,0,0,0.5);
  position: absolute; z-index: 100;
  transition: 0.5s;
  cursor: pointer;
}
.front-btn {
  right: 0; top: 50%; 
  transform: translateY(-50%);
  border-radius: 50px 0 0 50px;
}
.front-btn.active {right: -60px;}
.back-btn {
  border-radius: 0px 50px 50px 0px;
  color: #000;
  left: -60px; top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255,255,255,0.5);
}
.back-btn.active {left: 0;}
/* front-btn, back-btn - E */