@charset "utf-8";




/* ====== 반응형 분기 ====== */
@media (max-width:1400px){
  /* 데스크톱 네비 숨기고 햄버거 보이기 */
  #header .nav_1{ display:none; }
  .hamburger{ display:block; }

  #header{
  
 display: block;
}



   .nav, 
  .dot-nav, 
  .side-dots {
    display: none !important;}

    #header  .logo{
      display: block ;
      width: 180px ;
      height: 7cqb ;
      background-image: url('../images/logo_w_1.png') ;
      background-size: contain ;
      background-repeat: no-repeat ;
      background-position: left center ;
      margin-left: 3%;
      margin-top: 1%;
      float: left;
  
}

.hamburger{
  margin-top: 2%;
  float: right;
  margin-right: 3%;
}


  /* a 태그가 0px이 되는 문제 방지 */
  

    /* 컨텐츠5 */

    #contents_5 .con_5 .cont_5_bott{
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

/* 공지사항 */
#contents_5 .con_5 .cont_5_bott ul.cont_5_left{
    width: 80%;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 바로가기 */

#contents_5 .con_5 .cont_5_bott ul.cont_5_right{
  width: 80%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 2%;
  padding-bottom: 3%;
}


}


/* 💻 1720~1280px */
@media (max-width: 1772px) {

}

@media (max-width: 1600px) {
 .about-box {margin-left: 7vw;   /* ✔ 화면 왼쪽에서 약간 띄우는 핵심 포인트 */
  
}
}

@media (max-width: 1580px) {

.hover_overlay h3{
  font-size: 1.7vw;
   left: 5%;
  
}

._title::after {
  
  width: 90%;
 
 
}

.hover_overlay span {
    left: 5%;
  font-size: 1.3vw;

}

  


}

@media (max-width: 1514px) {
 .about-box {margin-left: 3vw;   /* ✔ 화면 왼쪽에서 약간 띄우는 핵심 포인트 */
}
}

@media (max-width: 1420px) {
 .about-box {
   padding: 70px 50px;}

   .cont_5_total{
     display: flex;
    flex-direction: column; 
  }

.cont_5_loca{
  width: 50%;
  padding-left: 0%;
  text-align: center;
   display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.cont_5_loca .iframe{
 
}

.cont_5_loca > span{
  color: #fff;
  display: block;
  font-size: 18px;
  padding-top: 4%;
  
}

.cont_5_loca > span >p{
  color: #cccccc;
  display: block;
  font-size: 12px;
  padding-top: 1%;
}

.cont_5_right{
  padding-left: 0%;
  width: 50%;
  line-height: 1.0;
   display: flex;
    flex-direction: column;
    align-items: center;  /* 내부 요소를 중앙으로 정렬 */
}

#contents_5 .contents_5 .contents_5_title{
  
  width: 100%;
  

}

.cont_5_right{
  width: 100%;
  padding-top: 5%;
}
#contents_5 .contents_5 .contents_5_title .cont_5_title>h3{
  width: 100%;
  text-align: center;
   font-size: 60px;
  margin-bottom: 25px;
  font-family: "GOUDOS";
  color: #B9B9B9;
  font-weight: 100;
}
#contents_5 .contents_5 .contents_5_title .cont_5_sub{
  font-size: 25px;
  line-height: 1.8;
  font-weight: 900;
  text-align: center;
  color: #fff;
  width: 100%;
  display: block;
}

#contents_5 .contents_5 .cont_5_link{
  padding-top: 3%;
  width: 100%;
    padding-bottom: 5%;
    display: flex;
    align-items: center;
    justify-content: center;

  
}
}



@media (max-width: 1280px) {

   /* 섹션을 세로 배치로 변경 */
  #contents_1 {
    display: block;
    height: auto;
    padding-bottom: 80px;
  }

  .contents_1 {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  /* 이미지가 위쪽으로 이동 */
  .about-img {
    position: relative;
    width: 100%;
    height: 55vh;     /* JHE 로고 충분히 보이도록 */
    top: 0;
    right: 0;
    order: 1;         /* 가장 위에 배치 */
    margin-bottom: -80px;  /* 텍스트 박스와 살짝 겹치도록 */
  }

  .about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;  /* ⭐ JHE 로고가 보이도록 조정 */
  }

  /* 텍스트 박스 */
  .about-box {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 40px 40px;
    background: #fff;
  
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);

    order: 2;   /* 이미지 아래 */
    z-index: 5;
  }

  /* 텍스트 정렬도 중앙으로 맞추는 게 더 자연스러움 */
  .about-box .about-title,
  .about-box .headline,
  .about-box .desc {
    text-align: center;
  }
}

@media (max-width: 1000px){
  #contents_2 .contents_2 .con_2_box > ul {
    flex-wrap: wrap; /* 줄바꿈 허용 */
    padding: 3px 3px;
  }

  #contents_2 .contents_2 .con_2_box > ul > li {
    width: 50%;     /* 2개씩 */
    padding-left: 3px;  /* 좌우 여백 정리 */
    margin-bottom: 3px;
  }

  #contents_2 .contents_2 .con_2_box > ul > li> img {
    width: 100%;
    height: 200px;
  }

  .hover_overlay h3{
  font-size: 3.5vw;
  
}

.hover_overlay span {
    left: 5%;
  font-size: 2.3vw;

}

.partner-logos {
  display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 60px 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 0;
}

#contents_5{
  padding-top: 30px;
}

#footer .footer .footer_title{
  width: 100%;
text-align: center;
  flex-direction: column;
}

#footer .footer .footer_title .footer_title >h3{
  width: 100%;
  text-align: center;
}

