@charset "utf-8";

/* *****************header **********************/
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  transition: background 0.3s ease;
  background: #0c0c0c;
  height: 80px;
  z-index: 100;
}
nav{
    display: flex;
    padding: 0 5%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}
nav h1 a{
  display: block;
  height: 22px;
}
nav h1 a img{
  height: 100%;
  object-fit: contain;
}
nav .menu{
  display: flex;
  align-items: center;
  color: #fff;
}
nav .menu li{
  padding: 0 20px;
}
nav .menu li.btn{
  width: 120px;
  height: 44px;
  background-color: #e60013;
  padding: 0;
  border-radius: 1px;
  transition: .3s;
}
nav .menu li.btn:hover{
  background-color: #a7000e;
}
nav .menu li a{
  color: #fff;
  display: block;
  width: 100%;
  height: 100%;
}
nav .menu li.btn a{
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
}
nav .menu li:hover a{
  font-weight: 500;
}
/* main에서만 처음 투명 */
.main-page .site-header {
  background: transparent;
}
.site-header.scrolled {
  background: #0c0c0c;
}
/* 모바일 nav */
.mob-menu{
    display: none;
}

@media screen and (max-width:1000px){
  nav{
      padding: 0 3%;
  }
  nav h1 a{
    height: 20px;
  }
  nav .menu li a{
    font-size: 15px;
  }
  nav .menu li.btn{
    height: 40px;
  }
}
@media screen and (max-width:720px){
  nav .menu{
    display: none;
  }
  nav .mob-menu{
    display: block;
  }
  nav .mob-menu > img{
    height: 24px;
  }
  nav .mob-menu .menu-wrap{
    display: none;
    position: fixed;
    background-color: #111111e8;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100% - 80px);
    z-index: 100;
  }
  nav .mob-menu .menu-wrap .menu{
    display: block;
    text-align: center;
    padding: 20px 0;
  }
  nav .mob-menu .menu-wrap .menu li{
    padding: 28px 0;
  }
  nav .mob-menu .menu-wrap .menu li.btn{
    padding: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
  }
}

/* *******************footer********************** */
footer{
  width: 100%;
  background-color: #0c0c0c;
  position: relative;
  z-index: 10;
}
.footer-wrap{
  width: 100%;
  padding: 120px 5%;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.footer-wrap .left{
  width: 40%;
}
.footer-wrap .left .text{
  color: #fff;
  margin-bottom: 120px;
  font-size: 24px;
  font-weight: 300;
}
.footer-wrap .left .info .call{
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 54px;
}
.footer-wrap .left .info .call span{
  color: #888;
  font-size: 16px;
  font-weight: 400;
  display: block;
  margin-bottom: 8px;
}
.footer-wrap .left .hours li{
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-wrap .left .hours li div{
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.footer-wrap .left .hours li .day{
  width: 100px;
}
.footer-wrap .left .hours li .time{
  font-weight: 300;
}
.footer-wrap .right{
  width: 60%;
}
.footer-wrap .right .footer-menu li{
  text-align: right;
  margin-bottom: 32px;
}
.footer-wrap .right .footer-menu li a{
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.footer-wrap .right .copy{
  text-align: right;
  display: flex;
  position: absolute;
  right: 5%;
  bottom: 120px;
}
.footer-wrap .right .copy .copylight{
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid #fff;
}
.footer-wrap .right .copy .privacy a{
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 300;
}