#gateWrap { position: relative; padding: 0 120rem; height: 100vh; display: flex; flex-flow: column; justify-content: end; overflow: hidden; }

/* 로고 */
#logoGate { position: absolute; top: 80rem; left: 50%; z-index: 150; transform: translateX(-50%); display: flex; flex-flow: column; align-items: center; gap: 24rem; }
#logoGate>span { display: flex; align-items: end; align-items: center; }

#logoGate .apgujeong > span img{ width:100%; }
#logoGate .apgujeong > span:nth-child(1){ width:66.43rem; }
#logoGate .apgujeong > span:nth-child(2){ width:47.43rem; margin: 0 13rem 0 14rem; }
#logoGate .apgujeong > span:nth-child(3){ width:65.61rem; }
#logoGate .apgujeong > span:nth-child(4){ width:49.71rem; margin: 0 16rem 0 19rem}
#logoGate .apgujeong > span:nth-child(5){ width:30.13rem; }
#logoGate .apgujeong > span:nth-child(6){ width:40.54rem; margin: 0 21rem 0 24rem }
#logoGate .apgujeong > span:nth-child(7){ width:70.18rem; }
#logoGate .apgujeong > span:nth-child(8){ width:59.1rem; margin: 0 19rem 0 21rem }
#logoGate .apgujeong > span:nth-child(9){ width:65.61rem; }

#logoGate .hyundai > span img{ width:100%; }
#logoGate .hyundai > span:nth-child(1){ width:49.21rem; }
#logoGate .hyundai > span:nth-child(2){ width:54.04rem; margin: 0 20rem 0 22rem}
#logoGate .hyundai > span:nth-child(3){ width:49.71rem; }
#logoGate .hyundai > span:nth-child(4){ width:59.08rem; margin: 0 29rem 0 28rem}
#logoGate .hyundai > span:nth-child(5){ width:51.91rem; }
#logoGate .hyundai > span:nth-child(6){ width:66.43rem; margin: 0 25rem 0 13rem}
#logoGate .hyundai > span:nth-child(7){ width:10.2rem; }
 
 
#logoGate span span { overflow: hidden; }
#logoGate span img { transform: translateY(100%); }

/* kv */
.gate-bg { position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; height: 100vh; clip-path: inset(0% 0% 0% 0%); opacity: 0;}
.gate-bg .bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }

.gate-bg .bg img{ opacity: 0; transition: all 1s ease;}
.gate-bg .bg .front{ z-index:1; opacity: 1; }
.gate-bg img { position:absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover;}

