:root {
  --primary-50: #0029b4;
  --primary-40: #0079e7;
  --secondary-60: #62df00;
}
::-moz-selection {
  /* Code for Firefox */
  color: #0029b4;
  background: #62df00;
}

::selection {
  color: #0029b4;
  background: #62df00;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
input,
select,
textarea {
  background-color: transparent;
  outline: none;
}
button {
  cursor: pointer;
  background-color: transparent;
  outline: none;
  border: 0;
}
html {
  font-size: 1vw;
}
body {
  background-color: white;
  font-family: "Inter", sans-serif;
  color: white;
  overflow: hidden !important;
}
.hidden_section {
  display: none;
}

.vjs-poster {
  background-size: cover !important;
}

.poster_video,
.poster_video_25 {
  z-index: 0;
  transition: all 0.2s;
}
.poster_video.active,
.poster_video_25.active {
  z-index: 2;
}

#play_music.active .line-1 {
  animation: infinite playing 0.5s ease-in-out;
  animation-delay: 0.2s;
}

#play_music.active .line-2 {
  animation: infinite playing 0.5s ease-in-out;
  animation-delay: 0.1s;
}

#play_music.active .line-3 {
  animation: infinite playing 0.5s ease-in-out;
  animation-delay: 0.25s;
}

@keyframes playing {
  0% {
    transform: scaleY(0.2);
  }

  33% {
    transform: scaleY(0.6);
  }

  66% {
    transform: scaleY(0.9);
  }

  100% {
    transform: scaleY(0.2);
  }
}
#intro_desktop.active {
  z-index: 9999;
  opacity: 1;
  pointer-events: all;
}
#list_categories_second {
  writing-mode: vertical-lr;
  display: none;
}
#list_categories_second input {
  display: none;
}

#list_categories_second.active {
  display: flex;
}

#list_categories_second label.active {
  background-color: var(--primary-50);
  color: white;
}

#list_categories_primary .label-item.active {
  opacity: 1;
}
#list_categories_primary input {
  display: none;
}

#list_categories_primary .label-item.active::before {
  display: block;
}

#mute_music.active {
  transform: translate(-50%, 40%);
}

#ongtt_district_radio.no-data {
  display: none !important;
}

/* end swiper primary */
.btn_test {
  -webkit-mask-image: url("../images/mask3.png");
  mask-image: url("../images/mask3.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 98%;
  mask-size: 98%;
}
.btn_test_small {
  -webkit-mask-image: url("../images/mask-circle-small.png");
  mask-image: url("../images/mask-circle-small.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 98%;
  mask-size: 98%;
}
.btn_test_v2 {
  -webkit-mask-image: url("../images/mask-circle.png");
  mask-image: url("../images/mask-circle.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 98%;
  mask-size: 98%;
}

#card_first {
  top: -36%;
}
#card_first.active {
  top: -50%;
  animation: downCard 4.5s ease-in alternate infinite;
}

#card_first.active #noti_circle::before {
  animation: scaleBefore 4.5s ease-in alternate infinite;
}
#card_first.active #noti_circle::after {
  animation: scaleAfter 4.5s ease-in alternate infinite;
}

@keyframes scaleBefore {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    transform: translate(-50%, -50%) scale(1);
  }
  90% {
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
  }
}

@keyframes scaleAfter {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    transform: translate(-50%, -50%) scale(1);
  }
  90% {
    transform: translate(-50%, -50%) scale(0.7);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.7);
  }
}
@keyframes downCard {
  0% {
    top: -50%;
  }
  30% {
    top: -36%;
  }
  60% {
    top: -36%;
  }
  90% {
    top: -50%;
  }
  100% {
    top: -50%;
  }
}

@keyframes fallCard {
  0% {
    top: -36%;
    /* transform: rotateX(0deg); */
    transform: scale(1);
    filter: blur(0);
    -webkit-filter: blur(0);
  }
  100% {
    top: 300%;
    /* transform: rotateX(120deg); */
    transform: scale(1.7);
    filter: blur(8px);
    -webkit-filter: blur(8px);
  }
}

@keyframes blurCard {
  0% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
    pointer-events: none;
  }
  100% {
    opacity: 0;
    transform: scaleY(0.7);
    transform-origin: top;
    pointer-events: none;
  }
}

#box_categories_primary.active {
  display: block;
}

.container_card {
  width: 100%;
  height: 100%;
  perspective: 900px;
}

.card {
  height: 100%;
  width: 100%;
  position: relative;
  transition: transform 1500ms;
  transform-style: preserve-3d;
}

.front,
.back {
  height: 100%;
  width: 100%;
  border-radius: 2rem;
  position: absolute;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg) rotateZ(180deg);
}

.btn_play .icon_play,
.btn_play_25 .icon_play {
  clip-path: polygon(25% 0, 25% 100%, 100% 50%);
}

.btn_play.active .icon_play,
.btn_play_25.active .icon_play {
  clip-path: polygon(
    10% 0%,
    10% 100%,
    35% 100%,
    35% 0,
    65% 0,
    65% 100%,
    35% 100%,
    35% 100%,
    90% 100%,
    90% 0%
  );
}

.swiper_years .swiper-slide .swiper-slide-children {
  overflow: hidden;
  transition: all 0.5 linear;
}

.swiper_years .swiper-slide.swiper-slide-active .swiper-slide-children {
  animation: overlaySwiperShow 0.3s linear forwards;
  background: linear-gradient(
    0deg,
    rgba(35, 31, 32, 0.6) -1.65%,
    rgba(35, 31, 32, 0.42) 49.31%,
    rgba(35, 31, 32, 0.6) 102.34%
  );
}
.swiper_years .swiper-slide.swiper-slide-active .overlay_item_primary,
.swiper_years .swiper-slide.swiper-slide-active .year_item_primary,
.swiper_years .swiper-slide.swiper-slide-active .box_btn_read_more,
.swiper_years .swiper-slide.swiper-slide-active .title_item_primary {
  opacity: 1;
}

.swiper_years .swiper-slide .swiper-slide-children::before {
  content: "";
  transition: all 0.4s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    #231f20 0%,
    #231f20 6.71%,
    rgba(35, 31, 32, 0.2) 27%
  );
  opacity: 0.8;
  border-radius: 1.5rem;
}

.swiper_years .swiper-slide.swiper-slide-active .swiper-slide-children::after {
  content: "";
  transition: all 0.4s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    #231f20 0%,
    #231f20 29.85%,
    rgba(35, 31, 32, 0.2) 46.91%
  );
  opacity: 0.8;
  border-radius: 1.5rem;
}

.swiper_years .swiper-slide:first-child .swiper-slide-children::after {
  display: none;
}

.swiper_years .swiper-slide.swiper-slide-active .swiper-slide-children::before {
  opacity: 0;
  pointer-events: none;
}

.swiper_years .swiper-slide.swiper-slide-prev,
.swiper_years .swiper-slide.swiper-slide-next {
  opacity: 1;
}

.swiper_years .swiper-slide.swiper-slide-prev .year_item,
.swiper_years .swiper-slide.swiper-slide-next .year_item {
  transform: translate(-50%, 0);
  opacity: 1;
}
.swiper_years .swiper-slide.swiper-slide-active .description_item {
  opacity: 1;
}

/* input & mobiscroll css */

.lang-option-active {
  background: rgba(0, 41, 180, 0.1);
}
#content_detail::-webkit-scrollbar {
  display: none;
}

#popup_detail {
  font-family: "Noto Serif", serif !important;
}

#popup_detail.active {
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: translateY(0);
  animation: overLayPopup 0.2s 0.35s linear forwards;
}

@keyframes overLayPopup {
  to {
    background: rgba(0, 0, 0, 0.4);
  }
}

.popup_conten_next.active {
  height: 100%;
  transition: all 0.5s;
}
.popup_conten_third.active {
  height: 100%;
  transition: all 0.5s;
}
.btn_btn_next_popup {
  transition: all 0.2s;
}
.popup_conten_next.active .popup_conten_next.active {
  transition: all 0.5s linear;
  margin-bottom: 44vh;
  transition-delay: 2s;
}

#box_pull_receive.active {
  opacity: 0;
}

#box_pull_receive.active #card_first {
  top: -50%;
}

#box_ani_card .frame {
  height: 800px;
  width: 724px;
  object-fit: contain;
  position: relative;
}
#container_ani_card {
  transform-origin: center center;
}

#container_ani_card.active {
  transition: all 0.2s linear;
  opacity: 1;
}

#container_ani_card.active2 .img_year_25 {
  opacity: 1;
  transition: all 0.4s linear;
  transition-delay: 3.1s;
}

#container_ani_card.active2 #box_ani_img {
  animation: action1 2.2s 0.1s steps(63) forwards;
}

#container_ani_card.active2 #box_avatar_customer,
#container_ani_card.active2 #box_name_customer,
#container_ani_card.active2 #title_billion,
#container_ani_card.active2 #box_hour_customer {
  opacity: 1;
  transition: all 0.2s linear;
  transition-delay: 2.3s;
}

@keyframes action1 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-724px * 63));
  }
}

.kYCyEX {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.SXlIO {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  overflow: visible;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

div#language-result > li {
  list-style: none;
  pointer-events: none;
}
div#language-result > li:not(.current-lang) {
  display: none;
}
#language-box .current-lang {
  pointer-events: none;
}

.wpb_wrapper p {
  margin-top: 1rem;
}
.wpb_wrapper {
  margin-bottom: 1rem;
}

#container_ani_card.active3 #box_edit_image {
  display: none;
}

#container_ani_card.active3 #box_shadow_card {
  display: block;
}

#container_ani_card.active3 #box_shadow_card div:first-child {
  animation: show_box_drag 1s 0.5s linear forwards;
}

#container_ani_card.active3 #box_shadow_card input,
#container_ani_card.active3 #box_shadow_card span,
#container_ani_card.active3 #box_shadow_card button {
  transition: all 0.1s linear;
  transition-delay: 1.5s;
  opacity: 1;
}

@keyframes show_box_drag {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 20rem #00000040;
    opacity: 1;
  }
}

#container_ani_card.active3 #box_name_customer,
#container_ani_card.active3 #box_hour_customer,
#container_ani_card.active3 #title_billion {
  transition: all 0.3s linear;
  opacity: 0;
}
#container_ani_card.active4 #box_name_customer,
#container_ani_card.active4 #box_hour_customer,
#container_ani_card.active4 #title_billion {
  transition: all 0.3s linear;
  opacity: 1;
}

