/*
Template Name: Florix
Template URI: 
Description: Flooring & Tilling Services HTML Template 
Author: Capricorn Studio
Author URI: 
Version: 1.0
 */
/*-- TABLE OF CONTENTS 
-----------------------

    01. Google Font Import
    02. Default CSS
    03. Section Padding 
    04. Section Title  
    05. Button  
    06. Form 
    07. Bootstrap Customize 
    08. Bacground Color & Overlay
    09. Custom Animation
    10. Margin & Padding 
    11. Preloader
    12. Mouse Cursor
    13. Search Form 

    14. Header Area
    15. Main Menu 
    16. Mobile Menu  
    17. Off Canvas Menu

    18. Hero Area CSS
    19. Service CSS
    20. About CSS
    21. Project CSS
    22. Process CSS
    23. serv-after CSS
    24. Team CSS
    25. news CSS
    26. CTA CSS
    27. Counter CSS
    28. Footer Area CSS
    29. Breadcrumb CSS
    30. Gallery CSS
    31. Timeline CSS
    32. Price CSS
    33. FAQ CSS

--------------------*/
/*-- 01. Google Font Import 
----------------------------*/

html,
body {
    height: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    font-family: "Jost", sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    position: relative;
    z-index: 1;
    background: #fff;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    color: #181818;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    margin: 0;
}

a {
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    color: #181818;
}

    a:hover {
        color: #1D1D1D;
    }

