.youtube_wrap {
  position: relative;
  padding: 30px 0px 120px 0;
  display: flex;
  justify-content: center;
}


.youtube_wrap .inner {
  width: 1300px;
}


.youtube_wrap #main_cancer {
  width: 100%;
  position: relative;
}


.youtube_wrap #main_cancer .title {
  text-align: center;
  margin: 30px 0 40px 0;
}


.youtube_wrap #main_cancer .title p {
  font-family: "Freesentation";
  color: #333;
  font-style: normal;
  font-size: 40px;
}


.youtube_wrap #main_cancer .title strong {
  font-family: "Freesentation";
  color: #333;
  font-weight: 600;
  font-size: 40px;
  margin-left: 6px;
}


.youtube_wrap #main_cancer .play_mov {
  /* overflow: hidden; */
  display: flex;
  justify-content: space-between;
}


.youtube_wrap #main_cancer .play_mov .youtube_left_area {
  width: 800px;
  aspect-ratio: 16 / 9;
}


.youtube_wrap #main_cancer .play_mov .youtube_right_area {
  width: 450px;
  font-size: 12px;
}


.youtube_wrap #main_cancer .play_mov .youtube_right_area .process_new {
  height: 441px;
}


.youtube_wrap #main_cancer .play_mov .youtube_right_area a {
  display: inline-block;
  width: 35%;
  margin-right: 5%;
}


.youtube_wrap #main_cancer .play_mov .youtube_right_area a img {
  width: 100%;
  transition: all 0.35s ease;
}


.youtube_wrap #main_cancer .play_mov .youtube_right_area div.txtArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.youtube_wrap #main_cancer .play_mov .youtube_right_area div.txtArea span {
  color: #333;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  font-family: "Freesentation";
}


.youtube_wrap #main_cancer .process {
  width: 100%;
  vertical-align: top;
}


.youtube_wrap #main_cancer .process ul {
  font-size: 0px;
}


.youtube_wrap #main_cancer .process ul li {
  width: 100%;
  display: inline-block;
  border-top: solid 1px #ddd;
  height: 99px;
  padding: 10px 0px;
}


.youtube_wrap #main_cancer .process ul li:last-child {
  /*margin-right:0px;*/
}


.youtube_wrap #main_cancer .process ul li img {
  width: 100%;
}


.youtube_wrap #main_cancer .swiper-slide {
  border-bottom: dashed 1px #ddd;
}


.youtube_wrap #main_cancer .swiper-slide li {
  display: flex;
}


.youtube_wrap #main_cancer .swiper-slide.swiper-slide-next div.txtArea h1 {
  color: #333333;
}


.youtube_wrap .swiper-pagination {
  top: -15%;
  right: 37%;
  position: absolute;
}


.youtube_wrap .swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #cccccc;
  opacity: 1;
  transition: all 0.4s ease;
  margin-right: 10px;
}


.youtube_wrap .swiper-pagination .swiper-pagination-bullet-active {
  width: 25px;
  border-radius: 20px;
  background: #3c6cd4;
  border: 0px;
}


.swiper-container-vertical > .swiper-pagination-bullets {
  top: auto !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: auto;
}


.swiper-container-vertical
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  display: inline-block !important;
  margin: 0 6px !important;
}


.swiper-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 10;
  margin-top: 10px;
}


.swiper-button-prev,
.swiper-button-next {
  position: static;
  /* ±âÁ¸ absolute Á¦°Å */
  width: 22px;
  height: 35px;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  background: #3c6cd4cc;
  filter: invert(92%) sepia(55%) saturate(0%) hue-rotate(82deg) brightness(107%)
    contrast(101%);
}


.swiper-button-prev {
  padding: 2px 10px 2px 8px;
}


.swiper-button-next {
  padding: 2px 8px 2px 10px;
}


.swiper-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}


.swiper-button-prev,
.swiper-container-rtl .swiper-button-next,
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: none !important;
}


.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  display: none;
  background-image: none;
}


@media screen and (max-width: 1200px) {
  .youtube_wrap #main_cancer .play_mov {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}


@media screen and (max-width: 600px) {
  .youtube_wrap #main_cancer .play_mov .youtube_left_area {
    width: 400px;
  }


  .swiper-navigation {
    justify-content: space-around;
    margin-top: 30px;
  }
}


@media screen and (max-width: 450px) {
  .youtube_wrap #main_cancer .play_mov .youtube_left_area {
    width: 320px;
  }


  .youtube_wrap #main_cancer .play_mov .youtube_right_area {
    width: 320px;
  }
}