.vc_align_center {
  display: flex;
  justify-content: center;
}

.content_detail_popup,
.content_detail_popup_next {
  line-height: 27px;
  font-size: 17px;
}

.content_detail_popup > img,
.content_detail_popup_next > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content_detail_popup > p,
.content_detail_popup .wpb_wrapper > div,
.content_detail_popup > figure,
.content_detail_popup > h2,
.content_detail_popup_next > p,
.content_detail_popup_next .wpb_wrapper > div,
.content_detail_popup_next > figure .content_detail_popup_next > h2 {
  margin-bottom: 40px;
}

.content_detail_popup > figure + p,
.content_detail_popup_next > figure + p {
  margin-top: 40px;
}

.content_detail_popup h2,
.content_detail_popup_next h2 {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 600;
  margin-bottom: 40px;
}

/* start responsive desktop */
@media screen and (min-width: 1024px) {
  #list_categories_second label {
    transform: rotate(180deg);
  }

  #container_ani_card.active2 {
    animation: action2 0.8s 2.3s cubic-bezier(0.675, 0.885, 0.32, 1.05) forwards;
  }

  #container_ani_card.active3 {
    animation: action3 0.5s linear forwards;
  }

  #container_ani_card.active4 {
    animation: action4 0.5s linear forwards;
  }

  .content_detail_popup img,
  .content_detail_popup_next img {
    min-width: 1170px !important;
    transform: translateX(calc((1170px - 696px) / 2 * -1));
  }

  .content_detail_popup img.full-width,
  .content_detail_popup_next img.full-width {
    min-width: 87.375rem !important;
    transform: translateX(calc((87.375rem - 696px) / 2 * -1));
  }

  .content_detail_popup > *,
  .content_detail_popup_next > * {
    width: 696px !important;
    margin: 0 auto;
  }

  .content_detail_popup img,
  .content_detail_popup_next img {
    border-radius: 16px;
  }

  .content_detail_popup > figure.wp-block-gallery,
  .content_detail_popup_next > figure.wp-block-gallery {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    gap: 20px;
    margin-top: 40px;
    min-width: 1170px !important;
    width: 1170px !important;
  }

  .content_detail_popup > figure.wp-block-gallery *,
  .content_detail_popup_next > figure.wp-block-gallery * {
    width: 100% !important;
    min-width: 100% !important;
    transform: translateX(0) !important;
    border-radius: 0;
  }

  .content_detail_popup figcaption,
  .content_detail_popup_next figcaption {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    padding-left: 16px;
    padding-right: 16px;
    color: #98a9c4;
    min-width: 1170px !important;
    transform: translateX(calc((1170px - 696px) / 2 * -1));
    text-align: center;
  }
}

/*  new 5g*/
#container_5g.active {
  display: block;
}
#list_dollar {
  font-family: "Montserrat", sans-serif;
}

#list_dollar li span {
  background: linear-gradient(90deg, #fcffff 0%, #05ffff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#title_5g {
  text-shadow: 0px 0px 28px rgba(255, 255, 255, 0.47);
  animation: title5G 1s linear alternate infinite;
}

@media screen and (min-width: 1120px) {
  #container_5g.active #box_content_5g {
    animation: showContent5G 0.5s ease-in forwards;
  }
  @keyframes showContent5G {
    from {
      opacity: 0;
      left: 13.45rem;
    }
    to {
      opacity: 1;
      left: 8.45rem;
    }
  }
  #container_5g.active #ship_5g {
    transform: scale(0.5);
    transform-origin: top right;
    animation: shipRun 0.7s ease-out forwards;
  }
  @keyframes shipRun {
    from {
      transform: scale(0.5);
    }
    to {
      transform: scale(1);
    }
  }
  #container_5g.active #line_light {
    animation: showLight 0.7s 0.2s linear forwards;
  }
  @keyframes showLight {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  #container_5g.active.active2 #line1_5g {
    animation: line15G 0.7s linear forwards infinite;
  }
  @keyframes line15G {
    0% {
      opacity: 0;
      left: 50%;
      bottom: 0;
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    66% {
      left: 77%;
      bottom: 40vh;
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 95%;
      bottom: 57vh;
    }
  }
  #container_5g.active.active2 #line1_5g img {
    animation: line15Gimg 0.7s linear forwards infinite;
  }
  @keyframes line15Gimg {
    0% {
      transform: rotate(-10deg);
    }
    33% {
      transform: rotate(-3deg);
    }
    66% {
      transform: rotate(6deg);
    }
    100% {
      transform: rotate(14deg);
    }
  }
  #container_5g.active.active2 #line2_5g {
    animation: line25G 0.5s linear forwards infinite;
  }
  @keyframes line25G {
    0% {
      opacity: 0.5;
      left: 45%;
      bottom: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 63%;
      bottom: 35vh;
    }
  }
  #container_5g.active.active2 #line2_5g img {
    animation: line25Gimg 0.5s linear forwards infinite;
  }
  @keyframes line25Gimg {
    from {
      transform: rotate(-10deg);
    }
    to {
      transform: rotate(-1deg);
    }
  }
  #container_5g.active.active2 #line3_5g {
    animation: line35G 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards infinite;
  }
  @keyframes line35G {
    from {
      opacity: 1;
      left: 40%;
      bottom: 0;
    }
    to {
      opacity: 0;
      left: 44%;
      bottom: 8vh;
    }
  }
  #container_5g.active.active2 #line3_5g img {
    animation: line35Gimg 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards
      infinite;
  }
  @keyframes line35Gimg {
    from {
      transform: rotate(-9deg);
    }
    to {
      transform: rotate(-6deg);
    }
  }
  #container_5g.active.active2 #line4_5g {
    animation: line45G 0.7s linear forwards infinite;
  }
  @keyframes line45G {
    0% {
      opacity: 0;
      left: 26%;
      bottom: 0;
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 40%;
      bottom: 17vh;
    }
    66% {
      left: 50%;
      bottom: 34vh;
    }
    100% {
      opacity: 0;
      left: 75%;
      bottom: 58vh;
    }
  }
  #container_5g.active.active2 #line4_5g img {
    animation: line45Gimg 0.7s linear forwards infinite;
  }
  @keyframes line45Gimg {
    0% {
      transform: rotate(-3deg);
    }
    33% {
      transform: rotate(-3deg);
    }
    66% {
      transform: rotate(2deg);
    }
    100% {
      transform: rotate(20deg);
    }
  }
  #container_5g.active.active2 #frame_ship {
    transform-origin: center center;
    animation: frameShip5G 1s 1s linear forwards;
  }
  @keyframes frameShip5G {
    0% {
      opacity: 0;
      left: -5%;
      top: 4vh;
      transform: scale(1.2);
    }
    5% {
      opacity: 1;
    }
    50% {
      transform: scale(0.6);
      left: 32%;
      top: -1vh;
    }
    100% {
      opacity: 0;
      left: 63%;
      top: -20vh;
      transform: scale(0.1);
    }
  }
}

/* start responsive tablet and mobile */
@media screen and (max-width: 1023px) {
  .overlay_25.active,
  .overlay_ema.active {
    background: transparent !important;
  }

  .overlay_25.active .btn_play_25,
  .overlay_ema.active .btn_play {
    opacity: 0;
  }

  .swiper_years .swiper-slide .swiper-slide-children::after {
    content: "";
    transition: all 0.4s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      0deg,
      rgba(35, 31, 32, 0.5) 0.37%,
      rgba(35, 31, 32, 0) 28.29%,
      rgba(35, 31, 32, 0) 75.78%,
      rgba(35, 31, 32, 0.5) 94.35%
    );
    opacity: 0.8;
    border-radius: 1.5rem;
  }

  .swiper_years
    .swiper-slide.swiper-slide-active
    .swiper-slide-children::after {
    background: linear-gradient(
      0deg,
      rgba(35, 31, 32, 0.5) 0.37%,
      rgba(35, 31, 32, 0) 28.29%,
      rgba(35, 31, 32, 0) 75.78%,
      rgba(35, 31, 32, 0.5) 94.35%
    );
  }

  .swiper_years .swiper-slide.swiper-slide-prev,
  .swiper_years .swiper-slide.swiper-slide-next {
    /* opacity: 0.3; */
    animation: overlaySwiper 0.3s linear forwards;
  }

  .swiper_years .swiper-slide .swiper-slide-children {
    animation: overlaySwiper 0.3s linear forwards;
  }
  @keyframes overlaySwiper {
    to {
      opacity: 0.3;
    }
  }
  .swiper_years .swiper-slide.swiper-slide-active .swiper-slide-children {
    /* opacity: 1; */
    animation: overlaySwiperShow 0.3s linear forwards;
  }
  @keyframes overlaySwiperShow {
    from {
      opacity: 0.3;
    }
    to {
      opacity: 1;
    }
  }

  .swiper_years .swiper-slide .description_item {
    opacity: 1;
  }

  #box_categories_primary::-webkit-scrollbar {
    display: none;
  }

  .swiper_years .swiper-slide.swiper-slide-active .year_item {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  #menu_mb {
    transition: all 0.1s linear;
  }

  #menu_mb.active .arrow_menu {
    transform: rotate(180deg);
    transition: all 0.2s;
  }

  #menu_mb.active span {
    display: none;
  }

  #list_categories_primary_mb li::before {
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.6));
  }

  #list_categories_primary_mb li.active {
    opacity: 1;
  }

  #list_categories_primary_mb li.active::before {
    display: block;
  }

  .content_detail_popup > figure.wp-block-gallery figure + figure,
  .content_detail_popup_next > figure.wp-block-gallery figure + figure {
    margin-top: 40px;
  }

  .content_detail_popup figcaption,
  .content_detail_popup_next figcaption {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #98a9c4;
    text-align: center;
  }

  .content_detail_popup img,
  .content_detail_popup_next img {
    min-width: calc(100% + 11.2rem) !important;
    transform: translateX(-5.6rem);
  }
}
/* end responsive tablet and mobile */

