/* main_common style */
body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--black);
  cursor: none;
}

/* pager */
#fp-nav.fp-right {
  right: 0;
  left: 20px;
}

#fp-nav ul li a span {
  background-color: var(--white);
}

#fp-nav ul li a.active span {
  background-color: var(--primary_color);
}

/* //pager */

/* layout */
.h_100 {
  height: 100vh;
}

.position_rel {
  position: relative;
}

/* //layout */
/* //main_common style */


/* main_banner */
.content_box {
  position: absolute;
  left: 0;
  bottom: 18%;
  /* 작은값 / 큰값 = 0.18... * 100 = 18%  */
  z-index: 30;
}

#banner_content_box {
  left: -200px;
  opacity: 0;
}

.main_banner .content_box .text_box {
  width: 500px;
  text-align: justify;
}

.content_box .text_box {
  margin-bottom: 30px;
}

.video_banner {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.video_banner::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.video_banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/* //main_banner */



/* movie_rank */
/*  02 rank  */
.text_box {
  position: relative;
}

#move_box {
  left: -200px;
  opacity: 0;
}

#slide {
  left: 70%;
  opacity: 0;
}

.title-section {
  position: absolute;
  display: flex;
  align-items: flex-end;
  padding-bottom: 10px;
  left: -114px;
  top: -110px;
}

.rank-title {
  display: flex;
  align-items: flex-end;
}

.ranking_number {
  font-size: 100px;
  font-weight: 600;
  color: var(--white);
  line-height: 100px;
  font-family: 'Noto Sans', sans-serif;
}

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

.star-rating {
  display: flex;
  justify-content: center;
  gap: 4px;
  position: relative;
  height: 32px;
  left: 7%;
}

.star {
  border: none;
  font-size: 24px;
}

.star_border {
  color: #ccc;
}

.material-symbols-outlined.empty {
  color: var(--fontColorDark);
}

.movie-rankings {
  display: flex;
}

.star.filled {
  color: #ffd700;
}

.star.empty {
  color: #ccc;
}

/* 우측 포스터 슬라이더 영역 */

/* bg_img*/
.bg_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.cover {
  /* content: ''; */
  /* display: block; */
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 17;
  background: var(--sectionBg-Grad-lin);
}

.bg_img img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  display: none;
}

/* .bg_img img.bg_show{
  display: block;
} */

.slide_content {
  position: absolute;
  left: 75%;
  bottom: 18%;
  width: 900px;
  /* outline: 40px solid red; */
  z-index: 18;
}

.view_slide {
  /* 실제로 보여지는 곳 */
  position: relative;
  overflow: hidden;
  /* outline: 20px solid blue; */
}

.view_slide .slide_container {
  width: 1480px;
  display: flex;
  gap: 20px;
  position: relative;
  left: -300px;
}

.view_slide .slide_container .slide {
  width: 280px;
}

.img_box img {
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
}

/* .img_box:after {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--img_cover_color);
}  */

.slide_btn_box {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
}

.slide_item {
  position: relative;
}

.img_box {}

.slide_item .num {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 10px;
  gap: 236px;
  color: var(--white);
  line-height: 54px;
  font-size: 54px;
  z-index: 300;
}

.slide_btn {
  background-color: transparent;
  border: 1px solid #BBBBBB;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: #BBBBBB;
  transition: 0.3s;
}

.slide_btn:hover {
  background-color: rgba(271, 271, 271, 0.1);
}

.slide_btn_box {
  display: flex;
  padding-top: 16px;
  position: relative;
  gap: 10px;
}

/* .movie-rankings .text_box{
  opacity: 0;
  transition: 0.6s ease;
}
.movie-rankings .text_box.show{
  opacity: 1;
} */

/* //movie_rank */
/* //rank */


/* plan */
.plan_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  margin-bottom: 32px;
}

.plan_title h3 {
  font-size: 32px;
  font-weight: 700;
}

.plan_post .swiper-slide {
  width: 280px;
  flex-shrink: 0;
}

