/* ==========================================================
   custom_style.css
   bs4_v3.0 테마에 basic 테마 전체메뉴(#gnb_all) 기능 추가
   bs4 테마의 default.css 또는 별도 <link>로 불러오세요.

   적용 순서: Bootstrap 4 CSS → bs4_default.css → 이 파일
   ========================================================== */


/* ----------------------------------------------------------
   1. 전체메뉴 버튼 (#gnb_all_btn)
      - navbar 우측에 위치하는 햄버거/닫기 버튼
   ---------------------------------------------------------- */
.gnb_all_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #4158d1;       /* basic 테마와 동일한 보라 계열 */
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
    vertical-align: middle;
    flex-shrink: 0;
}
.gnb_all_btn:hover,
.gnb_all_btn:focus {
    background: #2e40b0;
    outline: none;
}


/* ----------------------------------------------------------
   2. 전체메뉴 오버레이 배경 (#gnb_all_bg)
   ---------------------------------------------------------- */
#gnb_all_bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1039;   /* navbar z-index(1030) 바로 위, gnb_all 아래 */
}
#gnb_all_bg.is-open {
    display: block;
}


/* ----------------------------------------------------------
   3. 전체메뉴 패널 (#gnb_all)
      - navbar 아래에 슬라이드로 펼쳐지는 패널
      - fixed-top navbar 높이(56px)만큼 top 오프셋
   ---------------------------------------------------------- */
#gnb_all {
    display: none;               /* JS가 is-open 클래스로 제어 */
    position: fixed;
    top: 56px;                   /* fixed-top navbar 높이 */
    left: 0;
    width: 100%;
    /* background: #fff; */
    background: rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid #c5d6da;
    z-index: 1040;               /* navbar(1030)보다 위 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    animation: gnb-slide-down 0.2s ease;
}
#gnb_all.is-open {
    display: block;
}

@keyframes gnb-slide-down {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 전체메뉴 제목 */
#gnb_all h2 {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 14px 0 12px;
    border-bottom: 1px solid #e7eeef;
    margin-bottom: 0;
    color: #222;
}

/* 닫기 버튼 */
.gnb_all_close_btn {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #888;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}
.gnb_all_close_btn:hover {
    color: #222;
}


/* ----------------------------------------------------------
   4. 전체메뉴 목록 (.gnb_al_ul / .gnb_al_li)
      basic 테마와 동일한 그리드 레이아웃 (5열)
   ---------------------------------------------------------- */
.gnb_al_ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 16px 0 20px;
}

.gnb_al_li {
    width: 20%;           /* 5열 */
    min-height: 120px;
    padding: 16px 20px;
    border-left: 1px solid #e7eeef;
    box-sizing: border-box;
}
.gnb_al_li:nth-child(5n + 1) {
    border-left: 0;
}

/* 대메뉴 링크 */
.gnb_al_li .gnb_al_a {
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #3a8afd;
    text-decoration: none;
    transition: color 0.2s;
}
.gnb_al_li .gnb_al_a:hover {
    color: #2266cc;
    text-decoration: underline;
}

/* 서브메뉴 목록 */
.gnb_al_li ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gnb_al_li ul li {
    line-height: 2em;
}
.gnb_al_li ul li a {
    color: #555;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s;
}
.gnb_al_li ul li a:hover {
    color: #3a8afd;
}

/* 메뉴 없음 안내 */
.gnb_al_ul .gnb_empty {
    padding: 20px;
    width: 100%;
    text-align: center;
    color: #555;
}
.gnb_al_ul .gnb_empty a {
    color: #3a8afd;
    text-decoration: underline;
}


/* ----------------------------------------------------------
   5. 대메뉴 서브메뉴 드롭다운 (Bootstrap 완전 독립)
   ---------------------------------------------------------- */
@media (min-width: 768px) {
.nav-item.gnb-has-sub {
    position: relative;
}
.gnb-sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-top: 2px solid #3a8afd;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    z-index: 1000;
    padding: 4px 0;
}
.nav-item.gnb-has-sub:hover > .gnb-sub-menu {
    display: block;
}
.gnb-sub-item {
    display: block;
    padding: 6px 16px;
    font-size: 0.85rem;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
}
.gnb-sub-item:hover {
    color: #3a8afd;
    background: #f7f7f8;
    text-decoration: none;
}
.gnb-sub-item.active {
    color: #3a8afd;
    font-weight: bold;
}
}
/* 
Bootstrap JS가 전혀 관여하지 않으므로 대메뉴 클릭이 각각의 group.php로 정확히 이동합니다.
*/

/* ----------------------------------------------------------
   6. 반응형: 태블릿 이하 (768px 미만)
      전체메뉴 2열로 변경, 패널 top은 navbar 높이에 맞게
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {
    #gnb_all {
        top: 56px;   /* 모바일에서도 navbar 높이 동일하면 유지 */
    }
    .gnb_al_li {
        width: 50%;  /* 2열 */
        min-height: auto;
    }
    .gnb_al_li:nth-child(5n + 1) {
        border-left: 1px solid #e7eeef;
    }
    .gnb_al_li:nth-child(2n + 1) {
        border-left: 0;
    }
}

@media (max-width: 479.98px) {
    .gnb_al_li {
        width: 100%; /* 1열 */
        border-left: 0 !important;
        border-top: 1px solid #e7eeef;
        min-height: auto;
    }
}


/* ----------------------------------------------------------
   7. 접속자수 뱃지 (.visit-num) - 원본 bs4 테마 스타일 유지
   ---------------------------------------------------------- */
.visit-num {
    display: inline-block;
    line-height: 16px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 10px;
    background: #da22f5;
    color: #fff;
    font-size: 10px;
    font-weight: normal;
    vertical-align: middle;
}

/*
=============================================================
  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; }


/* basic theme 의 default.css에서 복사한 것임  */ 
#gnb .gnb_wrap,
#container_wr,
#ft_wr {width:1200px}

/* 공통 - display none/block */
.is-hidden { display: none !important; }
.is-visible { display: block !important; }

/* 공통 - 뷰포트 (pc / mobile) 별 display none/block */
.pc-only { display: none; }
@media (min-width: 769px) { .pc-only { display: block !important; }}
.mobile-only { display: block; }
@media (min-width: 769px) { .mobile-only { display: none !important; }}
/* basic theme 의 default.css에서 복사한 것임  */ 


/* 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;
    border: 0px solid red;
}
/* 3. 데스크톱 화면 (1024px 이상) */
@media (min-width: 1024px) {
.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;
    height:600px;
    border: 0px solid red;

}


}

.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; }

}