/* start responsive only tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  #mute_music.active {
    transform: translate(-50%, 16%);
  }
  .btn_test_small {
    -webkit-mask-image: url("../images/mask-circle-small.png");
    mask-image: url("../images/mask-circle-small.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 90%;
    mask-size: 90%;
  }

  /* swiper */

  #list_categories_second {
    writing-mode: unset;
  }
  #list_categories_second label.active {
    background-color: unset;
    color: #0029b4;
    opacity: 1;
  }

  .swiper_years .swiper-slide .year_item {
    opacity: 1;
  }

  .swiper_years .swiper-slide .swiper-slide-children::before {
    display: none;
  }
  .swiper_years .swiper-slide:first-child .swiper-slide-children::before {
    display: none;
  }

  .year-wrapper::before,
  .year-wrapper::after {
    height: 8.625rem;
  }

  .btn_test {
    -webkit-mask-image: url("../images/mask3.png");
    mask-image: url("../images/mask3.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 98%;
    mask-size: 98%;
  }
  .wpb_wrapper p {
    margin-top: 3rem;
  }
  .wpb_wrapper {
    margin-bottom: 3rem;
  }
}
/* end responsive only tablet */
@media (min-width: 768px) and (max-width: 1119px) {
  #container_5g.active #box_content_5g {
    animation: showContent5G 0.5s linear forwards;
  }
  @keyframes showContent5G {
    from {
      opacity: 0;
      top: 35%;
    }
    to {
      opacity: 1;
      top: 29%;
    }
  }
  #container_5g.active #ship_5g {
    animation: shipRun 1s ease-out forwards;
  }
  @keyframes shipRun {
    from {
      width: 40rem;
      height: 44vh;
    }
    to {
      width: 90rem;
      height: 55vh;
    }
  }
  #container_5g.active.active2 #line1_5g {
    animation: line15G 0.5s linear forwards infinite;
  }
  @keyframes line15G {
    0% {
      opacity: 0;
      left: 21%;
      bottom: -9vh;
      transform: scale(0.8);
    }
    5% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 58%;
      transform: scale(0.6);
      bottom: 15vh;
    }
  }
  #container_5g.active.active2 #line1_5g img {
    animation: line15Gimg 0.5s linear forwards infinite;
  }
  @keyframes line15Gimg {
    from {
      transform: rotate(-10deg);
    }
    to {
      transform: rotate(-2deg);
    }
  }
  #container_5g.active.active2 #line2_5g {
    animation: line25G 0.5s linear forwards infinite;
  }
  @keyframes line25G {
    0% {
      opacity: 0;
      left: 2%;
      bottom: -11vh;
      transform: scale(0.8);
    }
    10% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 36%;
      transform: scale(0.6);
      bottom: 11vh;
    }
  }
  #container_5g.active.active2 #line2_5g img {
    animation: line25Gimg 0.5s 0.3s linear forwards infinite;
  }
  @keyframes line25Gimg {
    from {
      transform: rotate(-10deg);
    }
    to {
      transform: rotate(2deg);
    }
  }
  #container_5g.active.active2 #line3_5g {
    animation: line35G 0.5s 0.2s linear forwards infinite;
  }
  @keyframes line35G {
    0% {
      opacity: 0;
      left: -4%;
      bottom: -11vh;
      transform: scale(0.8);
    }
    10% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 19%;
      transform: scale(0.6);
      bottom: 7vh;
    }
  }
  #container_5g.active.active2 #line4_5g {
    animation: line45G 0.5s 0.1s linear forwards infinite;
  }
  @keyframes line45G {
    0% {
      opacity: 0;
      left: -20%;
      bottom: -7vh;
      transform: scale(0.8);
    }
    10% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 14%;
      transform: scale(0.6);
      bottom: 12vh;
    }
  }
  #container_5g.active.active2 #line4_5g img {
    animation: line45Gimg 0.5s linear forwards infinite;
  }
  @keyframes line45Gimg {
    from {
      transform: rotate(-3deg);
    }
    to {
      transform: rotate(-1deg);
    }
  }
  #container_5g.active.active2 #frame_ship {
    animation: frameShip5G 1s 1s linear forwards;
  }
  @keyframes frameShip5G {
    0% {
      opacity: 0;
      left: -150%;
      bottom: -16vh;
      transform: scale(2.8);
    }
    5% {
      opacity: 1;
    }
    50% {
      left: 0%;
      bottom: 0vh;
      transform: scale(1.4);
    }
    100% {
      opacity: 0;
      left: 75%;
      bottom: 17vh;
      transform: scale(0.2);
    }
  }

  .content_detail_popup img.full-width,
  .content_detail_popup_next img.full-width {
    min-width: 87.375rem !important;
    transform: translateX(calc((87.375rem - 400px) / 2 * -1));
  }

  .content_detail_popup > *,
  .content_detail_popup_next > * {
    width: 100% !important;
    margin: 0 auto;
  }
}

/* start responsive only mobile */
@media screen and (max-width: 767px) {
  #ship_5g img {
    transform: scale(1.02);
  }
  #rank {
    transform: scale(1.5) translateX(calc(-50% + 33.5px));
    width: 133px;
    transform-origin: center center;
  }

  #frame_primary.active2 {
    padding-top: 5.52rem;
  }
  #container_swiper_slide.active {
    height: 146.2381688rem !important;
  }
  #container_swiper_slide.active #swiper_primary {
    height: 121.32528rem !important;
  }
  #container_swiper_slide.active .swiper_primary_button_next,
  #container_swiper_slide.active .swiper_primary_button_prev,
  #container_swiper_slide.active .swiper_primary_progress_count {
    bottom: 4vh;
  }
  #container_ani_card.active2 {
    animation: action2 0.5s 2.1s cubic-bezier(0.675, 0.885, 0.32, 1.05) forwards;
  }

  @keyframes action2 {
    from {
      transform: translate(-50%, -24.5%) scale(0.66);
    }

    to {
      transform: translate(-50%, -24.5%) scale(0.54);
    }
  }
  #mute_music.active {
    transform: translate(-50%, 2%);
  }

  .popup_conten_next.active,
  .popup_conten_third.active {
    border-radius: 0;
  }

  @keyframes yeardown_css {
    0% {
      transform: translate(-50%, 0);
      opacity: 0;
    }
    10% {
      opacity: 0.7;
    }
    100% {
      transform: translate(-50%, calc((100% - 72rem) * -1));
      opacity: 1;
    }
  }

  .year-wrapper::before,
  .year-wrapper::after {
    height: 14rem;
    z-index: 10;
  }

  /* swiper */

  #list_categories_second {
    writing-mode: unset;
  }
  #list_categories_second label.active {
    background-color: unset;
    color: #0029b4;
    opacity: 1;
  }

  .swiper_years .swiper-slide .year_item {
    opacity: 1;
  }

  .swiper_years .swiper-slide .swiper-slide-children::before {
    display: none;
  }
  .swiper_years .swiper-slide:first-child .swiper-slide-children::before {
    display: none;
  }

  #list_categories_second::-webkit-scrollbar {
    display: none;
  }

  #container_5g.active #box_content_5g {
    animation: showContent5G 0.5s linear forwards;
  }
  @keyframes showContent5G {
    from {
      opacity: 0;
      top: 20%;
    }
    to {
      opacity: 1;
      top: 11%;
    }
  }
  #container_5g.active #ship_5g {
    transform-origin: top right;
    animation: shipRun 1s ease-out forwards;
  }
  @keyframes shipRun {
    from {
      width: 46%;
      bottom: 13vh;
    }
    to {
      width: 100%;
      bottom: 0;
    }
  }
  #container_5g.active.active2 #line1_5g {
    animation: line15G 0.5s linear forwards infinite;
  }
  @keyframes line15G {
    0% {
      opacity: 0;
      left: -5%;
      bottom: -10vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    50% {
      left: 36%;
      bottom: 8vh;
    }
    100% {
      opacity: 0;
      left: 86%;
      transform: scale(0.3);
      bottom: 23vh;
    }
  }
  #container_5g.active.active2 #line1_5g img {
    animation: line15Gimg 0.5s linear forwards infinite;
  }
  @keyframes line15Gimg {
    0% {
      transform: rotate(-17deg);
    }
    50% {
      transform: rotate(-4deg);
    }
    100% {
      transform: rotate(5deg);
    }
  }
  #container_5g.active.active2 #line2_5g {
    animation: line25G 0.5s linear forwards infinite;
  }
  @keyframes line25G {
    0% {
      opacity: 0;
      left: -27%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    50% {
      left: 11%;
      bottom: 4vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 80%;
      bottom: 22vh;
    }
  }
  #container_5g.active.active2 #line2_5g img {
    animation: line25Gimg 0.5s linear forwards infinite;
  }
  @keyframes line25Gimg {
    0% {
      transform: rotate(-5deg);
    }
    50% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(7deg);
    }
  }
  #container_5g.active.active2 #line3_5g {
    animation: line35G 0.5s linear forwards infinite;
  }
  @keyframes line35G {
    0% {
      opacity: 0;
      left: -27%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    10% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: -3%;
      transform: scale(0.4);
      bottom: 1vh;
    }
  }
  #container_5g.active.active2 #line3_5g img {
    animation: line35Gimg 0.5s linear forwards infinite;
  }
  @keyframes line35Gimg {
    from {
      transform: rotate(-5deg);
    }
    to {
      transform: rotate(0deg);
    }
  }
  #container_5g.active.active2 #line4_5g {
    animation: line45G 0.5s linear forwards infinite;
  }
  @keyframes line45G {
    0% {
      opacity: 0;
      left: -33%;
      bottom: -1vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    50% {
      left: -1%;
      bottom: 11vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 36%;
      bottom: 21vh;
    }
  }
  #container_5g.active.active2 #line4_5g img {
    animation: line45Gimg 0.5s linear forwards infinite;
  }
  @keyframes line45Gimg {
    0% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(-1deg);
    }
    100% {
      transform: rotate(4deg);
    }
  }
  #container_5g.active.active2 #frame_ship {
    animation: frameShip5G 1s 1s linear forwards;
  }
  @keyframes frameShip5G {
    0% {
      opacity: 0;
      left: -200%;
      bottom: -36vh;
      width: 245rem;
    }
    5% {
      opacity: 1;
    }
    50% {
      left: -50%;
      bottom: -10vh;
      width: 150rem;
    }
    100% {
      opacity: 0;
      left: 100%;
      bottom: 25vh;
      width: 22rem;
    }
  }
  .wpb_wrapper p {
    margin-top: 4rem;
  }
  .wpb_wrapper {
    margin-bottom: 4rem;
  }
  #container_ani_card.active3 {
    animation: action3 0.5s linear forwards;
  }
  @keyframes action3 {
    from {
      transform: translate(-50%, -24.5%) scale(0.54);
    }

    to {
      transform: translate(-50%, -6.5%) scale(0.8);
    }
  }
  #container_ani_card.active4 {
    animation: action4 0.5s linear forwards;
  }

  @keyframes action4 {
    from {
      transform: translate(-50%, -6.5%) scale(0.8);
    }
    to {
      transform: translate(-50%, -24.5%) scale(0.54);
    }
  }

  @keyframes show_box_drag {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      box-shadow: 0 0 0 80rem #00000040;
      opacity: 1;
    }
  }
}