.swiper-pagination {
  width: 90%;
  /* 부모 가로 대비  */
  max-width: 1320px;
  /* 최대 너비는 1320px로 제한 */
  height: 4px;
  background: rgba(51, 51, 51, 1);
  border-radius: 4px;
  margin: 46px auto 0;
  /* 좌우 중앙 정렬 */
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.swiper-pagination-progressbar-fill {
  background: var(--primary_color) !important;
  border-radius: 4px;
  transition: width 0.3s ease;
  max-width: 100%;
  box-sizing: border-box;
}

.plan_title a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 300;
}

.plan_title a span {
  font-size: 16px;
  font-weight: 300;
}

.plan_title a.active {
  color: var(--primary_color);
}

.img_item {
  position: relative;
}

.img_item:before {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--img_cover_color);
}

.plan_post div img {
  width: 280px;
  height: 382px;
  border-radius: 12px;
  box-shadow: var(--web_card_shadow);
}

.planHover {
  width: 280px;
  height: 382px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
}

.planHover.active {
  opacity: 1;
}

.planHover .moviText p {
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 22px;
}

.planHover .btn_box {
  display: flex;
  gap: 12px;
  flex-direction: column;
}

.planHover .btn_box a {
  padding: 14px 50px;
}

.img_item .rating {
  position: absolute;
  top: 10px;
  right: 38px;
  width: var(--icon_s_w);
  height: var(--icon_s_h);
  display: block;
  color: var(--white);
  font: var(--rating_number);
  border-radius: var(--icon_radius);
  text-align: center;
  padding-top: 5px;
}

.img_item .ranking {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 56px;
  color: #fff;
  z-index: 2;
}

.img_item:hover .planHover {
  opacity: 1;
}

/*스와이프 애니메이션*/
.swiper-slide.img_item {
  opacity: 0;
}

@keyframes slideUpFadeIn {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.swiper-slide.img_item.push {
  animation: slideUpFadeIn 0.6s ease-in-out forwards;
}



/* //plan */



/* recommend */
.recommend {
  position: relative;
}

.recommend_content {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1077px;
  padding: 50px 50px;
  width: 90%;
  backdrop-filter: blur(20px);
  border-radius: var(--m_radius);
  border: 1px solid rgba(217, 217, 217, 0.2);

  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;

}

#recommend_content_box {
  opacity: 0;
}

.recommend_content .content_box {
  max-width: 494px;
  min-width: 368px;
  position: relative;
  left: 0;
  bottom: 0;
  z-index: 0;
}

.recommend_content .content_box .text_box .title {
  font-size: 32px;
  line-height: 38px;
}

.recommend_content .content_box .text_box .title .weather_icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.recommend_content .content_box .text_box .content_body {
  text-align: justify;
}

.recommend_content .thumb_box {
  max-width: 400px;
  min-width: 200px;
  overflow: hidden;
  border-radius: var(--s_radius);
  box-shadow: var(--web_card_shadow);
  position: relative;
}

.recommend_content .thumb_box .play_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  transition: 0.3s;
  z-index: 10;
}

.recommend_content .thumb_box .play_cover:hover {
  background-color: rgba(0, 0, 0, 0.4);

}

.recommend_content .thumb_box .play_cover svg {
  width: var(--icon_m_w);
  height: var(--icon_m_h);
}

.recommend_content .thumb_box .play_cover:hover svg {
  fill: var(--primary_color);
}

.recommend_content .thumb_box img {
  width: 100%;
  object-fit: cover;
}

.recommend .img_banner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.recommend .img_banner::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.img_banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 20;
}

.recommend_modal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recommend_modal.on {
  visibility: visible;
}

.recommend_modal .play_box {
  transform: scale(0);
  transition: 0.4s;
}

.recommend_modal.on .play_box {
  transform: scale(1);
}

.modal_close {
  background: none;
  border: none;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 40px;
  right: 60px;
  z-index: 9999;
}

/* // recommend */



