/* 요소별로 묶어 기술하면, 특정 요소(.header)를 수정할 때 해당 부분만 보면 되므로 수정과 유지보수가 훨씬 빠르고 정확합니다.*/
/* 모바일 우선(Mobile First) 방식으로 반응형 CSS를 작성할 때 가장 권장되는 배치 순서는 작은 화면(기본 스타일) -> 큰 화면(미디어 쿼리) 순서입니다.
max-width를 사용하여 스타일을 점진적으로 확장하는 방식이 코드가 간결하고 유지보수에 유리합니다.  */

/* body {margin:0;padding:0;font-size:.85rem !important;font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif !important; } */
/* body {margin:0;padding:0;font-size:.85rem !important;font-family: 'Noto Sans KR', sans-serif !important; } */
/* .h4, h4 {font-size: 1rem !important;} */

/* 1. 모바일 기본 스타일 (모든 기기 적용) */
@media (max-width: 768px) {
body {
  margin:0;padding:0;
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 14px;
  background-color: #f0f0f0;
}
}
/* 2. 태블릿 화면 (768px 이상 1024 이하) */
@media screen and (min-width: 768px) and (max-width: 1024px){
  body {
    margin:0;padding:0;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 16px;
  }
}

/* 3. 데스크톱 화면 (1024px 이상) */
@media (min-width: 1024px) {
  body {
    margin:0;padding:0;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 18px;
    background-color: #ffffff;
  }
}