@media (min-width: 1200px) and (max-width: 1300px) and (min-height: 500px) and (max-height: 700px) {
  #rank {
    bottom: 10vh;
  }
  .year-wrapper {
    bottom: 11vh !important;
  }
  #start_on_sound > div {
    height: 6.1vh;
  }
  #start_on_sound > button {
    margin-left: 1px;
  }
  #container_ani_card {
    transform: translate(-50%, -46%);
  }
  @keyframes action2 {
    from {
      transform: translate(-50%, -46%);
    }

    to {
      transform: translate(-84%, -46%) scale(0.68);
    }
  }
}

@media (min-width: 1200px) and (max-width: 1300px) and (min-height: 500px) and (max-height: 700px) {
  #rank {
    bottom: 10vh;
  }
  .year-wrapper {
    bottom: 11vh !important;
  }
  #start_on_sound > div {
    height: 6.1vh;
  }
  #start_on_sound > button {
    margin-left: 1px;
  }
  #container_ani_card {
    transform: translate(-50%, -46%) scale(0.7);
  }
  @keyframes action2 {
    from {
      transform: translate(-50%, -46%) scale(0.7);
    }

    to {
      transform: translate(-84%, -46%) scale(0.6);
    }
  }
}

@media (min-width: 1000px) and (max-width: 1100px) and (max-height: 500px) {
  #rank {
    bottom: 40vh;
  }
  .year-wrapper {
    bottom: 11vh !important;
  }
  #start_on_sound > div {
    height: 6.1vh;
  }
  #start_on_sound > button {
    margin-left: 1px;
  }
  #container_ani_card {
    transform: translate(-50%, -46%) scale(0.7);
  }

  #box_edit_image {
    height: 4rem;
  }
  #edit_image_card {
    width: 3.25rem;
    height: 3.25rem;
  }

  #social button {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
  #box_content_5g {
    transform: translateY(-53%) scale(0.65);
    left: 1.45rem;
    top: 52%;
  }
  #box_content_5g p {
    width: 48.88rem;
  }
  @keyframes showContent5G {
    0% {
      opacity: 0;
      top: 52%;
    }
    100% {
      opacity: 1;
      top: 50%;
    }
  }
  #ship_5g {
    bottom: 28vh;
  }
  @keyframes shipRun {
    from {
      width: 26rem;
      height: 46vh;
    }
    to {
      width: 62rem;
      height: 67vh;
    }
  }
}

@media (min-width: 600px) and (max-width: 700px) and (max-height: 600px) {
  #box_card_first {
    margin-top: 4.8vh;
  }
  #logo_fpt {
    height: 5.1rem;
  }
  #year_intro {
    height: 10.1456rem;
    width: 24.064rem;
  }
  .year-wrapper {
    height: 40rem !important;
    bottom: 8vh !important;
  }
  .year-wrapper ul > li {
    font-size: 13rem;
  }
  h1 {
    font-size: 3rem !important;
    top: 30vh !important;
  }
  #start_on_sound > div {
    height: 6.2vh;
  }
  #start_on_sound > button {
    margin-left: 2px;
  }
  @keyframes yeardown_css {
    0% {
      transform: translate(-50%, 0);
      opacity: 0;
    }
    10% {
      opacity: 0.7;
    }
    100% {
      transform: translate(-50%, calc((100% - 36rem) * -1));
      opacity: 1;
    }
  }
  #form_info {
    transform: scale(0.6);
    margin-top: 7.315vh;
  }
  #box_pull_receive {
    width: 60.51707rem;
    height: 33.886vh;
  }
  #box_pull {
    bottom: -3vh;
  }
  #pull_receive {
    font-size: 2.8rem;
  }
  #container_ani_card {
    transform: translate(-50%, -25.5%) scale(0.66);
  }
  @keyframes action2 {
    from {
      transform: translate(-50%, -25.5%) scale(0.66);
    }
    to {
      transform: translate(-50%, -25.5%) scale(0.45);
    }
  }
  #box_info_gener {
    margin-top: 19.154vh;
  }
  #name_customer {
    font-size: 3rem;
  }
  #description_customer {
    font-size: 2.3333rem;
  }
  #share-customer {
    font-size: 2rem;
  }
  #social button {
    font-size: 2rem !important;
    padding-top: 1.67rem !important;
    padding-bottom: 1.67rem !important;
    padding-left: 3.27rem !important;
    padding-right: 3.27rem !important;
  }
  #card_first {
    height: 33.597vh;
  }
  #upload-img-label {
    padding-top: 6.72rem;
  }
}

.loader_genareate {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #ffa516 94%, #0000) top/8px 8px
      no-repeat,
    conic-gradient(#0000 30%, #ffa516);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13 {
  100% {
    transform: rotate(1turn);
  }
}

@media (max-width: 500px) and (max-height: 800px) {
  #box_info_gener {
    margin-top: 8.154vh;
  }
  #container_ani_card {
    transform: translate(-50%, -24.5%) scale(0.66);
  }
  @keyframes action2 {
    0% {
      transform: translate(-50%, -24.5%) scale(0.66);
    }
    100% {
      transform: translate(-50%, -24.5%) scale(0.54);
    }
  }
  #list_dollar {
    margin-top: 2.75rem;
  }
  #list_dollar li {
    margin-top: 5.4rem;
  }
}
@media (max-width: 500px) and (max-height: 755px) {
  #box_content_5g > p {
    margin-top: 0;
  }
  /* @keyframes showContent5G {
        0%{
            opacity: 0;
            top: 25.33rem;
        }100%{
            opacity: 1;
            top: 15.33rem;
        }
    } */
}

@media (max-width: 500px) and (max-height: 730px) {
  #container_ani_card {
    transform: translate(-50%, -24.5%) scale(0.66);
  }
  @keyframes action2 {
    0% {
      transform: translate(-50%, -24.5%) scale(0.66);
    }
    100% {
      transform: translate(-50%, -24.5%) scale(0.5);
    }
  }
  /* @keyframes showContent5G {
        0%{
            opacity: 0;
            top: 23.33rem;
        }100%{
            opacity: 1;
            top: 13.33rem;
        }
    } */
  #box_content_5g > p {
    margin-top: -2rem;
  }
  #list_dollar {
    margin-top: 3.33rem;
  }

  @keyframes action3 {
    0% {
      transform: translate(-50%, -24.5%) scale(0.5);
    }
    100% {
      transform: translate(-50%, -10.5%) scale(0.8);
    }
  }

  @keyframes action4 {
    0% {
      transform: translate(-50%, -10.5%) scale(0.8);
    }
    100% {
      transform: translate(-50%, -24.5%) scale(0.5);
    }
  }
}

@media (max-width: 500px) and (max-height: 755px) and (min-height: 700px) {
  #box_ware {
    width: 35.34453rem;
    height: 19.5664rem;
  }
  #box_ware div {
    width: 40.772rem;
    height: 24.1128rem;
  }
  #list_dollar li {
    margin-top: 5.4rem;
  }
}

@media (max-width: 500px) and (max-height: 700px) {
  /* @keyframes showContent5G {
        0%{
            opacity: 0;
            top: 20.33rem;
        }100%{
            opacity: 1;
            top: 10.33rem;
        }
    } */
  #list_dollar {
    margin-top: 2.33rem;
  }
  #list_dollar li {
    margin-top: 5.67rem;
  }
  #list_dollar li:first-child {
    margin-top: 0;
  }
  #box_content_5g {
    transform: translate(-50%, 0) scale(0.8);
    left: 41%;
  }
  @keyframes showContent5G {
    0% {
      opacity: 0;
      top: 10%;
    }
    100% {
      opacity: 1;
      top: 6%;
    }
  }
  @keyframes action3 {
    0% {
      transform: translate(-50%, -24.5%) scale(0.5);
    }
    100% {
      transform: translate(-50%, -10.5%) scale(0.8);
    }
  }

  @keyframes action4 {
    0% {
      transform: translate(-50%, -10.5%) scale(0.8);
    }
    100% {
      transform: translate(-50%, -24.5%) scale(0.5);
    }
  }
}
@media (max-width: 500px) and (max-height: 670px) {
  #container_swiper_slide {
    height: 144rem !important;
  }
  #container_swiper_slide #swiper_primary {
    height: 127.13173rem !important;
  }

  #container_ani_card {
    transform: translate(-50%, -27.5%) scale(0.66);
  }
  @keyframes action2 {
    0% {
      transform: translate(-50%, -27.5%) scale(0.66);
    }
    100% {
      transform: translate(-50%, -27.5%) scale(0.45);
    }
  }
  @keyframes shipRun {
    0% {
      width: 46%;
      bottom: 13vh;
    }
    100% {
      width: 100%;
      bottom: -3vh;
    }
  }

  @keyframes action3 {
    0% {
      transform: translate(-50%, -27.5%) scale(0.45);
    }
    100% {
      transform: translate(-50%, -11.5%) scale(0.7);
    }
  }

  @keyframes action4 {
    0% {
      transform: translate(-50%, -11.5%) scale(0.7);
    }
    100% {
      transform: translate(-50%, -27.5%) scale(0.45);
    }
  }
}
@media (max-width: 500px) and (max-height: 620px) {
  #container_ani_card {
    transform: translate(-50%, -28.5%) scale(0.66);
  }
  @keyframes action2 {
    0% {
      transform: translate(-50%, -28.5%) scale(0.66);
    }
    100% {
      transform: translate(-50%, -28.5%) scale(0.4);
    }
  }
  @keyframes action3 {
    0% {
      transform: translate(-50%, -28.5%) scale(0.4);
    }
    100% {
      transform: translate(-50%, -13.5%) scale(0.65);
    }
  }

  @keyframes action4 {
    0% {
      transform: translate(-50%, -13.5%) scale(0.65);
    }
    100% {
      transform: translate(-50%, -28.5%) scale(0.4);
    }
  }
}