p {
    font-family: "Jost", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    position: relative;
    /* color: #797C7F;*/
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    p {
        font-size: 16px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    p {
        font-size: 16px;
        line-height: 26px;
    }
}

@media (max-width: 767px) {
    p {
        font-size: 15px;
        line-height: 24px;
    }
}

button,
input,
textarea,
a:hover,
a:focus,
a:visited {
    text-decoration: none;
    outline: none;
    outline-width: 0 !important;
}

    input:focus::-webkit-input-placeholder,
    textarea:focus::-webkit-input-placeholder {
        color: transparent;
    }

img {
    display: inline-block;
    max-width: 100%;
}

i,
span,
a {
    display: inline-block;
}

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

table,
th,
tr,
td {
    border: 1px solid #ddd;
}

th,
tr,
td {
    padding: 10px;
}

hr {
    border-top: 1px solid #777;
}

.fix {
    overflow: hidden;
}

.banner-bg {
    background: #c3c3c3;
}

.navbar-brand img {
    height: 64px;
}

/*浏览器滑动条*/
::-webkit-scrollbar-track-piece {
    width: 5px;
    background-color: #f2f2f2;
    border-radius: 50px
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-thumb {
    height: 50px;
    background: #c1c1c1;
    border-radius: 50px
}

    ::-webkit-scrollbar-thumb:hover {
        background: #023174;
        cursor: pointer
    }



/*-- 03.Section Padding CSS
---------------------------*/
.section-padding {
    padding: 120px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .section-padding {
        padding: 100px 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-padding {
        padding: 90px 30px;
    }
}

@media (max-width: 767px) {
    .section-padding {
        padding: 30px 10px;
    }

    .navbar-brand img {
        height: 56px;
    }
}


/*-- 04. Section Title 
----------------------*/
.section-title {
    position: relative;
    margin-bottom: 30px;
}

.section-des {
    color: #666666;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-title {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .section-title {
        margin-bottom: 20px;
    }
}

.section-title h1 {
    font-size: 85px;
    font-weight: 400;
    line-height: 90px;
    letter-spacing: -3px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .section-title h1 {
        font-size: 70px;
        line-height: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-title h1 {
        font-size: 60px;
        line-height: 70px;
    }
}

@media (max-width: 767px) {
    .section-title h1 {
        font-size: 30px;
        line-height: 35px;
        letter-spacing: -1px;
    }
}

.section-title h2 {
    font-size: 55px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: -2px;
    color: #023174;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .section-title h2 {
        font-size: 45px;
        line-height: 50px;
        margin: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-title h2 {
        font-size: 45px;
        line-height: 50px;
        margin: 0;
    }
}

@media (max-width: 767px) {
    .section-title h2 {
        font-size: 30px;
        line-height: 35px;
        margin: 15px 0;
        letter-spacing: -1px;
    }
}

.section-title h3 {
    font-size: 30px;
    line-height: 40px;
    color: #023174;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .section-title h3 {
        font-size: 30px;
        line-height: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-title h3 {
        font-size: 36px;
        line-height: 40px;
    }
}

@media (max-width: 767px) {
    .section-title h3 {
        font-size: 24px;
        line-height: 30px;
    }
}

.section-title h6 {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

    .section-title h6.pill {
        background: #eee;
        display: inline-block;
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 14px;
    }

.section-title p {
    margin: 0;
}

.section-title img {
    border-radius: 0;
    height: 50px;
    position: relative;
    bottom: 0;
}

@media (max-width: 767px) {
    .section-title img {
        height: 40px;
    }
}

.section-title span {
    color: #023174;
}

/*--05. Button Style 
--------------------*/
.theme-btn, .dark-btn, .white-btn, .bordered-btn {
    display: inline-flex;
    background: #023174;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-transform: capitalize;
    padding: 18px 30px;
    border: 1px solid #023174;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

    .theme-btn:hover, .dark-btn:hover, .white-btn:hover {
        background: #1D1D1D;
        border-color: #1D1D1D;
        color: #fff;
    }

    .theme-btn i, .dark-btn i, .white-btn i, .bordered-btn i {
        font-size: 20px;
        margin-left: 7px;
        transform: rotate(-45deg);
    }

.bordered-btn {
    /* background: transparent;*/
    border-color: #181818;
    color: #181818;
    display: inline-block;
    background-color: #5764ec;
    background-image: linear-gradient(135deg, #023174 0%, #023174 50%, #ffffff 50%, #ffffff 100%);
    background-position: right center;
    text-align: center;
    text-decoration: none;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: color, background;
    transition-property: color, background;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    background-size: 270% auto;
}

    .bordered-btn:hover {
        border-color: #023174;
        color: #fff;
        background-position: left center;
        -webkit-box-shadow: unset !important;
        -moz-box-shadow: unset !important;
        box-shadow: unset !important;
    }

.white-btn {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

    .white-btn:hover {
        background: #fff;
        border-color: #fff;
        color: #333;
    }

.dark-btn {
    background: #1D1D1D;
    border-color: #1D1D1D;
    color: #fff;
}

    .dark-btn:hover {
        background: #fff;
        color: #333;
        border-color: #fff;
    }


@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .theme-btn, .dark-btn, .white-btn, .bordered-btn {
        padding: 15px 20px;
    }
}

@media (max-width: 767px) {
    .theme-btn, .dark-btn, .white-btn, .bordered-btn {
        padding: 8px 10px;
        font-size: 14px;
    }

        .theme-btn i, .dark-btn i, .white-btn i, .bordered-btn i {
            font-size: 16px;
        }
}



/*--06. Form Style CSS 
----------------------*/
input,
textarea,
select {
    width: 100%;
    background: transparent;
    border: 1px solid #ddd;
    padding: 13px 20px;
    font-size: 14px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

textarea {
    height: 200px;
}

input[type=submit],
button[type=submit] {
    background: #023174;
    border-color: #023174;
    border-radius: 0;
    display: inline-block;
    color: #fff;
    width: 35%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
}

@media (max-width: 767px) {
    input[type=submit],
    button[type=submit] {
        width: 100%;
    }
}

input[type=submit]:hover,
button[type=submit]:hover {
    border-color: rgb(203, 103, 30);
    background: rgb(203, 103, 30);
    color: #fff;
}

input::placeholder,
textarea::placeholder {
    font-size: 16px;
    font-weight: 400;
}

input.form-control {
    padding: 12px 20px;
    line-height: 1.2;
}

/*--07. Bootstrap Customize CSS
--------------------------------*/
@media (max-width: 767px) {
    .container-fluid {
        padding: 0 10px;
    }
}

.container {
    max-width: 1440px;
}

.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none;
}

/* -- 08. Bacground Color & Overlay CSS 
--------------------------------------- */
.theme-bg {
    background: #023174;
}

.theme-bg {
    background: #023174;
}

.dark-bg {
    background: #1D1D1D;
}

.gray-bg {
    /* background: #f6f9fa;*/
    background: linear-gradient(to bottom, #e9edf3 0%, #f6f9fa 45%, #ffffff 100%);
}

.white-bg {
    background: #fff;
}

.bg-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.overlay, .overlay-5, .overlay-4, .overlay-3, .overlay-2 {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.1;
    top: 0;
    left: 0;
    z-index: -1;
}

.overlay-2 {
    opacity: 0.2;
}

.overlay-3 {
    opacity: 0.3;
}

.overlay-4 {
    opacity: 0.4;
}

.overlay-5 {
    opacity: 0.5;
}

.overlay.active, .active.overlay-2, .active.overlay-3, .active.overlay-4, .active.overlay-5 {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    background-color: #000;
    z-index: 99;
    opacity: 0.5;
    visibility: visible;
}

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

.text-white {
    color: #fff !important;
}

.fix {
    overflow: hidden;
}

.separator {
    display: block;
    background-color: #ddd;
    width: 30px;
    height: 3px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.b-none {
    border: none !important;
}

@media (max-width: 767px) {
    p.pt-20 {
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    p.pt-40 {
        padding-top: 0;
    }
}

.col-6.pt-m-60 {
    margin-top: -30px;
}

/* clears the ‘X’ from Chrome */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    display: none;
}

/* -- 09. Custom Animation 
--------------------------*/
.img-custom-anim-left {
    animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
}

@keyframes img-anim-left {
    0% {
        transform: translateX(-5%);
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.img-custom-anim-right {
    animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
}

@keyframes img-anim-right {
    0% {
        transform: translateX(5%);
        clip-path: inset(0 0 0 100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.img-custom-anim-left {
    animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
}

@keyframes img-anim-left {
    0% {
        transform: translateX(-5%);
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.img-custom-anim-top {
    animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
}

@keyframes img-anim-top {
    0% {
        transform: translateY(-5%);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.img-custom-anim-bottom {
    animation: img-anim-bottom 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
}

@keyframes img-anim-bottom {
    0% {
        transform: translateY(5%);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
/*--10. Margin & Padding 
--------------------------*/
.pt-0 {
    padding-top: 0;
}

.pb-0 {
    padding-bottom: 0;
}

.pt-15 {
    padding-top: 15px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pt-25 {
    padding-top: 25px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pt-35 {
    padding-top: 35px;
}

.pb-35 {
    padding-bottom: 35px;
}

.pt-40 {
    padding-top: 40px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pt-45 {
    padding-top: 45px;
}

.pb-45 {
    padding-bottom: 45px;
}

.pt-50 {
    padding-top: 50px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pt-55 {
    padding-top: 55px;
}

.pb-55 {
    padding-bottom: 55px;
}

.pt-60 {
    padding-top: 60px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pt-65 {
    padding-top: 65px;
}

.pb-65 {
    padding-bottom: 65px;
}

.pt-70 {
    padding-top: 70px;
}

.pb-70 {
    padding-bottom: 70px;
}

.pt-75 {
    padding-top: 75px;
}

.pb-75 {
    padding-bottom: 75px;
}

.pt-80 {
    padding-top: 80px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pt-85 {
    padding-top: 85px;
}

.pb-85 {
    padding-bottom: 85px;
}

.pt-90 {
    padding-top: 90px;
}

.pb-90 {
    padding-bottom: 90px;
}

.pt-95 {
    padding-top: 95px;
}

.pb-95 {
    padding-bottom: 95px;
}

.pt-100 {
    padding-top: 100px;
}

.pb-100 {
    padding-bottom: 100px;
}

.pt-110 {
    padding-top: 110px;
}

.pb-110 {
    padding-bottom: 110px;
}

.pt-120 {
    padding-top: 120px;
}

.pb-120 {
    padding-bottom: 120px;
}

.pt-130 {
    padding-top: 130px;
}

.pb-130 {
    padding-bottom: 130px;
}

.pt-140 {
    padding-top: 140px;
}

.pb-140 {
    padding-bottom: 140px;
}

.pt-150 {
    padding-top: 150px;
}

.pb-150 {
    padding-bottom: 150px;
}

.pt-160 {
    padding-top: 160px;
}

.pb-160 {
    padding-bottom: 160px;
}

.pt-170 {
    padding-top: 170px;
}

.pb-170 {
    padding-bottom: 170px;
}

.pt-180 {
    padding-top: 180px;
}

.pb-180 {
    padding-bottom: 180px;
}

.pt-190 {
    padding-top: 190px;
}

.pb-190 {
    padding-bottom: 190px;
}

.pt-200 {
    padding-top: 200px;
}

.pb-200 {
    padding-bottom: 200px;
}

.pt-300 {
    padding-top: 300px;
}

.pb-300 {
    padding-bottom: 300px;
}

.pt-400 {
    padding-top: 400px;
}

.pb-400 {
    padding-bottom: 400px;
}

.pl-10 {
    padding-left: 10px;
}

.pr-10 {
    padding-right: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pr-15 {
    padding-right: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pr-20 {
    padding-right: 20px;
}

.pl-25 {
    padding-left: 25px;
}

.pr-25 {
    padding-right: 25px;
}

.pl-30 {
    padding-left: 30px;
}

.pr-30 {
    padding-right: 30px;
}

.pl-35 {
    padding-left: 35px;
}

.pr-35 {
    padding-right: 35px;
}

.pl-40 {
    padding-left: 40px;
}

.pr-40 {
    padding-right: 40px;
}

.pl-45 {
    padding-left: 45px;
}

.pr-45 {
    padding-right: 45px;
}

.pl-45 {
    padding-left: 45px;
}

.pr-45 {
    padding-right: 45px;
}

.pl-50 {
    padding-left: 50px;
}

.pr-50 {
    padding-right: 50px;
}

.pl-55 {
    padding-left: 55px;
}

.pr-55 {
    padding-right: 55px;
}

.pl-60 {
    padding-left: 60px;
}

.pr-60 {
    padding-right: 60px;
}

.pl-65 {
    padding-left: 65px;
}

.pr-65 {
    padding-right: 65px;
}

.pl-70 {
    padding-left: 70px;
}

.pr-70 {
    padding-right: 70px;
}

.pl-75 {
    padding-left: 75px;
}

.pr-75 {
    padding-right: 75px;
}

.pl-80 {
    padding-left: 80px;
}

.pr-80 {
    padding-right: 80px;
}

.pl-85 {
    padding-left: 85px;
}

.pr-85 {
    padding-right: 85px;
}

.pl-90 {
    padding-left: 90px;
}

.pr-90 {
    padding-right: 90px;
}

.pl-95 {
    padding-left: 95px;
}

.pr-95 {
    padding-right: 95px;
}

.pl-100 {
    padding-left: 100px;
}

.pr-100 {
    padding-right: 100px;
}

.pl-150 {
    padding-left: 150px;
}

.pr-150 {
    padding-right: 150px;
}

.pl-200 {
    padding-left: 200px;
}

.pr-200 {
    padding-right: 200px;
}

.pl-250 {
    padding-left: 250px;
}

.pr-250 {
    padding-right: 250px;
}

.pl-300 {
    padding-left: 300px;
}

.pr-300 {
    padding-right: 300px;
}

.pl-350 {
    padding-left: 350px;
}

.pr-350 {
    padding-right: 350px;
}

.pl-400 {
    padding-left: 400px;
}

.pr-400 {
    padding-right: 400px;
}

.pl-450 {
    padding-left: 450px;
}

.pr-450 {
    padding-right: 450px;
}

.pl-500 {
    padding-left: 500px;
}

.pr-500 {
    padding-right: 500px;
}

.mt-10 {
    margin-top: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-35 {
    margin-top: 35px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-45 {
    margin-top: 45px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mt-50 {
    margin-top: 50px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mt-55 {
    margin-top: 55px;
}

.mb-55 {
    margin-bottom: 55px;
}

.mt-60 {
    margin-top: 60px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mt-65 {
    margin-top: 65px;
}

.mb-65 {
    margin-bottom: 65px;
}

.mt-70 {
    margin-top: 70px;
}

.mb-70 {
    margin-bottom: 70px;
}

.mt-75 {
    margin-top: 75px;
}

.mb-75 {
    margin-bottom: 75px;
}

.mt-80 {
    margin-top: 80px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mt-85 {
    margin-top: 85px;
}

.mb-85 {
    margin-bottom: 85px;
}

.mt-90 {
    margin-top: 90px;
}

.mb-90 {
    margin-bottom: 90px;
}

.mt-95 {
    margin-top: 95px;
}

.mb-95 {
    margin-bottom: 95px;
}

.mt-100 {
    margin-top: 100px;
}

.mb-100 {
    margin-bottom: 100px;
}

.mt-110 {
    margin-top: 110px;
}

.mb-110 {
    margin-bottom: 110px;
}

.mt-120 {
    margin-top: 120px;
}

.mb-120 {
    margin-bottom: 120px;
}

.mt-130 {
    margin-top: 130px;
}

.mb-130 {
    margin-bottom: 130px;
}

.mt-140 {
    margin-top: 140px;
}

.mb-140 {
    margin-bottom: 140px;
}

.mt-150 {
    margin-top: 150px;
}

.mb-150 {
    margin-bottom: 150px;
}

.mt-160 {
    margin-top: 160px;
}

.mb-160 {
    margin-bottom: 160px;
}

.mt-170 {
    margin-top: 170px;
}

.mb-170 {
    margin-bottom: 170px;
}

.mt-180 {
    margin-top: 180px;
}

.mb-180 {
    margin-bottom: 180px;
}

.mt-190 {
    margin-top: 190px;
}

.mb-190 {
    margin-bottom: 190px;
}

.mt-200 {
    margin-top: 200px;
}

.mb-200 {
    margin-bottom: 200px;
}

.mt-250 {
    margin-top: 250px;
}

.mb-250 {
    margin-bottom: 250px;
}

.mt-300 {
    margin-top: 300px;
}

.mb-300 {
    margin-bottom: 300px;
}

.mt-350 {
    margin-top: 350px;
}

.mb-350 {
    margin-bottom: 350px;
}

.mt-400 {
    margin-top: 400px;
}

.mb-400 {
    margin-bottom: 400px;
}

.mt-450 {
    margin-top: 450px;
}

.mb-450 {
    margin-bottom: 450px;
}

.mt-500 {
    margin-top: 500px;
}

.mb-500 {
    margin-bottom: 500px;
}

.ml-10 {
    margin-left: 10px;
}

.mr-10 {
    margin-right: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.mr-15 {
    margin-right: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.mr-20 {
    margin-right: 20px;
}

.ml-25 {
    margin-left: 25px;
}

.mr-25 {
    margin-right: 25px;
}

.ml-30 {
    margin-left: 30px;
}

.mr-30 {
    margin-right: 30px;
}

.ml-35 {
    margin-left: 35px;
}

.mr-35 {
    margin-right: 35px;
}

.ml-40 {
    margin-left: 40px;
}

.mr-40 {
    margin-right: 40px;
}

.ml-45 {
    margin-left: 45px;
}

.mr-45 {
    margin-right: 45px;
}

.ml-45 {
    margin-left: 45px;
}

.mr-45 {
    margin-right: 45px;
}

.ml-50 {
    margin-left: 50px;
}

.mr-50 {
    margin-right: 50px;
}

.ml-55 {
    margin-left: 55px;
}

.mr-55 {
    margin-right: 55px;
}

.ml-60 {
    margin-left: 60px;
}

.mr-60 {
    margin-right: 60px;
}

.ml-65 {
    margin-left: 65px;
}

.mr-65 {
    margin-right: 65px;
}

.ml-70 {
    margin-left: 70px;
}

.mr-70 {
    margin-right: 70px;
}

.ml-75 {
    margin-left: 75px;
}

.mr-75 {
    margin-right: 75px;
}

.ml-80 {
    margin-left: 80px;
}

.mr-80 {
    margin-right: 80px;
}

.ml-85 {
    margin-left: 85px;
}

.mr-85 {
    margin-right: 85px;
}

.ml-90 {
    margin-left: 90px;
}

.mr-90 {
    margin-right: 90px;
}

.ml-95 {
    margin-left: 95px;
}

.mr-95 {
    margin-right: 95px;
}

.ml-100 {
    margin-left: 100px;
}

.mr-100 {
    margin-right: 100px;
}

.ml-150 {
    margin-left: 150px;
}

.mr-150 {
    margin-right: 150px;
}

.ml-200 {
    margin-left: 200px;
}

.mr-200 {
    margin-right: 200px;
}

.ml-250 {
    margin-left: 250px;
}

.mr-250 {
    margin-right: 250px;
}

.ml-300 {
    margin-left: 300px;
}

.mr-300 {
    margin-right: 300px;
}

.ml-350 {
    margin-left: 350px;
}

.mr-350 {
    margin-right: 350px;
}

.ml-400 {
    margin-left: 400px;
}

.mr-400 {
    margin-right: 400px;
}

.ml-450 {
    margin-left: 450px;
}

.mr-450 {
    margin-right: 450px;
}

.ml-500 {
    margin-left: 500px;
}

.mr-500 {
    margin-right: 500px;
}

.mtm-30 {
    margin-top: -30px;
}


/*START: Theme Preloder CSS*/

.preloader {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: default;
    position: fixed;
    z-index: 9999999;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #e9ecef;
}

    .preloader .tj-header-btn {
        position: absolute;
        top: 15px;
        right: 15px;
    }

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .preloader .tj-header-btn {
        padding: 10px 15px 10px 15px;
    }
}

.preloader .animation-preloader {
    z-index: 1000;
}

    .preloader .animation-preloader .spinner {
        position: absolute;
        top: 40%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        border: 3px solid #bcbcbc;
        border-radius: 50%;
        text-align: center;
        line-height: 138px;
    }

        .preloader .animation-preloader .spinner::before {
            position: absolute;
            content: "";
            display: block;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 150px;
            height: 150px;
            border-top: 3px solid #023174;
            border-radius: 50%;
            animation: loaderspin 1.8s infinite ease-in-out;
            -webkit-animation: loaderspin 1.8s infinite ease-in-out;
        }

        .preloader .animation-preloader .spinner .loader-icon img {
            width: 90%;
        }


    .preloader .animation-preloader .txt-loading {
        font-size: 80px;
        line-height: 118px;
        text-align: center;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-weight: 700;
        margin-top: 170px;
    }

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .preloader .animation-preloader .txt-loading {
        font-size: 60px;
        line-height: 95px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .preloader .animation-preloader .txt-loading {
        font-size: 50px;
        line-height: 85px;
        margin-top: 120px;
    }
}

@media (max-width: 575px) {
    .preloader .animation-preloader .txt-loading {
        font-size: 28px;
        line-height: 65px;
        margin-top: 100px;
    }
}

.preloader .animation-preloader .txt-loading .letters-loading {
    color: #bcbcbc;
    position: relative;
}

    .preloader .animation-preloader .txt-loading .letters-loading::before {
        -webkit-animation: letters-loading 4s infinite;
        animation: letters-loading 4s infinite;
        color: #023174;
        content: attr(data-text-preloader);
        left: 1px;
        opacity: 0;
        position: absolute;
        top: -1px;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(2)::before {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(3)::before {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(4)::before {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(5)::before {
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(6)::before {
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(7)::before {
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(8)::before {
        -webkit-animation-delay: 1.4s;
        animation-delay: 1.4s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(9)::before {
        -webkit-animation-delay: 1.6s;
        animation-delay: 1.6s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(10)::before {
        -webkit-animation-delay: 1.8s;
        animation-delay: 1.8s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(11)::before {
        -webkit-animation-delay: 2.0s;
        animation-delay: 2.0s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(12)::before {
        -webkit-animation-delay: 2.2s;
        animation-delay: 2.2s;
    }

    .preloader .animation-preloader .txt-loading .letters-loading:nth-child(13)::before {
        -webkit-animation-delay: 2.4s;
        animation-delay: 2.4s;
    }

@-webkit-keyframes letters-loading {
    0%, 75%, 100% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    25%, 50% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes letters-loading {
    0%, 75%, 100% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    25%, 50% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes loaderspin {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@-webkit-keyframes loaderspin {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@-webkit-keyframes loaderpulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes loaderpulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}
/* !END: Theme Preloder CSS */
/**----------------------------------------


/* --11. Preloader
------------------*/
#loader {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 1000;
    -webkit-transition: 0.3s ease opacity;
    transition: 0.3s ease opacity;
}

    #loader:before, #loader:after {
        content: "";
        width: 80px;
        height: 80px;
        border: 2px solid #023174;
        display: block;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: 0;
        transform: translate(-50%, -50%);
        animation-name: loaderCircleAnim;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    #loader:after {
        animation-delay: 1s;
    }




/* --列表页下拉
------------------*/

.increase-more {
    position: relative;
    margin-top: 30px;
    left: 50%;
    transform: translateX(-50%) !important;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    text-align: center;
    width: 188px;
    height: 54px;
    line-height: 54px;
    background-color: #023174;
    border: 1px solid #023174;
    transition: all 0.5s;
    overflow: hidden;
}

    .increase-more::after {
        position: absolute;
        content: "";
        display: block;
        width: 188px;
        height: 54px;
        line-height: 54px;
        bottom: 0;
        background-color: #edf2f7;
        transform: skewX(45deg) scale(0,2);
        z-index: -1;
        transition: all .5s ease-out 0s;
    }

    .increase-more:hover::after {
        transform: skewX(45deg) scale(1,2)
    }

    .increase-more:hover {
        transition: all 0.5s;
        color: #023174;
        background: #edf2f7;
        border: 1px solid #023174;
    }


    .increase-more i {
        margin-left: 4px;
    }



/* --面包屑导航
------------------*/
.page-cru {
    font-size: 16px;
    color: #757575;
    padding: 30px 0;
    background: #eeeeee;
}

    .page-cru span {
        font-size: 20px;
        margin: 0 10px;
    }

    .page-cru i {
        font-size: 20px;
        margin-right: 6px;
    }

    .page-cru a {
        font-size: 16px;
        line-height: 18px;
        color: #757575;
        position: relative;
    }

        .page-cru a:last-child {
            color: #212529;
        }

        .page-cru a:hover {
            color: #023174;
        }

        .page-cru a:last-child:after {
            display: none;
        }

        .page-cru a:last-child {
            margin-right: 0px;
        }


@media only screen and (min-width: 768px) and (max-width: 991px) {
    .page-cru {
        padding: 20px 0;
    }

        .page-cru a {
            font-size: 15px;
        }
}

@media (max-width: 767px) {

    .page-cru {
        padding: 10px 0;
        display: none;
    }

        .page-cru a {
            font-size: 15px;
        }
}



/* --列表栏目导航
------------------*/

.list-menu {
    height: 99px;
    border-bottom: 1px solid #eeeeee;
}

.list-cru {
    line-height: 99px;
    float: right;
}

    .list-cru span {
        font-size: 16px;
        color: #666666;
        margin: 0 10px;
    }

    .list-cru a {
        font-size: 16px;
        color: #666666;
    }

        .list-cru a:hover {
            color: #023174;
        }

    .list-cru i {
        margin-right: 6px;
        font-size: 16px;
        color: #666666;
    }


.submenu {
    float: left;
}

    .submenu ul li {
        display: inline-block;
        margin-right: 70px;
        line-height: 99px;
        position: relative;
    }

        .submenu ul li a {
            font-size: 18px;
            color: #333333;
        }

            .submenu ul li a:hover {
                color: #023174;
            }

            .submenu ul li a:after {
                width: 0;
                height: 3px;
                background: #023174;
                display: block;
                content: "";
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -1px;
                transition: .5s;
                -moz-transition: .5s;
                -webkit-transition: .5s;
            }

            .submenu ul li a:hover:after {
                width: 100%;
            }

        .submenu ul li.active a {
            color: #023174;
            font-weight: bold;
        }

            .submenu ul li.active a:after {
                width: 100%;
            }


@media only screen and (min-width: 768px) and (max-width: 991px) {
    .list-menu {
        height: 80px;
    }

    .list-cru {
        line-height: 80px;
    }

    .submenu ul li {
        margin-right: 50px;
        line-height: 80px;
    }

        .submenu ul li a {
            font-size: 16px;
        }

        .submenu ul li.active a {
            font-size: 16px;
        }
}

@media (max-width: 767px) {

    .list-menu {
        height: 60px;
    }

    .list-cru {
        line-height: 60px;
        display: none;
    }

    .submenu ul li {
        margin-right: 15px;
        line-height: 60px;
    }

        .submenu ul li a {
            font-size: 16px;
        }


        .submenu ul li.active a {
            font-size: 15px;
        }
}


@keyframes loaderCircleAnim {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
    }

    10% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }

    80% {
        width: 60px;
        height: 60px;
        opacity: 0.1;
    }

    100% {
        width: 70px;
        height: 70px;
        opacity: 0;
    }
}
/* -- 12. Mouse Cursor 
-------------------*/
.mouseCursor {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: translateZ(0);
    visibility: hidden;
    text-align: center;
}

@media (max-width: 767px) {
    .mouseCursor {
        display: none;
    }
}

.cursor-outer {
    margin-left: -20px;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    z-index: 10000000;
    opacity: 0.5;
    transition: all 0.08s ease-out;
}

.cursor-inner {
    margin-left: -3px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    z-index: 10000001;
    background-color: #023174;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    margin: 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

    .cursor-inner span {
        color: #fff;
        line-height: 80px;
        opacity: 0;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 12px;
    }

    .cursor-inner.cursor-big span {
        opacity: 1;
    }

.mouseCursor.cursor-big {
    width: 80px;
    height: 80px;
}

    .mouseCursor.cursor-big.cursor-outer {
        display: none;
    }

.tp-cursor-point-area {
    cursor: none;
}

/*-- 13. Search Form 
--------------------*/
.search-box button {
    text-decoration: none;
    outline: none;
    outline-width: 0 !important;
    border: none;
    background: none;
    position: absolute;
    top: 32px;
    right: 10px;
    font-size: 20px;
}

    .search-box button:before {
        position: absolute;
        content: "";
        top: 50%;
        left: -40px;
        height: 40px;
        border-left: 2px solid #eee;
        margin-top: -20px;
    }

    .search-box button:hover {
        cursor: pointer;
    }

.search-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

    .search-popup .search-back-drop {
        position: absolute;
        :: -webkit-scrollbar left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

.search-active .search-popup {
    opacity: 1;
    visibility: visible;
}

.search-popup .search-inner {
    position: relative;
    background: #ffffff;
    padding: 45px 0;
    z-index: 1;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup .search-inner {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.search-popup .upper-text {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 15px;
}

    .search-popup .upper-text .text {
        font-family: "Jost", sans-serif;
        font-size: 18px;
        letter-spacing: 1px;
    }

.search-popup .close-search {
    position: absolute;
    right: 18%;
    top: 70px;
    font-size: 30px;
    line-height: 27px;
    cursor: pointer;
    z-index: 3;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    border: none;
    background: none;
    color: #023174;
}

.search-popup .form-group form {
    position: relative;
}

.search-popup .form-group {
    position: relative;
    margin: 0px;
    overflow: hidden;
    border-bottom: 1px solid #888E9B;
    width: 100%;
    padding-top: 60px;
}

    .search-popup .form-group .search {
        position: relative;
        display: block;
        font-size: 26px;
        line-height: 26px;
        color: #666666;
        padding: 10px;
        height: 45px;
        width: 100%;
        background-color: transparent;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
        border: none;
        margin-bottom: 5px;
    }

    .search-popup .form-group .submit {
        position: absolute;
        width: 45px;
        right: 0px;
        bottom: 5px;
        background: transparent !important;
        text-align: center;
        font-size: 24px;
        line-height: 45px;
        color: #023174;
        cursor: pointer;
        padding: 0;
        background: none;
        border: none;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
    }

.form-group input::placeholder {
    font-size: 30px;
    color: #888E9B;
}

/* 14. Header Area CSS */
.header-area .navigation {
    height: 100px;
    position: relative;
    z-index: 9;
    display: flex;
    align-items: center;
}

.header-area .header-inner-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-area .header-inner-box {
        justify-content: space-between;
    }
}

.header-area .header-inner-box .logo {
    height: 90px;
    display: flex;
    align-items: center;
    font-family: "Jost", sans-serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #1D1D1D;
}

.header-area .header-sticky .navigation {
    height: 100px;
}

.header-area.header-absolute1 .header-height {
    height: 100px;
}

@media (max-width: 767px) {

    .header-area .navigation {
        height: 66px;
    }

    .header-area .header-sticky .navigation {
        height: 66px;
    }

    .header-area.header-absolute1 .header-height {
        height: 66px;
    }

    .header-area .header-inner-box .logo {
        font-size: 30px;
        height: 66px;
    }
}

/* -- 15. Main Menu CSS  
-----------------------*/
.main-menu ul {
    line-height: 1;
}

    .main-menu ul > li {
        display: inline-block;
        line-height: 1;
        margin: 0 17px;
        position: relative;
    }

        .main-menu ul > li > a {
            display: inline-block;
            font-size: 17px;
            font-weight: 500;
            text-transform: capitalize;
            line-height: 1;
            padding: 40px 0;
            overflow: hidden;
            color: #181818;
        }

        .main-menu ul > li:hover > ul {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .main-menu ul > li > ul {
            position: absolute;
            top: 100%;
            width: 160px;
            background-color: #023174;
            left: 0;
            z-index: 999;
            box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.15);
            visibility: hidden;
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.5s ease-in-out;
            padding: 15px 0px;
        }

            .main-menu ul > li > ul li {
                display: block;
                margin-right: 0;
            }

                .main-menu ul > li > ul li a {
                    display: block;
                    color: #c6c8cb !important;
                    padding: 12px 15px;
                    font-size: 15px;
                    font-weight: 400;
                }

                    .main-menu ul > li > ul li a:hover {
                        color: #fff !important;
                    }

                    .main-menu ul > li > ul li a i {
                        transform: rotate(-45deg);
                        font-size: 15px;
                        position: absolute;
                        right: 20px;
                        bottom: 11px;
                        transition: 0.3s;
                    }

                    .main-menu ul > li > ul li a:hover i {
                        transform: rotate(0);
                    }

            .main-menu ul > li > ul ul {
                left: 100%;
                top: 0;
            }

    .main-menu ul li {
        position: relative;
    }

        .main-menu ul li a.navlink:before {
            position: absolute;
            content: "";
            bottom: 30px;
            left: 0;
            width: 0%;
            height: 2px;
            background: #171717;
            visibility: hidden;
            opacity: 0;
            transition: all 0.5s ease 0s;
        }

        .main-menu ul li a.navlink:hover:before {
            visibility: visible;
            opacity: 1;
            width: 100%;
        }

        .main-menu ul li.active {
            position: relative;
        }

            .main-menu ul li.active a {
                color: #1D1D1D;
            }

            .main-menu ul li.active:before {
                position: absolute;
                content: "";
                bottom: 30px;
                left: 0;
                width: 100%;
                height: 2px;
                background: #171717;
            }

    .main-menu ul > li > ul li a.active {
        color: #fff !important;
        position: relative;
        padding-left: 50px;
    }

        .main-menu ul > li > ul li a.active:before {
            position: absolute;
            content: "";
            bottom: 50%;
            left: 25px;
            width: 16px;
            height: 2px;
            background: #fff;
            margin-bottom: -1px;
            transition: 0.2s ease-out;
        }

.header-three .main-menu ul li a {
    color: #fff;
}

.header-three .main-menu ul li.active a {
    color: #fff;
}

/* -- 手机端导航
---------------------*/
.mobile-nav {
    display: none;
    position: fixed;
    right: -380px;
    top: 0;
    width: 248px;
    height: 100vh;
    scroll-behavior: smooth;
    overflow-y: scroll;
    transition: right 0.5s ease-in;
    background-color: #002c5f;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.15);
}

    .mobile-nav.show {
        right: -6px;
        display: inline-block;
    }

    .mobile-nav .close-nav {
        border: 0;
        background: transparent;
        color: #fff;
        border-radius: 30px;
        font-size: 30px;
        position: absolute;
        right: 10%;
        top: 3%;
    }

    .mobile-nav .sidebar-nav {
        margin-top: 60px;
    }

        .mobile-nav .sidebar-nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: transparent;
        }

        .mobile-nav .sidebar-nav .metismenu {
            display: flex;
            flex-direction: column;
        }


            .mobile-nav .sidebar-nav .metismenu span {
                display: block;
                color: #ffffff;
                width: 50%;
                height: 45px;
                position: absolute;
                top: 0;
                right: 0;
            }

            .mobile-nav .sidebar-nav .metismenu > li {
                position: relative;
                display: flex;
                flex-direction: column;
            }

            .mobile-nav .sidebar-nav .metismenu a {
                position: relative;
                display: block;
                padding: 10px 15px;
                transition: all 0.3s ease-out;
                text-decoration: none;
                color: #ffffff;
                outline-width: 0;
                font-size: 15px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 1px;
                border-bottom: 1px solid #3d668f;
            }

            .mobile-nav .sidebar-nav .metismenu ul li {
                display: block;
            }



            .mobile-nav .sidebar-nav .metismenu ul a {
                padding: 10px 15px 10px 35px;
                position: relative;
            }

                .mobile-nav .sidebar-nav .metismenu ul a:hover {
                    padding-left: 40px;
                }

                    .mobile-nav .sidebar-nav .metismenu ul a:hover::before {
                        background-color: #fff;
                    }

                .mobile-nav .sidebar-nav .metismenu ul a::before {
                    position: absolute;
                    left: 15px;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    content: "";
                    top: 50%;
                    transition: all 0.3s ease-in-out;
                    transform: translateY(-50%);
                }

            .mobile-nav .sidebar-nav .metismenu ul ul {
                list-style-type: circle !important;
            }

                .mobile-nav .sidebar-nav .metismenu ul ul a {
                    padding: 10px 15px 10px 45px;
                    font-weight: 500;
                }

            .mobile-nav .sidebar-nav .metismenu a:hover,
            .mobile-nav .sidebar-nav .metismenu a:focus,
            .mobile-nav .sidebar-nav .metismenu a:active {
                text-decoration: none;
                color: #f8f9fa;
            }


@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mobile-nav {
        width: 350px;
    }
}

@media (max-width: 767px) {
    .mobile-nav {
        width: 260px;
    }
}

.header-area .container {
    background: #fff;
    background: transparent;
}

.hamburger {
    font-size: 32px;
    line-height: 1;
    text-align: right;
    display: none;
}

    .hamburger i {
        color: #ffffff;
        cursor: pointer;
    }


@media (max-width: 1199px) {
    .hamburger {
        display: inline-block;
        float: right;
    }
}

.action-bar {
    margin-top: 60px;
    padding-left: 20px;
}

    .action-bar a {
        color: #fff;
        display: block;
        margin-top: 12px;
        font-size: 16px;
    }

        .action-bar a i {
            margin-right: 10px;
        }

    .action-bar .theme-btn, .action-bar .bordered-btn, .action-bar .white-btn, .action-bar .dark-btn {
        margin-top: 30px;
        display: inline-block;
    }

.header-right {
    display: flex;
    align-items: center;
    justify-content: end;
}

    .header-right .search-trigger i {
        font-size: 24px;
        margin-right: 40px;
        position: relative;
        top: 2px;
    }

        .header-right .search-trigger i:hover {
            cursor: pointer;
        }

@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {

    .action-bar .theme-btn {
        background: #f8f9fa;
        color: #023174;
        padding: 10px 15px;
    }

    .header-right .search-trigger i {
        display: none;
    }

    .header-area:hover .hamburger i {
        color: #023174;
    }
}

.contact-number {
    align-items: center;
    gap: 15px;
    margin-right: 30px;
}

    .contact-number .icon i {
        font-size: 24px;
        background: #eee;
        width: 45px;
        height: 45px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .contact-number .title h4 {
        font-size: 22px;
        font-weight: 500;
    }

.social-area a i {
    font-size: 22px;
    color: #fff;
    margin-right: 20px;
}

.header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .menu-trigger {
        display: none;
    }

    .header-area {
        margin-top: 0;
    }
}

@media (max-width: 767px) {

    .header-btn {
        display: none;
    }

    .menu-trigger {
        display: none;
    }
}

.header-area.header-absolute {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 99;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.header-area.header-absolute1 {
    position: initial;
}

.header-fixed .main-menu ul > li > a {
    color: #fff;
}

.header-fixed .main-menu ul li a:before {
    background: #fff;
}

.header-fixed .main-menu ul li.active:before {
    background: #fff;
}

.header-fixed .search-trigger i {
    color: #fff;
}

.header-fixed .contact-number .title h4 {
    color: #fff;
}

.header-fixed .menu-trigger span {
    background: #fff;
}

.header-fixed .img-fixed {
    display: none;
}


.header-area .navigation {
    background: transparent;
    /*backdrop-filter: blur(25px);*/
    transition: 0.3s;
}

.header-area .logo {
    color: #fff;
}

.header-area .header-sticky .main-menu ul > li > a {
    color: #023174;
}

.header-area .header-sticky .main-menu ul li a:before {
    background: #fff;
}

.header-area .header-sticky .main-menu ul li.active:before {
    background: #023174;
}

.header-area .header-sticky .search-trigger i {
    color: #023174;
}

.header-area .header-sticky .contact-number .title h4 {
    color: #fff;
}

.header-area .header-sticky .hamburger i {
    color: #023174;
}

.header-area .header-sticky .img-fixed {
    display: block;
}

.header-area .header-sticky .img-sticky {
    display: none;
}

.header-area:hover .navigation {
    background: #ffffff;
    transition: 0.3s;
}

.header-area:hover .img-fixed {
    display: block;
}

.header-area:hover .img-sticky {
    display: none;
}

.header-area:hover .main-menu ul > li > a {
    color: #023174;
}

.header-area:hover .main-menu ul li a:before {
    background: #fff;
}

.header-area:hover .main-menu ul li.active:before {
    background: #023174;
}

.header-area:hover .search-trigger i {
    color: #023174;
}

.header-area:hover .contact-number .title h4 {
    color: #fff;
}

.header-area:hover .menu-trigger span {
    background: #023174;
}


.header-area .dark-btn,
.header-area .white-btn,
.header-area .bordered-btn {
    padding: 15px;
}


.main-menu {
    flex: 0 0 40%;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .main-menu {
        flex: 0 0 50%;
    }
}

@media (max-width: 767px) {
    .main-menu {
        flex: 0 0 0%;
    }
}

.main-menu ul > li {
    margin: 0 10px;
}

.logo {
    flex: 0 0 30%;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .logo {
        flex: 0 0 25%;
    }
}

@media (max-width: 767px) {
    .logo {
        flex: 0 0 50%;
    }
}

.header-right {
    flex: 0 0 20%;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .header-right {
        flex: 0 0 25%;
    }
}

@media (max-width: 767px) {
    .header-right {
        flex: 0 0 0%;
    }
}

.header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    opacity: 1;
    visibility: visible;
    width: 100%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    z-index: 999;
    transform: translateY(0); /* 确保固定在顶部 */
    transition: all 0.3s ease-in-out; /* 平滑过渡 */
}

@media (max-width: 767px) {
    .header-area .header-absolute1 .header-sticky {
        position: inherit;
    }
}


/* 17. Off Canvas Menu CSS */
.menu-trigger span {
    background-color: #333;
    display: block;
    height: 2px;
    margin: 8px auto;
    margin-left: 5px;
    width: 30px;
    transition: all 0.1s;
}

    .menu-trigger span:nth-child(2) {
        margin-left: 0px;
    }

.menu-trigger:hover span:nth-child(2) {
    margin-left: 5px;
}

.header-area .header-sticky .menu-trigger span {
    background: #023174;
}

.menu-trigger span:nth-child(2) {
    margin-left: 0px;
}

.off-canvas-menu {
    position: fixed;
    top: 0;
    right: -320px;
    background: #fff;
    box-shadow: -6px -3px 16px -8px rgba(0, 0, 0, 0.25);
    width: 350px;
    padding: 50px;
    height: 100%;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

    .off-canvas-menu.show-off-canvas-menu {
        right: 0;
        opacity: 1;
        visibility: visible;
    }

    .off-canvas-menu p {
        font-size: 16px;
        color: #b4afaf;
        font-weight: 400;
        position: absolute;
        bottom: 15px;
        opacity: 0.5;
    }

.menu-close {
    position: absolute;
    right: 25px;
    top: 50px;
    color: #777;
    padding: 7px;
    cursor: pointer;
    font-size: 30px;
    font-weight: 300;
}

    .menu-close:hover {
        color: #333;
    }

.extra-info {
    background: #023174 none repeat scroll 0 0;
    height: 100%;
    padding: 40px;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    width: 400px;
    z-index: 999;
    /*    overflow-y: scroll;*/
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
}

    .extra-info.active {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

.close-icon {
    margin-top: 0;
    text-align: right;
}

    .close-icon i {
        color: #fff;
        font-size: 30px;
    }


.logo-side img {
    width: 220px;
    padding-left: 18px;
}


.side-info {
    padding: 20px;
}

.contact-list h4 {
    color: #fff;
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 20px;
}

.contact-list p {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    margin: 10px 0;
}

    .contact-list p i {
        float: left;
        margin-top: 6px;
        width: 25px;
    }

    .contact-list p span {
        display: block;
        overflow: hidden;
    }

.offcanvas-overlay {
    position: fixed;
    background: #000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

    .offcanvas-overlay.active {
        opacity: 0.5;
        visibility: visible;
    }

.extra-info .site-logo-2 {
    width: 220px;
    text-align: center;
    margin-top: 20px;
}

.social-area-wrap a i {
    font-size: 16px;
    color: #023174;
}

.social-area-wrap a {
    width: 40px;
    height: 40px;
    background: #ffffff;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

    .social-area-wrap a:hover {
        opacity: 0.5;
    }

/* ------ 首页banner ------ */

.index-adv .single-slide-item {
    background-size: cover;
    background-position: center;
    /*background-image: url('../images/Loading.gif');*/
    background-color: #ddd;
    color: #fff;
    width: 100%;
    height: 880px;
    position: relative;
    z-index: 1;
}

.index-adv .hero-area-content {
    text-align: center;
    margin: auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .index-adv .hero-area-content {
        padding-left: 0;
        padding-top: 60px;
    }
}

@media (max-width: 767px) {
    .index-adv .hero-area-content {
        padding-left: 0;
        padding-top: 60px;
    }
}

@media (max-width: 767px) {
    .index-adv p.text-white br {
        display: none;
    }
}


@media only screen and (min-width: 1366px) and (max-width: 1680px) {
    .index-adv .single-slide-item, #home-2 .single-slide-item {
        height: 760px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    .index-adv .single-slide-item, #home-2 .single-slide-item {
        height: 650px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .index-adv .single-slide-item, #home-2 .single-slide-item {
        height: 520px;
    }
}

@media (max-width: 767px) {
    .index-adv .single-slide-item, #home-2 .single-slide-item {
        height: 680px;
    }
}



.homepage-slides .owl-nav button.owl-prev,
.homepage-slides .owl-nav button.owl-next {
    width: 50px;
    height: 50px;
    border: 2px solid;
    font-size: 20px;
    font-weight: 100;
    line-height: 16px;
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -25px;
    color: #023174;
    border-radius: 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.homepage-slides .owl-nav button.owl-next {
    left: auto;
    right: 15px;
}

.homepage-slides:hover .owl-nav button.owl-prev,
.homepage-slides:hover .owl-nav button.owl-next {
    visibility: visible;
    opacity: 0.3;
}

.homepage-slides .owl-nav button.owl-prev:hover,
.homepage-slides .owl-nav button.owl-next:hover {
    background: #023174;
    color: #fff;
    border-color: #023174;
    opacity: 1;
}

#home-2 .section-title h1 {
    font-size: 65px;
    line-height: 75px;
}

@media (max-width: 767px) {
    #home-2 .section-title h1 {
        font-size: 35px;
        line-height: 40px;
    }

        #home-2 .section-title h1 br {
            display: none;
        }
}

@media (max-width: 767px) {
    #home-2 p br {
        display: none;
    }
}

#home-3 .hero-slider-wrap {
    height: 100%;
}

#home-3 .single-slider-item img {
    height: 600px;
}

@media (max-width: 767px) {
    #home-3 .single-slider-item img {
        height: auto;
    }
}

#home-3 .hero-content-wrap {
    padding-left: 60px;
    padding-right: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    #home-3 .hero-content-wrap {
        padding-left: 30px;
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #home-3 .hero-content-wrap {
        padding-left: 60px;
        padding-right: 60px;
        margin-top: 60px;
    }
}

@media (max-width: 767px) {
    #home-3 .hero-content-wrap {
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 30px;
    }
}

#home-3 .section-title h2 {
    font-size: 50px;
    line-height: 55px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    #home-3 .section-title h2 {
        font-size: 35px;
        line-height: 45px;
    }
}


/* 产品列表页
-------------------------*/

.product-list-box {
    background: #ffffff;
}

    .product-list-box .product-list {
        float: left;
        padding: 0 15px 30px 15px;
        margin-bottom: 20px;
    }

    .product-list-box .single-product-item .single-inpro-flag {
        position: absolute;
        top: 2%;
        right: 5%;
        font-size: 16px;
        height: 26px;
        line-height: 24px;
        color: #023174;
        transition: all 0.5s;
    }

        .product-list-box .single-product-item .single-inpro-flag:before {
            position: absolute;
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            background: #023174;
            bottom: 0;
            left: 0;
            transition: .5s;
            -moz-transition: .5s;
            -webkit-transition: .5s;
        }


    .product-list-box .single-product-item:hover .single-inpro-flag:before {
        width: 0;
    }

    .product-list-box .single-product-item {
        position: relative;
        border-radius: 12px 12px 0 0;
        background: linear-gradient(to bottom, #e3e3e3 0%, #ffffff 100%);
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }

        .product-list-box .single-product-item:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            background: linear-gradient(to bottom, #e9edf3 0%, #ffffff 100%);
        }

        .product-list-box .single-product-item img {
            width: 100%;
            border-radius: 10px 10px 0 0;
            transition: all 0.5s;
            object-fit: cover;
            display: block;
        }

        .product-list-box .single-product-item:hover img {
            transform: scale(1.07);
            transition: all 0.5s;
        }

    .product-list-box .prolist-info-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        border-radius: 0 0 10px 10px;
        background: #023174;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        transition: all 0.5s;
    }

        .product-list-box .prolist-info-wrap span {
            color: #f0f0f0;
            margin-top: 6px
        }

        .product-list-box .prolist-info-wrap h5 {
            font-size: 22px;
            color: #ffffff;
            margin: 5px 0 10px 0;
        }


        .product-list-box .prolist-info-wrap .service-info-inner {
            border-radius: 12px;
            padding: 6px 40px;
            text-align: center;
            transition: background-color 0.5s ease;
        }


    .product-list-box .single-product-item:hover + .prolist-info-wrap {
        background: linear-gradient(to bottom, #e9edf3 100%, #ffffff 0%);
        border-top: none;
        transition: all 0.5s;
    }

        .product-list-box .single-product-item:hover + .prolist-info-wrap h5 {
            color: #181818;
            transition: all 0.5s;
        }

        .product-list-box .single-product-item:hover + .prolist-info-wrap span {
            color: #797C7F;
            transition: all 0.5s;
        }

@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .product-list-box .single-product-item .single-inpro-flag {
        top: 1%;
        right: 4%;
        font-size: 14px;
    }
}


@media only screen and (min-width: 768px) and (max-width: 991px) {

    .product-list-box .single-product-item .single-inpro-flag {
        top: 3%;
        right: 6%;
        font-size: 16px;
    }

    .product-list-box .product-list {
        padding: 10px;
        margin-bottom: 10px;
    }

    .product-list-box .single-product-item {
        padding: 10px;
    }
}

@media (max-width: 767px) {

    .product-list-box {
        padding: 30px 10px;
    }

        .product-list-box .product-list {
            padding: 8px;
            margin-bottom: 0;
        }

        .product-list-box .single-product-item {
            padding: 8px;
        }

            .product-list-box .single-product-item .single-inpro-flag {
                top: 2%;
                right: 6%;
                font-size: 12px;
                border-bottom: 0;
                background: none;
                color: #023174;
            }

        .product-list-box .prolist-info-wrap h5 {
            font-size: 17px;
        }
}


/**/
/* 首页产品
-------------------------*/


.index-product .single-inpro-list {
    padding: 0 15px;
}


.index-product .single-inpro-flag {
    position: absolute;
    display: inline-block;
    top: 2%;
    right: 5%;
    font-size: 16px;
    color: #023174;
    transition: all 0.5s;
}

    .index-product .single-inpro-flag:before {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #023174;
        bottom: 0;
        left: 0;
        transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
    }

.index-product .single-inpro-item:hover .single-inpro-flag:before {
    width: 0;
}


.index-product .single-inpro-item {
    position: relative;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(to bottom, #e3e3e3 0%, #ffffff 100%);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.5s;
}


    .index-product .single-inpro-item:hover {
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        background: linear-gradient(to bottom, #e9edf3 0%, #ffffff 100%);
    }

    .index-product .single-inpro-item img {
        width: 100%;
        border-radius: 10px 10px 0 0;
        transition: all 0.5s;
        object-fit: cover;
        display: block;
    }

    .index-product .single-inpro-item:hover img {
        transform: scale(1.07);
        transition: all 0.5s;
    }

.index-product .single-inpro-info {
    transition: all 0.5s;
    background: linear-gradient(to bottom, #f1f1f1 100%, #ffffff 0%);
    text-align: center;
    border-radius: 0 0 12px 12px;
}


    .index-product .single-inpro-info span {
        color: #6c757d;
        margin-top: 10px;
    }

    .index-product .single-inpro-info h5 {
        font-size: 22px;
        color: #023174;
        padding: 4px 0 14px 0;
    }


.index-product .single-inpro-item:hover + .single-inpro-info {
    background: #023174;
    transition: all 0.5s;
}

    .index-product .single-inpro-item:hover + .single-inpro-info h5 {
        color: #ffffff;
        transition: all 0.5s;
    }

    .index-product .single-inpro-item:hover + .single-inpro-info span {
        color: #edf2f7;
        transition: all 0.5s;
    }

@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .index-product .single-inpro-flag {
        top: 1%;
        right: 4%;
        font-size: 14px;
    }
}


@media only screen and (min-width: 768px) and (max-width: 991px) {

    .index-product .single-inpro-flag {
        top: 3%;
        right: 6%;
        font-size: 16px;
    }

    .index-product .single-inpro-list {
        padding: 0 10px;
    }

    .margin-wrapper {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {

    .index-product .single-inpro-list {
        padding: 0 8px;
    }

    .index-product .single-inpro-info h5 br {
        display: none;
    }

    .margin-wrapper {
        margin-top: 30px;
    }

    .index-product .single-inpro-flag {
        top: 1%;
        right: 6%;
        font-size: 12px;
        border-bottom: 0;
    }
}


@media only screen and (min-width: 1367px) and (max-width: 1680px) {
    .index-adv .single-slide-item, #home-2 .single-slide-item {
        height: 700px;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1366px) {
    .index-adv .single-slide-item, #home-2 .single-slide-item {
        height: 600px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .index-adv .single-slide-item, #home-2 .single-slide-item {
        height: 450px;
    }

    .index-product .single-inpro-list {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {

    .index-product .single-inpro-list {
        margin-bottom: 20px;
    }

    .index-product .single-inpro-item {
        padding: 0;
    }

        .index-product .single-inpro-item img {
            border-radius: 0;
        }


    .index-product .single-inpro-info h5 {
        font-size: 16px;
        padding: 0 0 10px 0;
    }

    .index-product .single-inpro-info span {
        margin-top: 5px;
    }
}



/**/
/* faqs 常见问题列表
-------------------------*/


.faq-section {
    background: #f1f1f1;
}

.faq-custom-accordion {
    padding-bottom: 50px;
}

    .faq-custom-accordion .accordion-items {
        counter-increment: section; /* 每个li元素递增计数器 */
        margin-bottom: 20px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        border: 1px solid #eaeaea;
        transition: all 0.3s ease;
        background: white;
    }

        .faq-custom-accordion .accordion-items.active {
            border-color: #023174;
            box-shadow: 0 5px 20px rgba(52, 152, 219, 0.25);
        }


    .faq-custom-accordion .accordion-buttons:hover {
        background-color: #edf2f7;
    }

    .faq-custom-accordion .accordion-buttons.active {
        background: #023174;
        color: #ffffff;
    }

        .faq-custom-accordion .accordion-buttons.active span {
            background: #ffffff;
            color: #023174;
        }


        .faq-custom-accordion .accordion-buttons.active::after {
            color: #ffffff;
        }




@media (max-width: 767px) {
    .faq-custom-accordion .accordion-items {
        margin-top: 30px;
    }
}


.faq-custom-accordion .accordion-buttons {
    position: relative;
    width: 100%;
    padding: 30px 0px 30px 20px;
    background-color: #fff;
    text-align: left;
    font-size: 22px;
    font-weight: 400;
    color: #171717;
    border: none;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}


    .faq-custom-accordion .accordion-buttons span {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background: #023174;
        color: white;
        border-radius: 50%;
        margin-right: 15px;
        font-size: 16px;
        font-weight: bold;
        flex-shrink: 0;
    }

        .faq-custom-accordion .accordion-buttons span::after {
            content: counter(section); /* 显示计数器值 */
        }



@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .faq-custom-accordion .accordion-buttons {
        padding: 20px 28px;
        padding-left: 60px;
    }
}

@media (max-width: 767px) {

    .faq-custom-accordion .accordion-buttons span {
        width: 25px;
        height: 25px;
    }


    .faq-custom-accordion .accordion-buttons {
        padding-right: 50px;
        padding-left: 20px;
        line-height: 25px;
        font-size: 17px;
    }
}

.faq-custom-accordion .accordion-buttons::after {
    position: absolute;
    content: "\f068";
    font-family: "Font Awesome 6 Pro";
    top: 25%;
    right: 30px;
    font-size: 24px;
    font-weight: 500;
    opacity: 1;
    color: #333;
}

@media (max-width: 767px) {
    .faq-custom-accordion .accordion-buttons::after {
        top: 25%;
        right: 25px;
        font-size: 16px;
    }
}

.faq-custom-accordion .accordion-buttons.collapsed::after {
    content: "\f067";
}

.faq-custom-accordion .collapsed {
    position: relative;
    z-index: 1;
}

.faq-custom-accordion .accordion-body {
    background-color: #fff;
    color: #878787;
    padding: 25px 30px;
}

    .faq-custom-accordion .accordion-body p {
        font-size: 18px;
    }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .faq-custom-accordion .accordion-body {
        padding-right: 25px;
        padding-bottom: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .faq-custom-accordion .accordion-body {
        padding-right: 30px;
        padding-bottom: 0;
    }

        .faq-custom-accordion .accordion-body p {
            font-size: 17px;
        }
}

@media (max-width: 767px) {


    .faq-custom-accordion .accordion-body {
        padding-right: 20px;
        padding-left: 20px;
        font-size: 16px;
    }

        .faq-custom-accordion .accordion-body p {
            font-size: 16px;
        }
}

.faq-custom-accordion {
    padding-left: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .faq-custom-accordion {
        margin-top: 30px;
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .faq-custom-accordion {
        padding: 0 0 40px 0;
    }
}

.details-link {
    font-size: 18px;
    font-weight: 500;
    margin-top: 10px;
}

    .details-link i {
        font-size: 16px;
        margin-left: 10px;
    }

@media (max-width: 767px) {
    .index-product .mt-60 {
        margin-top: 0;
    }
}

#service-2 .single-product-item {
    padding: 50px;
    position: relative;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    #service-2 .single-product-item {
        padding-left: 0;
        text-align: center;
        margin-bottom: 0;
    }
}

#service-2 .border-right {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #ddd;
    transform: translate(0, 0);
}

#service-2 .single-product-item img {
    border-radius: 0;
    opacity: 0.9;
}

#service-2 .service-title h5 {
    font-size: 22px;
    margin: 30px 0 20px;
}

#service-2 .single-product-item a.details-link {
    font-size: 30px;
    margin-top: 0;
}

#service-3 .single-product-item {
    padding: 0;
    border: 1px solid #fff;
    position: relative;
    z-index: 1;
}

    #service-3 .single-product-item:before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.3;
    }

    #service-3 .single-product-item img {
        border-radius: 0;
    }

#service-3 .service-info {
    position: absolute;
    bottom: 0;
    left: 0;
}

    #service-3 .service-info span {
        color: #ddd;
    }

    #service-3 .service-info h6 {
        font-size: 22px;
        color: #fff;
    }

#service-3 .service-info {
    padding: 30px;
}

@media (max-width: 767px) {
    #service-3 p.pt-40 {
        padding-top: 0;
    }
}

.service-img-wrap {
    padding-right: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service-img-wrap {
        padding-right: 0;
        height: 400px;
    }
}

@media (max-width: 767px) {
    .service-img-wrap {
        padding-right: 0;
        height: auto;
        margin-top: 30px;
    }
}

#service-3 .faq-custom-accordion .accordion-body {
    padding-right: 70px;
    padding-left: 0;
}

@media (max-width: 767px) {
    #service-3 .faq-custom-accordion .accordion-body {
        padding-right: 0;
    }
}

#service-3 .faq-custom-accordion .accordion-buttons {
    padding-left: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service-page .mt-120 {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .service-page .mt-120 {
        margin-top: 0;
    }
}


/* -- 产品内容页
-----------------------*/

.product_details_info {
    background: #ffffff;
}

.product_details_left h3 {
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    margin: 20px 0;
}

.product_details_left p {
    text-align: justify;
}

.product_details_right {
    padding: 35px 45px;
    position: sticky;
    top: 100px;
    transition: top 0.3s ease;
}

    .product_details_right .product-bottom {
        margin-bottom: 40px;
        transition: top 0.3s ease;
    }

    .product_details_right .product-right-title p {
        font-size: 16px;
        margin: 10px 0;
        color: #212529;
    }

    .product_details_right .product-right-title a, .pro-form {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        background: #023174;
        color: #fff;
        border: 1px solid #023174;
        line-height: 40px;
        text-align: center;
        transition: 0.3s;
        cursor: pointer;
        margin-top: 10px;
        padding: 0px 30px;
    }

        .product_details_right .product-right-title a:hover {
            background: #ffffff;
            color: #023174;
            border: 1px solid #023174
        }


    .product_details_right .product-right-title i {
        margin-right: 5px;
    }

    .product_details_right .product-right-form i {
        margin-left: 5px;
    }


    .product_details_right .product-right-form .fa-light {
        transform: rotate(-45deg);
    }

    .product_details_right .product-right-parameter .product-list-item li {
        position: relative;
        padding-left: 30px;
        margin: 15px 0;
        font-size: 16px;
    }

        .product_details_right .product-right-parameter .product-list-item li i {
            position: absolute;
            top: 6px;
            left: 0;
            font-size: 16px;
            color: #023174;
        }

    .product_details_right .product-right-form .pro-form {
        margin-top: 30px;
    }

        .product_details_right .product-right-form .pro-form:hover {
            background: #ffffff;
            color: #023174;
            border: 1px solid #023174
        }




    .product_details_right h5 {
        font-size: 22px;
        font-weight: 600;
        line-height: 30px;
    }

    .product_details_right input, .product_details_right textarea {
        border: none;
        border-bottom: 1px solid #ddd;
        padding-left: 0;
        font-size: 16px;
    }

    .product_details_right textarea {
        height: 150px;
    }


/*.contact-list-info {
    margin-top: 50px;
}*/

.contact-list-item {
    margin-top: 20px;
}

    .contact-list-item li {
        position: relative;
        padding-left: 40px;
        margin-bottom: 20px;
        font-size: 17px;
    }

        .contact-list-item li i {
            position: absolute;
            top: 2px;
            left: 0;
            font-size: 24px;
            color: #023174;
        }

.service-page .play-btn a i {
    font-size: 30px;
    color: #fff;
}

.service-page .play-btn {
    background: #023174;
    width: 90px;
    height: 90px;
}


@media (max-width: 767px) {

    .product_details_info {
        background: #f1f1f1;
    }

    .product_details_right {
        padding: 45px 30px;
    }
}


/* -- 首页关于我们
-----------------------*/

.index-about {
    /*  background: #ffffff;*/
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 75%, #f3f5f9 100%);
}

    .index-about .index-about-box {
        padding-left: 60px;
    }

        .index-about .index-about-box .index-about-title {
            font-size: 35px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }

        .index-about .index-about-box .index-about-body {
            border-bottom: 1px solid #ddd;
            padding: 20px 0;
        }

            .index-about .index-about-box .index-about-body p {
                color: #555555;
                text-align: justify;
                font-size: 16px;
            }


@media only screen and (min-width: 1366px) and (max-width: 1680px) {
    .index-about .index-about-box {
        padding-left: 30px;
    }

    .index-adv .single-slide-item, #home-2 .single-slide-item {
        height: 700px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {

    .index-about .index-about-box {
        padding: 0;
    }

    .index-adv .single-slide-item, #home-2 .single-slide-item {
        height: 600px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .index-about .index-about-wrap {
        text-align: center;
    }

    .index-about .index-about-box {
        padding: 10px 0 0 0;
    }

        .index-about .index-about-box .index-about-title {
            text-align: center;
        }

    .index-adv .single-slide-item, #home-2 .single-slide-item {
        height: 450px;
    }
}

@media (max-width: 767px) {

    .index-about .index-about-wrap {
        margin: 25px 0;
    }

    .index-about .index-about-box {
        padding: 20px 0 0 0;
    }

        .index-about .index-about-box .index-about-title {
            font-size: 24px;
            text-align: center;
        }

        .index-about .index-about-box .index-about-body p {
            font-size: 14px;
        }
}


.about-list-box .about-content-wrap {
    padding: 0 90px 0 0;
    color: #333333;
    text-align: justify;
}

    .about-list-box .about-content-wrap.reverse {
        padding: 0 0 0 90px;
    }

    .about-list-box .about-content-wrap h3 {
        color: #023174;
        font-size: 46px;
        font-weight: bold;
    }

    .about-list-box .about-content-wrap i {
        width: 136px;
        height: 3px;
        background: #023174;
        display: inline-block;
        margin-top: 20px;
    }

    .about-list-box .about-content-wrap p {
        color: #333333;
        font-size: 16px;
        line-height: 28px;
        margin-top: 30px;
    }

    .about-list-box .about-content-wrap span {
        color: #666666;
        font-size: 14px;
        line-height: 18px;
        margin-top: 12px;
    }

.about-list-box .about-slow45 {
    font-size: 44px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: -2px;
    color: #023174;
    text-align: center;
    margin-bottom: 30px;
}

.about-list-box .mt-40 {
    margin-top: 20px;
}


.about-rongyu-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0189ff;
}

    .about-rongyu-box .about-rongyu li {
        float: left;
    }

        .about-rongyu-box .about-rongyu li img {
            width: 230px;
        }


.about-pro-box .about-pro-wrap {
}


    .about-pro-box .about-pro-wrap .about-pro-wrap-title {
        text-align: right;
        border-bottom: 2px solid #023174;
    }

        .about-pro-box .about-pro-wrap .about-pro-wrap-title h3 {
            color: #023174;
            font-size: 34px;
            font-weight: bold;
        }



.about-product-list {
    background: linear-gradient(to bottom, #e9edf3 0%, #ffffff 100%);
}


    .about-product-list .about-product-page .pro-item-img {
        border-radius: 10px 10px 0 0;
        background: linear-gradient(to bottom, #ffffff 0%, #e9edf3 100%);
    }


        .about-product-list .about-product-page .pro-item-img .single-inpro-flag {
            position: absolute;
            display: inline-block;
            top: 2%;
            right: 6%;
            font-size: 16px;
            height: 26px;
            line-height: 24px;
            color: #023174;
            transition: all 0.5s;
            z-index: 2;
        }

            .about-product-list .about-product-page .pro-item-img .single-inpro-flag:before {
                position: absolute;
                content: "";
                display: block;
                width: 100%;
                height: 1px;
                background: #023174;
                bottom: 0;
                left: 0;
                transition: .5s;
                -moz-transition: .5s;
                -webkit-transition: .5s;
            }

    .about-product-list .about-product-page .page-product-item:hover .single-inpro-flag:before {
        width: 0;
    }


.about-section-title h2 {
    color: #023174;
    font-size: 56px;
    font-weight: bold;
}


.about-section-title p {
    font-size: 18px;
    line-height: 30px;
    margin: 10px 0 20px 0;
    color: #333333;
    text-align: justify;
}


.core-advant {
    position: relative;
    padding: 133px 0 140px;
    /*  background: url(/skin/images/core_advant_bg.jpg) center center no-repeat;*/
    background: #023174;
    background-size: cover;
}


    .core-advant:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: -10%;
        opacity: .3;
        background-image: url('../images/advant_bg.png');
        background-repeat: no-repeat;
        background-position: 0;
        background-size: contain;
        z-index: -1;
    }



    .core-advant .subtitle .t-eng {
        float: right;
        font-size: 30px;
        line-height: 70px;
        color: rgba(255, 255, 255, .5);
    }

    .core-advant .subtitle .title h3 {
        color: #ffffff;
        font-size: 60px;
        font-weight: bold;
    }

.core-advant-list {
    margin-top: 79px;
    display: inline-block;
}

    .core-advant-list .item {
        float: left;
        width: 24%;
        margin-left: 1.33%;
        text-align: center;
        background: #fff;
        transition: all 0.5s;
    }


        .core-advant-list .item:hover .pic img {
            transition: all 0.2s;
            transform: scale(0.95);
        }


        .core-advant-list .item:hover .con h4 {
            color: #023174;
        }


        .core-advant-list .item:first-child {
            margin-left: 0;
        }

        .core-advant-list .item .box {
            padding: 50px 30px;
        }


        .core-advant-list .item .pic {
            width: 200px;
            height: 200px;
            border: 1px solid #cccccc;
            border-radius: 50%;
            margin: 0 auto;
        }

            .core-advant-list .item .pic img {
                border-radius: 50%;
                transition: all 0.2s;
            }


        .core-advant-list .item .con {
            margin-top: 45px;
        }

            .core-advant-list .item .con h4 {
                font-size: 26px;
                line-height: 32px;
                color: #333333;
            }

            .core-advant-list .item .con p {
                font-size: 16px;
                line-height: 24px;
                color: #757575;
                height: 108px;
                text-align: justify;
                margin-top: 24px;
            }

.quality-control-box {
    position: relative;
    display: inline-block;
}

    .quality-control-box .qua-con {
        float: left;
    }

        .quality-control-box .qua-con h3 {
            color: #023174;
            font-size: 56px;
            font-weight: bold;
        }

        .quality-control-box .qua-con .text {
            font-size: 18px;
            line-height: 30px;
            padding: 30px 0;
            color: #333333;
            text-align: justify;
        }

            .quality-control-box .qua-con .text p {
                margin: 0;
            }


.qua-icon {
    position: absolute;
    right: 0;
    bottom: 0;
}


.quality-control-pic {
    max-width: 1920px;
    margin: 0 auto;
    margin-top: 90px;
}

    .quality-control-pic ul li:first-child {
        float: left;
        width: 43%;
    }

    .quality-control-pic ul li {
        float: right;
        width: 55.8%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        overflow: hidden;
    }

        .quality-control-pic ul li img {
            height: 632px;
            max-width: initial;
        }


.quality-pic {
    display: inline-block;
    margin: 0 auto;
}

    .quality-pic ul li {
        width: 32.25%;
        margin-left: 1.5%;
        float: left;
        margin-top: 20px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

        .quality-pic ul li:nth-child(3N+1) {
            margin-left: 0;
        }



        .quality-pic ul li:after {
            content: "";
            display: block;
            width: 100%;
            height: 0;
            position: absolute;
            bottom: 50%;
            left: 0;
            background-color: rgba(0, 0, 0, .5);
            transition: all .4s ease
        }

        .quality-pic ul li:hover:after {
            height: 100%;
            bottom: 0
        }

        /*.ab_qywh ul li:hover i, .ab_qywh ul li:hover p, .ab_qywh ul li:hover span {
    color: #fff;
    position: relative;
    z-index: 2;
    transition: all .4s ease
}


*/


        .quality-pic ul li .quality-float {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 15px 10%;
            font-size: 18px;
            color: #fff;
            text-align: left;
            background-color: rgba(0, 0, 0, .5);
            /* 关键1：给初始高度（替代auto），保证transition生效 */
            height: auto; /* 兜底 */
            max-height: 20%; /* 初始最大高度（匹配默认padding+字体的高度，可微调） */
            /* 关键2：延长过渡时长（1.2s更慢，可改0.8/1.5s），精准指定过渡属性 */
            transition: max-height 0.8s ease-in-out, padding 0.8s ease-in-out;
            /* 兼容老浏览器 */
            -webkit-transition: max-height 0.8s ease-in-out, padding 0.8s ease-in-out;
        }

        /*   .quality-pic ul li:hover .quality-float {
            max-height: 100%;
            height: 100%;
            padding: 20% 10%;
          
        }*/

        .quality-pic ul li:hover .quality-float h3 {
            margin: 20px 0;
        }


        .quality-pic ul li:hover .quality-float span {
            margin: 0 0 20px 0;
        }

        .quality-pic ul li:hover .quality-float p {
            font-size: 16px;
            display: inline-block;
            transition: all 0.3s ease;
        }


    .quality-pic .quality-float h3 {
        font-size: 24px;
        color: #ffffff;
    }

    .quality-pic .quality-float span {
        font-size: 18px;
        margin: 6px 0;
    }

    .quality-pic .quality-float p {
        display: none;
    }




@media only screen and (min-width: 1200px) and (max-width: 1440px) {



    .about-list-box .about-content-wrap {
        padding: 0 40px 0 0;
    }

        .about-list-box .about-content-wrap.reverse {
            padding: 0 0 0 40px;
        }


    .about-section-title h2 {
        font-size: 46px;
    }


    .about-section-title p {
        font-size: 17px;
        line-height: 30px;
        margin: 10px 0 20px 0;
    }


    .quality-pic ul li .quality-float {
        padding: 5% 10%;
    }

    .quality-pic .quality-float h3 {
        font-size: 20px;
        color: #ffffff;
    }

    .quality-pic .quality-float span {
        font-size: 15px;
        line-height: 16px;
        margin: 10px 0 0 0;
    }

    .quality-pic .quality-float p {
        display: none;
    }

    .quality-pic ul li:hover .quality-float {
        padding: 25% 10%;
        transition: all 0.3s ease;
    }

        .quality-pic ul li:hover .quality-float h3 {
            margin: 10px 0;
        }

        .quality-pic ul li:hover .quality-float span {
            margin: 0 0 20px 0;
        }

        .quality-pic ul li:hover .quality-float p {
            display: inline-block;
            transition: all 0.3s ease;
            padding: 0;
            font-size: 14px;
            width: 100%;
            line-height: 24px;
            text-align: justify;
        }
}



@media only screen and (min-width: 992px) and (max-width: 1199px) {

    .about-list-box .about-content-wrap, .about-list-box .about-content-wrap.reverse {
        padding: 0;
    }

        .about-list-box .about-content-wrap h3 {
            font-size: 33px;
        }

        .about-list-box .about-content-wrap i {
            width: 76px;
            margin-top: 10px;
        }

        .about-list-box .about-content-wrap p {
            line-height: 24px;
            margin: 10px 0;
            font-size: 15px;
        }

    .about-section-title h2 {
        font-size: 33px;
    }

    .about-section-title p {
        font-size: 17px;
    }


    .core-advant-list .item .box {
        padding: 50px 30px;
    }

    .core-advant-list .item .pic {
        width: 148px;
        height: 148px;
    }

        .core-advant-list .item .pic img {
            width: 148px;
        }

    .core-advant-list .item .con {
        margin-top: 30px;
    }

        .core-advant-list .item .con h4 {
            font-size: 24px;
            line-height: 28px;
        }

        .core-advant-list .item .con p {
            font-size: 13px;
            line-height: 22px;
            margin-top: 24px;
        }


    .quality-pic ul li .quality-float {
        padding: 20px 8%;
    }

    .quality-pic .quality-float h3 {
        font-size: 18px;
        color: #ffffff;
    }

    .quality-pic .quality-float span {
        font-size: 14px;
        line-height: 16px;
        margin: 6px 0 0 0;
    }

    .quality-pic .quality-float p {
        display: none;
    }

    .quality-pic ul li:hover .quality-float {
        padding: 15% 10%;
        transition: all 0.3s ease;
    }

        .quality-pic ul li:hover .quality-float h3 {
            margin: 10px 0;
        }

        .quality-pic ul li:hover .quality-float span {
            margin: 0 0 20px 0;
        }

        .quality-pic ul li:hover .quality-float p {
            display: inline-block;
            transition: all 0.3s ease;
            padding: 0;
            font-size: 14px;
            width: 100%;
            line-height: 24px;
            text-align: justify;
        }
}


@media only screen and (min-width: 768px) and (max-width: 991px) {

    .about-list-box .about-content-wrap {
        padding: 0;
    }

        .about-list-box .about-content-wrap.reverse {
            padding: 50px 0 0 0;
        }

        .about-list-box .about-content-wrap h3 {
            font-size: 30px;
        }

    .about-list-box .about-img-wrap img {
        width: 100%;
    }

    .about-list-box .about-slow45 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 0;
    }

    .about-list-box .mt-40 {
        margin-top: 20px;
    }

    .about-section-title h2 {
        font-size: 30px;
    }

    .about-section-title p {
        font-size: 17px;
    }


    .quality-control-box .qua-con h3 {
        color: #023174;
        font-size: 38px;
    }

    .quality-control-box .qua-con .text {
        padding: 15px 0 0 0;
        font-size: 15px;
        line-height: 30px;
    }

    .core-advant-list .item {
        width: 49%;
        margin-left: 2%;
        margin-bottom: 2%;
    }


        .core-advant-list .item:nth-child(2n+1) {
            margin-left: 0;
        }

        .core-advant-list .item .con h4 {
        }

    .core-advant {
        padding: 80px 0 90px;
    }





        .core-advant .subtitle .title h3 {
            font-size: 38px;
            line-height: 42px;
        }

        .core-advant .subtitle .t-more {
            float: right;
        }

        .core-advant .subtitle .t-eng {
            font-size: 24px;
            line-height: 30px;
        }







    .quality-pic ul li .quality-float {
        padding: 15px 5%;
    }

    .quality-pic .quality-float h3 {
        font-size: 16px;
        color: #ffffff;
    }

    .quality-pic .quality-float span {
        font-size: 13px;
        line-height: 16px;
        margin: 6px 0 0 0;
    }

    .quality-pic .quality-float p {
        display: none;
    }

    .quality-pic ul li:hover .quality-float {
        padding: 15% 10%;
        transition: all 0.3s ease;
    }

        .quality-pic ul li:hover .quality-float h3 {
            margin: 5px 0;
        }

        .quality-pic ul li:hover .quality-float span {
            margin: 0 0 10px 0;
        }

        .quality-pic ul li:hover .quality-float p {
            display: inline-block;
            transition: all 0.3s ease;
            padding: 0;
            font-size: 12px;
            width: 100%;
            line-height: 18px;
            text-align: justify;
        }
}

@media (max-width: 767px) {

    .about-list-box .about-content-wrap, .about-list-box .about-content-wrap.reverse {
        padding: 30px 0 0 0;
    }

        .about-list-box .about-content-wrap h3 {
            font-size: 23px;
        }

        .about-list-box .about-content-wrap i {
            width: 66px;
            margin-top: 10px;
        }

        .about-list-box .about-content-wrap p {
            line-height: 24px;
            margin: 10px 0;
            font-size: 15px;
        }

    .about-list-box .about-slow45 {
        font-size: 23px;
        line-height: 30px;
        letter-spacing: 0;
        margin-bottom: 0;
    }

    .about-list-box h4 {
        font-size: 20px;
    }


    .about-section-title h2 {
        font-size: 23px;
    }

    .about-section-title p {
        font-size: 15px;
        line-height: 22px;
    }


    .about-product-list .about-product-page .pro-item-img .single-inpro-flag {
        top: 1%;
        right: 6%;
        height: 24px;
        font-size: 12px;
        border-bottom: 0;
    }


    .core-advant {
        padding: 43px 0 50px;
    }

    .core-advant-list {
        margin-top: 15px;
    }

    .core-advant .subtitle .t-eng {
        font-size: 14px;
        line-height: 30px;
    }

    .core-advant .subtitle .title {
        float: left;
    }

        .core-advant .subtitle .title h3 {
            font-size: 24px;
            line-height: 32px;
        }

    .core-advant .subtitle .t-more {
        float: right;
    }

    .core-advant .subtitle .more {
        width: 110px;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
    }


    .core-advant-list .item {
        float: left;
        width: 100%;
        margin-left: 0;
        margin-top: 15px;
    }

        .core-advant-list .item:first-child {
            margin-left: 0;
        }

        .core-advant-list .item .box {
            padding: 25px 5% 25px;
        }

            .core-advant-list .item .box:after {
                height: 0;
                width: 0;
                content: "";
                display: block;
                clear: both;
            }

        .core-advant-list .item .pic {
            width: 118px;
            height: 118px;
            float: left;
        }

            .core-advant-list .item .pic img {
                padding-top: 5px;
                width: 108px;
            }



        .core-advant-list .item .con {
            margin-top: 0px;
            float: right;
            width: 60%;
            text-align: left;
        }

        .core-advant-list .item:first-child .con {
            margin-top: 0px;
        }

        .core-advant-list .item .con h4 {
            font-size: 19px;
            line-height: 30px;
            color: #023174;
        }

        .core-advant-list .item .con p {
            font-size: 13px;
            line-height: 20px;
            height: auto;
            margin: 12px 0 0 0;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }



    .subtitle .title p {
        font-size: 16px;
        padding-top: 10px;
    }

    .custom .in-title .more {
        margin-top: 64px;
    }



    .qua-con {
        float: left;
        width: 100%;
    }

        .qua-con .subtitle {
            display: inline-block;
        }


    .quality-control-box .qua-con h3 {
        color: #023174;
        font-size: 24px;
    }

    .quality-control-box .qua-con .text {
        padding: 10px 0 0 0;
        font-size: 15px;
        line-height: 30px;
    }

    .qua-con .text p {
        font-size: 13px;
        line-height: 20px;
        text-align: justify;
    }


    .qua-icon img {
        height: 70px;
    }


    .quality-control-pic {
        margin-top: 50px;
    }

        .quality-control-pic ul li:first-child {
            float: left;
            width: 43%;
        }

        .quality-control-pic ul li {
            float: right;
            width: 55.8%;
        }

            .quality-control-pic ul li img {
                height: 300px;
                max-width: initial;
            }


    .quality-pic {
        padding-top: 10px;
    }

        .quality-pic ul li {
            width: 49%;
            margin-left: 2%;
            margin-top: 15px;
        }

            .quality-pic ul li:nth-child(3N+1) {
                margin-left: 2%;
            }

            .quality-pic ul li:nth-child(2N+1) {
                margin-left: 0;
            }

            .quality-pic ul li p {
                width: 90%;
                font-size: 13px;
                padding: 12px 5%;
            }

            .quality-pic ul li .quality-float {
                padding: 10px 5%;
            }

        .quality-pic .quality-float h3 {
            font-size: 15px;
            color: #ffffff;
        }

        .quality-pic .quality-float span {
            font-size: 12px;
            line-height: 16px;
            margin: 5px 0 0 0;
        }

        .quality-pic .quality-float p {
            display: none;
        }

        .quality-pic ul li:hover .quality-float {
            padding: 10% 8%;
            transition: all 0.3s ease;
        }

            .quality-pic ul li:hover .quality-float h3 {
                margin: 5px 0;
            }

            .quality-pic ul li:hover .quality-float span {
                margin: 0 0 10px 0;
            }

            .quality-pic ul li:hover .quality-float p {
                display: inline-block;
                transition: all 0.3s ease;
                padding: 0;
                font-size: 12px;
                width: 100%;
                line-height: 18px;
                text-align: justify;
            }
}


/*发展历程*/



.course {
    padding: 180px 0 120px 0;
    background: linear-gradient(to bottom, #e9edf3 0%, #ffffff 33.33%,#ffffff 66.66%, #e9edf3 100%);
    background-size: cover;
}

#timeline {
    height: 570px;
    overflow: hidden;
    position: relative;
}

    #timeline:after {
        display: block;
        content: "";
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 5px;
        left: 0;
        background: #DDDDDD;
        z-index: 1;
    }


#dates {
    width: 100%;
    position: absolute;
    bottom: 22px;
}

    #dates li {
        float: left;
        width: 126px;
        font-size: 16px;
        text-align: center;
    }

    #dates a {
        font-size: 18px;
        color: #999;
        position: relative;
    }

        #dates a.selected {
            color: #023174;
            font-weight: bold;
        }

    #dates li a.selected:after {
        display: block;
        content: "";
        width: 11px;
        height: 11px;
        background: url(../images/active_icon_a.png) center top no-repeat;
        position: absolute;
        bottom: -22px;
        left: 50%;
        margin-left: -5.5px;
        z-index: 9;
    }

    #dates li a:after {
        display: block;
        content: "";
        width: 11px;
        height: 11px;
        background: url(../images/active_icon.png) center top no-repeat;
        position: absolute;
        bottom: -22px;
        left: 50%;
        margin-left: -5.5px;
        z-index: 9;
    }


#issues {
    width: 1440px;
    overflow: hidden;
}

    #issues li {
        width: 1440px;
        height: 441px;
        float: left;
        position: relative;
    }


        #issues li .tp {
            float: left;
            width: 44%;
            margin-left: 6%;
            text-align: right;
        }

            #issues li .tp img {
                border-radius: 6px;
            }

        #issues li .text {
            float: left;
            width: 43.3%;
            padding-left: 6.7%;
        }

            #issues li .text .title {
                padding-top: 60px;
            }

        #issues li .title i {
            font-size: 76px;
            line-height: 76px;
            color: #023174;
            font-weight: bold;
            font-style: initial;
        }

            #issues li .title i span {
                font-size: 18px;
                margin-left: 5px;
            }

        #issues li .title p {
            padding-top: 30px;
            font-size: 24px;
            color: #333333;
        }

        #issues li .chara {
            padding-top: 10px;
            color: #6c757d;
        }

            #issues li .chara p {
                font-size: 18px;
                line-height: 36px;
                color: #333333;
            }

            #issues li .chara b {
                font-size: 18px;
                color: #ed6d00;
                margin-right: 10px;
            }



#next, #prev {
    position: absolute;
    top: 38%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

#next {
    right: 0;
    background: url(../images/course_right.png) center center no-repeat;
    background-size: 100% 100%;
}

#prev {
    left: 0;
    background: url(../images/course_left.png) center center no-repeat;
    background-size: 100% 100%;
}

#next:hover {
    background: url(../images/course_right_a.png) no-repeat center;
    background-size: 100% 100%;
}

#prev:hover {
    background: url(../images/course_left_a.png) no-repeat center;
    background-size: 100% 100%;
}


@media only screen and (min-width: 1200px) and (max-width: 1439px) {

    #timeline {
        height: 490px;
    }

    #issues {
        width: 1200px;
    }

        #issues li {
            width: 1200px;
            height: 369px;
            float: left;
        }

            #issues li .text {
                padding-left: 6.1%;
            }

            #issues li .title i {
                font-size: 68px;
                line-height: 68px;
            }
}