/* .h4, h4 {font-size: 1rem !important; font-weight: 400; line-height: 1.6; color: #333;}  */
/* 모바일 */ 
@media (max-width: 768px){
  .h4, h4 {font-size: 1rem !important; font-weight: 400; line-height: 1.6; color: #333;} 
}
/* 타블릿 */ 
@media screen and (min-width: 768px) and (max-width: 1024px){
  .h4, h4 {font-size: 1rem !important; font-weight: 400; line-height: 1.6; color: #333;} 
}
/* PC */ 
@media (min-width: 1024px){
  .h4, h4 {font-size: 1rem !important; font-weight: 400; line-height: 1.6; color: #333;} 
}

/* .h3, h3 {font-size: 1rem !important; font-weight: 400; line-height: 1.6; color: #333;}  */
/* 모바일 */ 
@media (max-width: 768px){
  .h3, h3 {/* font-size: 1rem !important;*/ font-size: 11px !important; letter-spacing: -1.48px !important; font-weight: 300; line-height: 1.2; color: #fff; border:0px solid red;} 
}
/* 타블릿 */ 
@media screen and (min-width: 768px) and (max-width: 1024px){
  .h3, h3 {font-size: 45px !important; font-weight: 400; line-height: 1.6; color: #fff;border:1px solid red;} 
}
/* PC font-weight: bold !important;  */ 
@media (min-width: 1024px){
  .h3, h3 {font-size: 59px !important; font-weight: bold !important; line-height: 1.6; color: #fff; text-align: left !important; /* 영역 내에서 글자를 왼쪽으로 정렬 */ border: 0px solid red;} 
}


/* 모바일 */ 
@media (max-width: 768px){
  .header {
  } 
}
/* 타블릿 */ 
@media screen and (min-width: 768px) and (max-width: 1024px){
  .header {
  } 
}
/* PC */ 
@media (min-width: 1024px){
  .header {
  } 
}

/* 모바일 */
@media (max-width: 768px){
#maintitl01 {
  }
}

/* 타블릿 */
@media screen and (min-width: 768px) and (max-width: 1024px){
 #maintitl01 {
   }
}

/* PC */
@media (min-width: 1024px){
#maintitl01 {
  }
}

@media (max-width: 768px) {
    .main-slogan {
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 10px !important; /* 모바일에서 글자 크기 축소 */
        line-height: 1.1 !important;
        letter-spacing: -2px !important;
        margin: 40px 0 0 0 !important; /* 상단 여백 축소 */
        text-align: left !important; /* 모바일은 중앙 정렬이 더 안정적임 */
        width: 100% !important;
        color: #ffffff !important; 
        border: 1px solid red;
        
    }
}

/* 메인 슬로건 커스텀 스타일 타블렛 */
@media screen and (min-width: 768px) and (max-width: 1024px){
.main-slogan {
/* 기존 폰트 속성 유지 */
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 45px !important;
    font-weight: bold !important;
    line-height: 1.1 !important;
    letter-spacing: -1.48px !important;
    color: #ffffff !important; 

    /* 위치 및 정렬 수정 핵심 */
    display: block !important;
    min-width: 1024px;         /* 텍스트가 담길 전체 영역 너비 */
    margin: 0 auto !important; /* 영역 자체를 화면 중앙에 배치 */
    text-align: left !important; /* 영역 내에서 글자를 왼쪽으로 정렬 */
    
    /* 화면 중앙 기준 왼쪽 느낌을 주기 위한 여백 */
    padding-left: 100px !important; 
    padding-top: 180px !important;
    
    /* 혹시 모를 내부 요소 영향 차단 */
    width: 100% !important;
    border: 1px solid red;
   }
}

/* 메인 슬로건 커스텀 스타일 */
@media (min-width: 1024px) {
.main-slogan {
/* 기존 폰트 속성 유지 */
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 59px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    letter-spacing: -1.48px !important;
    color: #ffffff !important; 

    /* 위치 및 정렬 수정 핵심 */
    display: block !important;
    min-width: 1024px;         /* 텍스트가 담길 전체 영역 너비 */
    margin: 0 auto !important; /* 영역 자체를 화면 중앙에 배치 */
    text-align: left !important; /* 영역 내에서 글자를 왼쪽으로 정렬 */
    
    /* 화면 중앙 기준 왼쪽 느낌을 주기 위한 여백 */
    padding-left: 100px !important; 
    padding-top: 180px !important;
    
    /* 혹시 모를 내부 요소 영향 차단 */
    width: 100% !important;
   }
}


/* 모바일 대응 (반응형) */
@media (max-width: 768px) {
   .sub-title-custom {
       font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 32px !important;
        padding-top: 80px !important; /* 모바일 높이에 맞춰 상단 여백 축소 */
        padding-left: 0 !important;
        text-align: center !important;
    }
}

/* 서브 타이틀 커스텀 클래스 (타블렛) */
@media screen and (min-width: 768px) and (max-width: 1024px){
  .sub-title-custom {
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 45px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    letter-spacing: -1.48px !important;
    color: #ffffff !important;
    
    display: block !important;
    text-align: left !important;
    max-width: 1024px;
    margin: 0 auto !important;
    padding-top: 180px !important; /* 이미지 중앙 부근에 위치하도록 상단 여백 조정 */
    padding-left: 100px !important;
}
}    

/* 서브 타이틀 커스텀 클래스 (PC) */
@media (min-width: 1024px){
  .sub-title-custom {
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 59px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    letter-spacing: -1.48px !important;
    color: #ffffff !important;
    
    display: block !important;
    text-align: left !important;
    min-width: 1024px;
    margin: 0 auto !important;
    padding-top: 180px !important; /* 이미지 중앙 부근에 위치하도록 상단 여백 조정 */
    padding-left: 100px !important;
   }
}    

/* parallax-window-sub .lead (모바일) */
@media (max-width: 768px) {
    .parallax-window-sub .lead {
        padding-left: 0 !important;
        text-align: center !important;
        margin-top: 10px !important;
        font-size: 1rem;
    }
}
/* parallax-window-sub .lead (타블렛) */
@media screen and (min-width: 768px) and (max-width: 1024px){
    .parallax-window-sub .lead {
        max-width: 1024px;
        padding-left: 50px !important;
        text-align: center !important;
        margin-top: 10px !important;
        font-size: 1rem;
    }
}

/* parallax-window-sub .lead ( PC ) */
@media (min-width: 1024px) {
    .parallax-window-sub .lead {
    min-width: 1024px;
    margin: 15px auto 0 !important;
    padding-left: 100px !important;
    text-align: left !important;
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.5 !important;
    }
}

/* 모바일 */
@media (max-width: 768px){
.carousel-caption {
       left: 5% !important;    /* Bootstrap 기본 left:15% 덮어쓰기 */
        right: 5% !important;   /* Bootstrap 기본 right:15% 덮어쓰기 */
        text-align: left !important;
        padding-left: 0px !important;
   border: 0px solid red; 
    }
}
/* 타블릿 */
@media screen and (min-width: 768px) and (max-width: 1024px){
 .carousel-caption {
        left: 5% !important;
        right: 5% !important;
        text-align: left !important;
   border: 0px solid red; 
   }
}
/* PC  */
@media (min-width: 1024px){
.carousel-caption {
      /* 수정 전 */
	/*        
	left: 8% !important;   
        right: 8% !important;
        text-align: left !important;
        border: 1px solid red; 
        */
      /* 수정 후 */
     position: absolute !important;
    top: 40% !important;      ← 상단 기준 배치
    bottom: auto !important;  ← 기존 bottom: 3rem 무력화
    left: 8% !important;
    right: 8% !important;
    border: 1px solid red;     
  }
}


/* 모바일 */
@media (max-width: 768px){
.carousel-caption2 {
        /* 모바일에서 글자 크기 축소 */
        /* font-weight: bold !important;
        line-height: 1.1 !important; */

        font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
    color: #ffffff !important; 
    
        letter-spacing: -2px !important;
        /* margin: 50px 0 0 0 !important; */ /* 상단 여백 축소 */ 
        text-align: left !important; /* 모바일은 중앙 정렬이 더 안정적임 */
        width: 100% !important;
        color: #ffffff !important; 
        border: 0px solid  white !important;
    /* 화면 중앙 기준 왼쪽 느낌을 주기 위한 여백 */
    /*margin-left: 5px !important; */
    /* margin: 90px 10 0 10 !important;
    padding-left: 10px !important; 
    padding-top: 50px !important; */
    }
}
/* 타블릿 */
@media screen and (min-width: 768px) and (max-width: 1024px){
 .carousel-caption2 {
       font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 10px !important; /* 모바일에서 글자 크기 축소 */
        line-height: 1.1 !important;
        letter-spacing: -2px !important;
        margin: 40px 0 0 0 !important; /* 상단 여백 축소 */
        text-align: left !important; /* 모바일은 중앙 정렬이 더 안정적임 */
        width: 100% !important;
        color: #ffffff !important; 
        border: 0px solid white;
   }
}
/* PC  */
@media (min-width: 1024px){

#myCarousel,
    #myCarousel .carousel-item {
        /* 화면 높이의 90%를 차지하게 하거나, 최대 929px로 제한 */
        height: 90vh !important; 
        max-height: 929px !important;
    }
    
.carousel-caption2 {
    /* 기존 폰트 속성 유지 */
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 59px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    letter-spacing: -1.48px !important;
    color: #ffffff !important; 

    /* 위치 및 정렬 수정 핵심 */
    display: block !important;
    min-width: 1024px;         /* 텍스트가 담길 전체 영역 너비 */
    
    text-align: left !important; /* 영역 내에서 글자를 왼쪽으로 정렬 */
    
    /* 화면 중앙 기준 왼쪽 느낌을 주기 위한 여백 */
    padding-left: 0px !important; 
    /* padding-top: 150px !important; */
    padding-top: 0px !important;
    
    /* 혹시 모를 내부 요소 영향 차단 */
    width: 100% !important;
    border: 0px solid red;
  }
}


/* ============================================
   Ken Burns Effect v2 - 개선판
   수정사항:
   - 시작 scale을 1.08로 올려 흰 여백 완전 차단
   - zoom-out 시작 슬라이드도 1.08→1.15로 항상 여백 밖에서 시작
   - ease-in-out으로 변경해 전환 시 끊김 완화
   - 모바일 효과 강도 강화 (1.05→1.10)
   ============================================ */

/* 1. 키프레임 - 모든 시작/끝 scale을 1.08 이상으로 유지 → 흰 여백 원천 차단 */
@keyframes kenburns-1 {
    /* zoom-in: 좌상→우하 이동하며 확대 */
    0%   { transform: scale(1.08) translate(0%,   0%);   }
    100% { transform: scale(1.15) translate(-1.5%, -1.5%); }
}
@keyframes kenburns-2 {
    /* zoom-out: 확대 상태에서 서서히 축소 - 끝도 1.08로 유지 */
    0%   { transform: scale(1.15) translate(-1%,  0%);   }
    100% { transform: scale(1.08) translate( 1%, -1%);   }
}
@keyframes kenburns-3 {
    /* zoom-in: 우하→좌상 */
    0%   { transform: scale(1.08) translate( 1%,  -1%);  }
    100% { transform: scale(1.15) translate(-1.5%, 1.5%); }
}
@keyframes kenburns-4 {
    /* zoom-out: 좌→우 이동하며 축소 */
    0%   { transform: scale(1.15) translate( 0%,  -1%);  }
    100% { transform: scale(1.08) translate(-1%,   1%);  }
}
@keyframes kenburns-5 {
    /* zoom-in: 우상→좌하 */
    0%   { transform: scale(1.08) translate(-1%,   1%);  }
    100% { transform: scale(1.15) translate( 1.5%, -1.5%); }
}
@keyframes kenburns-6 {
    /* zoom-out: 우→좌 */
    0%   { transform: scale(1.15) translate( 1%,   0%);  }
    100% { transform: scale(1.08) translate(-1%,  -1%);  }
}

/* 2. carousel-item 공통 설정 */
#myCarousel .carousel-item {
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    will-change: transform; /* GPU 가속 */
}

/* 3. 각 슬라이드 애니메이션 적용
   - ease-in-out: 시작·끝을 부드럽게 처리해 전환 시 끊김 최소화
   - 7s: data-interval 6000ms보다 1초 여유있게 */
#myCarousel .carousel-item:nth-child(1).active {
    animation: kenburns-1 7s ease-in-out forwards;
}
#myCarousel .carousel-item:nth-child(2).active {
    animation: kenburns-2 7s ease-in-out forwards;
}
#myCarousel .carousel-item:nth-child(3).active {
    animation: kenburns-3 7s ease-in-out forwards;
}
#myCarousel .carousel-item:nth-child(4).active {
    animation: kenburns-4 7s ease-in-out forwards;
}
#myCarousel .carousel-item:nth-child(5).active {
    animation: kenburns-5 7s ease-in-out forwards;
}
#myCarousel .carousel-item:nth-child(6).active {
    animation: kenburns-6 7s ease-in-out forwards;
}