@media (min-width: 410px) and (max-width: 416px) and (max-height: 740px) {
  #container_ani_card {
    transform: translate(-50%, -26.5%) scale(0.66);
  }
  @keyframes action2 {
    0% {
      transform: translate(-50%, -26.5%) scale(0.66);
    }
    100% {
      transform: translate(-50%, -26.5%) scale(0.45);
    }
  }
  @keyframes action3 {
    0% {
      transform: translate(-50%, -26.5%) scale(0.45);
    }
    100% {
      transform: translate(-50%, -6.5%) scale(0.8);
    }
  }
  @keyframes action4 {
    0% {
      transform: translate(-50%, -6.5%) scale(0.8);
    }
    100% {
      transform: translate(-50%, -26.5%) scale(0.45);
    }
  }

  #box_ware {
    height: 21.5664rem;
    width: 38.34453rem;
  }

  #box_ware div {
    height: 26.1128rem;
    width: 45.772rem;
  }

  #list_dollar {
    margin-top: 4.75rem;
  }

  #list_dollar li {
    margin-top: 4.4rem;
    height: 5.4rem;
  }

  #list_dollar li span {
    font-size: 3.33rem;
  }
}

@media (max-width: 380px) and (min-height: 810px) and (max-height: 815px) {
  #box_info_gener {
    margin-top: 6.154vh;
  }
}
@media (min-width: 370px) and (max-width: 380px) and (min-height: 660px) and (max-height: 670px) {
  #list_dollar {
    margin-top: 3.33rem;
  }
  #list_dollar li span + span {
    margin-top: -1.4rem;
  }
  #list_dollar li {
    margin-top: 3.8rem;
  }
}

#rank {
  accent-color: #62df00;
}
#rank:hover,
#rank:active {
  accent-color: #62df00;
}

.content_detail_popup.active {
  display: none;
}
.content_detail_popup_next.active {
  transform: translateY(-10.5rem);
}
@media screen and (max-width: 1023px) {
  .content_detail_popup_next.active {
    transform: translateY(-32.5rem);
  }
  #content_detail {
    -webkit-overflow-scrolling: touch;
  }
}

#box_ani_card,
#generate_card_download {
  font-family: "Montserrat", sans-serif !important;
  font-optical-sizing: auto;
  font-style: normal;
}

#container_swiper_slide.post-show .loader_genareate_swiper {
  display: none;
}
#container_swiper_slide.post-show.loading .loader_genareate_swiper {
  display: block;
}

.popup_conten_next.active .title-the-next {
  transform: translate(-50%, -70%);
}

.popup_conten_third.active .title-the-next_2 {
  transform: translate(-50%, -70%);
}

/* ware */

#box_ware div:nth-child(3) {
  animation: scaleWare3 0.3s linear forwards;
}
@keyframes scaleWare3 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.3;
  }
}
#box_ware div:nth-child(4) {
  animation: scaleWare4 0.3s 0.3s linear forwards;
}
@keyframes scaleWare4 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.3;
  }
}
#box_ware div:nth-child(5) {
  animation: scaleWare5 0.3s 0.6s linear forwards;
}
@keyframes scaleWare5 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.3;
  }
}
#box_ware div:nth-child(6) {
  animation: scaleWare6 0.3s 0.9s linear forwards;
}
@keyframes scaleWare6 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.3;
  }
}
#box_ware div:nth-child(7) {
  animation: scaleWare7 0.3s 1.2s linear forwards;
}
@keyframes scaleWare7 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.3;
  }
}
#box_ware div:nth-child(8) {
  animation: scaleWare8 0.3s 1.5s linear forwards;
}
@keyframes scaleWare8 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0.26;
  }
}

#box_ware div:nth-child(9) {
  animation: scaleWare9 0.3s 1.8s linear forwards;
}
@keyframes scaleWare9 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.7);
    opacity: 0.22;
  }
}
#box_ware div:nth-child(10) {
  animation: scaleWare10 0.3s 2.1s linear forwards;
}
@keyframes scaleWare10 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0.18;
  }
}
#box_ware div:nth-child(11) {
  animation: scaleWare11 0.3s 2.4s linear forwards;
}
@keyframes scaleWare11 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0.14;
  }
}
#box_ware div:nth-child(12) {
  animation: scaleWare12 0.3s 2.7s linear forwards;
}
@keyframes scaleWare12 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.1;
  }
}
#box_ware div:nth-child(13) {
  animation: scaleWare13 0.3s 3s linear forwards;
}
@keyframes scaleWare13 {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.1);
    opacity: 0.07;
  }
}
/* ware */

/* blur */
.item_feature_image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgb(171, 163, 163);
  filter: blur(50px);
  animation: blurShowImage 0.5s linear forwards;
}

@keyframes blurShowImage {
  from {
    background: rgb(171, 163, 163);
    filter: blur(50px);
  }
  to {
    background: transparent;
    filter: blur(0);
    pointer-events: none;
  }
}

.item_feature_image.image-load::before,
.item_feature_image.image-load2::before,
.item_feature_image.image-load3::before {
  display: none;
}
@media (min-width: 500px) and (max-width: 601px) {
  .year-wrapper div:first-child {
    background-color: #0145c2;
    width: 86%;
    margin-top: -13px;
  }
  .year-wrapper div:nth-child(2) {
    background: #002fbd;
    width: 90%;
  }
  #year_intro {
    width: 42rem !important;
  }
  #box_info_gener {
    transform: scale(0.7) !important;
    margin-top: 7.15vh !important;
  }
  .year-wrapper {
    transform: translateX(-50%) scale(0.8) !important;
    bottom: 5vh !important;
  }
  #upload-img {
    padding-top: 3.72rem !important;
  }
  #upload-img-label {
    padding-top: 4.72rem !important;
  }
  #container_ani_card {
    transform: translate(-50%, -20.5%) scale(0.6);
  }
  @keyframes action2 {
    from {
      transform: translate(-50%, -20.5%);
    }
    to {
      transform: translate(-50%, -20.5%) scale(0.5);
    }
  }
  @keyframes action3 {
    from {
      transform: translate(-50%, -20.5%) scale(0.5);
    }

    to {
      transform: translate(-50%, -3%) scale(0.8);
    }
  }
  @keyframes action4 {
    from {
      transform: translate(-50%, -3%) scale(0.8);
    }
    to {
      transform: translate(-50%, -20.5%) scale(0.5);
    }
  }
  #container_swiper_slide {
    height: 97% !important;
  }
  #swiper_primary {
    height: 98.36444rem !important;
  }
  #container_swiper_slide.active #swiper_primary {
    height: 98.36444rem !important;
  }
  #swiper_primary .swiper-slide {
    width: 58rem;
  }

  #frame_primary {
    padding-top: 4.52rem;
  }
  #frame_primary.active2 {
    padding-top: 1.52rem;
  }
  #frame_primary.active2 #list_categories_second {
    margin-bottom: 1rem;
  }
  #container_swiper_slide.active {
    height: 98% !important;
  }
}
@media (min-width: 601px) and (max-width: 701px) {
  .year-wrapper div:first-child {
    background-color: #0145c2;
    width: 86%;
    margin-top: -13px;
  }
  .year-wrapper div:nth-child(2) {
    background: #002fbd;
    width: 80%;
  }
  #year_intro {
    width: 38rem !important;
  }
  #box_info_gener {
    transform: scale(0.8) !important;
  }
  #social button {
    transform: scale(0.8) !important;
  }
  .year-wrapper {
    transform: translateX(-50%) scale(0.7) !important;
    bottom: 0 !important;
  }
  #form_info div:nth-of-type(1) {
    height: auto !important;
  }
  #upload-img {
    padding-top: 4.72rem !important;
  }
  #container_ani_card {
    transform: translate(-50%, -20.5%) scale(0.6);
  }
  @keyframes action2 {
    from {
      transform: translate(-50%, -20.5%);
    }
    to {
      transform: translate(-50%, -20.5%) scale(0.5);
    }
  }
  @keyframes action3 {
    from {
      transform: translate(-50%, -20.5%) scale(0.5);
    }

    to {
      transform: translate(-50%, -3%) scale(0.8);
    }
  }
  @keyframes action4 {
    from {
      transform: translate(-50%, -3%) scale(0.8);
    }
    to {
      transform: translate(-50%, -20.5%) scale(0.5);
    }
  }
  #frame_primary.active2 {
    padding-top: 2.52rem;
  }
  #container_swiper_slide {
    height: 95% !important;
  }
  #container_swiper_slide.active {
    height: 93% !important;
  }
  #swiper_primary {
    height: 73.4755rem !important;
  }

  #swiper_primary .swiper-slide {
    width: 44rem !important;
  }

  #swiper_primary .title_item_primary {
    font-size: 2.1rem;
    width: 33rem;
  }
  #swiper_primary .box_btn_read_more {
    transform: translateX(-50%) scale(0.5);
  }
  #swiper_primary .box_btn_read_more .load-more-posts {
    border-radius: 4.5rem;
  }

  #btn_close_popup {
    width: 5.67rem;
    height: 5.67rem;
    top: 5.206vh;
  }
  .year_item_primary .btn_test_small,
  #relative-year .btn_test_small,
  #relative-year1 .btn_test_small,
  #relative-year2 .btn_test_small {
    height: 7.6rem;
    width: 14.8rem;
  }
  .year_item_primary button {
    height: calc(7.6rem - 3px);
    width: calc(14.8rem - 3px);
    font-size: 3.5rem;
    transform: translate(calc((50% + 2px) * -1), -60%);
  }
  .title-the-next,
  .title-the-next_2 {
    top: 66% !important;
  }
  #popup_detail #year,
  #popup_detail #year1,
  #popup_detail #year2 {
    font-size: 3.4rem;
    height: calc(7.6rem - 4px);
    width: calc(14.8rem - 4px);
    transform: translate(calc((50% + 2px) * -1), -60%);
  }
  .feature-image1 h2,
  .title-the-next h2,
  .title-the-next_2 h2 {
    font-size: 3.4rem;
  }

  .btn_next_popup,
  .btn_third_popup {
    transform: scale(0.5);
  }
  .btn_next_popup #the-next-post,
  .btn_third_popup #the-next-post_2,
  #swiper_primary .box_read_more button {
    border-radius: 4.5rem;
  }

  #swiper_primary .box_read_more {
    transform: translateX(-50%) scale(0.5);
  }

  #list_categories_second label {
    font-size: 2.2rem;
  }
  #list_categories_second {
    margin-bottom: 1rem;
  }
  #container_swiper_slide.active #swiper_primary {
    height: 73.4755rem !important;
  }
  @keyframes shipRun {
    0% {
      width: 46%;
      bottom: 13vh;
    }
    100% {
      width: 60%;
      bottom: 0;
    }
  }
  #box_ware {
    width: 28.34453rem;
    height: 15.5664rem;
  }
  #box_ware div {
    width: 31.772rem;
    height: 20.1128rem;
  }
  #list_dollar {
    margin-top: 2.75rem;
  }
  #list_dollar li {
    height: 5.4rem;
    margin-top: 4.4rem;
  }
  #list_dollar li span {
    font-size: 3rem;
  }
  #line_light {
    width: 72rem;
    height: 85.487vh;
    bottom: -23vh;
  }
  @keyframes line15G {
    0% {
      opacity: 0;
      left: 32%;
      bottom: -10vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    50% {
      left: 58%;
      bottom: 8vh;
    }
    100% {
      opacity: 0;
      left: 86%;
      transform: scale(0.3);
      bottom: 23vh;
    }
  }
  @keyframes line25G {
    0% {
      opacity: 0;
      left: 17%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    50% {
      left: 43%;
      bottom: 4vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 65%;
      bottom: 22vh;
    }
  }
  @keyframes line35G {
    0% {
      opacity: 0;
      left: 24%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    10% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 28%;
      transform: scale(0.4);
      bottom: 1vh;
    }
  }
  @keyframes line45G {
    0% {
      opacity: 0;
      left: 11%;
      bottom: -1vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    50% {
      left: 30%;
      bottom: 11vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 26%;
      bottom: 21vh;
    }
  }
  #box_content_5g {
    left: 50%;
  }
}
@media (min-width: 601px) and (max-width: 701px) and (max-height: 650px) {
  @keyframes action3 {
    from {
      transform: translate(-50%, -20.5%) scale(0.5);
    }

    to {
      transform: translate(-50%, -12%) scale(0.7);
    }
  }
  @keyframes action4 {
    from {
      transform: translate(-50%, -12%) scale(0.7);
    }
    to {
      transform: translate(-50%, -20.5%) scale(0.5);
    }
  }
  #box_upload_start {
    bottom: 100px;
    transform: translateX(-50%) scale(0.8);
  }
}
@media (min-width: 601px) and (max-width: 701px) and (max-height: 600px) {
  #swiper_primary .swiper-slide {
    width: 38.67rem;
  }

  #swiper_primary {
    height: 64rem !important;
  }
  #frame_primary {
    padding-top: 4.52rem;
  }
  #container_swiper_slide.active #swiper_primary {
    height: 64rem !important;
  }
}

