* {
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: #818181;
  border-radius: 3px;
}

.all_content {
  overflow: hidden;
}

.tdm-logo-desk {
  position: absolute;
  height: 5rem;
  top: 1.25rem;
  left: 2.5rem;
  z-index: 25;
}

.actual_photo {
  position: absolute;
  width: 100%;
  height: 56.25vw;
  top: 0;
  left: 0;
}
.the_img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.photo_text {
  position: absolute;
  top: 50%;
  right: 6vw;
  font-family: "Karla", sans-serif;
  transform: translate(0, -50%);
  text-align: right;
}
.title_photo_text {
  font-weight: 700;
  font-size: 4rem;
  color: #b10707;
  padding: 3rem;
  padding-bottom: 1.5rem;
  text-transform: uppercase;
}
.sub_title_photo_text {
  font-weight: 400;
  font-size: 2rem;
  color: #ffffff;
  padding: 3rem;
  padding-top: 1.5rem;
  text-transform: uppercase;
}

.filler_video {
  width: 100%;
  height: calc(55.75vw - 27px);
}

.video_svg {
  position: absolute;
  top: 0;
  fill: url(#header-shape-gradient-video) #fff;
}

.bottom_svg_mobile {
  height: 161.8vw;
}

.bottom_svg_extra_mobile {
  position: relative;
  fill: url(#header-shape-gradient-extra-mobile) #fff;
  margin: 0;
  width: 100%;
  height: 177.8vw;
  display: none;
}
.bottom_svg_hyper_mobile {
  position: relative;
  fill: url(#header-shape-gradient-hyper-mobile) #fff;
  margin: 0;
  width: 100%;
  height: 210vw;
  display: none;
}
.bottom_svg_hyperx_mobile {
  position: relative;
  fill: url(#header-shape-gradient-hyperx-mobile) #fff;
  margin: 0;
  width: 100%;
  height: 233.3vw;
  display: none;
}
.bottom_svg_hyperz_mobile {
  position: relative;
  fill: url(#header-shape-gradient-hyperz-mobile) #fff;
  margin: 0;
  width: 100%;
  height: 250vw;
  display: none;
}

.dot_0_w {
  background: #ffffff;
}

.dot_1_w {
  background: #b1070737;
}

.dot_2_w {
  background: #b1070737;
}

.dot_3_w {
  background: #b1070737;
}

.dot_4_w {
  background: #ffffff;
}

#header-shape-gradient-extra-mobile {
  --color-stop: #b10707;
  --color-bot: #681f19;
}
#header-shape-gradient-hyper-mobile {
  --color-stop: #b10707;
  --color-bot: #681f19;
}
#header-shape-gradient-hyperx-mobile {
  --color-stop: #b10707;
  --color-bot: #681f19;
}
#header-shape-gradient-hyperz-mobile {
  --color-stop: #b10707;
  --color-bot: #681f19;
}

.bottom_title {
  position: relative;
  padding-top: 4vw;
  padding-bottom: 2vw;
  left: 50%;
  transform: translate(-50%, 0);
}
.main_bottom_title_hyper_mobile {
  text-align: center;
  color: #ffffff;
  font-size: 1.8rem;
  padding-bottom: 0.2rem;
  padding-top: 0.2rem;
  display: none;
}

.main_bottom_title {
  text-align: center;
  color: #ffffff;
  font-size: 2rem;
  padding-bottom: 0.5rem;
}

.sub_bottom_title {
  text-align: center;
  color: #ffffffd5;
  font-size: 1.2rem;
}
.sub_bottom_title_extra_mobile {
  text-align: center;
  color: #ffffffd5;
  font-size: 1.1rem;
  display: none;
  padding-left: 6.5vw;
  padding-right: 6.5vw;
}
.sub_bottom_title_hyper_mobile {
  text-align: center;
  color: #ffffffd5;
  font-size: 1.1rem;
  display: none;
  padding-left: 6.5vw;
  padding-right: 6.5vw;
  display: none;
}
.img_video_container {
  position: absolute;
  left: 6%;
  right: calc(6% - 9px);
  height: 100%;
  border-radius: 9px;
  overflow: hidden;
  background: #ffffff37;
}

.img_video_bot {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  opacity: 0;
}
.background_picture {
  position: relative;
  right: 0;
  height: 25vw;
  width: 100%;
}
.tooling_img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.just_for_slide {
  height: calc(33vw - 371px);
}
.the_text {
  position: absolute;
  padding-top: 1rem;
  right: 0;
  top: 0;
  max-height: calc(33vw - 371px);
  overflow-y: auto;
  box-sizing: border-box;
}
.last_text {
  max-height: calc(33vw - 371px - 36px);
}
.last_text_slide {
  height: calc(33vw - 371px - 36px);
}
.no_display {
  display: none;
}
.txt_inside_bottom {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  right: 0;
  text-align: right;
  display: none;
  padding-left: calc(3vw - 9px + 3rem);
  padding-bottom: 1rem;
  padding-top: 1rem;
  line-height: 125%;
  max-width: 32rem;
}
.txt_inside_bot {
  margin-left: auto;
  margin-right: 0;
  min-width: 32rem;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  color: #cccccc;
}
.w_100_2_top {
  position: relative;
  width: 200%;
  margin-bottom: 36px;
}
.w_100_2_mid {
  position: relative;
  width: 200%;
  margin-top: 36px;
  margin-bottom: 36px;
}
.w_100_2_bot {
  position: relative;
  width: 200%;
  margin-top: 36px;
}
.sub_sector {
  font-weight: 400;
}
.img_mobile{
  display: none;
}

@media screen and (max-width: 1131px) and (min-width: 1066px) {
  .txt_inside_bot {
    min-width: 30rem;
  }
}
@media screen and (max-width: 1065px) and (min-width: 1030px) {
  .txt_inside_bot {
    min-width: 28rem;
  }
}
@media screen and (max-width: 1029px) and (min-width: 970px) {
  .txt_inside_bot {
    min-width: 27rem;
  }
}
@media screen and (max-width: 969px) and (min-width: 947px) {
  .txt_inside_bot {
    min-width: 26rem;
  }
}
@media screen and (max-width: 946px) and (min-width: 930px) {
  .txt_inside_bot {
    min-width: 25.5rem;
  }
}
@media screen and (min-width: 1550px) and (max-width: 1800px) {
  @keyframes title_in_bot {
    0% {
      color: #b7b7b7;
      height: 1rem;
      font-size: 1rem;
    }
    100% {
      color: #ffffff;
      height: 1.1rem;
      font-size: 1.1rem;
    }
  }

  @keyframes title_out_bot {
    0% {
      color: #ffffff;
      height: 1.1rem;
      font-size: 1.1rem;
    }
    100% {
      color: #b7b7b7;
      height: 1rem;
      font-size: 1rem;
    }
  }
}
@media screen and (max-width: 1549px) {
  @keyframes title_in_bot {
    0% {
      color: #b7b7b7;
    }
    100% {
      color: #ffffff;
    }
  }

  @keyframes title_out_bot {
    0% {
      color: #ffffff;
    }
    100% {
      color: #b7b7b7;
    }
  }
}
@media screen and (max-width: 1660px) {
  .the_text {
    padding-top: 0;
  }
}

@media screen and (max-width: 1410px) {
  .title_bot {
    font-size: 0.8rem;
  }
  .the_text p {
    padding-top: 0;
    padding-bottom: 0.2rem;
  }
  .w_100_2_top {
    margin-bottom: 24px;
  }
  .w_100_2_mid {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .w_100_2_bot {
    margin-top: 24px;
  }
  .just_for_slide {
    height: calc(33vw - 275px);
  }
  .the_text {
    max-height: calc(33vw - 275px);
  }
  .last_text {
    max-height: calc(33vw - 275px - 24px);
  }
  .last_text_slide {
    height: calc(33vw - 275px - 24px);
  }
}

@media screen and (max-width: 1129px) {
  .title_bot {
    font-size: 0.75rem;
  }
}
@media screen and (max-width: 1080px) {
  .title_bot {
    font-size: 0.7rem;
  }
}
@media screen and (max-width: 1029px) {
  .title_bot {
    font-size: 0.64rem;
  }
  .w_100_2_top {
    margin-bottom: 20px;
  }
  .w_100_2_mid {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .w_100_2_bot {
    margin-top: 20px;
  }
  .just_for_slide {
    height: calc(33vw - 243px);
  }
  .the_text {
    max-height: calc(33vw - 243px);
  }
  .last_text {
    max-height: calc(33vw - 243px - 20px);
  }
  .last_text_slide {
    height: calc(33vw - 243px - 20px);
  }
}

@media screen and (max-width: 929px) {
  .title_bot {
    font-size: 0.8rem;
  }
  .the_text p {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .w_100_2_top {
    margin-bottom: 36px;
  }
  .w_100_2_mid {
    margin-top: 36px;
    margin-bottom: 36px;
  }
  .w_100_2_bot {
    margin-top: 36px;
  }
  .bottom_svg {
    display: none;
  }
  .bottom_svg_mobile {
    display: block;
  }
  h1 {
    text-align: left;
    right: unset;
    left: 3.5vw;
    padding-right: 6vw;
  }
  .actual_photo {
    overflow: hidden;
    height: 75vw;
  }
  .bottom_content {
    height: 161.8vw;
  }
  .svg_container_bottom {
    height: 161.8vw;
  }
  .left_and_center {
    height: calc(61.5vw + 13px);
  }
  .the_text {
    max-height: calc(61.5vw - 378px + 13px);
  }
  .just_for_slide {
    height: calc(61.5vw - 378px + 13px);
  }
  .last_text {
    max-height: calc(61.5vw - 378px - 36px + 13px);
  }
  .last_text_slide {
    height: calc(61.5vw - 378px - 36px + 13px);
  }
  .img_video_container {
    position: relative;
    left: unset;
    right: unset;
    height: calc(61.5vw + 13px);
    border-radius: 9px;
    overflow: hidden;
    background: #ffffff37;
    width: 100%;
  }
  .the_text {
    position: absolute;
    left: 0;
    right: 6vw;
    top: 0;
    padding-left: 3.5vw;
    padding-right: 0;
    overflow-y: auto;
  }
  .txt_inside_bot {
    padding-left: 3.5vw;
    padding-right: 6vw;
    margin-left: 0;
    margin-right: 0;
    min-width: unset;
    box-sizing: border-box;
    color: #cccccc;
  }
  .txt_inside_bottom {
    text-align: left;
    max-width: unset;
  }
  .sub_bottom_title {
    padding-left: 6.5vw;
    padding-right: 6.5vw;
  }
  .container_to_center {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    top: unset;
    bottom: 0;
    transform: unset;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-around;
  }
  .w_100_2_top,
  .w_100_2_mid,
  .w_100_2_bot {
    width: 100%;
    display: grid;
    grid-template-columns: 6% 6% 88%;
  }
  .to_set_3rd {
    order: 3;
  }
  .to_set_2nd {
    order: 2;
  }
  .to_set_1st {
    order: 1;
  }
  .bottom_content {
    display: flex;
    flex-direction: column;
  }
  .left_and_center {
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    padding-bottom: 36px;
    padding-top: 36px;
  }
  .right {
    position: relative;
    top: unset;
    left: unset;
    width: calc(82vw + 18px);
    height: unset;
  }
  @keyframes title_in_bot {
    0% {
      color: #b7b7b7;
    }
    100% {
      color: #ffffff;
    }
  }
  @keyframes title_out_bot {
    0% {
      color: #ffffff;
    }
    100% {
      color: #b7b7b7;
    }
  }
  .video_svg {
    top: 18.75vw;
  }
  .the_img {
    width: unset;
    left: 50%;
    height: 100%;
    transform: translate(-50%, 0);
  }
  .img_desktop{
    display: none;
  }
  .img_mobile{
    display: block;
  }
  .filler_video {
    height: calc(71.9vw - 27px);
  }
  .dot_0_w,
  .dot_4_w {
    box-shadow: 1px 2px 2px #7c7c7c30;
  }
}

@media screen and (max-width: 830px) {
  .main_bottom_title {
    font-size: 1.8rem;
    padding-bottom: 0.6rem;
  }
  .sub_bottom_title {
    display: none;
  }
  .sub_bottom_title_extra_mobile {
    display: block;
  }
  .the_text p {
    padding-top: 0;
    padding-bottom: 0.2rem;
  }
}
@media screen and (max-width: 750px) {
  .bottom_content {
    height: 177.8vw;
  }
  .svg_container_bottom {
    height: 177.8vw;
  }
  .bottom_svg_mobile {
    display: none;
  }
  .bottom_svg_extra_mobile {
    display: block;
  }
  .left_and_center {
    height: calc(73.5vw + 13px);
  }
  .the_text {
    max-height: calc(73.5vw - 378px + 13px);
  }
  .just_for_slide {
    height: calc(73.5vw - 378px + 13px);
  }
  .last_text {
    max-height: calc(73.5vw - 378px - 36px + 13px);
  }
  .last_text_slide {
    height: calc(73.5vw - 378px - 36px + 13px);
  }
}
@media screen and (max-width: 658px) {
  .bottom_title {
    padding-top: 6vw;
    padding-bottom: 2vw;
  }
  .bottom_content {
    height: 210vw;
  }
  .svg_container_bottom {
    height: 210vw;
  }
  .bottom_svg_extra_mobile {
    display: none;
  }
  .bottom_svg_hyper_mobile {
    display: block;
  }
  .w_100_2_top {
    margin-bottom: 47px;
  }
  .w_100_2_mid {
    margin-top: 47px;
    margin-bottom: 47px;
  }
  .w_100_2_bot {
    margin-top: 47px;
  }

  .left_and_center {
    height: calc(100vw + 13px);
  }
  .the_text {
    max-height: calc(100vw - 466px + 13px);
  }
  .just_for_slide {
    height: calc(100vw - 466px + 13px);
  }
  .last_text {
    max-height: calc(100vw - 466px - 36px + 13px);
  }
  .last_text_slide {
    height: calc(100vw - 466px - 36px + 13px);
  }
}
@media screen and (max-width: 580px) {
  .bottom_content {
    height: 233.3vw;
  }
  .svg_container_bottom {
    height: 233.3vw;
  }
  .bottom_svg_hyper_mobile {
    display: none;
  }
  .bottom_svg_hyperx_mobile {
    display: block;
  }
  .left_and_center {
    height: calc(123.3vw + 13px);
  }
  .the_text {
    max-height: calc(123.3vw - 466px + 13px);
  }
  .just_for_slide {
    height: calc(123.3vw - 466px + 13px);
  }
  .last_text {
    max-height: calc(123.3vw - 466px - 36px + 13px);
  }
  .last_text_slide {
    height: calc(123.3vw - 466px - 36px + 13px);
  }
}
@media screen and (max-width: 478px) {
  .main_bottom_title {
    display: none;
  }
  .main_bottom_title_hyper_mobile {
    display: block;
  }
  .sub_bottom_title_extra_mobile {
    display: none;
  }
  .sub_bottom_title_hyper_mobile {
    display: block;
  }
  .title_bot {
    font-size: 0.7rem;
  }
  .w_100_2_top {
    margin-bottom: 36px;
  }
  .w_100_2_mid {
    margin-top: 36px;
    margin-bottom: 36px;
  }
  .w_100_2_bot {
    margin-top: 36px;
  }
  .left_and_center {
    height: calc(122vw + 13px);
  }
  .the_text {
    max-height: calc(122vw - 378px + 13px);
  }
  .just_for_slide {
    height: calc(122vw - 378px + 13px);
  }
  .last_text {
    max-height: calc(122vw - 378px - 36px + 13px);
  }
  .last_text_slide {
    height: calc(122vw - 378px - 36px + 13px);
  }
}

@media screen and (max-width: 424px) {
  .left_and_center {
    padding-bottom: 32px;
    padding-top: 32px;
  }
  .img_video_container {
    height: calc(51.75vw + 10px);
  }
  .bottom_title {
    padding-top: 7vw;
    padding-bottom: 4vw;
  }
  .title_bot {
    font-size: 0.64rem;
  }
  .w_100_2_top {
    margin-bottom: 32px;
  }
  .w_100_2_mid {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .w_100_2_bot {
    margin-top: 32px;
  }
  .left_and_center {
    height: calc(125vw + 13px);
  }
  .the_text {
    max-height: calc(125vw - 346px + 13px);
  }
  .just_for_slide {
    height: calc(125vw - 346px + 13px);
  }
  .last_text {
    max-height: calc(125vw - 346px - 36px + 13px);
  }
  .last_text_slide {
    height: calc(125vw - 346px - 36px + 13px);
  }
}

@media screen and (max-width: 1740px) {
  .photo_text {
    right: 2vw;
  }
  @keyframes title_in {
    0% {
      color: #b7b7b7;
      height: 1rem;
      font-size: 1rem;
    }
    100% {
      color: black;
      height: 1.3rem;
      font-size: 1.3rem;
    }
  }
  @keyframes title_out {
    0% {
      color: black;
      height: 1.3rem;
      font-size: 1.3rem;
    }
    100% {
      color: #b7b7b7;
      height: 1rem;
      font-size: 1rem;
    }
  }
}
@media screen and (max-width: 1550px) {
  .photo_text {
    right: 0;
  }
  .title_photo_text {
    padding: 2.5rem;
    padding-bottom: 1rem;
  }
  .sub_title_photo_text {
    padding: 2.5rem;
    padding-top: 1rem;
  }
  @keyframes title_in {
    0% {
      color: #b7b7b7;
      height: 1rem;
      font-size: 1rem;
    }
    100% {
      color: black;
      height: 1.1rem;
      font-size: 1.1rem;
    }
  }
  @keyframes title_out {
    0% {
      color: black;
      height: 1.1rem;
      font-size: 1.1rem;
    }
    100% {
      color: #b7b7b7;
      height: 1rem;
      font-size: 1rem;
    }
  }
}
@media screen and (max-width: 1340px) {
  .photo_text {
    right: 0;
    width: 42vw;
  }
  .title_photo_text {
    padding-right: 6vw;
  }
  .sub_title_photo_text {

    padding-right: 6vw;
  }
  @keyframes title_in {
    0% {
      color: #b7b7b7;
    }
    100% {
      color: black;
    }
  }
  @keyframes title_out {
    0% {
      color: black;
    }
    100% {
      color: #b7b7b7;
    }
  }
}
@media screen and (max-width: 1218px) {
  .title{
    height: 0.8rem;
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 980px) {
  .title{
    height: 0.75rem;
    font-size: 0.75rem;
  }
}


@media screen and (max-width: 929px) {
  .photo_text {
    right: 0;
    width: 60vw;
  }
  .sub_title_photo_text {
    padding-left: 20vw;
  }
}
@media screen and (max-width: 836px) {
  .title_photo_text {
    font-size: 3.5rem;
    padding-bottom: 0.6rem;
    padding-left: 15vw;
  }
  .sub_title_photo_text {
    font-size: 1.75rem;
    padding-top: 0.6rem;
  }
}
@media screen and (max-width: 600px) {
  .title_photo_text {
    font-size: 3rem;
    padding-bottom: 0.6rem;
    padding-left: 15vw;
  }
  .sub_title_photo_text {
    font-size: 1.5rem;
    padding-top: 0.6rem;
  }
}
@media screen and (max-width: 530px) {
  .title_photo_text {
    font-size: 2.5rem;
    padding-bottom: 0.5rem;
    padding-left: 5vw;
  }
  .sub_title_photo_text {
    font-size: 1.25rem;
    padding-top: 0.5rem;
  }
}
@media screen and (max-width: 408px) {
  .title_photo_text {
    font-size: 2rem;
  }
  .sub_title_photo_text {
    font-size: 1rem;
  }
}
@media screen and (max-width: 340px) {
  .title_photo_text {
    font-size: 1.8rem;
  }
  .sub_title_photo_text {
    font-size: 0.9rem;
  }
  .sub_bottom_title_hyper_mobile{
    font-size: 1rem;
  }
  .main_bottom_title_hyper_mobile{
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 565px) {
  .dot_1_h,
  .dot_2_h,
  .dot_3_h{
    margin-top: 36px;
    margin-bottom: 36px;
  }
}