/* 4. 모바일: scale 범위를 1.05~1.10으로 강화 (기존 1.00~1.04에서 상향) */
@media (max-width: 768px) {
    @keyframes kenburns-1 {
        0%   { transform: scale(1.05) translate(0%,    0%);    }
        100% { transform: scale(1.10) translate(-1.5%, -1.5%); }
    }
    @keyframes kenburns-2 {
        0%   { transform: scale(1.10) translate(-1%,  0%);  }
        100% { transform: scale(1.05) translate( 1%, -1%);  }
    }
    @keyframes kenburns-3 {
        0%   { transform: scale(1.05) translate( 1%,  -1%);   }
        100% { transform: scale(1.10) translate(-1.5%, 1.5%); }
    }
    @keyframes kenburns-4 {
        0%   { transform: scale(1.10) translate( 0%, -1%); }
        100% { transform: scale(1.05) translate(-1%,  1%); }
    }
    @keyframes kenburns-5 {
        0%   { transform: scale(1.05) translate(-1%,   1%);    }
        100% { transform: scale(1.10) translate( 1.5%, -1.5%); }
    }
    @keyframes kenburns-6 {
        0%   { transform: scale(1.10) translate( 1%,  0%);  }
        100% { transform: scale(1.05) translate(-1%, -1%);  }
    }
}