@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    #timeline {
        height: 420px;
    }

    #issues {
        width: 1024px;
    }

        #issues li {
            width: 1024px;
            height: 314px;
            float: left;
        }

            #issues li .text .title {
                padding-top: 30px;
            }

            #issues li .text {
                padding-left: 5.2%;
            }

            #issues li .title i {
                font-size: 62px;
                line-height: 68px;
            }
}


@media only screen and (min-width: 768px) and (max-width: 1023px) {

    .course {
        padding: 90px 0;
    }


    #timeline {
        width: 700px;
        height: 320px;
        margin: 0 auto;
    }

    #issues {
        width: 700px;
    }

        #issues li {
            width: 700px;
            height: 216px;
            float: left;
        }

            #issues li .chara {
                padding-top: 6px;
                font-size: 16px;
            }

            #issues li .text .title {
                padding-top: 10px;
            }

            #issues li .title p {
                padding-top: 6px;
                margin: 0;
                font-size: 20px;
            }

            #issues li .text {
                padding-left: 3.6%;
            }

            #issues li .title i {
                font-size: 45px;
                line-height: 45px;
            }
}


@media only screen and (min-width: 430px) and (max-width: 767px) {

    .course {
        padding: 30px 0;
    }


    #timeline {
        width: 400px;
        height: 560px;
        margin: 0 auto;
    }

    #issues {
        width: 400px;
    }

        #issues li {
            width: 400px;
            height: 560px;
            float: left;
        }

            #issues li .chara {
                padding-top: 10px;
                font-size: 16px;
            }

            #issues li .tp {
                float: left;
                width: 100%;
                margin-left: 0;
                text-align: center;
            }

            #issues li .text .title {
                padding-top: 10px;
            }

            #issues li .title p {
                padding-top: 10px;
                margin: 0;
                font-size: 20px;
            }

            #issues li .text {
                float: left;
                width: 100%;
                padding-left: 0;
                text-align: center;
                margin-top: 24px;
            }

            #issues li .title i {
                font-size: 45px;
                line-height: 45px;
            }

    #next, #prev {
        top: 26%;
    }
}



