@keyframes flip {
  from {
    transform: rotateX(180deg);
  }
  to{
    transform: rotateX(0);
  }
}

@media (max-width:350px) {
  .sup_img_cntr ,.sup_img_cntr img{
    display: none !important;
  }
}

@media (max-width: 768px) {
  .date_criteria{
    margin-top: 12px !important;
    width: 90% !important;
  }
  section:nth-child(3){
    margin-top: unset !important;
  }
  .swiper2 .swiper-wrapper .swiper-slide{
    align-items: unset !important;
  }
  .wrapper{
    margin-top: 60px !important;
  }
  .swiper{
    overflow: unset !important;
  }
  .support
  , .swiper-button-prev
  , .swiper-button-next
  , .applynow_info
  {
    display: none !important;
  }
  .swiper .swiper-wrapper{
    width: 93vw !important;
  }
  .wrapper, section, .section1_t_container, .grid ,.swiper{
    width: 100% !important;
  }
  .section1_t_container{
    margin-bottom: 24px !important;
  }
  section{
    padding : 60px 0px 60px 0 !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .swiper2{
    height: 900px !important;
  }
  section:nth-child(1){
    display: flex !important;
    justify-content: unset !important;
    height: 600px !important;
    padding : unset !important;
    margin-top: 20px;
  }
  /* 메인페이지 마지막 요소 갭 */
  section:nth-child(4){
    padding: unset !important;
  }
  section:last-child{
    padding : 60px 0px 0px 0px unset !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .swiper2 .swiper-wrapper{
    height: auto !important;
  }
  .grid{
    grid-template-columns: repeat(3, calc(109/375*100vw)) !important; /* 10열 */
    grid-template-rows: repeat(10, calc(40/375*100vw))    !important;   /* 3행 */
    gap: 4px !important;
    /* grid-gap:unset !important; */
    /* column-gap: 4px !important; */
    /* row-gap: 4px !important; */
    place-items: center !important;
    height: auto !important;
    justify-content: center !important;
    align-items: center !important ;
  }
  .tile{
    aspect-ratio: 109/40 !important;
    width: calc(109/375*100vw) !important;
    height: auto !important;
    /* width:  109px !important;
    height: 40px !important; */
    box-shadow: unset !important;
  }
  .tile img{
    max-width: 58.71% !important;
    height: auto !important;
  }

  .supportmobile * {
    color: white !important;
  }
  .supportmobile{
    position : relative !important;
    border-radius: 12px !important;
    display: flex !important;
    width: 91.6vw !important;
    background: linear-gradient(180deg, #D80E19 0%, #B5161E 100%) !important;
    padding: 20px !important; 
  }
  .supportmobile:nth-child(2){background: linear-gradient(180deg, #2C456B 0%, #22344E 100%) !important;}
  .supportmobile:nth-child(3){background:linear-gradient(180deg, #4D5053 0%, #363636 100%) !important;}
.support_desc
  {
    /* width: 185px !important; */
  }
  .sup_img_cntr{
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  .sup_img_cntr img{
    right: 0px;
    width: 100px;
    /* calc(108 / 375 * 100vw) !important; */
    max-width: 144px !important;
  }
  .supportmobile_container{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .grid_achieve{
    display: flex !important;
    flex-direction: column !important;
  }
  .achieve{
    width: 90vw !important;
    height: calc(120 / 375 * 100vw) !important;
  }
  .achieve .headlineS{

  }
  .achcontents{
    padding :20px !important;
  }
  .grid_achieve *{
    border-radius: 12px !important;
  }
  .swiper .swiper-wrapper .swiper-slide img
  ,.swiper .swiper-wrapper .swiper-slide

  {
    width: calc(226 / 375 * 100vw) !important;
    height: calc(302 / 375 * 100vw) !important;
  }
  .applynow{
    width: 90vw !important;
    height: calc(56/375 * 100vw) !important;
    padding : 0px 16px 0px 24px !important;
  }
  .applytext *:first-child{
    width:  calc(103 / 375 * 100vw) !important;
    /* height: calc(28 / 375 * 100vw) !important; */
  }
  .applytext *:nth-child(2){
    display: none !important;
  }
  .applynow img{
    width: 48px;
    height: 48px;
  }
  .applynow > div:first-child{
    padding: unset !important;
  }
  .apply_desc_m{
    /* font-size: 14px !important;
    line-height: 24px !important; */
    text-align: center;
    /* width: calc(328 / 375 * 100vw);  */
    width: 90vw !important;
  }
  .swiper2 .swiper-wrapper .swiper-slide .grid{
    width: 100vw !important;
  }
  .second_section{
    margin-bottom: 30px !important;
  }
}
@media (min-width:440px) and (max-width:768px) {
  .swiper2 .swiper-wrapper .swiper-slide .grid 
  ,.headerContainer
  {
    width: 100% !important;
  }
  .swiper2{
    height: unset !important;
    margin-bottom: 60px;
  }
  section:nth-child(1){
    height: unset !important;
  }
  .grid{
    grid-template-columns: repeat(6, 95px) !important; /* 10열 */
    grid-template-rows: repeat(5, auto)    !important;   /* 3행 */
    gap: 8px !important;
    place-items: center !important;
    height: auto !important;
    justify-content: center !important;
    align-items: center !important ;
  }
  .second_section{
    margin-bottom: unset !important;
  }
  .tile{
    aspect-ratio: 180/60 !important;
    width: 100px !important;
  }
}

/* 하단 마지막문구 갤럭시 폴드일때 폰트사이즈 적용안되서 추가 */
@media screen and (max-width: 345px) {
  .apply_desc_m{
    
    font-size: 12px !important;
    line-height: 24px !important;
  }
}

@media (max-width:1200px) {
  .support .ele{
    aspect-ratio: 384/532 !important;
  }
  .headerContainer nav{
    padding-left : unset !important;
  }
}
.support .ele{
  aspect-ratio: 384/532 !important;
}
body[data-path="/1QLab/index.html"] #titleContainer {
  display: none !important;
}
.wrapper{
  position: relative !important;
}

section:nth-child(3){
  margin-top: 80px;
}
section:nth-child(4){
  padding : 100px 0px;
}
@media (min-width: 768px) {
  .apply_desc_m
  ,.supportmobile_container
  {
    display: none; /* 요소를 보이게 설정 */
  }
}
@media (min-width:768px) and (max-width:1200px) {
  .date_criteria
  ,.swiper .swiper-wrapper
  ,.support
  ,.applynow
  ,.applynow_info
  ,.swiper2 .swiper-wrapper .swiper-slide .grid
  {
    width:100% !important;
  }
}
.date_criteria{
  margin-top: 24px;
  width: 1200px;
  display: flex;
  justify-content: flex-end;
}
    .supportmobile{
      height: 160px;
    }

    .swiper .swiper-wrapper{
      width: 1200px;
    }
    .wrapper{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* color: black; */
    }
    section{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* color: black; */
      width: 100%;
      height: 856px;
    }
    section:nth-child(1){
      height: 800px;
      justify-content: baseline;
    }
  .grid {
      display: grid; /* 그리드 레이아웃 활성화 */
      grid-template-columns: repeat(6, 180px); /* 한 줄에 5개의 타일, 각 타일의 너비는 180px */
      grid-gap: 24px; /* 타일 간 간격 24px */
    }
  .tile {
      width: 180px; /* 타일 너비 */
      height: 60px; /* 타일 높이 */
      display: flex; /* 내용물 중앙 정렬을 위한 플렉스 박스 */
      justify-content: center; /* 수평 중앙 정렬 */
      align-items: center; /* 수직 중앙 정렬 */
      font-family: Arial, sans-serif; /* 텍스트 폰트 */
      font-size: 12px; /* 텍스트 크기 */
      font-weight: 400;
  }

  .tile img {
      border-radius: 8px; /* 타일의 둥근 모서리에 맞춤 */
      max-width: 102px;
      height:48px;
      animation: flip 1s forwards;
  }
  .support{
    width: 1200px;
    display: flex;
    align-items: center;
    gap:24px;
  }
  .support .ele{
    width: 384px;
    height: 532px;
    border-radius: 8px;
    border-radius: 12px;
    box-shadow: 0px 0px 20px 0px rgba(177, 201, 201, 0.35);
    padding : 27px 52px 40px 52px;
  }
  .support .ele:first-child{
    background: linear-gradient(180deg, #D80E19 0%, #B5161E 100%);
    /* shadow */
  }
  .support .ele:nth-child(2){
    border-radius: 12px;
    background: linear-gradient(180deg, #2C466A 0%, #233350 100%);
    /* shadow */
    box-shadow: 0px 0px 20px 0px rgba(177, 201, 201, 0.35);
  }
  .support .ele:nth-child(3){
    border-radius: 12px;
    background: linear-gradient(180deg, #4D5053 0%, #363636 100%);
    /* shadow */
    box-shadow: 0px 0px 20px 0px rgba(177, 201, 201, 0.35);
  }
  .ele{
    display: flex;
    flex-direction: column;
  }
  .program_title{
    margin-top: 30px;
    color: white;
    margin-bottom: 20px;
  }
  .program_desc{
    color: white;
  }
  .achieve1, .achieve2, .achieve3, .achieve4{
    width: 588px;
    height: 320px;
    flex-shrink: 0;
  }
  .achieve1{ background-size: cover;background-repeat:no-repeat; background-image:url('/1QLab/static/images/achieve1.png');}
  .achieve2{ background-size: cover;background-repeat:no-repeat; background-image:url('/1QLab/static/images/achieve2.png');}
  .achieve3{ background-size: cover;background-repeat:no-repeat; background-image:url('/1QLab/static/images/achieve3.png');}
  .achieve4{ background-size: cover;background-repeat:no-repeat; background-image:url('/1QLab/static/images/achieve4.png');}
  .grid_achieve{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
  }
  .grid_achieve *{
    border-radius: 8px;
  }
  .achieve{
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 4px;
  }
  .achieve div {
    /* display: block; */
    text-align: end;
    color: var(--gray-white);
  }
  .numbers{
    color: var(--gray-white, #FFF);
    /* shadow */
    text-shadow: 0px 0px 20px rgba(177, 201, 201, 0.35);
    font-family: "Hana2.0 B";
    font-size: 52px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px; /* 115.385% */
  }
  .achcontents{
    font-family: 'Hana2-Regular';
    display: flex;flex-direction: column; gap: 4px; padding:36px;
  }
  section:last-child{
    margin-top: 40px;
    height: unset !important;
  }
  .applynow{
    width: 1200px;
    height: 180px;
    border-radius: 12px;
    background: var(--primary-500, #009591);
    /* shadow */
    box-shadow: 0px 0px 20px 0px rgba(177, 201, 201, 0.35);
    padding-right : 40px;
  }
  .applynow{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: black;
    text-decoration: none;
  }
  .applynow > div:first-child{
    padding: 0px 0px 0px 60px;
  }
  .applynow > div:nth-child(2){
    padding: 0px 60px 0px 0px;
  }
  .applynow *{
    color: #fff;
  }
  .applynow_info{
    width: 1200px;
    height: 180px;
    padding: 12px 32px 32px 32px;
    display: flex;
    justify-content: end;
    background-color: white;
  }
  .info{
    display: flex;
    gap: 12px;
    align-items: flex-end;
  }
  .info:nth-child(2){
    margin-left: 40px;
  }
  .batch{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
  .section_title{
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .swiper_title{
    margin-top: 16px;
  }
  .swiper {
    overflow: unset !important;
  }

  .swiper2 .swiper-wrapper{
    width: 100vw !important;
    height: unset;
  }
  .swiper2 .swiper-wrapper .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw !important;
  }
  .swiper2 .swiper-wrapper .swiper-slide .grid{
    width: 1200px;
  }
  .second_section{
    height: unset !important;
    margin-top: 120px;
    margin-bottom:120px;
    justify-content: unset !important;
  }
  
  .tile {
    border: 1px solid transparent; /* 기본 테두리 */
    border-image: repeating-linear-gradient(
      to right,
      #edf0f3 0px, #edf0f3 4px,  /* 점선 길이 */
      transparent 4px, transparent 8px /* 간격 */
    ) 1;
  }