/*------------------------------------*\
  SETTINGS
\*------------------------------------*/
:root {
    --primary-color: #0054a7;
    --secondary-color: #FFD039;
    --tertiary-color: #FF0066;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
    color: #000;
    font-size: 16px;
    line-height: 2em;
    letter-spacing: 1px;
    background-color: #fff;
}

body.fixed {
    overflow: hidden;
}


a {
    color: #595757;
    transition: 0.3s;
}

a:hover {
    color: #333;
    text-decoration: none;
}

ul {
    padding-left: 0;
    margin-bottom: 0;
}

li {
    list-style: none;
}


b, strong {
    font-weight: 700;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #727171;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 14px;
    opacity: 1; /* Firefox */
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #727171;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 14px;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #727171;
    font-weight: 400;
    letter-spacing: 1px;
}

.pre {
    white-space: pre-line; 
}

.centerline {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 100vh;
    background-color: #B9B9B9;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.main {
    overflow: hidden;
}

@media (min-width: 576px) {
    html {
        font-size: 16px;
    }
}





/*------------------------------------*\
  UTILITIES
\*------------------------------------*/

.overlay {
    position: relative;
    transition: .3s;
}

.overlay::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1;
}

.overlay-2::before {
    opacity: 0.2;
}

.overlay-4::before {
    opacity: 0.4;
}

.p-relative {
    position: relative;
}

.o-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.list-style-none {
    list-style: none;
}

.add-shadow {
    box-shadow: 0 4px 15px 0 rgb(175 175 175 / 20%);
}

.img-fluid-all img {
    max-width: 100%;
    height: auto !important;
}

/**
 *  Width
 */

@media (min-width: 576px) {
    .w-lg-auto {
        width: auto !important;
    }
    
}


/*------------------------------------*\
  FONT
\*------------------------------------*/

.letter-spacing-2 {
    letter-spacing: 2px;
}

.letter-spacing-3 {
    letter-spacing: 3px;
}

.letter-spacing-4 {
    letter-spacing: 4px;
}

.letter-spacing-5 {
    letter-spacing: 5px;
}

.letter-spacing-8 {
    letter-spacing: 8px;
}

.letter-spacing-11 {
    letter-spacing: 11px;
}

.line-height-5 {
    line-height: 1.5em;
}

.line-height-8 {
    line-height: 1.8em;
}

.font-small {
    font-size: 12px;
}

/* shape */
.shape-circle {
    position: relative;
}

.shape-circle::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -150px;
    width: 300px;
    height: 300px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='501.431' height='440.023' viewBox='0 0 501.431 440.023'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' y1='1' x2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23ffe2ad'/%3E%3Cstop offset='1' stop-color='%23eec075'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath id='Path_9' data-name='Path 9' d='M329.245-1.377c29.08,16.763,45.167,49.274,46.4,79.752,1.237,30.986-11.756,59.941-30.936,85.848s-43.93,48.258-81.672,72.641-87.86,50.8-137.977,48.258S24.831,251.595-6.724,209.941C-38.9,168.287-51.273,115.965-34.567,73.8c16.706-42.67,63.729-75.18,110.753-89.4s94.047-10.16,138.6-7.112S300.784-18.14,329.245-1.377Z' transform='translate(48.417 158.629) rotate(-21)' opacity='0.523' fill='url(%23linear-gradient)'/%3E%3C/svg%3E%0A") no-repeat;
    background-size: contain;
    z-index: -1;
}

/* heading */
.section-header {
    position: relative;
}

.section-header::before {
    content: "";
    position: absolute;
    left: -100px;
    top: -80px;
    width: 150px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23007440' d='M63.2,-49.7C76.9,-33.3,79.5,-7.3,72.9,14.6C66.2,36.4,50.4,54,30.9,63C11.4,72,-11.8,72.3,-32.8,63.8C-53.8,55.3,-72.7,38.1,-77,17.9C-81.3,-2.2,-71.1,-25.4,-55.8,-42.1C-40.5,-58.9,-20.3,-69.2,2.3,-71C24.8,-72.8,49.6,-66.1,63.2,-49.7Z' transform='translate(100 100)' /%3E%3C/svg%3E") no-repeat;
    background-size: contain;
    z-index: 1;
    opacity: 0.9;
}

    .section-header .heading {
        position: relative;
        font-size: 36px;
        font-weight: 700;
        letter-spacing: 2px;
        margin-bottom: 40px;
        z-index: 2;
    }

    .section-header .subheading {
        position: relative;
        font-size: 22px;
        font-weight: 500;
        color: var(--primary-color);
        margin-bottom: 10px;
        z-index: 2;
    }

@media(min-width: 576px) {
    .section-header .heading {
        font-size: 42px;
    }
}

@media(max-width: 1199px) {
    .section-header::before {
        left: -100px;
        top: -80px;
    }
}

