/*
=============================================================
  custom_style.css
  정리 기준: 모바일 우선(Mobile First)
  구조: 공통 스타일 → 모바일 → 태블릿 → PC
  수정일: 2026-05-09
=============================================================
*/

/* ============================================================
   1. 공통 스타일 (모든 기기 공통 적용)
   ============================================================ */

/* hd_wrapper 높이 제거 */
#hd_wrapper { height: 0 !important; margin: 0 !important; padding: 0 !important; }

/* 슬라이드 위 간격 완전 제거 */
header { display: block; margin: 0 !important; padding: 0 !important; border: 0 !important; }
header > * { margin-top: 0 !important; }
#myCarousel { margin: 0 !important; }
.carousel.mb-0 { margin-bottom: 0 !important; }

/* carousel-caption 공통 */
.carousel-caption { text-align: left !important; border: 0px solid white;}
.carousel-caption2 {
    font-family: 'Noto Sans KR', sans-serif !important;
    font-weight: bold !important;
    color: #fff !important;
    line-height: 1.2;
}
.carousel-caption3 { color: #ef8840 !important; }

/* 메인 슬라이드 공통 캡션 위치 */
.custom-caption {
    text-align: left !important;
    left: 13% !important;
    bottom: 20%;    
}

/* carousel Ken Burns 키프레임 */
@keyframes kenburns-1 {
    0%   { transform: scale(1.08) translate(0%,    0%);     }
    100% { transform: scale(1.15) translate(-1.5%, -1.5%);  }
}
@keyframes kenburns-2 {
    0%   { transform: scale(1.15) translate(-1%,  0%);   }
    100% { transform: scale(1.08) translate( 1%, -1%);   }
}
@keyframes kenburns-3 {
    0%   { transform: scale(1.08) translate( 1%,  -1%);    }
    100% { transform: scale(1.15) translate(-1.5%, 1.5%);  }
}
@keyframes kenburns-4 {
    0%   { transform: scale(1.15) translate( 0%,  -1%);  }
    100% { transform: scale(1.08) translate(-1%,   1%);  }
}
@keyframes kenburns-5 {
    0%   { transform: scale(1.08) translate(-1%,   1%);     }
    100% { transform: scale(1.15) translate( 1.5%, -1.5%);  }
}
@keyframes kenburns-6 {
    0%   { transform: scale(1.15) translate( 1%,   0%);  }
    100% { transform: scale(1.08) translate(-1%,  -1%);  }
}
@keyframes kenburns-7 {
    0%   { transform: scale(1.08) translate( -1%,   1%);  }
    100% { transform: scale(1.15) translate(1.5%,  -1.5%);  }
}

/* carousel-item 공통 */
#myCarousel .carousel-item {
    overflow: hidden;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    will-change: transform;
}
#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; }
#myCarousel .carousel-item:nth-child(7).active { animation: kenburns-7 7s ease-in-out forwards; }