@media only screen and (max-width: 429px) {

    .course {
        padding: 30px 0;
    }


    #timeline {
        width: 360px;
        height: 520px;
        margin: 0 auto;
    }

    #issues {
        width: 360px;
    }

        #issues li {
            width: 360px;
            height: 520px;
            float: left;
        }

            #issues li .chara {
                padding-top: 10px;
                font-size: 15px;
            }

            #issues li .tp {
                float: left;
                width: 100%;
                margin-left: 0;
                text-align: center;
            }

            #issues li .text .title {
                padding-top: 10px;
            }

            #issues li .title p {
                padding-top: 10px;
                margin: 0;
                font-size: 18px;
            }

            #issues li .text {
                float: left;
                width: 100%;
                padding-left: 0;
                text-align: center;
                margin-top: 24px;
            }

            #issues li .title i {
                font-size: 36px;
            }

    #dates li {
        width: 126px;
    }


    #next, #prev {
        top: 26%;
    }
}


/* 案例列表
---------------------- */

.case-list-box .case-list-wrapper {
    margin-bottom: 68px;
}

.case-list-box .case-list {
    margin-bottom: 1.5rem;
}

.case-list-box .single-case-item {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 8px;
}

.case-list-box .case-bg {
    transition: all 0.5s ease;
    transform: scale(1);
}