@media(max-width: 576px) {
    .section-header {
        display: table;
        margin-left: auto;
        margin-right: auto;
    }

    .section-header::before {
        left: -70px;
        top: -40px;
        width: 120px;
        height: 120px;
    }
}


/*------------------------------------*\
  COLORS, BG & BORDER
\*------------------------------------*/

.text-dark {
    color: #000000!important;
}

.text-muted {
    font-size: 14px;
}

.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-line-2 {
    -webkit-line-clamp: 2;
}

.ellipsis-line-3 {
    -webkit-line-clamp: 3;
}




/*------------------------------------*\
  LAYOUTS
\*------------------------------------*/

.container-wide {
    width: 95%;
    margin-right: auto;
    margin-left: auto;
}

.section {
    padding-top: 60px;
    padding-bottom: 80px;
}

@media (min-width: 1200px) {
    .container-wide {
        max-width: 1440px;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .section {
        padding-top: 90px;
        padding-bottom: 90px;
    }
}





/*------------------------------------*\
  COMPONENTS
\*------------------------------------*/

/**
 *  Button
 */

.button {
    display: inline-flex;
    align-items: center;
    padding: 5px 30px;
    letter-spacing: 2px;
    border-radius: 3px;
    border: 1px solid transparent;
    background-color: transparent;
    transition: 0.3s;
}

.button svg {
    position: relative;
    top: 1px;
}

.button-primary {
    background-color: var(--primary-color);
    color: #fff;
}

.button-primary:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    background-color: var(--secondary-color);
    color: #fff;
}

.button-primary svg {
    margin-left: 40px;
}

.button-primary svg path {
    fill: #fff;
}

.button-outline-primary {
    border-color: #222;
    color: #222;
}

.button-outline-primary:hover {
    background-color: var(--primary-color);
    color: #fff;
}

    .button-outline-primary svg {
        margin-left: 40px;
    }

    .button-outline-primary:hover svg path {
        fill: #fff;
    }

.button-outline-rounded {
    border-color: transparent;
    color: #222;
    border-radius: 0;
    padding: 0;
}

.button-outline-rounded:hover {
    color: #222;
}

    .button-outline-rounded svg {
        margin-left: 20px;
    }

.button-outline-light {
    border-color: #fff;
    color: #fff;
}

.button-outline-light:hover {
    background-color: #fff;
    color: var(--primary-color);
}


/**
 *  Dropdown
 */


.drop {
    position: relative;
}

.drop__content {
    display: none;
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 150px;
    padding-top: 23px;
}

.header.sticky .drop__content {
    top: 40px;
}
 
.drop:hover .drop__content {
    display: block;
}

.drop__content a {
    background: #f8f8f8;
}

.drop__content a:hover {
    color: #fff !important;
    background: var(--primary-color);
}


/**
 *  Collapse
 */


.collapse__content {
    display: none;
    padding-left: 20px;
    background: #fff;
}

.collapse__button.active ~ .collapse__content {
    display: block;
}



/**
 *  Animate
 */

.animate {
    animation-duration: 1s;
}

@keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translate3d(-40px, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
}

@keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translate3d(40px, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
}

@keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate3d(0, -40px, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
}

@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 40px, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
}

.animate__delay-200ms {
    animation-delay: 200ms;
}

.animate__delay-400ms {
    animation-delay: 400ms;
}

.animate__delay-600ms {
    animation-delay: 600ms;
}

.animate__delay-800ms {
    animation-delay: 800ms;
}

.animate__delay-1s {
    animation-delay: 1s;
}



/**
 *  Image box
 */

.image-box {
    position: relative;
    display: flex !important;
}

    .image-box-outer {
        width: 100%;
        padding-bottom: 100%;
        position: relative;
        overflow: hidden;
        margin: 0;
        line-height: 0;
    }

    .image-box-outer.vertical {
        padding-bottom: 120%;
    }

    .image-box-outer.ratio-3-2 {
        padding-bottom: 66.66%;
    }

    .image-box-outer.ratio-16-9 {
        padding-bottom: 56.25%;
    }

        .image-box-inner {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: #f1f1f1;
        }

            .image-box-inner img {
                width: 100%;
                height: 100%;
                object-position: 50% 50%;
                object-fit: cover;
            }


.image-hover--zoom img {
    transition: 0.5s;
}

.image-hover--zoom:hover img {
    transform: scale(1.05);
}

.image-box .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff;
    z-index: 2;
}

.caption-label {
    margin-top: 4px;
    margin-bottom: 4px;
    display: block;
}


/**
 *  icon box
 */

