.sub{
  padding-top: 15vw;
  /* border: 1px solid violet; */
  margin-bottom: 6.9444vw;
  /* height: 150vw; */
}
.sub-bg{
  height: 20vw;
  background: url("../image/sub/website_m/sub-bg.png") no-repeat center;
  background-size: cover;
  position: relative;
}
.sub-bg img{
  width: 67.0833vw;
  margin-left: 7vw;
  margin-top: 10vw;
  /* position: relative;
  z-index: 1000; */

  animation: sub 1.5s both;
  animation-delay: 0.5s;
}
@-webkit-keyframes sub {
  0%{
    opacity: 0;
    transform: translateX(-30%);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes sub {
  0%{
    opacity: 0;
    transform: translateX(-30%);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}
.sub-menu{
  width: 100%;
  height: 10vw;
  position: relative;
  border-bottom: 1px solid #bdbdbd;
}
.sub-menu .home-btn{
  width: 11.1111vw;
  height: 100%;
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid #bdbdbd;
  margin-left: 7vw;
  box-sizing: border-box;
}
.sub-menu .home-btn a{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sub-menu .home-btn a img{
  width: 3.0556vw;
}

.sub-menu .cont{
  position: absolute;
  width: 34.7222vw;
  height: 100%;
  top: 0;
  left: 18.1111vw;
  background: rgb(255, 255, 255);
  border-right: 1px solid #bdbdbd;
  /* border: 1px solid black; */
}
.sub-menu .cont h2{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  font-size: 2.7778vw;
  line-height: 10vw;
  margin-left: 3.4722vw;
  font-weight: 700;
  color: #454545;
}

.sub-menu .cont .down-btn{
  width: 1.8vw;
  height: 1.8vw;
  border: 3px solid #17356b;
  border-top: none;
  border-left: none;
  margin-left: -10%;
  position: absolute;
  top: 50%;
  right: 2vw;
  transform: translateY(-50%) rotate(45deg);
  cursor: pointer;
  transition: 0.3s;
}
.sub-menu .cont .down-btn.active{
  transform: translateY(-50%) rotate(-135deg);
}



.sub-img{
  width: 100%;
  /* border: 1px solid black; */
  /* width: 92vw; */
  margin: 0 auto;
  display: block;
  padding: 7vw 0 2vw;
}
.sub-cont{
  width: 92vw;
  margin: 5vw auto 0;
}
.sub-img,
.sub-cont{
  animation: sub-img 1.7s both;
  animation-delay: 0.7s;
}

@-webkit-keyframes sub-img {
  0%{
    transform: translateY(30%);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes sub-img {
  0%{
    transform: translateY(10%);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

/* sub 오시는길 카카오맵 & 링크 css */
.sub_map{
  width: 94%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  
  animation: sub-map 1.7s both;
  animation-delay: 0.7s;
}
@-webkit-keyframes sub-map {
  0%{
  transform: translate(-50%, -24%);
    opacity: 0;
  }
  100%{
  transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes sub-map {
  0%{
  transform: translate(-50%, -24%);
    opacity: 0;
  }
  100%{
  transform: translate(-50%, -50%);
    opacity: 1;
  }
}
.sub_map .root_daum_roughmap{
  width: 100% !important;
}
.sub_map .root_daum_roughmap .wrap_map{
  width: 100%;
  height: 71vw !important;
}

.contact_link{
  width: 42%;
  height: 6.5vw;
  position: absolute;
  bottom: 8.1%;
  left: 50%;
  transform: translateX(-50%);
}
.contact_link .contact_btn{
  width: 48%;
  height: 100%;
  position: absolute;
}
.contact_link .contact_btn.kakao{
  right: 0;
  /* background: #f9e000; */
}
.contact_link .contact_btn.naver{
  left: 0;
  /* background: #2db400; */
}