.case-list-box .single-case-item:hover .case-bg {
    transform: scale(1.07);
}

.case-list-box .single-case-item:hover .case-info-title i {
    width: 100%;
    transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
}


.case-list-box .case-info-title {
    background: rgb(29 29 29 / 50%);
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    padding: 20px 30px;
}

    .case-list-box .case-info-title h6 {
        font-size: 20px;
        color: #ffffff;
        font-weight: bold;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }


    .case-list-box .case-info-title span {
        font-size: 16px;
        color: #ffffff;
        overflow: hidden;
    }

    .case-list-box .case-info-title i {
        display: block;
        width: 24%;
        background: #ffffff;
        height: 1px;
        margin-top: 15px;
        transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
    }


    .case-list-box .case-info-title a {
        font-size: 16px;
        color: #777;
    }

.case-list-box .case-slider .owl-nav button i {
    font-size: 24px;
}

.case-list-box .case-slider .owl-nav {
    margin-top: 30px;
}

    .case-list-box .case-slider .owl-nav button {
        margin-right: 10px;
    }


@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .case-list-box .case-list {
        padding: 0 15px;
        margin-bottom: 1.5rem;
    }
}


@media only screen and (min-width: 768px) and (max-width: 991px) {

    .case-list-box .case-list {
        padding: 0 18px;
        margin-bottom: 1.5rem;
    }


    .case-list-box .case-list-wrapper {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {

    .case-list-box .container {
        padding: 0;
    }


    .case-list-box .case-list {
        padding: 0 8px;
        margin-bottom: 0.75rem;
    }

    .case-list-box .case-info-title {
        padding: 14px 8px;
    }

        .case-list-box .case-info-title h6 {
            font-size: 15px;
            line-height: 18px;
            font-weight: 400;
        }

        .case-list-box .case-info-title span {
            font-size: 12px;
            line-height: 14px;
        }


        .case-list-box .case-info-title i {
            margin-top: 10px;
        }

    .case-list-box .case-list-wrapper {
        margin: 0;
    }
}


/* 新案例内容 */
.case-details-wrap {
    background: #ffffff;
    padding: 120px 0.75rem;
}

.case-page-top {
    background: #f1f1f1;
    padding: 0;
    border-radius: 8px;
}

    .case-page-top .slider-container {
        width: 40%;
        float: left;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.case-page-left .slider-container {
    width: 56%;
    float: left;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


.case-page-top .slider {
    position: relative;
}

.case-page-top .slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.case-page-top .slide {
    min-width: 100%;
    height: 100%;
}

.case-page-top .pic-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e0e0e0;
}

    .case-page-top .pic-box img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }

.case-page-top .slider-controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.case-page-top .control-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}

    .case-page-top .control-dot.active {
        background-color: #fff;
    }

.case-page-top .slider-nav {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.case-page-top .nav-btn {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    transition: background-color 0.3s;
}

    .case-page-top .nav-btn:hover {
        background-color: rgba(0, 0, 0, 0.6);
    }

.case-page-top .slider-status {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
}


.case-page-con {
    width: 50%;
    margin-left: 5%;
    float: left;
}

.case-page-til {
    width: 40%;
    margin: 0 2%;
    float: left;
}

.case-page-con .box {
    padding: 90px 80px;
    min-height: 750px;
}

.case-page-til .box {
    padding: 30px 60px;
    min-height: 595px;
}

.case-page-con .box h2 {
    font-size: 40px;
    color: #023174;
    line-height: 56px;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.case-page-con .case-page-text p {
    font-size: 18px;
    color: #666666;
    line-height: 26px;
    margin: 20px 0;
    letter-spacing: 1px;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.case-page-con .chara {
    margin-top: 22px;
    border-top: 1px solid #ddd;
}

    .case-page-con .chara ul li {
        border-bottom: 1px dashed #ddd;
        padding: 20px 0;
        line-height: 42px;
        color: #333333;
        font-size: 18px;
    }

.case-page-til .chara ul li {
    padding: 12px 0;
}

.case-page-con .chara ul li:after {
    height: 0;
    width: 0;
    content: "";
    display: block;
    clear: both;
}


.case-page-con .chara ul li span {
    font-weight: bold;
    width: 20%;
    float: left;
}

.case-page-con .chara ul li p {
    width: 80%;
    float: left;
    line-height: 42px;
    letter-spacing: 1px;
    margin: 0;
}


.case-page-con .case-page-more {
    left: 0;
    transform: initial !important;
}


.case-project-cont {
    padding: 95px 0 0 0;
}

.project-cont-title {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}


    .project-cont-title span {
        font-size: 30px;
        font-weight: bold;
        line-height: 38px;
        color: #023174;
        position: relative;
    }


        .project-cont-title span:before {
            content: "";
            display: block;
            width: 100%;
            height: 3px;
            background: #023174;
            position: absolute;
            left: 0;
            bottom: -12px;
            z-index: 2;
        }

.project-cont-box {
    padding-top: 40px;
}

    .project-cont-box .item-con {
        font-size: 18px;
        line-height: 30px;
        color: #333;
    }


@media only screen and (min-width: 1201px) and (max-width: 1440px) {
    .case-page-con .box {
        padding: 40px 60px;
        min-height: 630px;
    }

    .case-page-til .box {
        padding: 20px 30px;
        min-height: 495px;
    }

    .case-page-til .case-page-text p {
        font-size: 17px;
        margin: 10px 0;
    }

    .case-page-til .chara ul li {
        line-height: 32px;
    }

        .case-page-til .chara ul li span {
            width: 30%;
        }

        .case-page-til .chara ul li p {
            width: 70%;
            line-height: 32px;
        }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .case-page-con .box {
        padding: 20px;
        min-height: 516px;
    }

        .case-page-con .box h2 {
            font-size: 32px;
            line-height: 40px;
        }

    .case-page-con .case-page-text p {
        font-size: 17px;
        line-height: 22px;
        margin: 15px 0;
    }

    .case-page-con .chara ul li {
        padding: 10px 0;
    }

        .case-page-con .chara ul li span {
            width: 22%;
        }

        .case-page-con .chara ul li p {
            width: 78%;
        }


    .case-page-til .case-page-text p {
        font-size: 16px;
        line-height: 20px;
        margin: 10px 0;
        text-align: justify;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .case-page-til .box {
        padding: 20px;
        min-height: 406px;
    }

    .case-page-con .chara ul li {
        line-height: 26px;
    }

    .case-page-til .chara ul li span {
        width: 30%;
    }

    .case-page-til .chara ul li p {
        width: 70%;
        line-height: 26px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .case-details-wrap {
        padding: 60px 0.75rem;
    }

    .case-page-top .slider-container {
        width: 80%;
        float: initial;
        margin: 0 auto;
        margin-top: 10%;
        border-radius: 4px;
    }

    .case-page-con {
        width: 100%;
        margin-left: 0%;
    }

        .case-page-con .box {
            padding: 10%;
            min-height: auto;
        }
}

@media (max-width: 767px) {

    .case-page-top {
        background: #ffffff;
        padding: 0 0.75rem;
    }

    .case-details-wrap {
        padding: 30px 0.75rem;
    }

    .case-page-top .slider-container {
        width: 100%;
        float: initial;
        margin: 0 auto;
        margin-top: 0;
    }

    .case-page-con {
        width: 100%;
        padding: 20px 0;
        margin-left: 0%;
    }

        .case-page-con .box {
            padding: 10px 0 20px 0;
            min-height: auto;
        }

            .case-page-con .box h2 {
                font-size: 26px;
                line-height: 30px;
                text-align: left;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

        .case-page-con .case-page-text p {
            font-size: 16px;
            line-height: 20px;
            margin: 15px 0;
            letter-spacing: 0;
        }

        .case-page-con .chara ul li {
            padding: 10px 0;
        }

            .case-page-con .chara ul li span {
                width: 28%;
            }

            .case-page-con .chara ul li p {
                width: 72%;
            }


        .case-page-con .case-page-more {
            font-size: 17px;
            width: 140px;
            height: 46px;
            line-height: 46px;
        }

    .case-project-cont {
        padding: 0 0.75rem
    }

    .project-cont-title {
        padding-bottom: 6px;
    }

        .project-cont-title span {
            font-size: 26px;
            line-height: 26px;
            font-weight: 400;
        }

    .project-cont-box {
        padding-top: 30px;
    }

        .project-cont-box .item-con {
            color: #666666;
        }

    .case-page-top .slider-status {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 0px 10px;
        border-radius: 20px;
        font-size: 12px;
    }

    .case-page-top .slider-controls {
        bottom: 10px;
        gap: 5px;
    }

    .case-page-top .control-dot {
        width: 8px;
        height: 8px;
    }
}



/* 内容页案例
---------------------- */

.case-page-list .case-column {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.case-page-list .single-case-item {
    margin-bottom: 25px;
}

    .case-page-list .single-case-item .case-bg {
        overflow: hidden;
        border-radius: 10px 10px 0 0;
    }

        .case-page-list .single-case-item .case-bg:hover {
            border-radius: 10px 10px 0 0;
        }

        .case-page-list .single-case-item .case-bg img {
            width: 100%;
            object-fit: cover;
            transition: all 0.5s;
        }

        .case-page-list .single-case-item .case-bg:hover img {
            transform: scale(1.06);
            transition: all 0.5s;
        }

    .case-page-list .single-case-item:hover .case-info-title {
        transition: all 0.5s;
        background: #023174;
        border-radius: 0 0 10px 10px;
    }

        .case-page-list .single-case-item:hover .case-info-title h6 {
            transition: all 0.5s;
            color: #ffffff;
        }

        .case-page-list .single-case-item:hover .case-info-title span {
            transition: all 0.5s;
            color: #dee2e6;
        }



    .case-page-list .single-case-item .case-info-title {
        font-size: 16px;
        padding: 15px 0;
        margin-top: 4px;
        background: #f1f1f1;
        border-radius: 0 0 10px 10px;
        text-align: center;
        transition: all 0.5s;
    }

        .case-page-list .single-case-item .case-info-title h6 {
            color: #023174;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .case-page-list .single-case-item .case-info-title span {
            color: #666666;
            margin-top: 6px;
        }


@media only screen and (min-width: 768px) and (max-width: 991px) {
    .index-case .case-list-wrapper {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {

    .case-page-list .case-column .bordered-btn {
        padding: 5px;
        font-size: 13px;
        border-radius: 5px;
        color: #6c757d;
        border-color: #ddd;
    }
}




/* 首页案例列表
---------------------- */
.index-case .case-list-wrapper {
    margin-bottom: 68px;
}

.index-case .case-list {
    padding: 30px;
}

.index-case .single-case-item {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.index-case .case-bg {
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.5s ease;
}


.index-case .single-case-item .case-bg img {
    transition: all 0.5s ease;
}

.index-case .single-case-item:hover .case-bg img {
    transition: all 0.5s ease;
    transform: scale(1.07);
}

.index-case .single-case-item:hover .case-info-title i {
    width: 100%;
    transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
}

.index-case .case-info-title {
    border-radius: 0 0 8px 8px;
    background: rgb(29 29 29 / 50%);
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
    padding: 20px 30px;
}

    .index-case .case-info-title h6 {
        font-size: 20px;
        color: #ffffff;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .index-case .case-info-title span {
        font-size: 16px;
        color: #ffffff;
        overflow: hidden;
    }

    .index-case .case-info-title i {
        font-size: 16px;
        color: #ffffff;
        overflow: hidden;
    }

    .index-case .case-info-title i {
        display: block;
        width: 24%;
        background: #ffffff;
        height: 1px;
        margin-top: 15px;
        transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
    }


    .index-case .case-info-title a {
        font-size: 16px;
        color: #777;
    }

.index-case .project-slider .owl-nav button i {
    font-size: 24px;
}

.index-case .project-slider .owl-nav {
    margin-top: 30px;
}

    .index-case .project-slider .owl-nav button {
        margin-right: 10px;
    }

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .index-case .case-info-title i {
        width: 20%;
    }

    .index-case .case-list-wrapper {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {

    .index-case .case-info-title {
    }

        .index-case .case-info-title i {
            width: 20%;
        }

    .index-case .case-list-wrapper {
        margin-top: 30px;
    }
}




.project-img-slider img {
    height: 300px;
    object-fit: cover;
    border-radius: 0;
}


.project-img-slider .owl-stage-outer {
    overflow: inherit;
}

.project-img-slider:after {
    position: absolute;
    content: "";
    width: 300%;
    top: 0;
    left: -500%;
    background: #F5F4EC;
    opacity: 0.7;
    z-index: 1;
}

@media (max-width: 767px) {
    #project-3 .mt-40 {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .case-list-box p.pt-40 {
        padding-top: 0;
    }
}

.project-slider-wrap-two .project-img {
    height: 480px;
    object-fit: cover;
}

@media (max-width: 767px) {
    .project-slider-wrap-two .project-img {
        height: auto;
    }
}

.project-details-content h3 {
    font-size: 35px;
    font-weight: 400;
    margin: 30px 0;
}

.project-details-content p {
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .project-details-inner {
        margin-top: 60px;
    }
}

.single-details-item p {
    font-weight: 500;
    color: #023174;
    text-align: right;
    font-size: 18px;
    margin: 0;
}

    .single-details-item p i {
        margin-right: 10px;
    }

.single-details-item span {
    font-size: 17px;
    color: #6c757d;
}

.project-details-info h3 {
    font-size: 35px;
}

.project-details-info p {
    font-size: 20px;
    margin: 30px 0;
}

.project-details-info {
    position: sticky;
    top: 150px;
    transition: top 0.3s ease;
}

.project-details-wrap .nav-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .project-details-wrap .nav-links a {
        font-size: 18px;
        font-weight: 500;
    }

    .project-details-wrap .nav-links span i {
        font-size: 22px;
    }

.project-details-wrap .nav-previous i {
    margin-right: 20px;
}

.project-details-wrap .nav-next i {
    margin-left: 20px;
}

.project-desc .project-desc-title {
    font-size: 35px;
    margin: 20px 0;
    color: #023174;
}

.project-desc .project-desc-sketch {
    color: #6c757d;
}






/* -- 保修政策
---------------------- */
.index-process {
    background: linear-gradient(to bottom, #e9edf3 0%, #ffffff 100%);
}

    .index-process .single-process-item {
        text-align: center;
        padding: 30px;
    }


    .index-process .process-icon {
        display: inline-block;
        padding: 15px;
        /*border: 1px solid #000000;*/
        border-radius: 50%;
        position: relative;
        z-index: 1;
    }

        .index-process .process-icon img {
            width: 60px;
            border-radius: 0;
            /* 核心新增：鼠标移开时的还原过渡，时长和动画匹配 */
            transition: transform 1.5s ease;
            -webkit-transition: -webkit-transform 1.5s ease;
            transform-origin: center; /* 提前把翻转原点写在默认样式里，避免hover时重绘 */
            -webkit-transform-origin: center;
        }

    .index-process .single-process-item:hover .process-icon img {
        /* 动画优先级高于transition，执行动画时过渡暂时失效 */
        animation: process_flip 1.5s ease forwards;
        -webkit-animation: process_flip 1.5s ease forwards;
        /* 覆盖默认transition的时长，确保动画过程不被干扰 */
        transition: none;
        -webkit-transition: none;
    }


/* 定义两次翻转的动画关键帧 */
@keyframes process_flip {
    0% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(-1);
    }

    100% {
        transform: scaleX(1);
    }
}

/* 兼容webkit内核（移动端） */
@-webkit-keyframes process_flip {
    0% {
        -webkit-transform: scaleX(1);
    }

    50% {
        -webkit-transform: scaleX(-1);
    }

    100% {
        -webkit-transform: scaleX(1);
    }
}


.index-process .process-title h5 {
    margin: 30px 0 20px;
    font-size: 24px;
    color: #023174;
}


    .index-process .process-title h5:before {
        position: absolute;
        content: "";
        bottom: 30px;
        left: 0;
        width: 0%;
        height: 2px;
        background: #171717;
        visibility: hidden;
        opacity: 0;
        transition: all 0.5s ease 0s;
    }




.index-process span.step-count {
    position: absolute;
    top: 0;
    right: 0px;
    background: #000;
    color: #fff;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.index-process .process-content p {
    font-size: 15px;
    line-height: 25px;
    margin: 0;
}

.index-process .process-line {
    position: absolute;
    content: "";
    top: 50%;
    left: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4588235294);
    transform: translate(100%, 0);
    height: 1px;
}

@media only screen and (min-width: 1201px) and (max-width: 1440px) {
    .index-process .process-line {
        left: 25%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .index-process .process-line {
        left: 25%;
        width: 80%;
    }
}



@media only screen and (min-width: 768px) and (max-width: 991px) {
    .index-process .process-line {
        left: 100%;
        width: 60%;
    }

    .index-process .process-icon {
        padding: 35px;
    }
}

@media (max-width: 767px) {

    .index-process .process-icon {
        padding: 15px;
    }

    .index-process .single-process-item {
        padding: 10px 0 30px 0;
        border-bottom: 1px solid #dee2e6;
    }

    .index-process .process-title h5 {
        font-size: 20px;
        margin: 10px 0 20px 0;
    }

    .index-process .process-content {
        height: 50px;
    }

    .index-process p.pt-40 {
        padding-top: 0;
    }
}




/* 售后列表
-------------------------------*/


.service-after-list {
    background: #f1f1f1;
}

.service-after-column {
    width: 1280px;
    margin: 0 auto;
    padding: 60px 6%;
    background: #ffffff;
}

.serv-after-quote img {
    width: 50px !important;
}

.single-serv-after-item {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

    .single-serv-after-item .serv-after-content {
        width: 100%;
        padding-bottom: 30px;
        border-bottom: 1px solid #ddd;
    }

        .single-serv-after-item .serv-after-content .serv-hourglass {
            text-align: right;
            color: #6c757d;
            line-height: 30px;
        }

            .single-serv-after-item .serv-after-content .serv-hourglass i {
                margin: 0 5px;
            }


.serv-after-text .serv-text-content {
    display: inline-block;
    width: 100%;
    margin: 5px 0;
}

.serv-after-text i {
    font-size: 22px;
    line-height: 30px;
    color: #023174;
    margin: 0 10px;
    padding-top: 4px;
    float: left;
}

.serv-after-text p {
    color: #333333;
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
    display: table-cell;
}

.serv-after-quote {
    flex: 0 0 60px;
}

.serv-after-author {
    margin-top: 30px;
}

    .serv-after-author h3 {
        color: #023174;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .serv-after-author span {
        color: #777;
    }

@media only screen and (min-width: 992px) and (max-width: 1280px) {
    .service-after-column {
        width: 900px;
    }
}


@media only screen and (min-width: 768px) and (max-width: 991px) {

    .service-after-column {
        width: 700px;
    }

    .serv-after-one {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {

    .serv-after-text .serv-text-content {
        margin: 2px 0;
    }

    .service-after-column {
        width: 100%;
        padding: 30px 4%;
    }

    .serv-after-text p {
        color: #444444;
        font-size: 16px;
        line-height: 26px;
        font-weight: 400;
        text-align: justify;
        letter-spacing: 1px;
    }

    .serv-after-text i {
        font-size: 22px;
        line-height: 22px;
    }

    .single-serv-after-item {
        flex-direction: column;
        margin-top: 10px;
    }

        .single-serv-after-item .serv-hourglass {
            font-size: 14px;
            padding-top: 30px;
        }

    .serv-after-one {
        margin-top: 0;
    }
}


/* -- 热销产品
----------------------*/

.product-page-list .product-column {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-page-list .product-page-row {
}

.page-product-item {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
}

    .page-product-item .pro-item-img {
        background: linear-gradient(to bottom, #f1f1f1 0%, #ffffff 100%);
        overflow: hidden;
    }

    .page-product-item img {
        transition: all 0.5s;
    }

    .page-product-item :hover img {
        transform: scale(1.06);
        transition: all 0.5s;
        border-radius: 10px;
    }

    .page-product-item .pro-item-title {
        margin-top: 10px;
        background: #023174;
        text-align: center;
        border-radius: 0 0 10px 10px;
        background: #023174;
        transition: all 0.5s;
    }

        .page-product-item .pro-item-title span {
            color: #f0f0f0;
            font-size: 13px;
            margin-top: 10px;
        }

        .page-product-item .pro-item-title h5 {
            padding: 6px 0 12px 0;
            color: #ffffff;
        }

            .page-product-item .pro-item-title h5 a {
                font-size: 20px;
                color: #666666;
            }



@media only screen and (min-width: 768px) and (max-width: 991px) {
}

@media (max-width: 767px) {
    .product-page-list .product-column .bordered-btn {
        padding: 5px;
        font-size: 13px;
        border-radius: 5px;
        color: #6c757d;
        border-color: #ddd;
    }

    .page-product-item .pro-item-title h5 {
        font-size: 18px;
    }
}







/* -- 首页新闻
----------------------*/

.index-news {
}


    .index-news .single-news-pic {
        position: relative;
        z-index: 1;
        margin-bottom: 30px;
        background: var(--white);
        border-bottom: 4px solid transparent;
        box-shadow: 8px 10px 20px 1px rgba(152,152,152,0.16);
        border-radius: 0 0 20px 20px;
        padding: 12px;
        text-align: center;
        transition: border .3s ease;
    }


        .index-news .single-news-pic:hover {
            border-bottom: 4px solid #023174
        }

        .index-news .single-news-pic .news-info-img {
            overflow: hidden;
            border-radius: 10px 10px 0 0;
        }

        .index-news .single-news-pic img {
            width: 100%;
            transition: all 0.5s;
        }

        .index-news .single-news-pic :hover img {
            transform: scale(1.07);
            transition: all 0.5s;
        }

    .index-news .news-info-des {
        margin-top: 10px;
    }

        .index-news .news-info-des span {
            color: #777;
            font-size: 15px;
        }

        .index-news .news-info-des h5 {
            margin-top: 10px;
            font-size: 18px;
            color: #023174;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

    .index-news .single-news-item {
        padding: 30px 0;
        border-radius: 10px;
        border-bottom: 1px solid #eeeeee;
    }

        .index-news .single-news-item:hover {
            background: var(--white);
            box-shadow: 8px 10px 20px 1px rgba(152,152,152,0.16), inset 0 -4px 0 #023174; /* 模拟底部边框 */
            transition: all .3s ease;
        }



        .index-news .single-news-item .news-img {
            display: none;
        }

        .index-news .single-news-item .news-title h5 {
            font-size: 22px;
            color: #023174;
            margin: 10px 0;
        }

        .index-news .single-news-item .news-title span {
            color: #999999;
            font-size: 15px;
        }

        .index-news .single-news-item .news-content p {
            font-size: 14px;
            line-height: 20px;
            color: #666666;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }


@media (max-width: 767px) {

    .index-news-pic-box div:nth-of-type(7), .index-news-pic-box div:nth-of-type(8) {
        display: none;
    }

    .index-news .single-news-pic {
        padding: 0 0 12px 0;
        margin-bottom: 20px;
    }

    .index-news .single-news-item {
        border-radius: 0 0 20px 20px;
        padding: 0 0 12px 0;
        margin-bottom: 20px;
        overflow: hidden;
        background: var(--white);
        box-shadow: 8px 10px 20px 1px rgba(152,152,152,0.16);
        text-align: center;
        transition: border .3s ease;
    }

        .index-news .single-news-item :hover img {
            transform: scale(1.07);
            transition: all 0.5s;
        }

        .index-news .single-news-item .news-img {
            border-radius: 10px 10px 0 0;
            display: block;
        }

            .index-news .single-news-item .news-img img {
                border-radius: 10px 10px 0 0;
                transition: all 0.5s;
            }


    .index-news .news-info-des h5 {
        font-size: 16px;
        padding: 0 5px;
        line-height: 21px;
        text-align: justify;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .index-news .single-news-item .news-title {
        margin-top: 10px;
    }

        .index-news .single-news-item .news-title h5 {
            margin: 10px 0;
            font-size: 16px;
            padding: 0 5px;
            line-height: 21px;
            text-align: justify;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

    .index-news .single-news-item .news-content {
        display: none;
    }

        .index-news .single-news-item .news-content p {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
}


#team-2.team-section {
    height: 700px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    #team-2.team-section {
        height: auto;
    }
}

#team-2.team-section:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7490196078);
    opacity: 0.8;
    z-index: -1;
}

#team-2 .team-intro-wrap {
    padding-top: 30px;
    padding-right: 80px;
}

#team-2 .section-title h2 {
    font-size: 45px;
    font-weight: 400;
    line-height: 50px;
}

#team-2 .team-content-wrap {
    padding-left: 60px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #team-2 .team-content-wrap {
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    #team-2 .team-content-wrap {
        padding-left: 0;
        margin-top: 60px;
    }
}

#team-2 .single-team-wrap {
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #team-2 .single-team-wrap {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    #team-2 .single-team-wrap {
        margin-bottom: 30px;
    }
}

#team-2 .single-team-wrap:hover .news-info-des {
    transform: translateY(0);
}

#team-2 .team-img {
    position: relative;
    overflow: hidden;
}

#team-2 .news-info-des {
    position: absolute;
    bottom: -1px;
    left: 0;
    background: #000;
    width: 100%;
    padding: 30px 30px 20px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

    #team-2 .news-info-des h6 {
        font-size: 18px;
        color: #fff;
    }

    #team-2 .news-info-des p {
        margin: 0;
    }

#team-3 .single-team-wrap {
    position: relative;
    z-index: 1;
}

    #team-3 .single-team-wrap:hover .news-info-des {
        transform: translateY(0);
    }

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #team-3 .single-team-wrap {
        padding: 15px;
    }
}

@media (max-width: 767px) {
    #team-3 .single-team-wrap {
        padding: 15px;
    }
}

#team-3 .team-img {
    position: relative;
    overflow: hidden;
}

#team-3 .news-info-des {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #000;
    width: 100%;
    padding: 30px 30px 20px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

    #team-3 .news-info-des h6 {
        font-size: 18px;
        color: #fff;
    }

    #team-3 .news-info-des p {
        margin: 0;
    }