.icon-box .icon {
    width: 40px;
    height: 40px;
    border: 1px solid #919191;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

.icon-box__i svg {
    width: 48px;
    height: 48px;
}

.icon-box__title {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
}

    .icon-box__desc {
        font-size: 15px;
        font-weight: 300;
    }



/**
 *  accordion
 */

.accordion .card {
    margin-bottom: 10px;
}

    .accordion .btn-link {
        display: block;
        width: 100%;
        text-align: left;
        color: #333;
        font-size: 14px;
    }



/* =========================
   Slider — IMG 等比縮小版
   放在檔案最後，覆蓋舊規則
   ========================= */

/* --- 1) Hero 高度：先用 vh，支援 dvh 再覆蓋 --- */
.site-hero {
    /* 桌機預設：300px ~ 680px，常態 60vh */
    --hero-h: clamp(300px, 100vh, 700px);
    position: relative;
}
@supports (height: 100dvh) {
    .site-hero { --hero-h: clamp(300px, 100vh, 700px); }
}

@media (max-width: 991px) {
    .site-hero { --hero-h: clamp(240px, 42vh, 480px); }
    @supports (height: 100dvh) {
        .site-hero { --hero-h: clamp(240px, 42dvh, 480px); }
    }
}
@media (max-width: 576px) {
    .site-hero { --hero-h: clamp(200px, 38vh, 440px); }
    @supports (height: 100dvh) {
        .site-hero { --hero-h: clamp(200px, 38dvh, 440px); }
    }
}

/* --- 2) 核心：Hero 容器鏈統一高度（鎖高） --- */
.site-hero,
.site-hero .hero-slider,
.site-hero .slick-list,
.site-hero .slick-track,
.site-hero .slick-slide,
.site-hero .slide {
    height: var(--hero-h) !important;
    overflow: hidden;
}

/* 手機滑動更順（避免非 passive 觸控阻塞） */
.site-hero .hero-slider {
    width: 100%;
    touch-action: pan-y;
}

/* --- 3) 投影片內容與圖片 --- */
.hero-slider .slide { position: relative; }

.hero-slider .slide .slide-img {
    position: absolute;
    inset: 0;
    width: 100% !important;      /* 蓋掉舊的 width 設定 */
    height: 100% !important;     /* 蓋掉舊的 height:auto!important */
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}

/* 遮罩（可選） */
.hero-slider .slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(28, 28, 28, 0.05);
    pointer-events: none;
    z-index: 1;
}

/* 文字層（預設置中；要改回 top/left 也可以） */
.hero-slider .slide-content {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    padding: 2rem;
    color: #fff;
    text-align: center;
    font-size: 28px;
    letter-spacing: 3px;
    z-index: 2;
}

/* 桌機：若不想置中，改成靠左下示例 */
@media (min-width: 992px) {
    .hero-slider .slide-content {
        display: block;
        width: 70%;
        top: auto;
        bottom: 20%;
        left: 10%;
        transform: none;
        text-align: left;
    }
}

/* --- 4) Slick 導航 --- */
.site-hero .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 3;
}
.site-hero .arrow-prev { left: 25px; }
.site-hero .arrow-next { right: 25px; }
.site-hero .slick-arrow > svg { width: 36px; height: 36px; }

.slick-dots { bottom: 12px; }
.slick-dots li button:before { font-size: 16px; }



/**
 *  carousel
 */

.carousel {
    width: 100%;
    overflow: hidden;
}

    .carousel-control {
        position: absolute;
        width: 200px;
        bottom: -50px;
        left: 50%;
        transform: translate(-50%);
    }

    .carousel-control .swiper-button-prev:after,
    .carousel-control .swiper-container-rtl .swiper-button-next:after,
    .carousel-control .swiper-button-next:after,
    .carousel-control .swiper-container-rtl .swiper-button-prev:after {
        display: none;
    }

    .carousel-slides-count {
        font-size: 14px;
    }
    


/**
 *  page banner
 */
/*
.page-banner{
  position: relative;
  width: 100%;
  /* 高度在 240px～420px 之間，跟著視窗寬度伸縮 */
  height: clamp(240px, 28vw, 420px);
  overflow: hidden; /* 超出裁切，模擬 background cover 
}

.page-banner img{
  position: absolute;
  inset: 0;           /* top/right/bottom/left 全貼齊 
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 等比填滿、可裁切邊緣 */
  object-position: center; /* 需要換視覺重點就調整這裡 
  display: block;
}
*/

.page-banner {
  position: relative;
  width: 100%;
  height: auto; /* 高度由圖片比例決定 */
  overflow: hidden;
}

.page-banner img {
  width: 100%;
  height: auto;   /* 等比例縮小 */
  display: block; /* 消除底部空隙 */
}


/**
 *  page breadcrumb
 */

