.main-banner {
  height: 80vh;
  position: relative;
  overflow: hidden;
}
.main-banner > .main-img {
  width: 100%;
  height: 100%;
  background-image: url(/static/image2/banner_main.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: scale(110%);
  transition: all 2s cubic-bezier(0.060, 0.515, 0.485, 0.970);
}
.main-banner.main-start > .main-img {
  transform: scale(100%);
}
.main-banner > .main-banner-text-box {
  position: absolute;
  bottom: 110px;
  right: 135px;
  text-align: right;
  font-size: 64px;
  color: #fff;
}
.main-banner > .main-banner-text-box > div {
  font-weight: 700;
}
.main-banner > .main-banner-text-box>* {
  filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, .4));
  transform: translateY(-100px);
  transition: all 1s .2s cubic-bezier(0.015, 0.195, 0.140, 0.780);
  opacity: 0;
}
.main-banner > .main-banner-text-box img {
  margin-bottom: -10px;
  transform: translateY(-120px);
  transition: all 1s .5s cubic-bezier(0.015, 0.195, 0.140, 0.780);
}
.main-banner.main-start .main-banner-text-box>* {
  transform: translateY(0);
  opacity: 1;
}

.scroll-img-box {
  height: 170px;
  background-color: #1B1B1B;
}

.scroll-img-box > .scroll-img {
  width: 28px;
  height: 45px;
  border-radius: 20px;
  border: 2px solid #FFF;
  position: relative;
  margin-top: 33px;
}
.scroll-img-box > .scroll-img::after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background-color: #FFF;
  animation: scroll 2s infinite;
}
@keyframes scroll {
  0% {top:8px; height: 0px;}
  45% {top:8px; height: 12px;}
  90% {top:20px; height: 0px;}
  100% {top:8px; height: 0px;}
}
.scroll-img-box > .scroll-img::before {
  content: "scroll";
  display: block;
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  color: #9C9C9C;
}

.recommend-container {
  padding-top: 100px;
  padding-bottom: 180px;
}
.recommend-container > .content-title {
  color: #FFFFFF;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  padding-bottom: 57px;
}
.recommend-container .recommend-item {
  width: calc(100% - 20px);
  opacity: 0;
  transform: translateY(-100px);
  transition: .5s;
  cursor: pointer;
}
.recommend-container.active .recommend-item {
  opacity: 1 !important;
  transform: translateY(0px) !important;
}
.recommend-container .recommend-item:nth-child(2) {
  transition: .5s .2s;
}
.recommend-container .recommend-item:nth-child(3) {
  transition: .5s .4s;
}
.recommend-container .recommend-item:nth-child(4) {
  transition: .5s .6s;
}

.recommend-item > .img-box {
  height: 400px;
  border-radius: 10px;
  position: relative;
  background-color: #121212;
}
.recommend-item > .img-box > img {
  position: relative;
  object-fit: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.recommend-item > .desc-box > .item-title {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 700;
  margin-top: 10px;
}
.recommend-item > .desc-box > .item-location {
  color: #5D5D5D;
  font-size: 16px;
}
.recommend-item > .desc-box > .item-location::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url('../../static/image2/icon_marker.png');
  display: inline-block;
  margin-right: 2px;
}
.recommend-item-qna {
  color: #DF592F;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 15px;
}
.recommend-item-qna::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url('../../static/image2/icon_qna.png');
  display: inline-block;
  margin-right: 2px;
}
.recommend-item-tag {
  width: calc(100% - 20px);
}
.recommend-item-tag > .tag {
  background-color: #313131;
  color: #9F9F9F;
  border-radius: 4px;
  height: 30px;
  margin-right: 4px;
  padding: 2px 10px;
  margin-bottom: 4px;
  font-size: 16px;
}
.recommend-item-tag > .tag:last-child {
  margin-right: 0 !important;
}