@media (min-width: 701px) and (max-width: 767px) {
  .year-wrapper div:first-child {
    background-color: #0142c2;
    width: 90%;
    margin-top: -16px;
  }
  .year-wrapper div:nth-child(2) {
    background: #002fbd;
    width: 80%;
  }
  #year_intro {
    width: 35rem !important;
  }
  #box_info_gener {
    transform: scale(0.6) !important;
  }
  #social button {
    transform: scale(0.8) !important;
  }
  .year-wrapper {
    transform: translateX(-50%) scale(0.6) !important;
    bottom: -5vh !important;
  }

  #form_info div:nth-of-type(1) {
    height: auto !important;
  }
  #upload-img {
    padding-top: 3.72rem !important;
  }
  #container_ani_card {
    transform: translate(-50%, -20.5%) scale(0.6);
  }
  @keyframes action2 {
    from {
      transform: translate(-50%, -20.5%);
    }
    to {
      transform: translate(-50%, -20.5%) scale(0.5);
    }
  }
  @keyframes action3 {
    from {
      transform: translate(-50%, -20.5%) scale(0.5);
    }

    to {
      transform: translate(-50%, -3%) scale(0.8);
    }
  }
  @keyframes action4 {
    from {
      transform: translate(-50%, -3%) scale(0.8);
    }
    to {
      transform: translate(-50%, -20.5%) scale(0.5);
    }
  }
  #box_upload_start {
    transform: translateX(-50%) scale(0.5);
    bottom: 100px;
  }
  #container_swiper_slide {
    height: 91% !important;
  }

  #frame_primary {
    padding-top: 4.52rem;
  }
  #frame_primary.active2 {
    padding-top: 1.52rem;
  }
  #container_swiper_slide.active {
    height: 73.238169rem !important;
  }
  #swiper_primary {
    height: 62.8888rem !important;
  }
  #swiper_primary .swiper-slide {
    width: 38.04495rem !important;
  }
  #container_swiper_slide.active #swiper_primary .swiper-slide {
    width: 35.2152113rem !important;
  }
  .swiper_primary_progress_count {
    transform: translate(-50%, 0);
  }
  #swiper_primary .title_item_primary {
    font-size: 2.1rem;
    width: 33rem;
  }
  .swiper_primary_button_prev,
  .swiper_primary_button_next {
    width: 6.68rem;
    height: 6.68rem;
  }

  #swiper_primary .box_btn_read_more {
    transform: translateX(-50%) scale(0.5);
  }
  #swiper_primary .box_btn_read_more .load-more-posts {
    border-radius: 4.5rem;
  }

  #btn_close_popup {
    width: 5.67rem;
    height: 5.67rem;
    top: 5.206vh;
  }
  .year_item_primary .btn_test_small,
  #relative-year .btn_test_small,
  #relative-year1 .btn_test_small,
  #relative-year2 .btn_test_small {
    height: 7.6rem;
    width: 14.8rem;
  }
  .year_item_primary button {
    height: calc(7.6rem - 3px);
    width: calc(14.8rem - 3px);
    font-size: 3.5rem;
    transform: translate(calc((50% + 2px) * -1), -60%);
  }
  .title-the-next,
  .title-the-next_2 {
    top: 66% !important;
  }
  #popup_detail #year,
  #popup_detail #year1,
  #popup_detail #year2 {
    font-size: 3.4rem;
    height: calc(7.6rem - 4px);
    width: calc(14.8rem - 4px);
    transform: translate(calc((50% + 2px) * -1), -60%);
  }
  .feature-image1 h2,
  .title-the-next h2,
  .title-the-next_2 h2 {
    font-size: 3.4rem;
  }

  .btn_next_popup,
  .btn_third_popup {
    transform: scale(0.5);
  }
  .btn_next_popup #the-next-post,
  .btn_third_popup #the-next-post_2,
  #swiper_primary .box_read_more button {
    border-radius: 4.5rem;
  }

  #swiper_primary .box_read_more {
    transform: translateX(-50%) scale(0.5);
  }

  #list_categories_second label {
    font-size: 2.2rem;
  }
  #list_categories_second {
    margin-bottom: 1rem;
  }
  #container_swiper_slide.active #swiper_primary {
    height: 79% !important;
  }
  @keyframes shipRun {
    0% {
      width: 46%;
      bottom: 13vh;
    }
    100% {
      width: 60%;
      bottom: 0;
    }
  }
  #box_ware {
    width: 28.34453rem;
    height: 15.5664rem;
  }
  #box_ware div {
    width: 31.772rem;
    height: 20.1128rem;
  }
  #list_dollar {
    margin-top: 2.75rem;
  }
  #list_dollar li {
    height: 5.4rem;
    margin-top: 4.4rem;
  }
  #list_dollar li span {
    font-size: 3rem;
  }
  #line_light {
    width: 72rem;
    height: 85.487vh;
    bottom: -23vh;
  }
  @keyframes line15G {
    0% {
      opacity: 0;
      left: 32%;
      bottom: -10vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    50% {
      left: 58%;
      bottom: 8vh;
    }
    100% {
      opacity: 0;
      left: 86%;
      transform: scale(0.3);
      bottom: 23vh;
    }
  }
  @keyframes line25G {
    0% {
      opacity: 0;
      left: 17%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    50% {
      left: 43%;
      bottom: 4vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 65%;
      bottom: 22vh;
    }
  }
  @keyframes line35G {
    0% {
      opacity: 0;
      left: 24%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    10% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 28%;
      transform: scale(0.4);
      bottom: 1vh;
    }
  }
  @keyframes line45G {
    0% {
      opacity: 0;
      left: 11%;
      bottom: -1vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    50% {
      left: 30%;
      bottom: 11vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 26%;
      bottom: 21vh;
    }
  }
  #box_content_5g {
    left: 50%;
  }
}
@media (min-width: 767px) and (max-width: 801px) and (max-height: 1000px) {
  #year_intro {
    width: 32rem !important;
  }
  .year-wrapper div:first-child {
    background-color: #0151c3;
  }
  .year-wrapper div:nth-child(2) {
    background: #002fbd;
  }
  @keyframes welcome {
    0% {
      transform: translate(-50%, -50%);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, -106%);
      opacity: 1;
    }
  }
  #container_ani_card {
    transform: translate(-50%, -48%) scale(0.6);
  }
  @keyframes action2 {
    from {
      transform: translate(-50%, -48%);
    }

    to {
      transform: translate(-50%, -48%) scale(0.55);
    }
  }
  @keyframes action3 {
    from {
      transform: translate(-50%, -48%) scale(0.55);
    }

    to {
      transform: translate(-50%, -31%) scale(0.8);
    }
  }
  @keyframes action4 {
    from {
      transform: translate(-50%, -31%) scale(0.8);
    }
    to {
      transform: translate(-50%, -48%) scale(0.55);
    }
  }
  #container_swiper_slide {
    height: 91% !important;
  }
  #container_swiper_slide.active {
    height: 84% !important;
  }
  #swiper_primary {
    height: 86% !important;
  }

  #container_swiper_slide.active #swiper_primary .swiper-slide {
    width: 36.7rem !important;
  }

  #container_swiper_slide #swiper_primary .swiper-slide {
    width: 38.8rem !important;
  }

  #swiper_primary .title_item_primary {
    font-size: 2.1rem;
    width: 33rem;
  }
  #swiper_primary .box_btn_read_more {
    transform: translateX(-50%) scale(0.5);
  }
  #swiper_primary .box_btn_read_more .load-more-posts {
    border-radius: 4.5rem;
  }
  #btn_close_popup {
    width: 5.67rem;
    height: 5.67rem;
    top: 5.206vh;
  }
  .year_item_primary .btn_test_small,
  #relative-year .btn_test_small,
  #relative-year1 .btn_test_small,
  #relative-year2 .btn_test_small {
    height: 7.6rem;
    width: 14.8rem;
  }
  .year_item_primary button {
    height: calc(7.6rem - 3px);
    width: calc(14.8rem - 3px);
    font-size: 3.5rem;
    transform: translate(calc((50% + 2px) * -1), -60%);
  }
  .title-the-next,
  .title-the-next_2 {
    top: 66% !important;
  }
  #popup_detail #year,
  #popup_detail #year1,
  #popup_detail #year2 {
    font-size: 3.4rem;
    height: calc(7.6rem - 4px);
    width: calc(14.8rem - 4px);
    transform: translate(calc((50% + 2px) * -1), -60%);
  }
  .feature-image1 h2,
  .title-the-next h2,
  .title-the-next_2 h2 {
    font-size: 3.4rem;
  }

  .btn_next_popup,
  .btn_third_popup {
    transform: scale(0.5);
  }
  .btn_next_popup #the-next-post,
  .btn_third_popup #the-next-post_2,
  #swiper_primary .box_read_more button {
    border-radius: 4.5rem;
  }

  #swiper_primary .box_read_more {
    transform: translateX(-50%) scale(0.5);
  }

  #list_categories_second label {
    font-size: 2.2rem;
  }
  #list_categories_second {
    margin-bottom: 1rem;
  }
  #container_swiper_slide.active #swiper_primary {
    height: 85% !important;
  }
  @keyframes shipRun {
    0% {
      width: 46%;
      bottom: 13vh;
    }
    100% {
      width: 60%;
      bottom: 0;
    }
  }
  #box_ware {
    width: 26.34453rem;
    height: 14.5664rem;
  }
  #box_ware div {
    width: 28.772rem;
    height: 17.1128rem;
  }
  #list_dollar {
    margin-top: 2.75rem;
  }
  #list_dollar li {
    height: 5.4rem;
    margin-top: 3.4rem;
  }
  #list_dollar li span {
    font-size: 2.5rem;
  }
  #line_light {
    width: 72rem;
    height: 85.487vh;
    bottom: -23vh;
  }
  @keyframes line15G {
    0% {
      opacity: 0;
      left: 32%;
      bottom: -10vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    50% {
      left: 58%;
      bottom: 8vh;
    }
    100% {
      opacity: 0;
      left: 86%;
      transform: scale(0.3);
      bottom: 23vh;
    }
  }
  @keyframes line25G {
    0% {
      opacity: 0;
      left: 17%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    50% {
      left: 43%;
      bottom: 4vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 65%;
      bottom: 22vh;
    }
  }
  @keyframes line35G {
    0% {
      opacity: 0;
      left: 24%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    10% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 28%;
      transform: scale(0.4);
      bottom: 1vh;
    }
  }
  @keyframes line45G {
    0% {
      opacity: 0;
      left: 11%;
      bottom: -1vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    50% {
      left: 30%;
      bottom: 11vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 26%;
      bottom: 21vh;
    }
  }
  #box_content_5g {
    left: 6%;
    top: 55%;
  }
  @keyframes showContent5G {
    0% {
      opacity: 0;
      top: 55%;
    }
    100% {
      opacity: 1;
      top: 50%;
    }
  }

  .read_more,
  .box_read_more > div {
    height: 11vh !important;
  }
  .read_more button,
  .box_read_more div button,
  #the-next-post,
  #the-next-post_2 {
    font-size: 18px;
  }
  #frame_primary {
    padding-top: 3.27rem;
  }
  #frame_primary.active2 {
    padding-top: 1.27rem;
  }
}
@media (min-width: 801px) and (max-width: 901px) and (max-height: 1000px) {
  #year_intro {
    width: 32rem !important;
  }
  .year-wrapper {
    transform: translateX(-50%) scale(0.9) !important;
    bottom: 6vh !important;
  }
  @keyframes years {
    0% {
      transform: translate(-50%, -50%);
      top: 50%;
      opacity: 1;
    }
    100% {
      transform: translate(-50%, 0);
      top: 7.6vh;
      opacity: 1;
    }
  }
  @keyframes welcome {
    0% {
      transform: translate(-50%, -50%);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, -126%);
      opacity: 1;
    }
  }
  .year-wrapper div:first-child {
    background-color: #0051c3;
  }
  .year-wrapper div:nth-child(2) {
    background: #002fbd;
  }
  #box_info_gener {
    transform: scale(0.8) !important;
  }
  #container_ani_card {
    transform: translate(-50%, -44%) scale(0.8);
  }
  @keyframes action2 {
    from {
      transform: translate(-50%, -44%);
    }

    to {
      transform: translate(-50%, -44%) scale(0.7);
    }
  }
  @keyframes action3 {
    from {
      transform: translate(-50%, -44%) scale(0.7);
    }

    to {
      transform: translate(-50%, -25%) scale(0.9);
    }
  }
  @keyframes action4 {
    from {
      transform: translate(-50%, -25%) scale(0.9);
    }
    to {
      transform: translate(-50%, -44%) scale(0.7);
    }
  }
  #container_swiper_slide {
    height: 91% !important;
  }
  #container_swiper_slide.active {
    height: 84% !important;
  }
  #swiper_primary {
    height: 60.4444rem !important;
  }

  #container_swiper_slide.active #swiper_primary .swiper-slide {
    width: 33.5rem !important;
  }

  #container_swiper_slide #swiper_primary .swiper-slide {
    width: 35.5rem !important;
  }

  #swiper_primary .swiper-slide img {
    border-radius: 3.6rem;
  }

  #swiper_primary .title_item_primary {
    font-size: 2.1rem;
    width: 30rem;
  }
  #swiper_primary .box_btn_read_more {
    transform: translateX(-50%) scale(0.5);
  }
  #swiper_primary .box_btn_read_more .load-more-posts {
    border-radius: 4.5rem;
  }
  #btn_close_popup {
    width: 5.67rem;
    height: 5.67rem;
    top: 5.206vh;
  }
  .year_item_primary .btn_test_small,
  #relative-year .btn_test_small,
  #relative-year1 .btn_test_small,
  #relative-year2 .btn_test_small {
    height: 7.6rem;
    width: 14.8rem;
  }
  .year_item_primary button {
    height: calc(7.6rem - 3px);
    width: calc(14.8rem - 3px);
    font-size: 3.5rem;
    transform: translate(calc((50% + 2px) * -1), -60%);
  }
  .title-the-next,
  .title-the-next_2 {
    top: 66% !important;
  }
  #popup_detail #year,
  #popup_detail #year1,
  #popup_detail #year2 {
    font-size: 3.4rem;
    height: calc(7.6rem - 4px);
    width: calc(14.8rem - 4px);
    transform: translate(calc((50% + 2px) * -1), -60%);
  }
  .feature-image1 h2,
  .title-the-next h2,
  .title-the-next_2 h2 {
    font-size: 3.4rem;
  }

  .btn_next_popup,
  .btn_third_popup {
    transform: scale(0.5);
  }
  .btn_next_popup #the-next-post,
  .btn_third_popup #the-next-post_2,
  #swiper_primary .box_read_more button {
    border-radius: 4.5rem;
  }

  #swiper_primary .box_read_more {
    transform: translateX(-50%) scale(0.5);
  }

  #list_categories_second label {
    font-size: 2.2rem;
  }
  #list_categories_second {
    margin-bottom: 1rem;
  }
  #container_swiper_slide.active #swiper_primary {
    height: 84% !important;
  }
  @keyframes shipRun {
    0% {
      width: 46%;
      bottom: 13vh;
    }
    100% {
      width: 60%;
      bottom: 0;
    }
  }
  #box_ware {
    width: 26.34453rem;
    height: 14.5664rem;
  }
  #box_ware div {
    width: 28.772rem;
    height: 17.1128rem;
  }
  #list_dollar {
    margin-top: 2.75rem;
  }
  #list_dollar li {
    height: 5.4rem;
    margin-top: 3.4rem;
  }
  #list_dollar li span {
    font-size: 2.5rem;
  }
  #line_light {
    width: 72rem;
    height: 85.487vh;
    bottom: -23vh;
  }
  @keyframes line15G {
    0% {
      opacity: 0;
      left: 32%;
      bottom: -10vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    50% {
      left: 58%;
      bottom: 8vh;
    }
    100% {
      opacity: 0;
      left: 86%;
      transform: scale(0.3);
      bottom: 23vh;
    }
  }
  @keyframes line25G {
    0% {
      opacity: 0;
      left: 17%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    50% {
      left: 43%;
      bottom: 4vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 65%;
      bottom: 22vh;
    }
  }
  @keyframes line35G {
    0% {
      opacity: 0;
      left: 24%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    10% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 28%;
      transform: scale(0.4);
      bottom: 1vh;
    }
  }
  @keyframes line45G {
    0% {
      opacity: 0;
      left: 11%;
      bottom: -1vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    50% {
      left: 30%;
      bottom: 11vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 26%;
      bottom: 21vh;
    }
  }
  #box_content_5g {
    left: 6%;
    top: 55%;
  }
  @keyframes showContent5G {
    0% {
      opacity: 0;
      top: 55%;
    }
    100% {
      opacity: 1;
      top: 50%;
    }
  }

  .read_more,
  .box_read_more > div {
    height: 11vh !important;
  }
  .read_more button,
  .box_read_more div button,
  #the-next-post,
  #the-next-post_2 {
    font-size: 18px;
  }
  #frame_primary {
    padding-top: 2.27rem;
  }
  #frame_primary.active2 {
    padding-top: 0.27rem;
  }
}
@media (min-width: 901px) and (max-width: 1023px) and (max-height: 1000px) {
  #year_intro {
    width: 32rem !important;
  }
  .year-wrapper {
    transform: translateX(-50%) scale(0.9) !important;
    bottom: 6vh !important;
  }
  @keyframes years {
    0% {
      transform: translate(-50%, -50%);
      top: 50%;
      opacity: 1;
    }
    100% {
      transform: translate(-50%, 0);
      top: 7.6vh;
      opacity: 1;
    }
  }
  @keyframes welcome {
    0% {
      transform: translate(-50%, -50%);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, -126%);
      opacity: 1;
    }
  }
  #box_info_gener {
    transform: scale(0.8) !important;
  }
  .year-wrapper div:first-child {
    background-color: #0051c3;
  }
  .year-wrapper div:nth-child(2) {
    background: #002fbd;
  }
  #container_ani_card {
    transform: translate(-50%, -44%) scale(0.8);
  }
  @keyframes action2 {
    from {
      transform: translate(-50%, -44%);
    }

    to {
      transform: translate(-50%, -44%) scale(0.7);
    }
  }
  @keyframes action3 {
    from {
      transform: translate(-50%, -44%) scale(0.7);
    }

    to {
      transform: translate(-50%, -25%) scale(0.9);
    }
  }
  @keyframes action4 {
    from {
      transform: translate(-50%, -25%) scale(0.9);
    }
    to {
      transform: translate(-50%, -44%) scale(0.7);
    }
  }
  #container_swiper_slide {
    height: 92% !important;
  }
  #container_swiper_slide.active {
    height: 84% !important;
  }
  #swiper_primary {
    height: 85% !important;
  }

  #container_swiper_slide.active #swiper_primary .swiper-slide {
    width: 31.2rem !important;
  }

  #swiper_primary .swiper-slide {
    width: 33rem !important;
  }

  #swiper_primary .swiper-slide img {
    border-radius: 3.8rem;
  }

  #swiper_primary .title_item_primary {
    font-size: 2.1rem;
    width: 26rem;
  }
  #swiper_primary .box_btn_read_more {
    transform: translateX(-50%) scale(0.5);
  }
  #swiper_primary .box_btn_read_more .load-more-posts {
    border-radius: 4.5rem;
  }
  #btn_close_popup {
    width: 5.67rem;
    height: 5.67rem;
    top: 5.206vh;
  }
  .year_item_primary .btn_test_small,
  #relative-year .btn_test_small,
  #relative-year1 .btn_test_small,
  #relative-year2 .btn_test_small {
    height: 7.6rem;
    width: 14.8rem;
  }
  .year_item_primary button {
    height: calc(7.6rem - 3px);
    width: calc(14.8rem - 3px);
    font-size: 3.5rem;
    transform: translate(calc((50% + 2px) * -1), -60%);
  }
  .title-the-next,
  .title-the-next_2 {
    top: 66% !important;
  }
  #popup_detail #year,
  #popup_detail #year1,
  #popup_detail #year2 {
    font-size: 3.4rem;
    height: calc(7.6rem - 4px);
    width: calc(14.8rem - 4px);
    transform: translate(calc((50% + 2px) * -1), -60%);
  }
  .feature-image1 h2,
  .title-the-next h2,
  .title-the-next_2 h2 {
    font-size: 3.4rem;
  }

  .btn_next_popup,
  .btn_third_popup {
    transform: scale(0.5);
  }
  .btn_next_popup #the-next-post,
  .btn_third_popup #the-next-post_2,
  #swiper_primary .box_read_more button {
    border-radius: 4.5rem;
  }

  #swiper_primary .box_read_more {
    transform: translateX(-50%) scale(0.5);
  }

  #list_categories_second label {
    font-size: 2.2rem;
  }
  #list_categories_second {
    margin-bottom: 1rem;
  }
  #container_swiper_slide.active #swiper_primary {
    height: 85% !important;
  }
  @keyframes shipRun {
    0% {
      width: 46%;
      bottom: 13vh;
    }
    100% {
      width: 60%;
      bottom: 0;
    }
  }
  #box_ware {
    width: 26.34453rem;
    height: 14.5664rem;
  }
  #box_ware div {
    width: 28.772rem;
    height: 17.1128rem;
  }
  #list_dollar {
    margin-top: 2.75rem;
  }
  #list_dollar li {
    height: 5.4rem;
    margin-top: 3.4rem;
  }
  #list_dollar li span {
    font-size: 2.5rem;
  }
  #line_light {
    width: 72rem;
    height: 85.487vh;
    bottom: -23vh;
  }
  @keyframes line15G {
    0% {
      opacity: 0;
      left: 32%;
      bottom: -10vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    50% {
      left: 58%;
      bottom: 8vh;
    }
    100% {
      opacity: 0;
      left: 86%;
      transform: scale(0.3);
      bottom: 23vh;
    }
  }
  @keyframes line25G {
    0% {
      opacity: 0;
      left: 17%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    50% {
      left: 43%;
      bottom: 4vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 65%;
      bottom: 22vh;
    }
  }
  @keyframes line35G {
    0% {
      opacity: 0;
      left: 24%;
      bottom: -9vh;
      transform: scale(0.5);
    }
    10% {
      opacity: 1;
    }
    33% {
      left: 65%;
      bottom: 25vh;
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 28%;
      transform: scale(0.4);
      bottom: 1vh;
    }
  }
  @keyframes line45G {
    0% {
      opacity: 0;
      left: 11%;
      bottom: -1vh;
      transform: scale(0.5);
    }
    5% {
      opacity: 1;
    }
    50% {
      left: 30%;
      bottom: 11vh;
    }
    100% {
      opacity: 0;
      transform: scale(0.4);
      left: 26%;
      bottom: 21vh;
    }
  }
  #box_content_5g {
    left: 6%;
    top: 55%;
  }
  @keyframes showContent5G {
    0% {
      opacity: 0;
      top: 55%;
    }
    100% {
      opacity: 1;
      top: 50%;
    }
  }

  .read_more,
  .box_read_more > div {
    height: 11vh !important;
  }
  .read_more button,
  .box_read_more div button,
  #the-next-post,
  #the-next-post_2 {
    font-size: 18px;
  }
  #frame_primary {
    padding-top: 2.27rem;
  }
  #frame_primary.active2 {
    padding-top: 0.27rem;
  }
}