.page-breadcrumb {
    margin-top: 30px;
    margin-bottom: 50px;
} 

    .page-breadcrumb ul {
        display: flex;
    }

        .page-breadcrumb li {
            display: flex;
            align-items: center;
        }

            .page-breadcrumb li a {
                font-size: 16px;
            }

            .page-breadcrumb li a:hover {
                color: var(--primary-color);
            }

            .page-breadcrumb li:last-child svg {
                display: none;
            }


/**
 * Pagination
 */

 .page__pagination {
    margin-top: 60px;
    margin-bottom: 40px;
}

    .page__pagination .pagination {
        justify-content: center;
        padding-left: 0;
    }

        .pagination .page-item {
            margin-right: 12px;
            list-style: none !important;
        }

        .pagination .page-item:last-child {
            margin-right: 0;
        }

        .pagination .page-link {
            display: inline-block;
            padding: 0;
            color: #222222;
            border: 1px solid #222222;
            font-size: 15px;
            line-height: 37px;
            width: 40px;
            height: 40px;
            border-radius: 5px !important;
            text-align: center;
        }

        .pagination .page-link:hover {
            background-color: var(--primary-color);
            color: #fff;
            opacity: 0.8;
        }

        .pagination .page-link.active {
            background-color: var(--primary-color);
            color: #fff;
        }

        .pagination .page-link svg {
            position: relative;
            top: -3px;
            stroke: #626262;
            stroke-width: 1.5;
            width: 22px;
            height: 22px;
        }

        .pagination .page-item .page-quick-link {
            background-color: #efefef;
            border-color: #efefef;
        }

        .pagination .page-item .page-quick-link svg {
            stroke: #9a9a9a;
        }

/**
 *  Floats
 */

.floats {
    position: fixed;
    bottom: 20%;
    right: 20px;
    z-index: 9;
}

    .floats .item {
        color: #fff;
        background: #000;
        border-radius: 25px;
        padding: 6px;
        display: flex;
        margin-bottom: 10px;
        transition: 0.3s;
    }

    .floats .item a {
        color: #fff;
    }

    .floats .item .icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #333;
    }

    .floats .item .icon svg {
        fill: #fff;
        width: 24px;
        height: 24px;
    }

    .floats .item.facebook {
        background: #add6ff;
    }

    .floats .item.facebook .icon {
        background: #2191FF;
    }

    .floats .item.youtube {
        background: #ffc8cb;
    }

    .floats .item.youtube .icon {
        background: #ff5460;
    }

    .floats .item.line {
        background: #b6ffde;
    }

    .floats .item.line .icon {
        background: #0ae784;
    }

    .floats .item.instagram {
        background: #ffc5ec;
    }

    .floats .item.instagram .icon {
        background: #e12ba5;
    }

@media(max-width: 576px) {
    .floats {
        right: 10px;
    }
}


/**
 *  Back to Top
 */

.back-to-top {
    position: fixed;
    bottom: 60px;
    right: 25px;
    cursor: pointer;
    display: none;
}

    .back-to-top .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: #eee;
        border-radius: 2px;
    }

    .back-to-top svg {
        stroke: #222;
    }




/**
 *  Header
 */

.header {
    position: sticky;
    top: 0;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    background: rgba(255, 255, 255);
    z-index: 999;
    transition: 0.3s;
}

    .site-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: 0.3s;
    }
   
        .site-logo a {
            display: inline-block;
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 5px;
            line-height: 1.2em;
        }

        .site-logo img {
            height: 70px;
            padding: 5px;
            transition: 0.3s;
        }

        .site-menu {
            display: flex;
        }

            .site-menu .item > a {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 6px 18px;
                font-size: 16px;
                letter-spacing: 5px;
                color: #333;
            }

            .site-menu .item > a:hover {
                color: var(--primary-color);
            }

    .site-media {
        margin-right: 15px;
    }

        .site-media .item > a {
            display: flex;
            margin-left: 6px;
            margin-right: 6px;
        }

        .header .contact-btn {
            margin-top: 4px;
            margin-left: auto;
            margin-right: 10px;
        }

.header.sticky {
    background: #fff !important;
    border-bottom: 1px solid #eee;
}

    .header.sticky .social-media {
        display: none !important;
    }

    .header.sticky .site-nav {
        padding-top: 0;
    }

        .header.sticky .site-logo img {
            height: 60px;
        }

        .header.sticky .site-menu .item > a {
            color: #333;
        }

        .header.sticky .site-menu .item > a:hover {
            color: var(--primary-color);
        }
    
@media (min-width: 992px) {
    .site-logo a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .header .contact-btn {
        display: none;
    }
}

@media(max-width: 991px) {
    .header {
        background: #fff !important;
    }

    .site-nav {
        padding-top: 0;
    }

    .site-logo img {
        height: 60px;
        padding: 10px;
    } 
}



/**
 *  Mobile Nav
 */

.mobile-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    cursor: pointer;
}