@media (max-width: 767px) {
    #team-3 p.pt-40 {
        padding-top: 0;
    }
}

/*  新闻列表
----------------*/


.news-list-box .single-news-item {
    margin-bottom: 60px;
    background: var(--white);
    border-bottom: 4px solid transparent;
    box-shadow: 8px 10px 20px 1px rgba(152,152,152,0.16);
    border-radius: 20px;
    padding: 20px;
    transition: border .3s ease;
    overflow: hidden;
}

    .news-list-box .single-news-item:hover {
        border-bottom: 4px solid #023174;
    }

    .news-list-box .single-news-item .news-img {
        overflow: hidden;
        border-radius: 12px;
    }

        .news-list-box .single-news-item .news-img img {
            transition: all 0.5s;
        }

        .news-list-box .single-news-item .news-img:hover img {
            transition: all 0.5s;
            transform: scale(1.07);
        }


.news-list-box .news-meta span {
    color: #999999;
    font-size: 14px;
}

.news-list-box .news-img {
    margin-bottom: 30px;
}

    .news-list-box .news-img img {
        width: 100%;
        object-fit: cover;
    }

.news-list-box .news-title {
    margin: 10px 0;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
}

    .news-list-box .news-title h5 {
        color: #023174;
    }

.news-list-box .news-content p {
    color: #666666;
    font-size: 14px;
    line-height: 26px;
    margin-bottom: 0;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.news-list-box .bordered-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border-color: #023174;
    color: #023174;
    font-size: 14px;
}

    .news-list-box .bordered-btn:hover {
        color: #ffffff;
    }