@media (max-width: 500px) and (max-height: 750px) {
  #box_info_gener {
    margin-top: 10.154vh;
  }
}
@media (max-width: 500px) and (max-height: 670px) {
  #box_info_gener {
    margin-top: 6.154vh;
  }
}
@media (min-width: 1600px) and (min-height: 900px) {
  #frame_primary {
    padding-top: 7.9vh;
  }
}
@media (min-width: 1450px) and (min-height: 725px) and (max-height: 899px) {
  #frame_primary {
    padding-top: 7vh;
  }
}

@media (min-width: 1100px) and (max-width: 1500px) and (max-height: 980px) {
  #frame_primary {
    padding-top: 13.88vh;
  }
  #list_categories_second {
    transform: translateY(-75%);
  }
}

@media (min-width: 1100px) and (max-width: 1300px) and (min-height: 901px) and (max-height: 980px) {
  #frame_primary {
    padding-top: 18.88vh;
  }
  #list_categories_second {
    transform: translateY(-85%);
  }
}

@media (min-width: 1430px) and (max-width: 1449px) and (min-height: 830px) and (max-height: 860px) {
  #frame_primary {
    padding-top: 13.88vh !important;
  }
  #list_categories_second {
    transform: translateY(-72%) !important;
  }
}

.vjs-tech,
video {
  object-fit: cover !important;
}