.sidebar-toggle {
    transition: 0.3s;
}

    .toggle-icon {
        position: relative;
        width: 22px;
        height: 14px;
        margin: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }
            
        .toggle-icon span {
            display: block;
            position: absolute;
            height: 2px;
            width: 100%;
            background-color: #222;
            border-radius: 9px;
            opacity: 1;
            left: 0;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .25s ease-in-out;
            -moz-transition: .25s ease-in-out;
            -o-transition: .25s ease-in-out;
            transition: .25s ease-in-out;
        }

        .toggle-icon span:nth-child(1) {
            top: 0px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }
            
        .toggle-icon span:nth-child(2) {
            top: 7px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }
            
        .toggle-icon span:nth-child(3) {
            top: 14px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }

        .sidebar-toggle.open .toggle-icon span:nth-child(1) {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            top: -1px;
            left: 4px;
        }
            
        .sidebar-toggle.open .toggle-icon span:nth-child(2) {
            width: 0%;
            opacity: 0;
        }
            
        .sidebar-toggle.open .toggle-icon span:nth-child(3) {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 14px;
            left: 4px;
        }
    

.slide-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #fff;
    opacity: 0;
    transition: .3s;
    z-index: 99;
    pointer-events: none;
}

    .slide-sidebar > ul {
        padding-left: 0;
    }

        .slide-sidebar ul > li > a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 30px;
            width: 100%;
            color: #333;
            letter-spacing: 2px;
            font-size: 18px;
        }


.slide-sidebar.active {
    opacity: 1;
    height: 100vh;
    pointer-events: initial;
}


.mobile-nav {
    z-index: -1;
}

.mobile-nav::before {
    position: absolute;
    top: -150%;
    left: -25%;
    content: "";
    background-color: #fff;
    width: 150%;
    height: 150%;
    z-index: -1;
}

.mobile-nav.active::before {
    top: -25%;
}

    .mobile-nav a {
        display: inline-block;
        padding: 10px 40px;
        width: 100%;
        color: #333;
        letter-spacing: 2px;
        font-size: 18px;
        text-align: center;
    }


.mobile-nav .inner-content {
    margin-top: 60px;
    padding-top: 40px;
    height: 100%;
    background: #f7f7f7;
}

.mobile-menu {
    width: 100%;
}


/**
 *  side menu
 */

 .side-menu {
    width: 100%;
}

.side-menu.go-down {
    margin-top: 30px;
}

    .side-menu ul {
        padding-left: 0;
    }


        .side-menu a {
            display: block;
            padding: 7px 0;
            color: #5c5c5c;
            border-bottom: 1px solid #e8e9ea;
        }

        .side-menu a.active,
        .side-menu .layer-1 > a:hover {
            color: var(--primary-color);
        }
       

        .aside-label {
            color: #8D8D8D;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .side-menu .collapse__button {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .side-menu .collapse__button ~ .collapse__content a {
            padding-left: 24px;
        }

            .side-menu a > svg {
                display: none;
            }

            .side-menu .collapse__button > svg {
                display: inline-block;
            }


  

@media(min-width: 991px) {  
    .side-menu {
        width: 230px;
    }

    .side-menu.go-down {
        margin-top: 140px;
    }

    .mobile-toggle {
        display: none;
    }
}



/**
 *  Social Media
 */
.social-media {
    margin-bottom: 10px;
}

.social-media a {
    display: flex;
}