@media (max-width: 767px) {

    .news-list-box .news-list-single {
        padding: 0 8px 8px 8px;
    }

    .news-list-box .single-news-item {
        margin-bottom: 8px;
        padding: 0 0 5px 0;
    }

        .news-list-box .single-news-item .news-img {
            margin-bottom: 10px;
            border-radius: 12px 12px 0 0;
        }


    .news-list-box .news-meta, .news-list-box .news-title, .news-list-box .news-content {
        padding: 0 5px;
    }


        .news-list-box .news-title h5 {
            text-align: inherit;
            font-size: 17px;
        }

        .news-list-box .news-content p {
            text-align: inherit;
            line-height: 20px;
        }
}




.news-meta-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

    .news-meta-wrap .news-meta p {
        font-size: 16px;
        margin: 0;
        margin-right: 15px;
    }

@media (max-width: 767px) {
    .news-meta-wrap {
        flex-direction: column;
    }

        .news-meta-wrap .news-meta p {
            margin-top: 10px;
        }
}

.news-meta-wrap .news-meta p i {
    font-size: 20px;
    margin-right: 10px;
    color: #023174;
}


.title-box {
    margin-bottom: 48px;
}

    .title-box .title {
    }

        .title-box .title h1 {
            font-weight: bold;
            font-size: 30px;
            color: #333333;
            line-height: 36px;
        }







    .title-box .attribute {
        margin-top: 24px;
    }

        .title-box .attribute span {
            font-size: 14px;
            color: #999999;
            line-height: 20px;
            margin-right: 25px;
        }




.news-content-wrap {
    max-width: calc(100% - 15px);
    color: #333333;
}

@media (max-width: 767px) {
    .news-content-wrap {
        max-width: calc(100% - 0px);
    }
}

.news-content-wrap h2 {
    font-size: 36px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .title-box {
        margin-bottom: 35px;
    }

        .title-box .title h1 {
            font-size: 26px;
        }

    .news-content-wrap h2 {
        font-size: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .title-box {
        margin-bottom: 30px;
    }

        .title-box .title h1 {
            font-size: 25px;
        }

    .news-content-wrap h2 {
        font-size: 28px;
    }
}

@media (max-width: 767px) {

    .title-box {
        margin-bottom: 25px;
    }

        .title-box .title h1 {
            font-size: 24px;
        }

    .news-content-wrap h2 {
        font-size: 24px;
    }
}

.news-content-wrap p {
    text-align: justify;
}

.news-content-wrap .social-icon i {
    font-size: 18px;
    color: #fff;
    margin-right: 10px;
    background: #1D1D1D;
    border-color: #1D1D1D;
    border-radius: 50%;
    padding: 10px;
}

    .news-content-wrap .social-icon i:hover {
        background: #023174;
        border-color: #023174;
        color: #fff;
    }

.news-quote-wrap {
    background: #eee;
    padding: 40px 50px;
    display: flex;
    align-items: start;
    justify-content: space-around;
    height: 250px;
    margin-bottom: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .news-quote-wrap {
        padding: 40px 35px;
    }
}

@media (max-width: 767px) {
    .news-quote-wrap {
        flex-direction: column;
        padding: 30px;
        height: auto;
    }
}

.news-quote-wrap .quote-icon {
    width: 100px;
}

    .news-quote-wrap .quote-icon i {
        font-size: 45px;
    }

.news-quote-wrap .news-quote-text {
    padding-left: 50px;
}

@media (max-width: 767px) {
    .news-quote-wrap .news-quote-text {
        padding-left: 0;
    }
}

.news-quote-wrap .news-quote-text p {
    font-size: 17px;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 767px) {
    .news-quote-wrap .news-quote-text p {
        margin-top: 20px;
        font-size: 17px;
    }
}

.news-quote-wrap h6.news-author {
    font-size: 18px;
    font-weight: 600;
    position: relative;
    padding-left: 80px;
    margin-top: 30px;
}

@media (max-width: 767px) {
    .news-quote-wrap h6.news-author {
        padding-left: 0px;
    }
}

.news-quote-wrap h6.news-author:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 60px;
    height: 2px;
    background: #061815;
    margin-top: -1px;
}

@media (max-width: 767px) {
    .news-quote-wrap h6.news-author:before {
        display: none;
    }
}

.news-quote-wrap h6.news-author span {
    font-weight: 400;
}

.news-quote-wrap h2 {
    margin: 30px 0;
}

.news-tag-wrap span {
    background: #fff;
    padding: 10px 16px;
    margin-left: 15px;
}

.pagination-wrap {
    padding: 35px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
}

    .pagination-wrap a {
        font-size: 16px;
        color: #061815;
        display: flex;
        align-items: center;
    }

        .pagination-wrap a:hover {
            color: #023174;
        }


        .pagination-wrap a i {
            font-size: 25px;
            margin: 0 15px;
        }

.commetns-section-wrap {
    margin-top: 30px;
}

.single-comments-wrap {
    background: #eee;
    padding: 35px 25px;
    margin: 35px 0px;
    position: relative;
}

    .single-comments-wrap .single-comments-inner {
        display: flex;
    }

@media (max-width: 767px) {
    .single-comments-wrap .single-comments-inner {
        flex-direction: column;
    }
}