#footer .footer .footer_desc{ 
  width: 100%;
 
}

.footer_copy>p{
  text-align: center;
  color: #7E7E7E;
  padding-top: 0.5%;
  font-size: 11px;
}

 


}

@media (max-width: 800px){
  .overlay-title {
  color: #fff;
  font-size: 2.8vw;
  font-weight: 700;
  margin: 0;
}


}

@media (max-width: 700px){


.overlay-year {
  color: #ddd;
  font-size: 1.8vw;
  margin-top: 6px;
}

.overlay-tags span {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 1);
  border-radius: 14px;
  font-size: 1.4vw;
  color: #000000;
  white-space: nowrap;
  transition: 0.25s;
}

#contents_5 .contents_5 .cont_5_link >a{
  width: 250px;
  height: 40px;
  background-color: #700000;
  color: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  border: solid 1px #B8B8B8;
}

.cont_5_total{
     display: flex;
    flex-direction: column; 
  align-items: center;
justify-content: center;}

.cont_5_loca{
  width: 100%;
  padding-left: 0%;
  text-align: center;
   display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.cont_5_loca iframe{
  width: 80%;
  height: auto;
 
}

.cont_5_loca > span{
  color: #fff;
  display: block;
  font-size: 3.5vw;
  padding-top: 4%;
  width: 100%;
  
}

.cont_5_loca > span >p{
  color: #cccccc;
  display: block;
  font-size: 2.8vw;
  padding-top: 1%;
}

.cont_5_right{
  padding-left: 0%;
  width: 100%;
  line-height: 1.0;
   display: flex;
    flex-direction: column;
    align-items: center;  /* 내부 요소를 중앙으로 정렬 */
}

#contents_5 .contents_5 .contents_5_title{
  
  width: 100%;
  

}

.cont_5_right{
  width: 100%;
  padding-top: 5%;
}
#contents_5 .contents_5 .contents_5_title .cont_5_title>h3{
  width: 100%;
  text-align: center;
   font-size: 7.5vw;
  margin-bottom: 25px;
  font-family: "GOUDOS";
  color: #B9B9B9;
  font-weight: 100;
}
#contents_5 .contents_5 .contents_5_title .cont_5_sub{
  font-size: 2.5vw;
  line-height: 1.8;
  font-weight: 900;
  text-align: center;
  color: #fff;
  width: 100%;
  display: block;
}


}

@media (max-width: 600px) {
    .about-img {
    height: 450px; /* 모바일용 더 낮은 높이 */
  }

  .about-img img {
    object-position: center top; /* JHE 로고가 잘 보이도록 더 위로 */
  }
   /* ABOUT 타이틀 */
  .about-box .about-title {
    font-size: 32px;
    margin-bottom: 15px;
  }

  #contents_2 .contents_2 .contents_2_title .cont_2_title>h3,
  #contents_3 .contents_3 .contents_3_title .cont_3_title>h3,
  #contents_4 .contents_4 .contents_4_title .cont_4_title>h3,
  #contents_5 .contents_5 .contents_5_title .cont_5_title>h3{
    font-size: 7.5vw;

  }
  

  /* 메인 헤드라인 */
  .about-box .headline {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 18px;
  }

  /* 설명 텍스트 */
  .about-box .desc, #contents_2 .contents_2 .contents_2_title .cont_2_sub,
  #contents_3 .contents_3 .contents_3_title .cont_3_sub,
  #contents_4 .contents_4 .contents_4_title .cont_4_sub,
  #contents_5 .contents_5 .contents_5_title .cont_5_sub{
    font-size: 14px;
    line-height: 1.6;
  }

  /* 박스 자체 여백 줄이기 */
  .about-box {
    padding: 40px 25px;
    width: 90%;
    margin: 0 auto; /* 모바일에서는 가운데 정렬 */
  }

  .tab-btn {
  padding: 3px 15px;
  border-radius: 20px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
  font-size: 13px;
}

.marquee-track span {
  font-family: 'GOUDOS', serif;
  font-size: 10vw;
  color: #fff;
  padding: 0 30px;
}

/* .partner-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 10px 10px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8% 0;
} */

#contents_4 .contents_4{
 overflow: hidden;

}

.partner-logos{
  width: 100%;
  max-width: 100%;

  gap: 8px;
  padding: 40px 15px;
    box-sizing: border-box;
  
}

.logo-img-box {
  width:100%;
  height: 100px; /* 모든 로고 이미지 프레임 높이 동일 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2% 1%;
}

.logo-item img {
 max-width: 100%;
  height: auto;
  display: block;
}

.logo-item p {
    margin-top: 0.5vw;
    font-size: 15px;
    color: #fff;
    white-space: nowrap;

      word-break: keep-all;

}




}

@media (max-width: 430px) {
  /* ABOUT 타이틀 */
  .about-box .about-title {
    font-size: 30px;
    margin-bottom: 15px;
  }

  /* 메인 헤드라인 */
  .about-box .headline {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 18px;
  }

  /* 설명 텍스트 */
  .about-box .desc {
    font-size: 13px;
    line-height: 1.6;
  }

  .tab-btn {
  padding: 3px 15px;
  border-radius: 20px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
  font-size: 10px;
}



.load-more {
  display: block;
  margin: 40px auto 60px;
  padding: 8px 20px;
  background: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}






}
 

/* 모바일( */


@media (max-width: 767px) {
  /* 모바일 스타일 */

      .nav_1 {
       display: none !important;
    }

  .cursor-lead,
    .cursor-trail,
    .cursor-project {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

}