/* 서브페이지 패럴랙스 배너 공통 */
.parallax-window-sub {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.parallax-window-sub .sub-title-custom {
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin: 0;
    line-height: normal;
}
.parallax-window-sub .lead_sub {
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin: 0;
}

/* 버튼 공통 */
.btn-info1, .btn-info2 {
    line-height: 15px; /*35px; */
    height: 25px; /*35px; */
    margin: 0px !important;  
    padding: 0px !important;
    text-align: center;
    font-weight: bold;
    border: 0;
    
    font-family: 'Noto Sans KR';
    font-size: 15px !important;
    background-color: #fbac02;
    color: white;
    /* border: 0; */
    /* padding: 5px 5px !important; */       /* 고유한 크기 */
    font-weight: bold;         /* 폰트 굵기 */
}

/* QuickLink 공통 */
.quick-link-item {
    border: 1px solid #ffffff;
    border-radius: 30px;
    padding: 10px 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.quick-link-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    transform: translateY(-2px);
}
.quick-link-item a { text-decoration: none; display: block; }
.text-white { font-family: NotoSansKR; font-size: 1.1em; }


/* banner-btn 공통 */
.slider-btn {
	font-family: 'Noto Sans KR';
    float: right;
    border: 1px solid #252525;
    display: inline-block;
    color: #fff;
    background: #252525;
    border-radius: 5px;
}

/* banner-btn 공통 */
.banner-btn {
	font-family: 'Noto Sans KR';
    float: right;
    border: 1px solid #252525;
    display: inline-block;
    color: #fff;
    background: #252525;
    border-radius: 5px;
}

/* responsive-box 공통 */
.responsive-box { width: 100%; padding: 0; margin: 0; overflow: hidden; }
.responsive-box img { width: 100%; height: auto; display: block; }

/* sub-heading 공통 */
.sub-heading {
    font-family: 'Noto Sans KR';
    text-align: center;
    line-height: 2.9;
    font-size: 40px !important;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px !important;
}
.sub-heading-white {
    text-align: center;
    line-height: 2.9;
    font-family: 'Noto Sans KR';
    font-size: 40px !important;
    font-weight: 700;
    color: #fff;
    margin-bottom: 40px !important;
}

/* info-item (dropdown 연락처) */
.info-item { padding-right: 15px; font-size: 13px; }
.info-item a { color: #666; text-decoration: none; }


/* ============================================================
   2. 모바일 (768px 이하)
   ============================================================ */
@media (max-width: 768px) {

    /* body */
    body {
        margin: 0;
        padding-left: 0; padding-right: 0; padding-bottom: 0;
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 14px;
        background-color: #f0f0f0;
    }

    /* h3, h4 */
    .h4, h4 { font-size: 1rem !important; font-weight: 400; line-height: 1.6; color: #333; }
    .h3, h3 { font-size: 11px !important; letter-spacing: -1.48px !important; font-weight: 300; line-height: 1.2; color: #fff; }

    /* 메인 슬로건 */
    .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;
    }

    /* 서브 타이틀 */
    .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;
    }

    /* 서브 배너 */
    .parallax-window-sub {
        background-attachment: scroll;
        min-height: 200px;
        padding-left: 5%;
    }
    .parallax-window-sub .lead {
        padding-left: 0 !important;
        text-align: center !important;
        margin-top: 10px !important;
        font-size: 1rem;
    }

    /* carousel */
    #myCarousel, .carousel-item { height: 400px !important; }
    #myCarousel .carousel-item { height: 70vh !important; max-height: 700px !important; }
    /*( .carousel-caption { left: 5% !important; right: 5% !important; padding-left: 0px !important; } */
     /* 모바일에서  황색박스의 내용이 위로 벗어나는 현상 */
     .carousel-caption { bottom: 15% !important;  /* 캡션을 슬라이드 안으로 올림 */  }
     
    .carousel-caption2 {
        font-size: 15px !important;
        letter-spacing: -2px !important;
        text-align: left !important;
        width: 100% !important;
    }
    .h2_custom { font-size: 20px !important; }

    /* Ken Burns 모바일 */
    @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%);  }
    }
	@keyframes kenburns-7 {
	    0%   { transform: scale(1.08) translate( -1%,   1%);  }
	    100% { transform: scale(1.15) translate(1.5%,  -1.5%);  }
	}

    /* 버튼 */
    .btn-info1, .btn-info2 { margin: 5px !important; padding: 5px !important; font-size: 15px; }
    .banner-btn { padding: 12px 20px; font-weight: 300; font-size: 14px; }


    /* 황색 박스 모바일 - 높이 자동 확장 */
    .container-fluid[style*="fbac02"] {
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important;
        padding: 15px 10px !important;
    }
    .container-fluid[style*="fbac02"] .row {
        min-height: unset !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 10px 0 !important;
        gap: 10px;
    }
    .container-fluid[style*="fbac02"] .col-12 {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    .boxtext1, .boxtext2 {
        font-size: 16px !important;
        display: block !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }

}


/* ============================================================
   3. 태블릿 (768px ~ 1024px)
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* body */
    body {
        margin: 0;
        padding-left: 0; padding-right: 0; padding-bottom: 0;
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 16px;
    }

    /* h3, h4 */
    .h4, h4 { font-size: 1rem !important; font-weight: 400; line-height: 1.6; color: #333; }
    .h3, h3 { font-size: 45px !important; font-weight: 400; line-height: 1.6; color: #fff; }

    /* 메인 슬로건 */
    .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;
    }

    /* 서브 타이틀 */
    .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;
    }

    /* 서브 배너 */
    .parallax-window-sub {
        background-attachment: scroll;
        min-height: 300px;
        padding-left: 10%;
    }
    .parallax-window-sub .lead {
        max-width: 1024px;
        padding-left: 50px !important;
        text-align: center !important;
        margin-top: 10px !important;
        font-size: 1rem;
    }

    /* carousel */
    #myCarousel, .carousel-item { height: 600px !important; }
    #myCarousel .carousel-item { height: 80vh !important; max-height: 800px !important; }
    .carousel-caption { left: 5% !important; right: 5% !important; }
    .carousel-caption2 {
        font-size: 10px !important;
        letter-spacing: -2px !important;
        margin: 40px 0 0 0 !important;
        text-align: left !important;
        width: 100% !important;
    }
    .custom-caption { left: 5% !important; }

    /* 버튼 */
    .btn-info1, .btn-info2 { margin: 10px !important; padding: 10px !important; font-size: 17px; }
    .banner-btn { padding: 12px 20px; font-weight: 500; font-size: 16px; }

}


/* ============================================================
   4. PC (1024px 이상)
   ============================================================ */
