@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Playfair+Display:wght@700&display=swap');

/* Reset */
* {margin:0; padding:0; box-sizing:border-box;}
ul,ol {list-style:none;}
a {text-decoration:none; color:#aaa;}
body {
  position:fixed; width:100%; height:100%;
  background:#111; font-family:'Cormorant Garamond', serif;
  color:#fff;
}

/* 배경 동영상 */
.vid {
  width:100%; height:100%; position:fixed; top:0; left:0;
  z-index:-2; overflow:hidden;
}
.vid video {
  width:100%; min-width:1600px; pointer-events:none;
}
.vid::after {
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.45); z-index:-1;
}

/* Dior 로고 */
h1 {
  position:fixed; top:20px; left:20px; z-index:10;
}
h1 img {
  width:200px; height:auto;
  filter:brightness(0) invert(1);
}

/* header 영역 */
header {
  width:650px; height:100%; position:fixed;
  background:rgba(0,0,0,0.9);
  transform:skewX(-40deg);
  left:-400px;
  border-right:1px solid rgba(212,175,55,0.6);
  box-shadow:4px 0 20px rgba(0,0,0,0.7);
  z-index:5;
}

/* 1depth 메뉴 */
#gnb {
  width:220px; position:absolute; top:150px; right:0;
}
#gnb > li { position:relative; }
#gnb > li > a {
  display:block; width:220px; height:50px;
  font:600 20px/3 'Cormorant Garamond', serif;
  letter-spacing:2px; color:#eee; text-align:right;
  padding-right:40px; position:relative;
  transition:0.3s;
}
#gnb > li > a::after {
  content:""; position:absolute; bottom:10px; right:40px;
  width:0%; height:1px; background:#d4af37;
  transition:0.4s;
}
#gnb > li:hover > a::after { width:40%; }
#gnb > li.on > a,
#gnb > li:hover > a {
  background:#d4af37; color:#111;
}
#gnb em { display:inline-block; transform:skewX(40deg); }

/* 2depth 메뉴 */
#gnb ul {
  position:absolute; top:0; left:205px;
  opacity:0; transform:translateX(-20px);
  pointer-events:none;
  transition:all 0.4s ease;
}
#gnb > li:hover ul {
  opacity:1; transform:translateX(0);
  pointer-events:auto;
}
#gnb ul a {
  display:block; width:150px; height:40px;
  background:rgba(17,17,17,0.9);
  border-left:2px solid #d4af37;
  font:500 16px/2.5 'Cormorant Garamond', serif;
  color:#fff; padding-left:30px;
  transition:0.3s;
}
#gnb ul a:hover {
  background:#d4af37; color:#111;
}

/* SNS */
#sns {
  position:fixed; top:60px; right:50px;
}
#sns li { float:left; margin-right:25px; }
#sns .fa {
  font-size:22px; border:1px solid #d4af37;
  border-radius:50%; padding:10px;
  opacity:0.7; transition:0.3s;
}
#sns .fa:hover {
  background:#d4af37; color:#111;
  opacity:1; transform:scale(1.2);
}

/* 텍스트 박스 */
.txtBox {
  width:450px; position:fixed;
  top:220px; right:70px; text-align:right;
}
.tit {
  font-size:110px; font-family:'Playfair Display', serif;
  font-weight:700; color:#fff; line-height:1;
  text-shadow:0 0 20px rgba(212,175,55,0.4);
  margin-bottom:10px;
  animation:fadeDown 1.2s ease-out;
}
.txt {
  font-size:30px; color:#ccc; letter-spacing:3px;
  text-transform:uppercase; margin-bottom:10px;
  animation:fadeUp 1.2s ease-out;
}
.txt b {
  font-weight:600; color:#d4af37; margin-left:8px;
  font-family:'Playfair Display', serif; letter-spacing:2px;
}
@keyframes fadeDown {
  0%{opacity:0; transform:translateY(-50px);}
  100%{opacity:1; transform:translateY(0);}
}
@keyframes fadeUp {
  0%{opacity:0; transform:translateY(50px);}
  100%{opacity:1; transform:translateY(0);}
}

/* contents 레이아웃 */
#side {
  width:800px; height:100%; position:fixed;
  bottom:0; right:-800px;
  background:#111; opacity:0.5;
  transform:skewX(-40deg); transition:all 0.5s;
}
#side:hover { right:-500px; opacity:0.9; }
#side .con {
  width:400px; height:100%; position:absolute;
  left:150px; bottom:0;
  background:rgba(0,0,0,0.95);
  border-left:1px solid rgba(212,175,55,0.5);
  padding:10px; transition:all 1s;
}
#side:hover .con { left:60px; }

/* 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:white; transform:skewX(40deg);
}
#side .con p img {
  width:300px; height:70px; opacity:0.3;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; transition:0.4s;
}
#side .con p:hover img {
  opacity:1; transform:scale(1.05);
}
#side .con p:nth-child(1) {
  bottom:270px; transform:translateX(200px);
  transition:all 0.4s;
}
#side .con p:nth-child(2) {
  bottom:160px; transform:translateX(200px);
  transition:all 0.8s;
}
#side .con p:nth-child(3) {
  bottom:50px; transform:translateX(200px);
  transition:all 1.2s;
}
#side:hover .con p { transform:translateX(0); }

/* 애니메이션 아이콘 */
#side .btnContents {
  width:150px; height:50px; position:absolute;
  bottom:40px; left:10px; color:#d4af37;
  transform:skewX(40deg);
}
#side:hover .btnContents { left:800px; }
.btnContents i {
  font-size:50px; opacity:0;
  animation:ani linear 1.5s infinite;
}
.btnContents i:nth-child(2){animation-delay:0.5s;}
.btnContents i:nth-child(3){animation-delay:1s;}
@keyframes ani {
  0%{right:0;opacity:0;transform:scale(1);}
  100%{right:100px;opacity:1;transform:scale(1.0);}
}