.single-comments-wrap .single-comments-inner .comments-autor-thumb {
    flex: 0 0 130px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .single-comments-wrap .single-comments-inner .comments-autor-thumb {
        flex: 0 0 140px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-comments-wrap .single-comments-inner .comments-autor-thumb {
        flex: 0 0 140px;
    }
}

.single-comments-wrap .single-comments-inner .comments-content {
    padding-left: 25px;
}

@media (max-width: 767px) {
    .single-comments-wrap .single-comments-inner .comments-content {
        padding-left: 0;
        margin-top: 20px;
    }
}

.single-comments-wrap .single-comments-inner .comments-content h6 {
    font-size: 20px;
}

.single-comments-wrap .single-comments-inner .comments-content p.comments-date {
    font-size: 16px;
    color: #171717;
    font-weight: 500;
    text-decoration: underline;
    margin: 14px 0;
}

.single-comments-wrap a.reply-btn {
    background: #0B0D26;
    color: #fff;
    padding: 6px 15px;
    position: absolute;
    top: 35px;
    right: 55px;
    font-size: 16px;
}

@media (max-width: 767px) {
    .single-comments-wrap a.reply-btn {
        right: 25px;
    }
}

.single-comments-wrap a.reply-btn:hover {
    background: #1D1D1D;
    color: #fff;
}

.comments-form-wrap {
    background: #fff;
    padding: 35px 0;
}

    .comments-form-wrap h3 {
        margin: 0 0 30px;
    }

    .comments-form-wrap .comments-form input,
    .comments-form-wrap .comments-form textarea {
        border: none;
        border-bottom: 1px solid #eee;
        margin-bottom: 30px;
    }

    .comments-form-wrap .comments-form textarea {
        height: 130px;
    }



.search-bar-wrap {
    background: #eee;
    padding: 35px;
}

    .search-bar-wrap input {
        border: none;
        background: #fff;
        padding: 15px;
        border-radius: 0;
    }

    .search-bar-wrap i {
        font-size: 18px;
        background: #171717;
        border: 0;
        padding: 15px;
        color: #fff;
        display: flex;
        align-items: center;
    }

        .search-bar-wrap i:hover {
            cursor: pointer;
        }

.news-category {
    border: 1px solid #eee;
    margin: 30px 0;
    padding: 35px;
}

    .news-category ul li {
        display: block;
    }

        .news-category ul li a {
            font-size: 17px;
            font-weight: 500;
            color: #061815;
            margin-bottom: 25px;
        }

            .news-category ul li a:hover {
                color: #023174;
            }

        .news-category ul li i {
            margin-right: 15px;
        }



.news-sidebar {
    position: sticky;
    top: 100px;
    transition: top 0.3s ease;
    margin-left: 12%;
}


    .news-sidebar h5 {
        font-size: 24px;
        margin-bottom: 25px;
    }

@media only screen and (min-width: 1201px) and (max-width: 1400px) {
    .news-sidebar {
        margin-left: 0;
        margin-top: 0px;
    }
}


@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .news-sidebar {
        margin-left: 0;
        margin-top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .news-sidebar {
        margin-left: 0;
        margin-top: 30px;
    }
}



.recent-post-wrap {
    border: 1px solid #eee;
    padding: 30px 40px;
}




@media (max-width: 767px) {

    .news-sidebar {
        margin-left: 0;
        margin-top: 30px;
    }

    .recent-post-wrap {
        padding: 20px;
    }
}

.single-recent-post {
    padding: 25px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.recent-post-thumbs {
    flex: 0 0 120px;
}

    .recent-post-thumbs img {
        border-radius: 4px;
    }

.recent-post-content {
    padding-left: 15px;
}

    .recent-post-content p {
        color: #6c757d;
        margin: 0;
    }

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .recent-post-content p {
        margin: 0;
    }
}

@media (max-width: 767px) {
    .recent-post-content p {
        margin: 0;
        font-size: 16px;
    }
}

.recent-post-content a h6 {
    font-size: 17px;
    color: #061815;
}

@media (max-width: 767px) {
    .recent-post-content a h6 {
        font-size: 16px;
        line-height: 20px;
    }
}

.recent-post-content a h6:hover {
    color: #1D1D1D;
}

.popular-tag-wrap {
    border: 1px solid #eee;
    margin: 30px 0;
    padding: 35px;
}

    .popular-tag-wrap span {
        font-size: 16px;
        font-weight: 500;
        border: 1px solid #eee;
        color: #061815;
        padding: 10px 15px;
        margin: 5px;
    }

        .popular-tag-wrap span:hover {
            background: #023174;
            border-color: #023174;
            color: #fff;
            cursor: pointer;
        }

/* 26. CTA CSS 
-------------*/
.cta-text-wrap h1 {
    font-size: 80px;
    font-weight: 300;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta-text-wrap h1 {
        font-size: 70px;
    }
}

@media (max-width: 767px) {
    .cta-text-wrap h1 {
        font-size: 40px;
    }
}

.cta-section-two {
    background-size: cover;
    background-position: center;
}

/* 联系我们
-------------*/

.contact-list-box {
    position: relative;
    overflow: hidden;
    background: #f4f6f9;
    margin: 120px 0;
}

    .contact-list-box:after {
        content: "";
        display: block;
        width: 50%;
        height: 100%;
        background: #fff;
        position: absolute;
        left: 0;
        top: 0;
    }

    .contact-list-box .contact-info-wrap {
        padding: 60px;
    }

    .contact-list-box .contact-list-form {
        z-index: 1;
    }

    .contact-list-box .contact-list-info .single-contact-info {
        margin-bottom: 20px;
    }

        .contact-list-box .contact-list-info .single-contact-info h6 {
            font-size: 18px;
            margin-bottom: 6px;
            position: relative;
            z-index: 1;
            padding-left: 30px;
        }

        .contact-list-box .contact-list-info .single-contact-info .p-xl {
            font-size: 20px;
        }

        .contact-list-box .contact-list-info .single-contact-info p {
            color: #023174;
            font-size: 16px;
            margin: 16px 0;
        }

            .contact-list-box .contact-list-info .single-contact-info p i {
                margin-right: 5px;
            }


        .contact-list-box .contact-list-info .single-contact-info h6:before {
            position: absolute;
            content: "";
            top: 50%;
            left: 0;
            width: 15px;
            height: 2px;
            background: #fff;
            margin-top: -1px;
        }


    .contact-list-box .section-title h1 {
        font-size: 90px;
        font-weight: 500;
        line-height: 100px;
    }

    .contact-list-box .section-title i {
        transform: rotate(-45deg);
        position: relative;
        top: 10px;
    }

    .contact-list-box .contact-text {
        text-align: justify;
    }


    .contact-list-box .subimit-form-wrap {
        padding-right: 100px;
    }


        .contact-list-box .subimit-form-wrap input,
        .contact-list-box .subimit-form-wrap textarea {
            border: 1px solid #ddd;
            margin-bottom: 30px;
        }

        .contact-list-box .subimit-form-wrap textarea {
            height: 80px;
        }

        .contact-list-box .subimit-form-wrap a {
            width: 160px;
            display: inline-block;
            background: #023174;
            border: 1px solid #023174;
            text-align: center;
            color: #fff;
            -webkit-transition: 0.3s;
            transition: 0.3s;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            line-height: 40px;
            padding: 0px 30px;
        }

            .contact-list-box .subimit-form-wrap a:hover {
                background: #ffffff;
                color: #023174;
                border: 1px solid #023174;
            }

        .contact-list-box .subimit-form-wrap i {
            margin-left: 5px;
            transform: rotate(-45deg);
        }

    .contact-list-box .single-contact-info {
        border-bottom: 1px solid #ddd;
        margin-bottom: 0;
    }

        .contact-list-box .single-contact-info h4 {
            margin: 0 0 15px;
        }

    .contact-list-box .social-area {
        margin-top: 30px;
    }

        .contact-list-box .social-area a {
            background: #9F9F9D;
            color: #fff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }

            .contact-list-box .social-area a i {
                font-size: 14px;
                margin-right: 0;
            }

    .contact-list-box .contact-list-info {
        display: flex;
        flex-direction: column;
        padding-left: 100px;
    }


@media only screen and (min-width: 768px) and (max-width: 1200px) {

    .contact-list-box {
        margin: 0;
        background: #ffffff;
    }

        .contact-list-box:after {
            width: 100%;
            height: 50%;
            display: none;
        }

        .contact-list-box .contact-info-wrap {
            padding: 50px 140px;
        }

        .contact-list-box .contact-list-content {
            order: 1;
        }

        .contact-list-box .contact-list-form {
            order: 2;
        }

        .contact-list-box .subimit-form-wrap {
            padding: 0 0 80px 0;
        }

        .contact-list-box .contact-list-info {
            padding: 0 0 80px 0;
        }
}


@media (max-width: 767px) {

    .contact-list-box {
        margin: 0;
        background: #ffffff;
    }

        .contact-list-box:after {
            width: 100%;
            height: 50%;
            display: none;
        }

        .contact-list-box .contact-info-wrap {
            padding: 50px 20px;
        }

        .contact-list-box .contact-list-content {
            order: 1;
        }

        .contact-list-box .contact-list-form {
            order: 2;
        }

        .contact-list-box .subimit-form-wrap {
            padding: 0 0 80px 0;
        }

        .contact-list-box .contact-list-info {
            padding: 0 0 80px 0;
        }
}

/*  首页-城市经销商数量
------------------------- */

.index-counter {
    background: #023174;
    position: relative;
}

    /*    .index-counter .mrb_dec {
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 100%;
        background: rgba(255,255,255,0.1);
        top: -15%;
        left: -5%;
    }
*/

    .index-counter .svg-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 500px;
        z-index: 1;
    }

        .index-counter .svg-bg svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: block;
        }


    .index-counter .single-counter-title {
        text-align: center;
        margin-bottom: 20px;
    }

        .index-counter .single-counter-title h4 {
            font-size: 54px;
            font-weight: 400;
            letter-spacing: 2px;
            color: #ffffff;
            margin-bottom: 20px;
        }

        .index-counter .single-counter-title span {
            font-size: 28px;
            font-weight: 400;
            letter-spacing: 2px;
            color: #eeeeee;
        }

    .index-counter .single-counter-box {
        text-align: center;
        margin: 30px 0 10px 0;
    }

        .index-counter .single-counter-box p.counter-number {
            font-size: 70px;
            font-weight: 400;
            line-height: 1.5;
            letter-spacing: 1px;
            color: #ffffff;
            border-bottom: 1px solid #ddd;
            display: inline-block;
        }

            .index-counter .single-counter-box p.counter-number span {
                font-size: 60px;
            }

            .index-counter .single-counter-box p.counter-number i {
                font-size: 16px;
                margin-left: 6px;
                color: #ddd;
            }


        .index-counter .single-counter-box h6 {
            font-size: 25px;
            font-weight: 400;
            color: #f2f2f2;
        }


@media only screen and (min-width: 1201px) and (max-width: 1366px) {

    .index-counter {
        padding: 80px 0;
    }

        .index-counter .svg-bg {
            height: 380px;
        }


        .index-counter .single-counter-box {
            margin: 16px 0;
        }

        .index-counter .single-counter-title h4 {
            font-size: 48px;
            margin-bottom: 10px;
        }

        .index-counter .single-counter-box p.counter-number span {
            font-size: 46px;
        }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .index-counter {
        padding: 80px 0;
    }

        .index-counter .svg-bg {
            height: 350px;
        }

        .index-counter .index-single-counter {
            padding: 0;
        }

        .index-counter .single-counter-box {
            margin: 16px 0;
        }

        .index-counter .single-counter-title h4 {
            font-size: 48px;
            margin-bottom: 10px;
        }


        .index-counter .single-counter-box p.counter-number span {
            font-size: 46px;
        }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .index-counter .svg-bg {
        height: 330px;
    }


    .index-counter .single-counter-box p.counter-number {
        font-size: 55px;
    }


    .index-counter .index-single-counter {
        padding: 0 15px;
    }
}

@media (max-width: 767px) {

    .index-counter .svg-bg {
        height: 180px;
    }

    .index-counter .single-counter-title {
        margin: 10px 0;
    }

        .index-counter .single-counter-title h4 {
            font-size: 34px;
            margin-bottom: 0;
        }

        .index-counter .single-counter-title span {
            font-size: 16px;
            margin-top: 10px;
            letter-spacing: 1px;
        }

    .index-counter .index-single-counter {
        padding: 0;
    }

    .index-counter .single-counter-box {
        margin: 10px 0;
        text-align: center;
    }

        .index-counter .single-counter-box p.counter-number {
            font-size: 50px;
        }

        .index-counter .single-counter-box h6 {
            font-size: 17px;
        }

        .index-counter .single-counter-box p.counter-number span {
            font-size: 36px;
        }

        .index-counter .single-counter-box p.counter-number i {
            font-size: 14px;
            margin-left: 3px;
            color: #ddd;
        }
}


/* Footer 底部
-------------------*/
.footer-section {
    background-color: #023174;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 500px;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .footer-section {
        height: auto;
    }
}

.footer-section:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #023174;
    opacity: 0.5;
    z-index: -1;
}


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

    .footer-section .single-contact-info h6 {
        font-size: 18px;
        margin-bottom: 6px;
        position: relative;
        z-index: 1;
        padding-left: 30px;
    }

    .footer-section .single-contact-info .p-xl {
        font-size: 20px;
    }

    .footer-section .single-contact-info p {
        color: rgba(255, 255, 255, 0.6901960784);
        font-size: 16px;
        margin: 0;
    }

        .footer-section .single-contact-info p i {
            margin-right: 5px;
        }


    .footer-section .single-contact-info h6:before {
        position: absolute;
        content: "";
        top: 50%;
        left: 0;
        width: 15px;
        height: 2px;
        background: #fff;
        margin-top: -1px;
    }



.footer-section .text-qr-code {
    margin-top: 50px;
}

    .footer-section .text-qr-code ul {
        list-style: none;
        display: flex;
        justify-content: left;
        gap: 20px;
        flex-wrap: wrap;
    }

    .footer-section .text-qr-code li {
        position: relative;
        text-align: center;
    }

    .footer-section .text-qr-code a {
        display: block;
        text-decoration: none;
        transition: transform 0.3s ease;
    }

        .footer-section .text-qr-code a:hover {
            transform: translateY(-5px);
        }

    .footer-section .text-qr-code img.platform-icon {
        width: 48px;
        transition: all 0.3s ease;
    }

    .footer-section .text-qr-code a:hover .platform-icon {
        border-color: #3498db;
    }

.footer-section .qr-code-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 10;
    background: white;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    width: 158px;
}

    .footer-section .qr-code-popup::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 10px solid transparent;
        border-top-color: white;
    }

.footer-section .text-qr-code li:hover .qr-code-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}

.footer-section .qr-code-popup img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
}

@media (max-width: 768px) {

    .footer-section .text-qr-code img.platform-icon {
        width: 42px;
        height: 42px;
    }

    .qr-code-popup {
        width: 160px;
    }

        .qr-code-popup img {
            width: 130px;
            height: 130px;
        }
}



.site-info {
    padding: 15px 0;
}

    .site-info p {
        font-size: 15px;
    }

.footer-text p {
    font-size: 22px;
    line-height: 32px;
}

@media (max-width: 767px) {
    .footer-text p {
        font-size: 18px;
        line-height: 28px;
    }

    .site-info p a {
        font-size: 14px;
        display: block;
    }
}

a.footer-btn.bordered-btn {
    border: 2px solid;
    padding: 20px 60px;
    font-size: 20px;
    font-weight: 500;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    a.footer-btn.bordered-btn {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    a.footer-btn.bordered-btn {
        margin-top: 30px;
    }
}

.footer-bottom {
    border-top: 1px solid #ddd;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer-section-three .mt-120 {
        margin-top: 15px;
    }
}

@media (max-width: 767px) {
    .footer-section-three .mt-120 {
        margin-top: 15px;
    }
}


.breadcrumb-area {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: grid;
    place-items: center;
    min-height: 600px;
    position: relative;
}


    .breadcrumb-area:before {
        background-color: rgba(0, 0, 0, .3);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
        content: "";
          z-index: 1;
    }


    .breadcrumb-area .breadcrumb-title {
        position: absolute;
        width: 80%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9;
    }

        .breadcrumb-area .breadcrumb-title .box {
            text-align: center;
        }

        .breadcrumb-area .breadcrumb-title h1 {
            font-size: 70px;
            font-weight: bold;
            font-family: 'Jost';
            color: rgb(251 250 247 / 75%);
        }

        .breadcrumb-area .breadcrumb-title p {
            font-size: 22px;
            letter-spacing: 6px;
            margin-top: 12px;
            color: #f1f1f1;
        }

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .breadcrumb-area.banner-bg {
        min-height: 400px;
    }

    .breadcrumb-area .breadcrumb-title h1 {
        font-size: 50px;
    }
}

@media (max-width: 767px) {

    .breadcrumb-area .breadcrumb-title {
        top: 60%;
    }

    .breadcrumb-area.banner-bg {
        min-height: 240px;
    }

    .breadcrumb-area .breadcrumb-title h1 {
        font-size: 34px;
    }

    .breadcrumb-area .breadcrumb-title p {
        font-size: 18px;
        letter-spacing: 4px;
        margin-top: 6px;
    }
}

.breadcrumb-area .breadcrumb-icon i {
    font-size: 24px;
    color: #fff;
    margin-top: 30px;
}

.breadcrumb-area.white-bg {
    height: 300px;
}

    .breadcrumb-area.white-bg .breadcrumb-icon i {
        color: inherit;
        font-weight: 600;
    }

.news-dtl-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .news-dtl-bg {
        height: 600px;
    }
}

.news-dtl-bg:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #090A1A;
    opacity: 0.3;
    top: 0;
    left: 0;
    z-index: -1;
}

@media (max-width: 767px) {
    .news-banner-wrap {
        padding-top: 80px;
    }
}

@media (max-width: 767px) {
    .news-banner-wrap h2 {
        font-size: 30px;
        line-height: 36px;
    }
}

.banner-section span {
    text-transform: uppercase;
    font-size: 14px;
    background: #023174;
    padding: 6px 14px;
    letter-spacing: 1px;
}

.banner-section .news-meta p {
    color: #fff;
}

/* 首页—荣誉认证
-------------------------*/

.index-gray .gray-box {
    float: left;
}

.index-gray .gray-info {
    padding-top: 20px;
}

    .index-gray .gray-info h6 {
        font-size: 22px;
        text-align: justify;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .index-gray .gray-info p {
        font-size: 14px;
        line-height: 20px;
        padding-top: 15px;
        color: #777777;
        text-align: justify;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }


@media (max-width: 767px) {
    .index-gray .gray-box {
        margin-bottom: 20px;
    }

    .index-gray .gray-info h6 {
        font-size: 16px;
    }

    .index-gray .gray-info p {
        font-size: 13px;
        padding-top: 10px;
    }
}



/* 关于我们
-------------------------*/
.timeline-wrapper {
    position: relative;
    z-index: 1;
}

.timeline-item:not(:last-child) {
    padding: 50px 0;
}

.timeline-line-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 1px;
}

span.timeline-line {
    background: #ddd;
    display: block;
    height: 100%;
}

.timeline-inner {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    position: relative;
    z-index: 1;
}


/*    .timeline-inner:hover .timeline-content-wrap {
        border-bottom: 4px solid #023174
    }
*/
.timeline-img-wrap {
    width: 50%;
    flex-shrink: 0;
    text-align: right;
    padding: 0 10% 0 0;
}

    .timeline-img-wrap img {
        border-radius: 10px
    }

.timeline-content-wrap {
    width: 50%;
    padding: 0 0 0 10%;
}

.timeline-item.reverse .timeline-content-wrap {
    padding: 0 10% 0 0;
    text-align: end;
}

.timeline-item.reverse .timeline-img-wrap {
    padding: 0 0 0 10%;
}

.timeline-date {
    font-size: 60px;
    line-height: 60px;
    font-weight: bold;
    color: #023174;
}

    .timeline-date em {
        font-style: initial;
        font-size: 20px;
        margin-left: 6px;
    }


.timeline-title {
    margin: 15px 0;
    font-size: 30px;
    color: #333333;
}

.timeline-text {
    color: #666666;
}

.time-line-point-wrap {
    position: absolute;
    color: #fff;
    font-size: 1em;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.time-line-point {
    background-color: #272727;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
}

@media (max-width: 767px) {

    .timeline-item:not(:last-child) {
        padding: 0 0 20px 0;
    }

    .timeline-line-wrap {
        display: none;
    }

    .timeline-inner {
        flex-direction: column;
    }

    .timeline-img-wrap {
        width: 100%;
        padding: 0;
    }

    .timeline-content-wrap {
        width: 100%;
        padding: 0;
        margin-top: 20px;
        text-align: center;
    }

    .timeline-date {
        font-size: 46px;
        line-height: 46px;
    }

        .timeline-date em {
            font-size: 18px;
        }

    .timeline-title {
        font-size: 22px;
    }


    .timeline-item.reverse .timeline-content-wrap {
        padding: 0;
        margin-top: 20px;
        text-align: center;
    }

    .timeline-item.reverse .timeline-img-wrap {
        padding: 0;
    }

    h5 .timeline-title {
        margin-top: 5px;
    }

    .time-line-point-wrap {
        display: none;
    }
}








/* 32. Price Section CSS  */
.single-price-item {
    margin-top: 50px;
    transition: 0.3s;
    border-top: 2px solid;
    border-bottom: 2px solid;
    padding: 30px 10px;
    min-height: 600px;
}

    .single-price-item h5 {
        font-size: 24px;
        font-weight: 400;
        position: relative;
        margin: 20px 0 0;
    }

    .single-price-item p {
        margin: 40px 0px;
    }

    .single-price-item .bordered-btn {
        color: #333;
        border-color: #333;
    }

.price-box {
    margin-top: 10px;
    border-bottom: 1px solid #ddd;
}

    .price-box h3 {
        font-size: 40px;
        margin-bottom: 20px;
    }

        .price-box h3 span {
            font-size: 16px;
        }

.price-list {
    margin-top: 40px;
}

    .price-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .price-list ul li {
            display: block;
            margin: 20px 0;
            color: #878787;
            font-size: 16px;
            position: relative;
            transition: 0.3s;
        }

            .price-list ul li i {
                margin-right: 15px;
            }

#price_page .section-title h1 {
    font-size: 90px;
    font-weight: 500;
    line-height: 100px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    #price_page .section-title h1 {
        font-size: 80px;
        line-height: 85px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #price_page .section-title h1 {
        font-size: 70px;
        line-height: 80px;
    }
}

@media (max-width: 767px) {
    #price_page .section-title h1 {
        font-size: 40px;
        line-height: 50px;
    }
}

#price_page .hero-area-inner {
    padding: 80px 0 40px;
}

#price_page .hero-area-content p {
    padding-left: 400px;
    text-align: justify;
    margin-top: -25px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #price_page .hero-area-content p {
        padding-left: 0;
        margin-top: 50px;
    }
}

@media (max-width: 767px) {
    #price_page .hero-area-content p {
        padding-left: 0;
        margin-top: 50px;
        text-align: left;
    }
}

@media (max-width: 767px) {
    #price_page .section-title h1 br {
        display: none;
    }
}