/*cinema*/
.cinemazone {
  width: 100%;
  height: 100vh;
  position: relative;
}

.cinema {
  display: none;
  color: var(--white);
  overflow-y: hidden;
  transform: translateY(50%);
  opacity: 0;
  transition: transform 0.6s ease, opacity 1s ease;
}

.cinema.push {
  transform: translateY(0);
  opacity: 1;
}

.cinema h5 {
  font-size: 28px;
  line-height: 48px;
  font-weight: 700;
  margin-bottom: 70px;
  text-align: center;
  box-shadow: 0 0 8 rgba(255, 255, 255, 0.2);
}

.cinemaspecial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.cinema .item {
  display: inline-block;
  position: relative;
}

.cinemaspecial .item.active {
  box-shadow: var(--web_strong_shadow);
}

.cinema .item span {
  position: absolute;
  top: 5px;
}

.cinemaspecial .item a,
.cinema .item span {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
}

.cinemaspecial .item a.active,
.cinemaspecial .item span.active {
  color: #ED3124;
}

.cinemaspecial span {
  opacity: 0;
  font-size: 72px;
  transform: translateX(-30px);
  transition: 0.5s;
}

.cinemaspecial span.active {
  transform: translateX(0);
  opacity: 1;
}

.bg1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-image: var(--sectionBg-Grad-lin), url('../images/cinema/livingroom.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: block;
  z-index: -1;
}

/* cinema end */
/* event_zone */
.eventzone {
  width: 100%;
  height: 100vh;
  position: relative
}

.bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-image: url('../images/event_zone/store.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: block;
  z-index: -1;
}

.promotion {
  width: 100%;
  height: 100vh;
  display: flex;
  color: #fff;
  text-align: center;
}

.promotion h6 {
  color: #ED3124;
  font-size: 20px;
  line-height: 22px;
  font-weight: 600;
  font-family: "Noto Sans KR", sans-serif;
}

.promotion p {
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
  font-family: "Noto Sans KR", sans-serif;
}

