/*! Build Date: 2023. 6. 29. 오후 1:24:16 */
#page__unpacked_2023 {
  width: 100%;
  position: relative;
  /* height: 100%; */
  /*height: 155vh;*/
}
#page__unpacked_2023 p,
#page__unpacked_2023 br {
  display: none;
}
#page__unpacked_2023 h3 {
  padding: 0;
}
#page__unpacked_2023 .page__unpacked_inner {
  position: relative;
  width: 100%;
  /*height: 70vh;*/
  background: url(https://img.kr.news.samsung.com/betree_content/unpacked_history_20230706/images/unpack_interactive_back.jpg) no-repeat top/ 100% auto;
  padding-bottom: 12vh;
}
#page__unpacked_2023 .list_wrap {
  background: url(https://img.kr.news.samsung.com/betree_content/unpacked_history_20230706/images/unpack_interactive_back.jpg) no-repeat top/ 100% auto;
  width: 100%;
  height: 789px;
  overflow: hidden;
  padding-top: 30px;
}
#page__unpacked_2023 .list {
  width: 770px;
  margin: 0 auto;
  position: relative;
  transform: translateY(750px);
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
  z-index: 1;
}
#page__unpacked_2023 .item .box {
  width: 360px;
  margin: 0 auto;
  position: relative;
  transform: translateY(100px);
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
  z-index: 1;
}
#page__unpacked_2023 .list_item {
  position: absolute;
  left: 0;
  /* border-radius: 24px; */
  top: calc(var(--number) * 75px);
  height: 100%;
  opacity: 1;
}
#page__unpacked_2023 .list_item.current{
  transform: scale(1.05);
}
#page__unpacked_2023 .list_item .shadow{
  /*background-color: #000;*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  border-radius: 37px;
  /*transform: scale(1.05);*/
  opacity: 0;
}
#page__unpacked_2023 .list_item .item_card {
  transition: transform 0.2s;
  transform-style: preserve-3d;
  position: relative;
  z-index: 2;
}
#page__unpacked_2023 .list_item.rotate_card .item_card {
  -webkit-transform: rotatey(180deg);
  transform: rotatey(180deg);
  -moz-transform: rotatey(180deg);
}
#page__unpacked_2023 .list_item.rotate_card .shadow{
  opacity: 1;
  transition: opacity 0s ease 0.1s;
}
#page__unpacked_2023 .list_item .front,
#page__unpacked_2023 .list_item .back {
  top: 0;

  width: 100%;
  box-shadow: 0 1px 19px 7px rgba(0, 0, 0, 0.5);
  border-radius: 37px;
}
#page__unpacked_2023 .list_item.current .front{
  /*-webkit-transform: translate3d(0,0,0) scale(1.05);*/
  /*transform: translate3d(0,0,0) scale(1.05);*/
}
#page__unpacked_2023 .list_item.rotate_card .back {
  -webkit-transform: rotatey(180deg) ;
  -moz-transform: rotatey(180deg) ;
  transform: rotatey(180deg) ;
}

/* #page__unpacked_2023 .list_item.active {
  z-index: 10;
} */
#page__unpacked_2023 .list_item .front {
  position: relative;

  perspective: 0;
  -webkit-perspective: 0;
  -moz-perspective: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  visibility:visible;
  transform-origin: 50% 50%;
  z-index: 3;
  border-radius: 37px;
}
#page__unpacked_2023 .list_item .item_card .front:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* z-index: 55; */
  border-radius: 37px;
}
/* #page__unpacked_2023 .list_box .list_item.current {} */
#page__unpacked_2023 .list_item.current .front:after {
  opacity: 0;
  transition: opacity 0.1s ease;
}
#page__unpacked_2023 .list_item .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  z-index: 2;
   transform: rotatey(180deg);
  -webkit-transform: rotatey(180deg);
  -moz-transform: rotatey(180deg);
  -webkit-backface-visibility: hidden;   /* 추가  카드 뒤집을 때 사파리에서 안보이던거 해결해준 코드 */ 
  backface-visibility: hidden;/* 추가 */
  -webkit-transform-style: preserve-3d; /* 추가 */
  transform-style: preserve-3d; /* 추가 */
}
#page__unpacked_2023 .list_item img {
  width: 100%;
  border-radius: 39px;
}

@media (max-width: 968px) {
  #page__unpacked_2023 .list_wrap {
    height: 700px;
  }
  #page__unpacked_2023 .list {
    width: 622px;
    transform: translateY(100px);
  }

  #page__unpacked_2023 .list_item img {
    width: 100%;
    border-radius: 37px;
  }
}
@media (max-width: 830px) {
  #page__unpacked_2023 .list_wrap {
    height: 702px;
  }
  #page__unpacked_2023 .list {
    width: 622px;
    transform: translateY(100px);
  }

  #page__unpacked_2023 .list_item img {
    width: 100%;
    border-radius: 37px;
  }
}

@media (max-width: 768px) {
  #page__unpacked_2023 .list_wrap {
    height: 576px;
  }
  #page__unpacked_2023 .list {
    width: 85%;
    transform: translateY(100px);
  }
  #page__unpacked_2023 .list_item {
    top: calc(var(--number) * 50px);
  }
  #page__unpacked_2023 .list_item img {
    width: 100%;
    border-radius: 37px;
  }
}



@media (max-width: 560px) {
  #page__unpacked_2023 .list_wrap {
    height:434px;
  }
  #page__unpacked_2023 .list {
    width: 85%;
    transform: translateY(60px);
  }
  #page__unpacked_2023 .list_item {
    top: calc(var(--number) * 40px);
    border-radius: 16px;
  }
  #page__unpacked_2023 .list_item img {
    width: 100%;
    border-radius: 16px;
  }
  #page__unpacked_2023 .list_item .item_card .front:after{
    border-radius: 16px;
  }
}
@media (max-width: 470px) {
  #page__unpacked_2023 .list_wrap {
    height:415px;
  }
  #page__unpacked_2023 .list {
    width: 85%;
    transform: translateY(60px);
  }
  #page__unpacked_2023 .list_item {
    top: calc(var(--number) * 40px);
    border-radius: 16px;
  }
  #page__unpacked_2023 .list_item img {
    width: 100%;
    border-radius: 16px;
  }
}
@media (max-width: 448px) {
  #page__unpacked_2023 .page__unpacked_inner{
    padding-bottom: 0vh;
  }  
  #page__unpacked_2023 .list_wrap {
    height:415px;
  }
  #page__unpacked_2023 .list {
    width: 80%;
    transform: translateY(60px);
  }
  #page__unpacked_2023 .list_item {
    top: calc(var(--number) * 40px);
    border-radius: 16px;
  }
  #page__unpacked_2023 .list_item img {
    width: 100%;
    border-radius: 16px;
  }
}