.social-media .icon {
    background-color: #ffffef;
    margin-right: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.social-media .text {
    margin-left: 5px;
    color: #ffffef;
}

.social-media svg {
    height: 16px;
}

.social-media svg path {
    fill: #a4825f;
}


/**
 *  Video
 */

.h__videos{
    background-color: #F7F7F7; 
    margin-top:20px
}
.video__container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.video__container::after {
    content: "Loading...";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: -1;
    background-color: #1e457c;
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.video.vertical {
    padding-bottom: 100%;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/**
 *  Product
 */
 
.product .product-title {
    display: block;
    font-size: 16px;
    font-weight: 400;
    margin-top: 10px;
    text-align: center;
}


.p-slider-nav .image-box {
    cursor: pointer;
}

.p-slider-nav .slick-prev:before,
.p-slider-nav .slick-next:before {
    color: rgb(145, 145, 145);
}

.product-details .form {
    background: #f7f7f7;
}


/**
 *  Ad
 */

.ad {
    position: relative;
    height: 60vh;
    z-index: 1;
}

.ad-full {
    height: 100vh;
}

.ad-full::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 28, 28, 0.3);
    z-index: -1;
}

    .ad-card {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        width: 360px;
        font-size: 15px;
    }

    .ad-card.left {
        left: 20%;
    }

    .ad-card.right {
        right: 20%;
    }

        .ad-card .button {
            width: 160px;
        }

    .ad-heading {
        font-size: 20px;
        margin-bottom: 10px;
    }


/**
 *  Contact
 */

.label {
    font-size: 15px;
}


/**
 *  Footer
 */

.footer {
    background-color: #142d45;
    color: #ffffff;
    padding-top: 80px;
    padding-bottom: 80px;
}
       
.footer a:hover {
    color: var(--secondary-color) !important;
}
    .footer-logo img {
        height: 70px;
    }

        .footer-nav {
            display: flex;
            width: 100%;
            margin-bottom: 20px;
        }

        .footer-nav > ul {
            display: flex;
            flex-wrap: wrap;
            margin-left: -20px;
            margin-right: -20px;
        }

            .footer-nav a {
                display: inline-block;
                color: #ffffff;
                padding: 0 20px;
            }

            .footer-nav a:hover {
                opacity: 0.8;
            }
            
            .footer-nav .item {
                margin-bottom: 10px;
            }

    .contact-info {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .footer .contact-info {
        align-items: center;
        flex-direction: row;
    }

        .contact-info .item {
            display: flex;
            align-items: center;
            padding: 0 20px;
        }

        .contact-info .icon {
            width: 40px;
            height: 40px;
            background: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 10px;
            flex-shrink: 0;
        }

        .contact-info .icon.phone {
            background: #2191FF;
        }

        .contact-info .icon.mail {
            background: #FFD039;
        }

        .contact-info .icon.line {
            background: #2ac47f;
        }

        .contact-info .icon.address {
            background: #eee;
        }

        .footer .contact-info a {
            color: #fff;
        }

    .footer-social {
        margin-left: 0;
        flex-shrink: 0;
    }

        .footer-social .social-media {
            justify-content: center;
        }

        .footer-social .social-media a:hover {
            opacity: 0.8;
        }

    .copyright {
        font-size: 12px;
        text-align: center;
        margin-top: 8px;
        margin-bottom: 8px;
        background: #fff;
    }
 

@media (min-width: 1200px) {
    .footer {
        display: flex;
        align-items: flex-start;
    }

        .footer-logo {
            display: flex;
            align-items: flex-end;
            margin-right: auto;
        }

        .footer-col {
            margin-bottom: 0 !important;
        }

        .footer-nav {
            justify-content: flex-end;
        }
}

@media (max-width: 1199px) {
    .footer-logo {
        text-align: center;
    }

    .footer-nav {
        justify-content: center;
        margin-top: 40px;
    }

    .footer .contact-info {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .footer-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 60px;
        margin-bottom: 40px;
    }

    .footer .contact-info {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .footer .contact-info .item {
        margin-bottom: 20px;
    }
}




/*------------------------------------*\
  PAGES CONTENT
\*------------------------------------*/

.section-heading {
    letter-spacing: 3px;
    font-weight: 700;
}



/* news */
.h__news {
    margin-top: 15px;
}

.post-item {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    border-bottom: 1px solid #c6c6c6;
}

.post-item:first-child {
    border-top: 1px solid #c6c6c6;
}

    .post-item .image-box {
        width: 180px;
        flex-shrink: 0;
    }

    .post-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 25px;
        flex: 1;
    }

    .post-title {
        display: block;
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .post-date {
        opacity: 0.6;
    }

    .post-summary {
        color: #6f6f6f;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .post-content .button {
        padding: 0;
        margin-left: auto;
        margin-top: auto;
        background: #eee;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 5px;
    }

    .post-content .button:hover {
        background: var(--primary-color);
        color: #fff;
    }

    .post-details .post-title {
        font-size: 36px;
    }

@media(max-width: 576px) {
    .post-item {
        flex-direction: column;
    }

    .post-item .image-box {
        width: 100%;
    }

    .post-content {
        margin-left: 0;
        margin-top: 20px;
        width: 95%;
    }
}

/* home about */
.h__about {
    position: relative;
    background: #f7f7f7;
    margin-top: 15px;
    padding-top: 100px;
}

.h__about .inner-content {
    display: flex;
}

.fb-page {
    flex-shrink: 0;
    margin-top: -40px;
}

@media(max-width: 1199px) {
    .h__about::before {
        height: 80%;
    }
    
    .fb-page {
        margin-top: 60px;
    }
}

@media(max-width: 576px) {
    .h__about::before {
        width: 84%;
        height: 65%;
        bottom: 7%;
    }
    .fb-page {
       width: 300px;
    }
}

/* home post */
.h__post .section-header {
    margin-bottom: 40px;
}

/* call now */
.h__call-now {
    display: flex;
    align-items: flex-end;
    padding-top: 40px;
}

    .h__call-now .block-image {
        width: 45%;
        border-top-right-radius: 25px;
        overflow: hidden;
    }

    .h__call-now .block-image img {
        width: 100%;
        max-height: 400px;
    }

    .h__call-now .block-info {
        position: relative;
        width: 55%;
        height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .h__call-now .block-info::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(244, 190, 29, 0.9);
        z-index: 1;
    }

    .h__call-now .block-info .expert {
        position: absolute;
        top: -25%;
        left: 6%;
        width: 240px;
        height: 240px;
        border: 8px solid #f4c01d;
        border-radius: 50%;
        z-index: 2;
    }

    .h__call-now .block-info .content {
        position: relative;
        padding-left: 200px;
        color: #fff;
        z-index: 3;
    }

    .h__call-now .block-info .label {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .h__call-now .block-info .text {
        font-size: 60px;
        font-weight: 700;
    }

@media(max-width: 1280px) {
    .h__call-now {
        align-items: unset;
        height: 320px;
    }

    .h__call-now .block-info {
        height: auto;
    }

    .h__call-now .block-info .expert {
        width: 180px;
        height: 180px;
        left: 50%;
        transform: translateX(-50%);
    }

    .h__call-now .block-info .content {
        padding-left: 0;
        padding-top: 20px;
    }

    .h__call-now .block-info .text {
        font-size: 52px;
    }

    .h__call-now .block-image {
        border-radius: 0;
    }

    .block-image img {
        width: 100%;
        height: 320px;
        object-fit: cover;
    }
}  

@media(max-width: 768px) {
    .h__call-now {
        flex-direction: column;
        height: auto;
    }

    .h__call-now .block-image {
        width: 100%;
        order: 2;
    }

    .h__call-now .block-image img {
        width: 100%;
        height: 300px;
    }

    .h__call-now .block-info {
        width: 100%;
        height: 300px;
        order: 1;
        background-size: cover !important;
    }
}


@media(max-width: 576px) {
    .h__call-now .block-info .text {
        font-size: 42px;
    }
}

/**
 *  product
 */
.product-slideshow {
    position: relative;
    z-index: 99;
}

.p-details-header {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.5;
}

.p-slider-nav {
    margin: 0 -5px;
}

.p-slider-nav .slick-track {
    margin-left: unset;
    margin-right: unset;
}

    .p-slider-nav .slick-slide {
        padding: 5px;
    }

.product-summary {
    margin-bottom: 40px;
}


/**
 *  contact
 */

.form-control:focus {
    box-shadow: 0 0 0 .2rem rgb(255 230 163 / 25%);
    border-color: var(--secondary-color);
}

/**
 *  about
 */

.bg-gray {
    background: #eeeeee;
}

.page-about {
    font-size: 18px;
    line-height: 2;
}
.block-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}
.block-title {
    font-size: 45px;
    font-weight: 400;
    margin-bottom: 50px;
}
.block-subtitle {
    font-size: 27px;
    font-weight: 400;
    margin-bottom: 20px;
}
.about-values .icon-info {
    background: #ffffff;
    padding: 60px;
    border-radius: 15px;
}
.about-values .icon-info__item {
    display: flex;
    align-items: flex-start;
}
.about-values .icon-info__item:not(:last-child) {
    margin-bottom: 60px;
}
.about-values .icon-info__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    font-size: 42px;
    margin-right: 30px;
    margin-top: 5px;
    color: #2290ff;
    flex-shrink: 0;
}
.about-values .icon-info__title {
    font-size: 24px;
    margin-bottom: 10px;
}
.about-values .icon-info__text {
    font-size: 18px;
}

.about-vision .text-box {
    position: relative;
    margin-top: 20px;
    margin-bottom: 40px;
    padding-left: 30px;
}
.about-vision .text-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: #2290ff;
    border-radius: 3px;
}
.about-vision .text-box:nth-child(2) {
    margin-left: 40px;
}
.about-vision .text-box:nth-child(3) {
    margin-left: 80px;
}
.about-vision .text-box__title {
    font-size: 24px;
    margin-bottom: 12px;
    font-size: 400;
}

.about-brands .image-box {
    border-radius: 5px;
    overflow: hidden;
    display: none !important;
}
.about-brands .image-card {
    margin-bottom: 60px;
}
.about-brands .image-card__caption {
    margin-top: 20px;
}
.about-brands .image-card__title {
    font-weight: 400;
    font-size: 24px;
    margin-bottom: 15px;
}

@media(max-width: 991px) {
    .about-concept {
        padding-top: 0;
    }
    .about-values .icon-info {
        padding: 40px 30px;
    }
    .about-vision .text-box {
        margin-left: 0 !important;
    }
}

.about-team-culture .content-wrapper {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
}
.about-team-culture .figure {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.about-team-culture .sector-wrapper {
    position: relative;
    width: 24vw;
    height: 24vw;
}
.about-team-culture .sector {
    position: absolute;
    width: 50%;
    height: 50%;
}
.about-team-culture .sector .sector-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.about-team-culture .sector img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0.5;
}
.about-team-culture .sector i {
    position: relative;
    z-index: 3;
    font-size: 32px;
    color: #2290ff;
}
.about-team-culture .sector1 {
    top: -6px;
    left: -6px;
}
.about-team-culture .sector2 {
    top: -6px;
    right: -6px;
}
.about-team-culture .sector3 {
    bottom: -6px;
    left: -6px;
}
.about-team-culture .sector4 {
    bottom: -6px;
    right: -6px;
}
.about-team-culture .text-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.about-team-culture .text-content.row-1 {
    margin-bottom: 80px;
}
.about-team-culture .text-content.row-2 {
    margin-top: 120px;
}
.about-team-culture .text-box {
    width: calc((100% - 24vw) /2);
}
.about-team-culture .text-box.left {
    text-align: right;
    padding-right: 40px;
}
.about-team-culture .text-box.right {
    padding-left: 40px;
}
.about-team-culture .text-box__icon {
    display: none;
}
.about-team-culture .text-box__title {
    font-weight: 400;
    margin-bottom: 15px;
    font-size: 24px;
}
@media(max-width: 991px) {
    .about-team-culture .content-wrapper {
        padding-top: 0;
        padding-bottom: 0;
        text-align: center;
    }
    .about-team-culture .figure {
        position: relative;
        top: unset;
        left: unset;
        transform: none;
        margin-bottom: 80px;
    }
    .about-team-culture .sector-wrapper {
        width: 75vw;
        height: 75vw;
        max-width: 500px;
        max-height: 500px;
    }
    .about-team-culture .text-box {
        width: 100%;
        text-align: left !important;
        padding: 0 !important;
        margin-bottom: 40px;
        display: flex;
        align-items: flex-start;
    }
    .about-team-culture .text-content.row-1,
    .about-team-culture .text-content.row-2 {
        margin-top: 0;
        margin-bottom: 0;
    }
    .about-team-culture .text-box__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 24px;
        margin-right: 20px;
        background: #f2f2f2;
        border: 1px solid #ddd;
        width: 40px;
        height: 40px;
        color: #2290ff;
        border-radius: 5px;
    }
}

