@charset "utf-8";

/* css */
#page__trend_2022 {
  background-color: #1c1f22;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}
#page__trend_2022 p, #page__trend_2022 br {
  display: none;
}
#page__trend_2022 .is-motion{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .3s ease, transform .3s ease;
}
#page__trend_2022 .is-motion.on{
  opacity: 1;
  transform: translateY(0);
}
#page__trend_2022 .trend_visual {
  position: relative;
  background: #000 url(./images/visual_background.jpg) no-repeat center bottom/100% auto;
}
#page__trend_2022 .trend_visual-title {
  position: relative;
  padding: 0;
}
#page__trend_2022 .trend_visual .icons_item {
  width: 25%;
  position: absolute;
}
#page__trend_2022 .trend_visual .icons_sw{
  left: 27.2%;
  top: 18.91%;
  animation: char1 infinite 3s;
}
#page__trend_2022 .trend_visual .icons_ai{
  left: 57.4%;
  top: 2.7%;
  animation: char2 infinite 3.6s;
}
#page__trend_2022 .trend_visual .icons_camera{
  left: 10.3%;
  top: 61.08%;
  animation: char3 infinite 2.4s;
}
#page__trend_2022 .trend_visual .icons_6g{
  left: 58.2%;
  top: 52.97%;
  animation: char4 infinite 3.2s;
}
#page__trend_2022 .trend_visual .scroll{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 12%;
  margin-left: -6%;
}
#page__trend_2022 .trend_visual .scroll span{
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin-top: -100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(./images/visual_scroll1.png) no-repeat center/100% auto;
  animation: scroll 1.2s ease infinite;
  cursor: pointer;
}
#page__trend_2022 .trend_desc{
  position: relative;
}
#page__trend_2022 .trend_desc .text{
  position: absolute;
  left: 0;
  top: 0;
}
#page__trend_2022 .trend_contents{
  position: relative;
  padding: 0 5% 10%;
}
#page__trend_2022 .trend_contents .trend_title{
  position: relative;
  padding: 0;
}
#page__trend_2022 .trend_list{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-right: -1.6vw;
}
#page__trend_2022 .trend_list li{
  list-style-type: none;
  margin-left: 0;
  padding-right: 1.6vw;
  width: 50%;
}
#page__trend_2022 .trend_list.trend_list_3{
  margin-right: -1.2vw;
}
#page__trend_2022 .trend_list.trend_list_3 li{
  width: 33.3%;
  padding-right: 1.2vw;
}
#page__trend_2022 .trend_list a{
  display: block;
}
#page__trend_2022 .trend_list .trend_item-thumb{
  border: 1px solid #77797a;
  border-radius: 2vw;
  overflow: hidden;
  isolation: isolate;
  display: block;
}
#page__trend_2022 .trend_list.trend_list_3 .trend_item-thumb{
  border-radius: 1.4vw;
}
#page__trend_2022 .trend_list a .trend_item-thumb img{
  transition: transform .3s ease;
}
#page__trend_2022 .trend_list a:hover .trend_item-thumb img{
  transform: scale(1.1);
}
#page__trend_2022 .trend_contents .background{
  position: absolute;
  right: 0;
}
#page__trend_2022 .trend_contents_3 .background{
  width: 60%;
  top: -15%;
}
#page__trend_2022 .trend_contents_3 .background:after,
#page__trend_2022 .trend_contents_3 .background .light{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#page__trend_2022 .trend_contents_3 .background:after{
  content: "";
  background: url(./images/contents_bg_03-2.png) no-repeat center/100% auto;
  z-index: 3;
}
#page__trend_2022 .trend_contents_3 .background .light{
  background: url(./images/contents_bg_03-3.png) no-repeat center/100% auto;
  z-index: 2;
  opacity: 70%;
  animation: light 2s ease infinite;
}
#page__trend_2022 .trend_contents_3 .background .circle{
  position: absolute;
  left: 40.4%;
  top: 24.5%;
  z-index: 1;
  width: 43.334%;
  animation: infinite circle 30s linear;
}
#page__trend_2022 .trend_contents_6 .background{
  width: 50%;
  bottom: 0;
}
#page__trend_2022 .trend_contents_6 .background .circle{
  position: absolute;
  left: 3%;
  top: 6%;
  z-index: 1;
  width: 89.2%;
  animation: infinite circle2 40s linear;
}
#page__trend_2022 .trend_contents_7{
  padding-bottom: 6vw;
}
#page__trend_2022 .trend_contents_7 .background{
  width: 60%;
  bottom: 0;
  opacity: 100%;
}
#page__trend_2022 .trend_contents_7 .background .circle{
  position: absolute;
  left: 40%;
  top: 35%;
  z-index: 1;
  width: 38.667%;
  animation: infinite circle3 30s linear;
}

#page__trend_2022 .trend_item-desc{
  position: relative;
  display: block;
}
#page__trend_2022 .trend_item-button{
  position: absolute;
  right: 0;
  top: 50%;
  width:14.705%;
  transform: translateY(-50%);
  overflow: hidden;
  border-radius: 50%;
}
#page__trend_2022 .trend_list.trend_list_3 .trend_item-button{
  width:22.26%;
}
#page__trend_2022 .trend_contents_5 .trend_item-button{
  transform: translateY(0);
  top: 16.875%;
}
#page__trend_2022 .trend_item-button:before,
#page__trend_2022 .trend_item-button:after{
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(./images/btn_arrow.png) no-repeat center/100% auto;
}
#page__trend_2022 .trend_item-button:before{
  left: -100%;

}
#page__trend_2022 .trend_item-button:after{
  left: 0;
}
#page__trend_2022 .trend_list a:hover .trend_item-button:before{
  animation: button1 0.5s ease;
}
#page__trend_2022 .trend_list a:hover .trend_item-button:after{
  animation: button2 0.5s ease;
}

/*visual dong-dong*/
@keyframes char1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-6px, -2px);
  }
}
@keyframes char2 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(5px, -10px);
  }
}
@keyframes char3 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(-3px, -3px);
  }
}
@keyframes char4 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(6px, -2px);
  }
}
@keyframes scroll {
  33% {
    background-image: url(./images/visual_scroll2.png);
  }
  66% {
    background-image: url(./images/visual_scroll3.png);
  }
}
@keyframes button1 {
  0% {
    left: -100%;
  }
  100%{
    left: 0;
  }
}
@keyframes button2 {
  0% {
    left: 0;
  }
  100%{
    left: 100%;
  }
}
@keyframes light {
  0% {
    opacity: 60%;
  }
  50% {
    opacity: 100%;
  }
}
@keyframes circle{
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes circle2{
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes light2 {
  0% {
    opacity: 100%;
  }
  30%{
    opacity: 20%;
  }
  40%{
    opacity: 100%;
  }
}
@keyframes circle3{
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0);
  }
}

@media (max-width: 768px) {
  @keyframes char1 {
    0% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(-4px, -1px);
    }
  }
  @keyframes char2 {
    0% {
      transform: translate(0px, 0px);
    }
    50% {
      transform: translate(3px, -6px);
    }
  }
  @keyframes char3 {
    0% {
      transform: translate(0px, 0px);
    }
    50% {
      transform: translate(-2px, -2px);
    }
  }
  @keyframes char4 {
    0% {
      transform: translate(0px, 0px);
    }
    50% {
      transform: translate(3px, -3px);
    }
  }
}