#wrap{
  position: relative;
  /* height:2000px; */
}

.main_box{
  width: 100%;
  height: 100vh;
  position: relative;
}

/*.pofol_iframe{*/
/*  background-color: #fff;*/
/*  position: absolute;*/
/*  left: 50%;*/
/*  top: 100%;*/
/*  transform: translateX(-50%);*/
/*  width: 100vw;*/
/*  height: auto;*/
/*  z-index: 10;*/
/*  overflow: hidden;*/
/*  transition: top 0.7s cubic-bezier(0, 0.9, 0.63, 0.99);*/
/*  transition-delay: 0.2s;*/
/*}*/

.pofol_iframe {
  background-color: #fff;
  position: fixed;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh !important;
  min-height: 600px !important;
  z-index: 10;
  overflow: hidden;
  transition: top 0.7s cubic-bezier(0, 0.9, 0.63, 0.99);
  transition-delay: 0.2s;
}

.pofol_iframe.active {
  top: 0;
  overflow: auto;
}

.scroll_text_box{
  position: fixed;
  width: 10vw;
  top: 50%;
  left:3vw;
  transform: translateY(-50%);
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  transition: all 2s ease;
  opacity: 0;
  z-index: -5;
}

.scroll_arrow_deg{
  transform: rotate(270deg);
  margin-left: 15px;
}

.scroll-arrow {
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  animation: arrow-wave 1s infinite;
  animation-direction: alternate;
}
.scroll-arrow:nth-child(1) {
  animation-delay: 0.1s;
}
.scroll-arrow:nth-child(2) {
  animation-delay: 0.2s;
}
.scroll-arrow:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes arrow-wave {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.pagination {
  display: none;
}

.bullet{
  display: none;
}

#scrollbar {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.scroll-content{
  display: flex;
  align-content: center;
}

.scrollbar-track-x {
  height: 0px !important;
  bottom: 1px !important;
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
}
.scrollbar-track-x .scrollbar-thumb {
  height: 0px;
  top: -1px;
}

.wrapper {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  counter-reset: item;
  height: 100vh;
}
.wrapper .item {
  display: flex;
  justify-content: center;
  transition: all 1.5s ease;
  transform: scale(0.9);
  transform-origin: center;
  opacity: 0;
  position: relative;
  z-index: 10;
}

.wrapper .item::after{
  width: 100%;
  height: 30px;
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -4;
}

.wrapper .item2 {
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  transition: all 1.5s ease;
  transform: scale(1) !important;
  transform-origin: center;
  opacity: 1 !important;
  position: relative;
  z-index: 10;
}

.wrapper .item2::after{
  width: 100%;
  height: 30px;
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -4;
}

.slide_inner_ul{
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
}

.slide_inner_list .popol_txt_box{
  position: absolute;
  left: 10%;
  top: 10%;
  font-size: 1.2rem;
  color: #fff;
  width: 80%;
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 2px 2px 5px #00000063;
}

.slide_list_dim{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #3c32ffdb;
  opacity: 0;
  transition: 0.3s;
}

.slide_inner_list:hover .slide_list_dim{
  opacity: 1;
}

.slide_inner_list:hover .popol_line{
  width: 60px;
}

.slide_inner_list:hover .popol_plus{
  transform: translateY(5px);
}

.dim_txt_box{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  position: relative;
}
.slide_inner_list .dim_txt_box .dim_txt{
  font-size: 1.2rem;
  color: #fff;
  font-weight: 400;
  width: calc(100% - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  margin: 20px 0 20px 0;
}
.slide_inner_list .dim_txt_box .popol_plus{
  width: 30px;
  /* transform: translateY(0px); */
  transition: all 0.5s ease;
}

.popol_line{
  position: absolute;
  bottom: 30px;
  width: 0px;
  height: 1px;
  background-color: #fff;
  transition: all 0.5s ease;
}

.slide_inner_list{
  max-width: 500px;
  max-height: 500px;
  height: calc(50% - 5px);
  margin-bottom: 10px;
  border-radius: 20px;
  overflow: hidden;
  cursor: -webkit-grab;
  cursor: grab;
  position: relative;
  transition: 0.3s;
}

.slide_inner_list a{
  display: flex;
  width: 100%;
  height: 100%;
}

.slide_inner_list:last-child{
  margin-bottom: 0px;
}

.slide_inner_list .popol_img{
  height: 100%;
}

.slide_inner_list:hover{
  box-shadow: 4px 4px 8px 0 #00000061;
}




.wrapper .item:first-child{
  margin-left: 10vw;
}


.contents_more_box{
  display: flex;
  align-items: center;
  margin-left: 3vw;
}

.anim-explode{
  pointer-events: none;
}

.link {
  display:block;
  position: relative;
  padding: 30%;
  color: #333;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.load_more_line{
  width: 30px;
  height: 1px;
  background-color: #333;
  margin-left: 10px;
  position: relative;
}
.load_more_line::after{
  content: "";
  display: block;
  width: 12px;
  height: 11px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}


.link svg {
  position: absolute;
  /* width: 500%; */
  height: 500%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}



@media (min-width:1921px) {
  
  .slide_inner_ul{
    height: calc(100vh - 340px);
  }

}

@media (max-width:1450px) {
  
  .scroll_text_box{
    display: none;
  }

}

@media (max-width:1200px) {
  
  .slide_inner_ul{
    height: calc(100vh - 200px);
  }

}

@media (max-width:1000px) {
  
  .slide_inner_list .popol_txt_box {
    font-size: 1rem;
}

.slide_inner_list .dim_txt_box .dim_txt {
  font-size: 1rem;
}

}


.main_box1{
  height: 300vh;
}

@media (max-width:767px) {
    html, body {height:100%;}
    #wrap, .main_box, #scrollbar, .scroll-content{
        height: 100%;
    }
    .wrapper {
        height: 100%;
    }  
    .wrapper .item {
        height:100%;
        align-items: center;
    }
    .slide_inner_ul {
        height: calc(100% - 200px);
    }
}