@media (min-width: 600px) and (max-width: 767px) {
  #box_categories_primary {
    width: 60rem;
    height: 40rem;
    bottom: 7.4rem !important;
  }
  #menu_mb {
    width: 12rem;
    height: 9rem;
  }

  #menu_mb span {
    font-size: 2.2rem;
    margin-top: 0.65rem;
  }

  #list_categories_primary {
    margin-top: 4rem;
    padding-left: 11.91rem;
  }

  #list_categories_primary .label-item {
    font-size: 2.73333rem;
    margin-bottom: 2.27rem;
  }

  #box_categories_primary.active2 {
    transform: translate(-50%, 7.4rem) !important;
  }
}

@media (max-width: 599px) {
  #box_categories_primary.active2 {
    transform: translate(-50%, 17.4rem);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #box_categories_primary.active2 {
    transform: translate(-50%, 7vh);
  }
}

@media (max-width: 500px) and (max-height: 750px) {
  #frame_primary.active2 {
    padding-top: 2.52rem !important;
  }

  #list_categories_second {
    margin-bottom: 2rem;
  }

  #container_swiper_slide.active #swiper_primary {
    height: 112.32528rem !important;
  }

  #container_swiper_slide #swiper_primary {
    height: 115.13173rem !important;
  }

  #swiper_primary .swiper-slide {
    width: 67.431598125rem !important;
  }

  #container_swiper_slide.active #swiper_primary .swiper-slide {
    width: 65.85297rem !important;
  }

  #container_swiper_slide.active {
    height: 134.238169rem !important;
  }

  #container_swiper_slide {
    height: 129rem !important;
  }

  #box_categories_primary {
    bottom: 15.4rem !important;
  }

  #box_categories_primary.active2 {
    transform: translate(-50%, 15.4rem) !important;
  }
}
@media (min-width: 1120px) and (max-height: 600px) {
  #container_5g.active #ship_5g {
    transform: scale(1);
    transform-origin: top right;
    animation: shipRun 0.7s ease-out forwards;
  }
  @keyframes shipRun {
    from {
      width: 40rem;
      height: 44vh;
    }
    to {
      width: 63rem;
      height: 56vh;
    }
  }
  #container_5g.active #box_content_5g {
    animation: showContent5G 0.5s linear forwards;
  }
  @keyframes showContent5G {
    from {
      opacity: 0;
      top: 60%;
    }
    to {
      opacity: 1;
      top: 50%;
    }
  }
  #container_5g.active.active2 #line1_5g {
    animation: line15G 0.5s linear forwards infinite;
  }
  @keyframes line15G {
    0% {
      opacity: 0;
      left: 49%;
      bottom: -1vh;
      transform: scale(0.7);
    }
    5% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 97%;
      bottom: 59vh;
      transform: scale(0.5);
    }
  }
  #container_5g.active.active2 #line1_5g img {
    animation: line15Gimg 0.5s linear forwards infinite;
  }
  @keyframes line15Gimg {
    from {
      transform: rotate(-10deg);
    }
    to {
      transform: rotate(-2deg);
    }
  }
  #container_5g.active.active2 #line2_5g {
    animation: line25G 0.5s linear forwards infinite;
  }
  @keyframes line25G {
    0% {
      opacity: 0;
      left: 38%;
      bottom: -12vh;
      transform: scale(0.7);
    }
    10% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 62%;
      bottom: 37vh;
      transform: scale(0.5);
    }
  }
  #container_5g.active.active2 #line3_5g {
    animation: line35G 0.5s 0.2s linear forwards infinite;
  }
  @keyframes line35G {
    0% {
      opacity: 0;
      left: 38%;
      bottom: -23vh;
      transform: scale(0.7);
    }
    10% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 44%;
      bottom: 8vh;
      transform: scale(0.5);
    }
  }
  #container_5g.active.active2 #line4_5g {
    animation: line45G 0.5s 0.1s linear forwards infinite;
  }
  @keyframes line45G {
    0% {
      opacity: 0;
      left: 20%;
      bottom: -22vh;
      transform: scale(0.7);
    }
    10% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      left: 50%;
      bottom: 31vh;
      transform: scale(0.5);
    }
  }
  #frame_primary {
    padding-top: 7vh;
  }
  #list_categories_second {
    transform: translateY(-60%);
  }
}