@media (min-width: 1024px) {

    /* body */
    body {
        margin: 0;
        padding-left: 0; padding-right: 0; padding-bottom: 0;
        font-family: 'Noto Sans KR', sans-serif !important;
        font-size: 18px;
        background-color: #ffffff;
    }

    /* h3, h4 */
    .h4, h4 { font-size: 1rem !important; font-weight: 400; line-height: 1.6; color: #333; }
    .h3, h3 { font-size: 59px !important; font-weight: bold !important; line-height: 1.6; color: #fff; text-align: left !important; }

    /* 메인 슬로건 */
    .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;
    }

    /* 서브 타이틀 */
    .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 {
        background-attachment: scroll;   /* fixed는 viewport 기준 렌더링으로 확대 유발 */
        min-height: 300px;
        padding-left: 15%;
    }
    .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;
        border: 1px solid red;
    }

    /* carousel */
    #myCarousel, .carousel-item { height: 90vh !important; max-height: 929px; }
    #myCarousel .carousel-item { height: 90vh !important; max-height: 929px !important; }
    .carousel-caption {
        position: absolute !important;
        top: 40% !important;
        bottom: auto !important;
        left: 8% !important;
        right: 8% !important;
    }
    .carousel-caption2 {
        font-size: 46px !important;
        letter-spacing: -1.48px !important;
        text-align: left !important;
        display: block !important;
        min-width: 1024px;
        padding-left: 0px !important;
        padding-top: 0px !important;
        width: 100% !important;
    }
    .carousel-caption3 { font-size: 32px !important; }
    .main-about-section { min-height: 650px; }

    /* 버튼 */
    .btn-info1, .btn-info2 { margin: 10px !important; padding: 10px !important; font-size: 17px; }
    .banner-btn { padding: 12px 20px; font-weight: 700; font-size: 20px; }

    /* aside */
    .text-center { margin-bottom: 15px; }
    .d-lg-block { min-height: 600px; }

    /* ext-item, line-container */
    .ext-item { display: flex; align-items: center; gap: 20px; }
    .line-container { display: flex; justify-content: left; gap: 20px; padding: 0px; }
    .white-line { width: 147px; height: 0; border-top: 2px solid white; box-sizing: border-box; }

    /* col-md-2 */
    .col-md-2 { flex: 0 0 18.3333%; max-width: 18.3333%; }
    .col-md-2-2 { flex: 0 0 18.3333%; max-width: 18.3333%; }

    /* container-2 */
    .container-2 { margin-top: 70px; margin-bottom: 20px; margin-left: 7%; margin-right: 7%; padding: 0px; }

    /* Services Area */
    .services-area { background: #fff; }
    .services-all { margin-top: -30px; }
    .single-services {
        box-shadow: none; margin-top: 30px; position: relative; z-index: 1;
        border: 1px solid #fbac02; padding: 20px 10px;
    }
    .service-images {
        width: 60px; float: left; height: 60px; font-size: 26px;
        color: #fff; background: #fbac02; margin-right: 15px;
        line-height: 56px; text-align: center;
        border: 1px solid #fbac02; border-radius: 50%;
    }
    .services-all .service-content { padding-left: 75px; }
    .single-services .service-content h4 { font-size: 18px; text-transform: capitalize; font-weight: 600; }
    .single-services .service-content h4 a { color: #444; }
    .single-services .service-content h4 a:hover { color: #fbac02; }
    .single-services .service-content p { color: #444; }
    .single-services::after {
        background: #fbac02; border: 1px solid #fbac02; width: 100%; height: 100%;
        position: absolute; content: ""; top: 0; left: 0; opacity: 0; transition: 0.4s; z-index: -1;
    }
    .single-services:hover::after { transition: 0.4s; }
    .single-services:hover .service-images::after {
        position: absolute; content: ""; background: #fbac02;
        width: 2px; height: 60%; left: 11%; top: 20%; z-index: -1;
    }
    .single-services:hover .service-images {
        margin-top: 30px; color: #fbac02; background: #fff; border: 2px solid #fbac02;
    }

    /* Counter Area */
    .counter-area {
        background: rgba(0,0,0,0) url(/images/background/bg2-2.jpg) no-repeat scroll top center / cover;
        width: 100%; height: 100%; max-height: 500px;
    }
    .display-table { width: 100%; height: 100%; display: table; }
    .display-table-cell { width: 100%; height: 100%; display: table-cell; vertical-align: middle; }
    .parallax-bg { position: relative; }
    .parallax-bg:before {
        position: absolute; left: 0; top: 0; width: 100%; height: 100%;
        background: #000; opacity: .6; content: "";
    }
    .counter-inner h3 { color: #fff; text-transform: uppercase; font-size: 40px !important; line-height: 60px; }
    .fun-content { overflow: hidden; display: block; }
    .fun_text > span { color: #fff; display: inline-block; font-size: 40px; padding-bottom: 10px; line-height: 48px; font-weight: 700; }
    .fun_text { float: left; width: 33.33%; }
    .fun_text > h5 { color: #fff; font-size: 16px; font-weight: 600; text-transform: uppercase; }

}