.store {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.store:hover {
  background: rgba(0, 0, 0, 0.6);
}

.store:hover h6,
.store:hover p {
  transform: translateY(-50px);
  transition: .5s;
}

.event {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  border-top: 0;
  border-bottom: 0;
  border-right: 1px solid rgba(238, 238, 238, 0.2);
  border-left: 1px solid rgba(238, 238, 238, 0.2);
  box-sizing: border-box;
}

.event:hover {
  background: rgba(0, 0, 0, 0.6);
}

.event:hover h6,
.event:hover p {
  transform: translateY(-50px);
  transition: .5s;
}

.special {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.special:hover {
  background: rgba(0, 0, 0, 0.6);
}

.special:hover h6,
.special:hover p {
  transform: translateY(-50px);
  transition: .5s;
}

.hashtag {
  width: 323px;
  opacity: 0;
}

.hashtag.active {
  opacity: 1;
  transform: translateY(50px);
  transition: .5s;
}

.hashtag ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.hashtag ul li a {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 36px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  padding: 10px 10px;
}

.hashtag ul li a:hover {
  background-color: var(--primary_color);
  transition: .5s;
}

.arrow_swiper .material-symbols-outlined {
  position: absolute;
  right: -10px;
  top: -10px;
  opacity: 0.6;
}

.arrow_swiper {
  position: absolute;
  left: 95%;
  animation: arrow 0.7s ease-in-out infinite;
  display: none;
}

@keyframes arrow {

  0% {
    left: 96%;
  }

  50% {
    left: 95%;
  }

  100% {
    left: 96%;
  }
}

/* event_zone end */



/* 07 location pym */
.location_search {
  background: url(../images/location_bg.jpg) no-repeat center / cover;
}

.location_search>div {
  background: var(--sectionBg-Grad-lin);
}

.location {
  height: 100vh;
  width: 100%;
  display: flex;
  color: var(--fontColorWhite);
  align-items: center;
  justify-content: center;

}

#location_search {
  position: relative;
  top: 200px;
  opacity: 0;
}


.location>div {
  text-align: center;
  width: 517px;
}

.location>div h2 {
  font-size: 32px;
  line-height: 32px;
  font-weight: bold;
  color: var(--white);
}

.location>div p {
  font-size: 16px;
  line-height: 24px;
  padding: 8px 0 28px 0;
  color: var(--white);
}

.search_container {
  position: relative;
  width: 517px;
}

.location>div input {
  height: 48px;
  width: 100%;
  border-radius: 4px;
  border: 0px solid;
  padding: 10px 36px 10px 16px;
  line-height: 24px;
}

.search_btn {
  position: absolute;
  top: 12px;
  left: 92%;
  color: var(--fontColordisable);
  /* justify-content: center; */
  width: 24px;
  height: 24px;
  border: none;
  background-color: transparent;
}


.search_btn:hover {
  color: #333;
}

.tag_box {
  padding: 15px 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 4px;
}

.hint {
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  color: #fff;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 999px;
}

.hint:hover {
  background-color: var(--primary_color);
  transition: .5s;
}



/* // 07 location pym */



/* 08 appdownload pym */
.appdownload {
  background-color: var(--bg-color);
}

.app {
  display: flex;
  color: var(--white);
  align-items: center;
  justify-content: center;
  gap: 80px;
  height: 880px;
}

.app>div p {
  font-size: 24px;
  font-weight: lighter;
  line-height: 24px;
  color: var(--white);
}

.app>div h2 {
  font-size: 48px;
  font-weight: bold;
  text-align: left;
  line-height: 48px;
  color: var(--white);
  padding: 0 0 28px;
}

.app>div h6 {
  font-size: 16px;
  font-weight: lighter;
  line-height: 24px;
  color: var(--white);
}

.appdown {
  padding-top: 24px;
  display: flex;
  gap: 16px;
  flex-flow: row wrap;
  justify-content: center;
}

.appdown a {
  border: 1px solid var(--white);
  border-radius: 36px;
  color: var(--white);
  padding: 12px 40px;
  font: var(--btn_text);
  line-height: 16px;
  display: flex;
  border-radius: var(--m_radius);
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.07);
}

.appdown a:hover {
  background: rgba(255, 255, 255, 0.06);
  transition: .5s;
  border-color: #4fc3f7;
  box-shadow: 0 8px 14px rgba(79, 195, 247, 0.3);
}


.appdown a img {
  vertical-align: middle;
  margin-right: 10px;
}

.appdown_img img {
  animation: Float 5s ease-in-out infinite;
}

#appdown_img {
  position: relative;
  top: 200px;
  opacity: 0;

}

/* 모달 */
#appdown_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;

}

#appdown_modal img {
  display: flex;
  justify-content: center;
  padding: 100px 94px;
}

#appdown_modal>div {
  position: relative;
  width: 400px;
  height: 600px;
  margin: 5% auto;
  background: linear-gradient(to bottom, rgba(201, 0, 64, 1), rgba(6, 0, 76, 1)70%);
  padding: 1px;
  overflow: hidden;
  border-radius: 10px;
}

#appdown_closeModal {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 40px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--empty_btn_border);
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
}

#appdown_closeModa:hover {
  background: rgba(0, 0, 0, .7);
}

#appdown_closeModa:active {
  background: rgba(0, 0, 0, 0.9) !important;
}


@keyframes Float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

/* // 08 appdownload pym */

/* footer */
.footer {
  padding: 48px 60px;
  height: 364px;
  /* 추후 풀페이지 ui에서 컨텐츠의 높이만큼만 잡히는 옵션사용 */
}

.footer footer {
  padding: 0;
  height: auto;
}

/* 마크 제거 */
.fp-watermark a {
  display: none;
}

/* 팝업 */
#popup {
  position: fixed;
  left: 80%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  width: 380px;
  background: #fff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
  border-radius: 20px;
  padding: 20px;
  display: none;
  z-index: 9999;
  border: 2px solid rgba(255, 0, 0, 0.3);
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}