/* 하단 로고 배너 */
.gate-banner { display: flex; width: 1080rem; height: 266rem; margin: 0 auto; overflow: hidden;}
.gate-banner li { position: relative; flex: 1; opacity: 0;}
.gate-banner li .line { position: absolute; right:0; bottom:0; display:block; width: 1px; height: 0; background: rgba(0, 0, 0, 0.1) }
.gate-banner a { display: flex; flex-flow: column; align-items: center; height: 100%; padding-top: 72rem; transition: background 0.3s ease-in-out; }
.gate-banner div { position: relative; z-index: 1;}
.gate-banner .tit { font-size: 20rem; font-weight: 600; color: #000; letter-spacing: -0.03em;}
.gate-banner img { max-width: 100%; display: block; margin: 0 auto; transition: all ease .3s; }
.gate-banner .logo { background: url("") center center; background-repeat: no-repeat; background-size: contain;}
.gate-banner li:first-child .logo { margin: 30.5rem 0; width:178rem; }
.gate-banner li:nth-child(2) .logo { margin: 35.5rem 0; width:217rem; }
.gate-banner li:nth-child(3) .logo { margin: 31.5rem 0; width:227rem; }
.gate-banner a:after { content: ''; display: block; background: url("../images/ico-gate-arrow.svg") center center / 100% no-repeat;  width: 10rem;  height: 16rem; transition: filter ease-in-out .15s; }

.gate-banner .tit { filter: none !important; transition: color 0.3s ease; }
.gate-banner a:before { content: ''; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 0; transition: all ease-in-out .3s; }
.gate-banner li:first-child a:before { background: radial-gradient(50% 70.49% at 50% 100%, #FF837C 0%, #DE3C32 100%); }
.gate-banner li:nth-child(2) a:before { background: radial-gradient(50% 70.49% at 50% 100%, #BC7355 0%, #7C3B20 100%); }
.gate-banner li:nth-child(3) a:before {  background: radial-gradient(50% 70.49% at 50% 100%, #FA898D 0%, #B71C22 100%); }


@media screen and (min-width: 1025px) {
  .gate-banner a:hover .logo img { opacity: 0 }
  .gate-banner a:hover:after { filter: brightness(0) invert(1); }
  .gate-banner a:hover .tit { color: #fff; }
  .gate-banner a:hover:before { height: 100%;}

  .gate-banner li:first-child .logo { background-image: url("../images/img-gate-banner-1-hover.svg"); }
  .gate-banner li:nth-child(2) .logo { background-image: url("../images/img-gate-banner-2-hover.svg"); }
  .gate-banner li:nth-child(3) .logo { background-image: url("../images/img-gate-banner-3-hover.svg"); }
}

@media screen and (max-width: 1024px) {
  #gateWrap { padding: 0; height: 100vh; }

  /* 로고 */
  #logoGate { top: 40rem; gap: 14rem; } 
  #logoGate .apgujeong > span img{ width:100%; }
  #logoGate .apgujeong > span:nth-child(1){ width:32.26rem; }
  #logoGate .apgujeong > span:nth-child(2){ width:23.02rem; margin: 0 6rem 0 6rem; }
  #logoGate .apgujeong > span:nth-child(3){ width:31.85rem; }
  #logoGate .apgujeong > span:nth-child(4){ width:24.13rem; margin: 0 7rem 0 9rem}
  #logoGate .apgujeong > span:nth-child(5){ width:14.63rem; }
  #logoGate .apgujeong > span:nth-child(6){ width:19.68rem; margin: 0 9rem 0 12rem }
  #logoGate .apgujeong > span:nth-child(7){ width:34.08rem; }
  #logoGate .apgujeong > span:nth-child(8){ width:28.69rem; margin: 0 9rem 0 10rem }
  #logoGate .apgujeong > span:nth-child(9){ width:31.86rem; }

  #logoGate .hyundai > span img{ width:100%; }
  #logoGate .hyundai > span:nth-child(1){ width:23.89rem; }
  #logoGate .hyundai > span:nth-child(2){ width:26.24rem; margin: 0 9rem 0 10rem}
  #logoGate .hyundai > span:nth-child(3){ width:24.13rem; }
  #logoGate .hyundai > span:nth-child(4){ width:28.69rem; margin: 0 14rem 0 14rem}
  #logoGate .hyundai > span:nth-child(5){ width:25.21rem; }
  #logoGate .hyundai > span:nth-child(6){ width:32.26rem; margin: 0 11rem 0 6rem}
  #logoGate .hyundai > span:nth-child(7){ width:4.92rem; }

  /* kv */
  .gate-bg .bg{ top:0; transform: translate(-50%,0); }
  /* 하단 로고 배너 */
  .gate-wrap{ padding:0 40rem 24px; opacity: 0;}
  .gate-slide{ padding:24rem 0; overflow: visible; box-sizing: border-box; }
  
  .gate-banner { width: 100%; height: 100%; margin: auto; overflow: unset; }
  .gate-banner li{ width:100%; height:206rem; flex:inherit; flex-shrink: 0; opacity: 1;}
  .gate-banner li .line{ height: 100%;}
  .gate-banner a { height: auto; padding:19rem 0 16rem; }
  .gate-banner .tit { font-size: 18rem; letter-spacing: -0.72rem;}

  .gate-banner li:first-child .logo { margin: 37rem 0; width:160rem; }
  .gate-banner li:nth-child(2) .logo { margin: 42rem 0 38rem; width:184rem; }
  .gate-banner li:nth-child(3) .logo { margin: 39rem 0 34rem; width:187rem; } 
 
  .gate-slide .swiper-scrollbar{ left:0; width:100%; height:2px; border-radius:0; opacity: 1 !important; background: rgba(0, 0, 0, 0.08); }
  .gate-slide .swiper-scrollbar-drag{ background:#000; border-radius:0; }

}