/* timeline */
.timeline-horizontal {
    position: relative;
    display: flex;
    justify-content: space-around;
}
.timeline-horizontal::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background: #ddd;
}
.timeline-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 130px;
    line-height: 2;
}
.timeline-date {
    font-size: 20px;
}
.timeline-num {
    position: absolute;
    top: calc(100% + 35px);
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border: 1px solid #999;
    background: #f2f2f2;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}
.timeline-num::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 35px;
    background: #999;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
}
.timeline-horizontal .timeline-item:nth-child(even) {
    display: flex;
    margin-top: 240px;
    margin-bottom: 0;
    padding-top: 20px;
}
    .timeline-horizontal .timeline-item:nth-child(even) .timeline-num {
        top: -75px;
    }
    .timeline-horizontal .timeline-item:nth-child(even) .timeline-num::before {
        top: 100%;
    }

.timeline-vertical {
    position: relative;
}
.timeline-vertical::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    width: 1px;
    height: 100%;
    background: #999;
}
.timeline-vertical .timeline-item {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    margin-top: 0;
}
.timeline-vertical .timeline-num {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
}
.timeline-vertical .timeline-num::before {
    top: 50%;
    left: 100%;
    transform: translate(0, -50%);
    width: 35px;
    height: 1px;
}
.timeline-vertical .timeline-info {
    padding-left: 50px;
}
.history-section-4 .info {
    display: flex;
}
.history-section-4 .info-num {
    width: 40px;
    height: 40px;
    border: 1px solid #999;
    background: #f2f2f2;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    margin-right: 30px;
}
.history-section-6 {
    background: #6a5848;
    color: #ffffff;
}
.history-section-7 .info {
    display: flex;
    margin-bottom: 30px;
}
.history-section-7 .info-icon {
    width: 40px;
    height: 40px;
    color: #2290ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 36px;
    margin-right: 30px;
}

@media(max-width: 991px) {
    .history-section-1 {
        padding-top: 0;
    }
    .timeline-horizontal {
        flex-direction: column;
        justify-content: flex-start;
        padding: 0;
        
    }
    .timeline-horizontal::before {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        width: 1px;
        height: 90%;
        background: #999;
        transform: none;
    }
    .timeline-horizontal .timeline-item {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
        padding-top: 0 !important;
        height: auto;
    }
    .timeline-horizontal .timeline-num {
        position: relative;
        left: 0;
        top: 0 !important;
        transform: none;
    }
    .timeline-horizontal .timeline-num::before {
        top: 50% !important;
        left: 100%;
        transform: translate(0, -50%);
        width: 35px;
        height: 1px;
    }
    .timeline-horizontal .timeline-info {
        padding-left: 50px;
    }
}