#popup h2 {
  text-align: center;
  margin-bottom: 24px;

}

#popup h3 {
  font-size: 20px;
  font-weight: 700;


}

#popup h2 img {
  display: inline-block;
  width: 50px;
  text-align: center;

}

#popup p {
  font-size: 14px;
  line-height: 22px;
  margin: 12px 0;

}

#popup a:hover {
  color: var(--primary_color);
}

#popup p strong {
  font-weight: 700;
}

#popup strong {
  font-weight: 700;
}

#popup button {
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
  background: none;
  border: none;
  color: #fff;
  line-height: 20px;
}

#popup button:hover {
  color: var(--primary_color);
}

#popup.active {
  display: block;
}

#popup h4 {
  font-weight: 700;
  margin-bottom: 12px;
}

#popup div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  line-height: 20px;
}

#popup div input {
  width: 17px;
  height: 17px;
}

#popup div label {
  margin-right: 170px;
  margin-left: 8px;
  margin-bottom: 3px;
}

/* 팝업 끝 */
/* 마우스 커서 */
.mouse_cursor {
  position: fixed;
  pointer-events: none;
  transition: transform 0.5s;
  width: 24px;
  height: 24px;
  background: url(../images/mousecursor/mousecursor.svg) 0 0 no-repeat;
  z-index: 99999;
}

.mouse_cursor:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  left: 6px;
  top: 3px;
  box-shadow:
    0 0 3px 0 rgba(255, 255, 255, 0.2),
    0 0 6px 2px rgba(255, 255, 255, 0.2),
    0 0 12px 4px rgba(255, 255, 255, 0.3),
    0 0 25px 8px rgba(255, 255, 255, 0.5),
    0 0 40px 15px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: box-shadow 0.3 ease;
}

.mouse_cursor.pulse:after {
  animation: boxShadowPulse 1s ease forwards;
}

@keyframes boxShadowPulse {
  0% {
    box-shadow:
      0 0 3px 0 rgba(255, 255, 255, 0.2),
      0 0 6px 2px rgba(255, 255, 255, 0.2),
      0 0 12px 4px rgba(255, 255, 255, 0.3),
      0 0 25px 8px rgba(255, 255, 255, 0.5),
      0 0 40px 15px rgba(255, 255, 255, 0.2);
  }

  50% {
    box-shadow:
      0 0 10px 5px rgba(255, 255, 255, 0.4),
      0 0 20px 10px rgba(255, 255, 255, 0.3),
      0 0 40px 20px rgba(255, 255, 255, 0.5),
      0 0 50px 25px rgba(255, 255, 255, 0.6),
      0 0 60px 30px rgba(255, 255, 255, 0.3);
  }

  100% {
    box-shadow:
      0 0 3px 0 rgba(255, 255, 255, 0.2),
      0 0 6px 2px rgba(255, 255, 255, 0.2),
      0 0 12px 4px rgba(255, 255, 255, 0.3),
      0 0 25px 8px rgba(255, 255, 255, 0.5),
      0 0 40px 15px rgba(255, 255, 255, 0.2);
  }
}

.mouse_cursor.active {
  background: none;
  box-shadow: none;
}

/* query */

/* 태블릿 이하 (1024px 이하) */
@media screen and (max-width: 1024px) {
  .container {
    width: 100%;
  }

  .cinemaspecial {
    width: 100%;
  }

  .cinemaspecial .item a,
  .cinema .item span {
    font-size: 48px;
    /* 좀 작게 */
  }

  .arrow_swiper {
    display: block;
  }
}

/* 태블릿 이하 (1200px 이하) */
@media screen and (max-width:1200px) {
  .appdown_img img {
    width: 310px;
    height: 374px;
  }

  .appdown {
    display: flex;
    justify-content: flex-start;
  }

  .appdown_img {
    padding-top: 200px;
  }

  .app {
    gap: 30px;
  }

  .movie_rank {
    width: 100%;
  }

  .movie_rank .text_box {
    width: 330px;
  }

  .rank-title .title {
    width: 120px;
  }

  .slide_content {
    left: 50%;
  }

  .empty_btn,
  .cta_btn {
    padding: 14px 40px;
  }

  .star-rating {
    left: 10%;
  }
}

/* 모바일 (768px 이하) */
@media screen and (max-width: 768px) {

  .footer {
    padding: 36px 40px;
  }

  .main_banner .content_box .text_box {
    width: 80%;
  }

  #slide {
    left: 70%;
  }

  .container {
    width: 100%;
  }

  .cinemaspecial {
    width: 100%;
  }

  .cinemaspecial .item a,
  .cinema .item span {
    font-size: 36px;
  }

  .cinema h5 {
    width: 100%;
    font-size: 28px;
    margin-bottom: 48px;
  }

  /* recommend */
  .recommend_content {
    flex-direction: column;
    padding: 30px 20px;
    height: 85vh;
    gap: 32px;
  }

  .recommend_content .content_box {
    order: 2;
    max-width: none;
    width: 100%;
  }

  .recommend_content .thumb_box {
    order: 1;
    max-width: none;
    width: 100%;
  }

  .app>div h6 {
    font-size: 12px;
  }

  .app>div h2 {
    font-size: 40px;
  }

  .app>div p {
    font-size: 20px;
  }

  .appdown a {
    padding: 16px 30px;
    height: 48px;
  }

  .appdown_img img {
    width: 260px;
    height: 314px;
  }

  .app {
    display: block;
  }

  .appdown_contents {
    padding: 0 8px;
  }

  #popup {
    left: 70%;
  }
}

/* 모바일 (570px 이하) */
@media screen and (max-width: 570px) {
  .location_search {}

  h2 {
    font-size: 24px;
  }

  p {
    font-size: 14px;
  }

  .location>div input {
    width: 335px;
    height: 47px;
  }

  .tag_box {
    width: 355px;
    margin-left: 85px;
  }

  .tag_box a {
    padding: 8px 18px;
  }

  .search_container .search_btn {
    left: 74%;
  }
}

/* 모바일 (500px 이하) */
@media screen and (max-width: 500px) {
  .movie_rank {
    padding: 0 10px 10px 20px;
  }

  .rank-title .title {
    width: 100%;
  }

  .slide_content {
    position: absolute;
    left: 0;
    bottom: 25px;
    width: 900px;
    z-index: 18;
  }

  .movie_rank .content_box {
    position: absolute;
    bottom: 40%;
  }

  .rank_contents {
    top: 10%;
  }

  .ranking_number {
    font-size: 68px;
  }

  .rank-title .title {
    font-size: 26px;
    width: 120px;
  }

  .img_box {
    width: 146px;
    height: 200px;
  }

  .movie_rank .slide_btn_box {
    display: inline-block;
    left: 24%;
    margin-bottom: 20px;
  }

  .view_slide {
    /* padding-bottom: 20px; */
  }

  .movie_rank .text_box {
    margin-bottom: 20px;

  }

  .appdown_img {
    padding-top: 200px;
  }

  .slide_container {
    width: 100%;
  }

  .container .app {}

  #popup {
    left: 60%;
  }
}

/* 아주 작은 화면 (480px 이하) */
@media screen and (max-width: 480px) {

  .main_banner .content_box .text_box {
    width: 80%;
  }
  .container {
    width: 100%;
  }

  .cinemaspecial .item a,
  .cinema .item span {
    font-size: 30px;
    /* 아주 작게 */
  }

  .cinema h5 {
    font-size: 20px;
    margin-bottom: 48px;
  }

  .plan_title h3 {
    font-size: 22px;
  }

  .plan_title a {
    font-size: 12px;
  }

  .movie_rank .slide_btn_box {
    display: inline-block;
    left: 21%;
    margin-bottom: 20px;
  }

  #popup {
    left: 50%;
  }
}