/*!
 * Bootstrap Docs (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 * For details, see https://creativecommons.org/licenses/by/3.0/.
 */

/* 字体包引入开始 */

/*@font-face {*/
/*    font-family: "HarmonyOSHans-Medium";*/
/*    src: url("../fonts/HarmonyOSHans-Medium.woff2") format("woff2"),*/
/*        url("../fonts/HarmonyOSHans-Medium.woff") format("woff");*/
/*}*/

/*@font-face {*/
/*    font-family: "HarmonyOSHans-Regular";*/
/*    src: url("../fonts/HarmonyOSHans-Regular.woff2") format("woff2"),*/
/*        url("../fonts/HarmonyOSHans-Regular.woff") format("woff");*/
/*}*/

/*@font-face {*/
/*    font-family: "HarmonyOSHans-Light";*/
/*    src: url("../fonts/HarmonyOSHans-Light.woff2") format("woff2"),*/
/*        url("../fonts/HarmonyOSHans-Light.woff") format("woff");*/
/*}*/

@-webkit-keyframes a {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes a {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes b {

    0%,
    to {
        -webkit-transform: translate(150px, 10px);
        transform: translate(150px, 10px)
    }

    50% {
        -webkit-transform: translate(160px, 50px);
        transform: translate(160px, 50px)
    }
}

@keyframes b {

    0%,
    to {
        -webkit-transform: translate(150px, 10px);
        transform: translate(150px, 10px)
    }

    50% {
        -webkit-transform: translate(160px, 50px);
        transform: translate(160px, 50px)
    }
}

@-webkit-keyframes c {

    0%,
    to {
        -webkit-transform: translate(-30px, 318px);
        transform: translate(-30px, 318px)
    }

    50% {
        -webkit-transform: translate(30px, 338px);
        transform: translate(30px, 338px)
    }
}

@keyframes c {

    0%,
    to {
        -webkit-transform: translate(-30px, 318px);
        transform: translate(-30px, 318px)
    }

    50% {
        -webkit-transform: translate(30px, 338px);
        transform: translate(30px, 338px)
    }
}

@-webkit-keyframes d {

    0%,
    to {
        -webkit-transform: translate(1100px, 218px);
        transform: translate(1100px, 218px)
    }

    50% {
        -webkit-transform: translate(1080px, 256px);
        transform: translate(1080px, 256px)
    }
}

@keyframes d {

    0%,
    to {
        -webkit-transform: translate(1100px, 218px);
        transform: translate(1100px, 218px)
    }

    50% {
        -webkit-transform: translate(1080px, 256px);
        transform: translate(1080px, 256px)
    }
}

@-webkit-keyframes e {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0)
    }

    40%,
    75%,
    to {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    60% {
        -webkit-transform: scaleY(.7);
        transform: scaleY(.7)
    }

    83% {
        -webkit-transform: scaleY(.8);
        transform: scaleY(.8)
    }
}

@keyframes e {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0)
    }

    40%,
    75%,
    to {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    60% {
        -webkit-transform: scaleY(.7);
        transform: scaleY(.7)
    }

    83% {
        -webkit-transform: scaleY(.8);
        transform: scaleY(.8)
    }
}

@-webkit-keyframes f {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes f {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@-webkit-keyframes g {

    0%,
    50%,
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

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

    75% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

@keyframes g {

    0%,
    50%,
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

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

    75% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

@-webkit-keyframes h {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes h {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

body {
    font-family: HarmonyOSHans-Light, sans-serif;
    font-weight: 400;
    color: #000;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


a {
    text-decoration: none;
}

a:focus,
a:hover,
a:active {
    outline: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: HarmonyOSHans-Medium, sans-serif
}

dl,
ol,
ul {
    margin: 0;
}

p {
    line-height: 1.7
}

a {
    -webkit-transition: .5s;
    transition: .5s;
    text-decoration: none
}

img {
    max-width: 100%
}


.container-fluid,
.container-xl {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: .75rem;
    padding-left: .75rem
}

@media (min-width: 1084px) {

    .container-fluid,
    .container-xl {
        padding-right: 5%;
        padding-left: 5%;
        width: 90%;
        box-sizing: content-box
    }
}

@media (min-width: 1400px) {

    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1600px
    }
}

/* Btn style */
button:focus {
    outline: 0
}

.btn.focus,
.btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}


.common-btn {
    display: inline-block;
    color: #fff;
    background-color: #522bf2;
    padding: 9px 30px;
    font-weight: 600;
    border: 0;
    -webkit-transition: .5s;
    transition: .5s;
    opacity: 1 !important;
    z-index: 1;
    position: relative;
    border-radius: 5px;
    overflow: hidden
}

.common-btn img {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    z-index: -1
}

.common-btn img:nth-child(1) {
    bottom: -15px;
    left: -15px
}

.common-btn img:nth-child(2) {
    top: -15px;
    right: -15px
}

.common-btn:hover {
    color: #fff
}

.common-btn:hover img {
    opacity: .2;
    visibility: visible;
    max-width: 30px
}

.common-btn:hover img:nth-child(1) {
    bottom: 0;
    left: 0
}

.common-btn:hover img:nth-child(2) {
    top: 0;
    right: 0
}


.d-table {
    width: 100%;
    height: 100%
}

.d-table-cell {
    vertical-align: middle
}

.mtb-100 {
    margin-top: 100px;
    margin-bottom: 100px
}

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

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

.ptb-30 {
    padding-top: 30px;
    padding-bottom: 30px
}

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

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

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

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

.ptb-60 {
    padding-top: 60px;
    padding-bottom: 60px
}

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

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


.ptb-80 {
    padding-top: 80px;
    padding-bottom: 80px
}

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

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

.ptb-100 {
    padding-top: 100px;
    padding-bottom: 100px
}

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

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

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

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


.section-padding--xlg {
    padding: 120px 0;
}

.section-padding--lg {
    padding: 100px 0;
}

.section-padding--md {
    padding: 80px 0;
}

.section-padding--sm {
    padding: 65px 0;
}

.section-padding--xs {
    padding: 40px 0;
}

.section-padding-top--xlg {
    padding-top: 120px;
}

.section-padding-top--lg {
    padding-top: 100px;
}

.section-padding-top--md {
    padding-top: 80px;
}

.section-padding-top--sm {
    padding-top: 65px;
}

.section-padding-top--xs {
    padding-top: 50px;
}

.section-padding-bottom--xlg {
    padding-bottom: 120px;
}

.section-padding-bottom--lg {
    padding-bottom: 100px;
}

.section-padding-bottom--md {
    padding-bottom: 80px;
}

.section-padding-bottom--sm {
    padding-bottom: 65px;
}

.section-padding-bottom--xs {
    padding-bottom: 50px;
}

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

    .section-padding--lg {
        padding: 80px 0;
    }

    .section-padding--md {
        padding: 70px 0;
    }

    .section-padding--sm {
        padding: 60px 0;
    }

    .section-padding-top--xlg {
        padding-top: 100px;
    }

    .section-padding-top--lg {
        padding-top: 80px;
    }

    .section-padding-top--md {
        padding-top: 70px;
    }

    .section-padding-top--sm {
        padding-top: 60px;
    }

    .section-padding-bottom--xlg {
        padding-bottom: 100px;
    }

    .section-padding-bottom--lg {
        padding-bottom: 80px;
    }

    .section-padding-bottom--md {
        padding-bottom: 70px;
    }

    .section-padding-bottom--sm {
        padding-bottom: 60px;
    }
}

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

    .section-padding--lg {
        padding: 70px 0;
    }

    .section-padding--md {
        padding: 60px 0;
    }

    .section-padding-top--xlg {
        padding-top: 80px;
    }

    .section-padding-top--lg {
        padding-top: 70px;
    }

    .section-padding-top--md {
        padding-top: 60px;
    }

    .section-padding-bottom--xlg {
        padding-bottom: 80px;
    }

    .section-padding-bottom--lg {
        padding-bottom: 70px;
    }

    .section-padding-bottom--md {
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .section-padding--xlg {
        padding: 70px 0;
    }

    .section-padding--lg {
        padding: 60px 0;
    }

    .section-padding--md {
        padding: 50px 0;
    }

    .section-padding-top--xlg {
        padding-top: 70px;
    }

    .section-padding-top--lg {
        padding-top: 60px;
    }

    .section-padding-top--md {
        padding-top: 50px;
    }

    .section-padding-bottom--xlg {
        padding-bottom: 70px;
    }

    .section-padding-bottom--lg {
        padding-bottom: 60px;
    }

    .section-padding-bottom--md {
        padding-bottom: 50px;
    }
}

/* Title */

.section-title {
    padding-left: 0;
    padding-right: 90px;
}

.section-title h4 {
    color: #323232;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1;
    margin-top: -2px;
}

.section-title h2{
    font-size: 2.215rem;
}

.section-title h2,
.section-title h3 {
    color: #2b2b2b;
    position: relative;
    line-height: 34px;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: inline-block;
    font-weight: bold;
}

/*.section-title h2:before,*/
/*.section-title h3:before {*/
/*    position: absolute;*/
/*    bottom: 0px;*/
/*    left: 50%;*/
/*    width: 46px;*/
/*    height: 3px;*/
/*    margin-left: -23px;*/
/*    background-color: #522bf2;*/
/*    content: '';*/
/*}*/

.section-title.text-center {
    padding: 0 60px;
    text-align: center;
}

.section-title.text-right {
    padding-right: 0;
    padding-left: 90px;
}

.section-title p {
    font-weight: 600;
}

.section-title.no-padding {
    padding: 0 !important;
}

@media only screen and (min-width: 992px) and (max-width:1199px) {
    .section-title {
        padding-right: 30px;
    }

    .section-title.text-center {
        padding: 0 25px;
    }

    .section-title.text-right {
        padding-left: 30px;
    }
}

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

    .section-title.text-center {
        padding: 0 25px;
    }

    .section-title.text-right {
        padding-left: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .section-title {
        padding-right: 30px;
    }

    .section-title.text-center {
        padding: 0 25px;
    }

    .section-title.text-right {
        padding-left: 30px;
    }
}

@media only screen and (max-width: 575px) {
    .section-title {
        padding-right: 0;
    }

    .section-title.text-center {
        padding: 0;
    }

    .section-title.text-right {
        padding-left: 0;
    }
}

h4.small-title {
    font-weight: 500;
    color: #303030;
    padding: 20px 30px;
}


button:focus {
    outline: 0
}

.btn.focus,
.btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}


.bd-navbar {
    padding: .5rem 0;
    background-color: rgba(255, 255, 255, .98);
    -webkit-transition: .5s;
    transition: .5s;
    box-shadow: 0 0 0 1px rgba(115, 155, 115, 0.18)
}

.bd-navbar .navbar-toggler {
    padding: 0;
    border: 0
}

.bd-navbar .navbar-toggler .bx-menu-alt-right {
    font-size: 2.75rem;
}


.bd-navbar .navbar-nav .nav-link {
    font-family: "HarmonyOSHans-Medium", Helvetica, sans-serif;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    color: rgba(0, 0, 0, 0.85)
}

.bd-navbar .navbar-nav .nav-link:hover,
.bd-navbar .navbar-nav .nav-link:focus {
    color: #000
}

.bd-navbar .navbar-nav .nav-link.active {
    position: relative;
    font-weight: 600;
    color: #000
}


.bd-navbar .offcanvas {
    border-left: 0
}

.bd-subnavbar {
    --bs-gutter-x: $bd-gutter-x;
    --bs-gutter-y: $bd-gutter-x;
    position: relative;
    z-index: 99;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .05);
}

.bd-subnavbar .dropdown-menu {
    font-size: .875rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05)
}

.bd-subnavbar .dropdown-item.current {
    font-weight: 600;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem top 0.6rem;
    background-size: .75rem .75rem
}

@media (min-width: 768px) {
    .bd-subnavbar {
        position: -webkit-sticky;
        position: sticky;
        top: -1px
    }
}

.bd-search {
    position: relative
}

.bd-search::after {
    position: absolute;
    top: .4rem;
    right: .4rem;
    bottom: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: .3125rem;
    padding-left: .3125rem;
    font-size: .75rem;
    color: #6c757d;
    content: "Ctrl + /";
    background-color: #f8f9fa;
    border-radius: .125rem
}

@media (max-width: 767.98px) {
    .bd-search {
        width: 100%
    }
}

.bd-search .form-control {
    padding-right: 3.75rem
}

.bd-search .form-control:focus {
    border-color: #7952b3;
    box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
}

.bd-sidebar-toggle {
    color: #6c757d
}

.bd-sidebar-toggle:hover,
.bd-sidebar-toggle:focus {
    color: #7952b3
}

.bd-sidebar-toggle:focus {
    box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
}

.bd-sidebar-toggle .bi-collapse {
    display: none
}

.bd-sidebar-toggle:not(.collapsed) .bi-expand {
    display: none
}

.bd-sidebar-toggle:not(.collapsed) .bi-collapse {
    display: inline-block
}

.bd-masthead {
    padding: 3rem 0;
    background: linear-gradient(165deg, #f7f5fb 50%, #fff 50%)
}

.bd-masthead h1 {
    font-size: calc(1.525rem + 3.3vw);
    line-height: 1
}

@media (min-width: 1200px) {
    .bd-masthead h1 {
        font-size: 4rem
    }
}

.bd-masthead p:not(.lead) {
    color: #495057
}

.bd-masthead .btn {
    padding: .8rem 2rem;
    font-weight: 600
}

.bd-masthead .lead {
    font-size: calc(1.275rem + .3vw);
    font-weight: 400;
    color: #495057
}

@media (min-width: 1200px) {
    .bd-masthead .lead {
        font-size: 1.5rem
    }
}

@media (min-width: 768px) {
    .mw-md-75 {
        max-width: 75%
    }
}

.masthead-followup-icon {
    padding: .75rem;
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.01));
    border-radius: .75rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)
}

.masthead-followup-svg {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.125))
}

#carbonads {
    position: static;
    display: block;
    max-width: 400px;
    padding: 15px 15px 15px 160px;
    margin: 2rem 0;
    overflow: hidden;
    font-size: .8125rem;
    line-height: 1.4;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.05)
}

#carbonads a {
    color: #343a40;
    text-decoration: none
}

@media (min-width: 576px) {
    #carbonads {
        max-width: 330px;
        border-radius: 4px
    }
}

.carbon-img {
    float: left;
    margin-left: -145px
}

.carbon-poweredby {
    display: block;
    margin-top: .75rem;
    color: #495057 !important
}

@media (min-width: 768px) {
    :root {
        scroll-padding-top: 4rem
    }
}

.bd-content>h2:not(:first-child) {
    margin-top: 3rem
}

.bd-content>h3 {
    margin-top: 2rem
}

.bd-content>ul li,
.bd-content>ol li {
    margin-bottom: .25rem
}

.bd-content>ul li>p~ul,
.bd-content>ol li>p~ul {
    margin-top: -.5rem;
    margin-bottom: 1rem
}

.bd-content>.table {
    max-width: 100%;
    margin-bottom: 1.5rem;
    font-size: .875rem
}

@media (max-width: 991.98px) {
    .bd-content>.table {
        display: block;
        overflow-x: auto
    }

    .bd-content>.table.table-bordered {
        border: 0
    }
}

.bd-content>.table th:first-child,
.bd-content>.table td:first-child {
    padding-left: 0
}

.bd-content>.table th:not(:last-child),
.bd-content>.table td:not(:last-child) {
    padding-right: 1.5rem
}

.bd-content>.table td:first-child>code {
    white-space: nowrap
}

.bd-title {
    font-size: calc(1.425rem + 2.1vw)
}

@media (min-width: 1200px) {
    .bd-title {
        font-size: 3rem
    }
}

.bd-lead {
    font-size: calc(1.275rem + .3vw);
    font-weight: 300
}

@media (min-width: 1200px) {
    .bd-lead {
        font-size: 1.5rem
    }
}

.bd-text-purple-bright {
    color: #7952b3
}

.bd-bg-purple-bright {
    background-color: #7952b3
}

.skippy {
    background-color: #563d7c
}

.skippy a {
    color: #fff
}

@media (max-width: 767.98px) {
    .bd-sidebar {
        margin: 0 -1.25rem 1rem
    }
}

.bd-links {
    overflow: auto;
    font-weight: 600
}

@media (min-width: 768px) {
    .bd-links {
        position: -webkit-sticky;
        position: sticky;
        top: 5rem;
        display: block !important;
        height: calc(100vh - 7rem);
        padding-left: .25rem;
        margin-left: -.25rem;
        overflow-y: auto
    }
}

@media (max-width: 767.98px) {
    .bd-links>ul {
        padding: 1.5rem .75rem;
        background-color: #f8f9fa;
        border-bottom: 1px solid #e9ecef
    }
}

.bd-links a {
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
    color: rgba(0, 0, 0, 0.65);
    text-decoration: none
}

.bd-links a:hover,
.bd-links a:focus {
    color: rgba(0, 0, 0, 0.85);
    background-color: rgba(121, 82, 179, 0.1)
}

.bd-links .btn {
    padding: .25rem .5rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
    background-color: transparent;
    border: 0
}

.bd-links .btn:hover,
.bd-links .btn:focus {
    color: rgba(0, 0, 0, 0.85);
    background-color: rgba(121, 82, 179, 0.1)
}

.bd-links .btn:focus {
    box-shadow: 0 0 0 1px rgba(121, 82, 179, 0.7)
}

.bd-links .btn::before {
    width: 1.25em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform 0.35s ease;
    transform-origin: .5em 50%
}

@media (prefers-reduced-motion: reduce) {
    .bd-links .btn::before {
        transition: none
    }
}

.bd-links .btn[aria-expanded="true"] {
    color: rgba(0, 0, 0, 0.85)
}

.bd-links .btn[aria-expanded="true"]::before {
    transform: rotate(90deg)
}

.bd-links .active {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85)
}

.bd-layout {
    padding-right: 1.25rem;
    padding-left: 1.25rem
}

@media (min-width: 768px) {
    .bd-layout {
        display: grid;
        grid-template-areas: "sidebar main";
        grid-template-columns: 1fr 3fr;
        gap: 1.5rem
    }
}

@media (min-width: 992px) {
    .bd-layout {
        grid-template-columns: 1fr 5fr
    }
}

.bd-sidebar {
    grid-area: sidebar
}

.bd-main {
    grid-area: main
}

@media (min-width: 768px) {
    .bd-main {
        display: grid;
        grid-template-areas: "intro" "toc" "content";
        grid-template-rows: auto auto 1fr;
        gap: inherit
    }
}

@media (min-width: 992px) {
    .bd-main {
        grid-template-areas: "intro   toc" "content toc";
        grid-template-rows: auto 1fr;
        grid-template-columns: 4fr 1fr
    }
}

.bd-intro {
    grid-area: intro
}

.bd-toc {
    grid-area: toc
}

.bd-content {
    grid-area: content;
    min-width: 1px
}

@media (min-width: 992px) {
    .bd-toc {
        position: -webkit-sticky;
        position: sticky;
        top: 5rem;
        right: 0;
        z-index: 2;
        height: calc(100vh - 7rem);
        overflow-y: auto
    }
}

.bd-toc nav {
    font-size: .875rem
}

.bd-toc nav ul {
    padding-left: 0;
    list-style: none
}

.bd-toc nav ul ul {
    padding-left: 1rem;
    margin-top: .25rem
}

.bd-toc nav li {
    margin-bottom: .25rem
}

.bd-toc nav a {
    color: inherit
}

.bd-toc nav a:not(:hover) {
    text-decoration: none
}

.bd-toc nav a code {
    font: inherit
}

.bd-footer {
    background-color: #2d3236;
}

.bd-footer h5 {
    color: #ccc;
}

.bd-footer a {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
}

.bd-footer a:hover,
.bd-footer a:focus {
    color: #fff;
    text-decoration: none;
    padding-left: 5px;
}

.bd-example-row .row>.col,
.bd-example-row .row>[class^="col-"] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(39, 41, 43, 0.03);
    border: 1px solid rgba(39, 41, 43, 0.1)
}

.bd-example-row .row+.row {
    margin-top: 1rem
}

.bd-example-row-flex-cols .row {
    min-height: 10rem;
    background-color: rgba(255, 0, 0, 0.1)
}

.bd-example-cssgrid {
    text-align: center
}

.bd-example-cssgrid .grid+.grid {
    margin-top: 1rem
}

.bd-example-cssgrid .grid>* {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(255, 0, 255, 0.1);
    border: 1px solid rgba(255, 0, 255, 0.25)
}

.bd-highlight {
    background-color: rgba(86, 61, 124, 0.15);
    border: 1px solid rgba(86, 61, 124, 0.15)
}

.footer-logo .logo {
    display: block;
    margin-bottom: 30px
}

.footer-logo ul {
    margin: 0;
    padding: 0
}

.footer-logo ul li {
    list-style-type: none;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px
}

.footer-logo ul li:last-child {
    margin-bottom: 0
}

.footer-logo ul li i {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.125rem;
    font-weight: lighter;
    color: #ccc
}

.footer-logo ul li a {
    display: block;
    color: #fff
}

.footer-logo ul li a:hover {
    color: #999
}

.copyright-area {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #252a2c;
}


.copyright-area .copyright-item p {
    font-family: HarmonyOSHans-Light;
    margin-bottom: 0;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 400;
}

.copyright-area .copyright-item p a {
    display: inline-block;
    color: #999;
    font-weight: 400;
    padding-left: 5px;
}

.copyright-area .copyright-item p a:hover {
    color: #522bf2;
    font-weight: 400;
    padding-left: 5px;
}


.example-container {
    width: 800px;
    --bs-gutter-x: .75rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto
}

.example-row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x))
}

.example-content-main {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y)
}

@media (min-width: 576px) {
    .example-content-main {
        flex: 0 0 auto;
        width: 50%
    }
}

@media (min-width: 992px) {
    .example-content-main {
        flex: 0 0 auto;
        width: 66.666667%
    }
}

.example-content-secondary {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y)
}

@media (min-width: 576px) {
    .example-content-secondary {
        flex: 0 0 auto;
        width: 50%
    }
}

@media (min-width: 992px) {
    .example-content-secondary {
        flex: 0 0 auto;
        width: 33.333333%
    }
}

.bd-example {
    position: relative;
    padding: 1rem;
    margin: 1rem -1.25rem 0;
    border: solid #dee2e6;
    border-width: 1px 0 0
}

.bd-example::after {
    display: block;
    clear: both;
    content: ""
}

@media (min-width: 576px) {
    .bd-example {
        padding: 1.5rem;
        margin-right: 0;
        margin-left: 0;
        border-width: 1px;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem
    }

    .bd-example+.bd-clipboard+.highlight {
        border-bottom-right-radius: .25rem;
        border-bottom-left-radius: .25rem
    }
}

.bd-example+p {
    margin-top: 2rem
}

.bd-example>.form-control+.form-control {
    margin-top: .5rem
}

.bd-example>.nav+.nav,
.bd-example>.alert+.alert,
.bd-example>.navbar+.navbar,
.bd-example>.progress+.progress {
    margin-top: 1rem
}

.bd-example>.dropdown-menu {
    position: static;
    display: block
}

.bd-example>:last-child {
    margin-bottom: 0
}

.bd-example>svg+svg,
.bd-example>img+img {
    margin-left: .5rem
}

.bd-example>.btn,
.bd-example>.btn-group {
    margin: .25rem .125rem
}

.bd-example>.btn-toolbar+.btn-toolbar {
    margin-top: .5rem
}

.bd-example>.list-group {
    max-width: 400px
}

.bd-example>[class*="list-group-horizontal"] {
    max-width: 100%
}

.bd-example .fixed-top,
.bd-example .sticky-top {
    position: static;
    margin: -1rem -1rem 1rem
}

.bd-example .fixed-bottom,
.bd-example .sticky-bottom {
    position: static;
    margin: 1rem -1rem -1rem
}

@media (min-width: 576px) {

    .bd-example .fixed-top,
    .bd-example .sticky-top {
        margin: -1.5rem -1.5rem 1rem
    }

    .bd-example .fixed-bottom,
    .bd-example .sticky-bottom {
        margin: 1rem -1.5rem -1.5rem
    }
}

.bd-example .pagination {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.bd-example-ratios .ratio {
    display: inline-block;
    width: 10rem;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6
}

.bd-example-ratios .ratio>div {
    display: flex;
    align-items: center;
    justify-content: center
}

.bd-example-ratios-breakpoint .ratio-4x3 {
    width: 16rem
}

@media (min-width: 768px) {
    .bd-example-ratios-breakpoint .ratio-4x3 {
        --bs-aspect-ratio: 50%
    }
}

.bd-example-modal {
    background-color: #fafafa
}

.bd-example-modal .modal {
    position: static;
    display: block
}


.bd-example-offcanvas {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.bd-example-offcanvas .offcanvas {
    position: static;
    display: block;
    height: 200px;
    visibility: visible;
    transform: translate(0)
}

.tooltip-demo a {
    white-space: nowrap
}

.scrollspy-example {
    position: relative;
    height: 200px;
    margin-top: .5rem;
    overflow: auto
}

.scrollspy-example-2 {
    position: relative;
    height: 350px;
    overflow: auto
}

.bd-example-border-utils [class^="border"] {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    margin: .25rem;
    background-color: #f5f5f5
}

.bd-example-border-utils-0 [class^="border"] {
    border: 1px solid #dee2e6
}

.bd-example-rounded-utils [class*="rounded"] {
    margin: .25rem
}

.bd-example-position-utils {
    position: relative;
    padding: 3em
}

.bd-example-position-utils .position-relative {
    height: 200px;
    background-color: #f5f5f5
}

.bd-example-position-utils .position-absolute {
    width: 2em;
    height: 2em;
    background-color: #212529;
    border-radius: .25rem
}

.bd-example-position-examples::after {
    content: none
}

.bd-example-placeholder-cards::after {
    display: none
}

.bd-example-placeholder-cards .card {
    width: 18rem
}

.bd-example-toasts {
    min-height: 240px
}

.highlight {
    padding: var(--bs-gutter-x) 1.25rem;
    margin-bottom: 1rem;
    background-color: #f8f9fa
}

@media (min-width: 576px) {
    .highlight {
        padding: 1rem 1.5rem
    }
}

.highlight pre {
    padding: 0;
    margin-top: .65rem;
    margin-bottom: .65rem;
    white-space: pre;
    background-color: transparent;
    border: 0
}

.highlight pre code {
    font-size: inherit;
    color: #212529;
    word-wrap: normal
}

.bd-content .highlight {
    margin-right: -1.25rem;
    margin-left: -1.25rem
}

@media (min-width: 576px) {
    .bd-content .highlight {
        margin-right: 0;
        margin-left: 0
    }
}

.btn-bd-primary {
    color: #fff !important;
    background-color: #000;
    border-color: #000
}

.btn-bd-primary:hover,
.btn-bd-primary:active {
    color: #fff;
    background-color: #000;
    border-color: #000
}

.btn-bd-primary:focus {
    box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
}

.btn-bd-download {
    font-weight: 600;
    color: #ffe484;
    border-color: #ffe484
}

.btn-bd-download:hover,
.btn-bd-download:active {
    color: #2a2730;
    background-color: #ffe484;
    border-color: #ffe484
}

.btn-bd-download:focus {
    box-shadow: 0 0 0 3px rgba(255, 228, 132, 0.25)
}

.btn-bd-light {
    color: #6c757d;
    border-color: #dee2e6
}

.show>.btn-bd-light,
.btn-bd-light:hover,
.btn-bd-light:active {
    color: #7952b3;
    background-color: #fff;
    border-color: #7952b3
}

.btn-bd-light:focus {
    box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25)
}


.bd-white {
    color: #000;
    background-color: #fff
}

.bd-black {
    color: #fff;
    background-color: #000
}

.bd-clipboard {
    position: relative;
    display: none;
    float: right
}

.bd-clipboard+.highlight {
    margin-top: 0
}

@media (min-width: 768px) {
    .bd-clipboard {
        display: block
    }
}

.btn-clipboard {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 10;
    display: block;
    padding: .25rem .5rem;
    font-size: .65em;
    color: #0d6efd;
    background-color: #fff;
    border: 1px solid;
    border-radius: .25rem
}

.btn-clipboard:hover,
.btn-clipboard:focus {
    color: #fff;
    background-color: #0d6efd
}

.bd-placeholder-img {
    font-size: 1.125rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-anchor: middle
}

.bd-placeholder-img-lg {
    font-size: calc(1.475rem + 2.7vw)
}

@media (min-width: 1200px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem
    }
}


.anchorjs-link {
    font-weight: 400;
    color: rgba(13, 110, 253, 0.5);
    transition: color 0.15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .anchorjs-link {
        transition: none
    }
}

.anchorjs-link:focus,
.anchorjs-link:hover {
    color: #0d6efd;
    text-decoration: none
}

.algolia-autocomplete {
    width: 100%
}

.ds-dropdown-menu {
    width: 100%;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: .875rem;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: .25rem
}

@media (min-width: 768px) {
    .ds-dropdown-menu {
        width: 400px
    }
}

/* =====================================================================
Banner
======================================================================== */

.slider-height-1 {
    height: 680px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .slider-height-1 {
        height: 700px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .slider-height-1 {
        height: 700px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-height-1 {
        height: 530px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-height-1 {
        height: 500px;
    }
}

@media only screen and (max-width: 767px) {
    .slider-height-1 {
        display: block;
        height: auto;
        padding: 50px 0;
    }
}

.single-slider .slider-content h1 {
    font-weight: 600;
    font-size: 3.215rem;
    margin: 0;
    line-height: 68px;
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .single-slider .slider-content h1 {
        font-size: 60px;
        line-height: 50px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-slider .slider-content h1 {
        font-size: 55px;
        line-height: 45px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-slider .slider-content h1 {
        font-size: 35px;
        line-height: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .single-slider .slider-content h1 {
        font-size: 32px;
        line-height: 29px;
    }
}

.single-slider .slider-content p {
    font-size: 16px;
    line-height: 27px;
    width: 93%;
    margin: 28px 0 36px;
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .single-slider .slider-content p {
        width: 96%;
        margin: 20px 0 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-slider .slider-content p {
        width: 96%;
        margin: 20px 0 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-slider .slider-content p {
        width: 96%;
        margin: 20px 0 30px;
    }
}

@media only screen and (max-width: 767px) {
    .single-slider .slider-content p {
        width: 100%;
        margin: 20px 0 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .single-slider .slider-content p {
        font-size: 15px;
    }
}

.single-slider .slider-content .slider-btn a {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 400;
    display: inline-block;
    line-height: 1;
    border: 1px solid #000000;
    padding: 14px 30px 18px;
}

.single-slider .slider-content .slider-btn a i {
    font-size: 16px;
    color: #1f2226;
    margin-left: 5px;
    position: relative;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-slider .slider-content .slider-btn a:hover {
    color: #ffffff;
    border: 2px solid #ff3535;
    background-color: #ff3535;
}

.single-slider .slider-content .slider-btn a:hover i {
    color: #ffffff;
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .single-slider .slider-content.pt-180 {
        padding-top: 235px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-slider .slider-content.pt-180 {
        padding-top: 115px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-slider .slider-content.pt-180 {
        padding-top: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .single-slider .slider-content.pt-180 {
        padding-top: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .single-slider .slider-content.pt-180 {
        padding-top: 0px;
    }
}

.single-slider .slider-content-2 h1 {
    font-size: 48px;
    line-height: 60px;
    color: #292929;
    margin: 0;
    font-weight: 500;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-slider .slider-content-2 h1 {
        font-size: 38px;
        line-height: 42px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-slider .slider-content-2 h1 {
        font-size: 26px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .single-slider .slider-content-2 h1 {
        font-size: 26px;
        line-height: 35px;
    }
}

.single-slider .slider-content-2 p {
    font-size: 16px;
    line-height: 27px;
    color: #1f2226;
    margin: 23px 0px 27px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-slider .slider-content-2 p {
        margin: 10px 0px 20px;
    }
}

@media only screen and (max-width: 767px) {
    .single-slider .slider-content-2 p {
        margin: 15px 0px 27px;
    }
}

.single-slider .slider-content-2 .slider-btn a {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-block;
    line-height: 1;
    border: 2px solid #000000;
    padding: 14px 30px 18px;
}

.single-slider .slider-content-2 .slider-btn a i {
    font-size: 16px;
    color: #1f2226;
    margin-left: 18px;
    position: relative;
    top: 2px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-slider .slider-content-2 .slider-btn a:hover {
    color: #ffffff;
    border: 2px solid #ff3535;
    background-color: #ff3535;
}

.single-slider .slider-content-2 .slider-btn a:hover i {
    color: #ffffff;
}

.single-slider .slider-single-img {
    margin-left: 40px;
    margin-right: -90px;
}

@media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .single-slider .slider-single-img {
        margin-right: 0px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .single-slider .slider-single-img {
        margin-right: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-slider .slider-single-img {
        margin-right: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-slider .slider-single-img {
        margin-right: 0px;
        margin-left: 0px;
    }
}

@media only screen and (max-width: 767px) {
    .single-slider .slider-single-img {
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .single-slider .slider-single-img {
        margin-top: 0px;
    }
}

.single-slider .slider-single-img-2 {
    margin-left: -22px;
    margin-right: -42px;
}

@media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .single-slider .slider-single-img-2 {
        margin-right: 0px;
        margin-left: 0px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .single-slider .slider-single-img-2 {
        margin-right: 0px;
        margin-left: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-slider .slider-single-img-2 {
        margin-right: 0px;
        margin-left: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-slider .slider-single-img-2 {
        margin-right: 0px;
        margin-left: 0px;
    }
}

@media only screen and (max-width: 767px) {
    .single-slider .slider-single-img-2 {
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .single-slider .slider-single-img-2 {
        margin-right: 0px;
        margin-left: -22px;
        margin-top: 0px;
    }
}

.single-slider .slider-single-img-3 {
    margin-left: 25px;
    margin-right: -77px;
}

@media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .single-slider .slider-single-img-3 {
        margin-right: 0px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .single-slider .slider-single-img-3 {
        margin-right: 0px;
        margin-left: 160px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .single-slider .slider-single-img-3 {
        margin-right: 0px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-slider .slider-single-img-3 {
        margin-right: 0px;
        margin-left: 0px;
    }
}

@media only screen and (max-width: 767px) {
    .single-slider .slider-single-img-3 {
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .single-slider .slider-single-img-3 {
        margin-top: 0px;
    }
}

.owl-item .slider-content * {
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.owl-item.active .slider-animated-1 h1 {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.owl-item.active .slider-animated-1 p {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.owl-item.active .slider-animated-1 a {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.owl-item.active .slider-animated-1.slider-single-img img {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.owl-item.active .slider-animated-1.slider-single-img-2 img {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.owl-item.active .slider-animated-1.slider-single-img-3 img {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.nav-style-1.owl-carousel .owl-nav div {
    color: #1f2226;
    display: inline-block;
    font-size: 22px;
    left: 18px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background-color: rgba(255, 255, 255, .68);
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .nav-style-1.owl-carousel .owl-nav div {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .nav-style-1.owl-carousel .owl-nav div {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .nav-style-1.owl-carousel .owl-nav div {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
    }
}

.nav-style-1.owl-carousel .owl-nav div:hover {
    background-color: #522bf2;
    color: #ffffff;
}

.nav-style-1.owl-carousel .owl-nav div.owl-next {
    left: auto;
    right: 18px;
}

.slider-area:hover .nav-style-1.owl-carousel>.owl-nav div {
    opacity: 1;
    visibility: visible;
}

.section-padding-1 {
    padding: 0 50px;
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .section-padding-1 {
        padding: 0 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-padding-1 {
        padding: 0 30px;
    }
}

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

@media only screen and (max-width: 767px) {
    .section-padding-1 {
        padding: 0 15px;
    }
}

.section-padding-2 {
    padding: 0 25px;
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .section-padding-2 {
        padding: 0 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-padding-2 {
        padding: 0 30px;
    }
}

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

@media only screen and (max-width: 767px) {
    .section-padding-2 {
        padding: 0 15px;
    }
}

.section-padding-3 .container-fluid {
    padding: 0 100px;
}

@media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .section-padding-3 .container-fluid {
        padding: 0 50px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .section-padding-3 .container-fluid {
        padding: 0 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-padding-3 .container-fluid {
        padding: 0 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-padding-3 .container-fluid {
        padding: 0 40px;
    }
}

@media only screen and (max-width: 767px) {
    .section-padding-3 .container-fluid {
        padding: 0 15px;
    }
}

.section-margin-1 {
    margin: 0 50px;
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .section-margin-1 {
        margin: 0 15px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-margin-1 {
        margin: 0 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-margin-1 {
        margin: 0 40px;
    }
}

@media only screen and (max-width: 767px) {
    .section-margin-1 {
        margin: 0 15px;
    }
}


.bg-paleturquoise {
    background-color: #effafa;
}


/* Header area */

.header-area {
    background-color: #522bf2;
    background: -webkit-linear-gradient(to left, #c738f7, #522bf2);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #c738f7, #522bf2);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: relative;
    z-index: 999
}

.header-area .left ul {
    margin: 0;
    padding: 0
}

.header-area .left ul li {
    list-style-type: none;
    display: inline-block;
    font-size: .825rem;
    color: #fff;
    margin-right: 15px
}

.header-area .left ul li i {
    display: inline-block;
    font-size: 18px;
    position: relative;
    top: 2px;
    margin-right: 3px
}

.header-area .right {
    text-align: right
}

.header-area .right .inner {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px
}

.header-area .right .inner:last-child {
    margin-right: 0
}

.header-area .right .inner .nice-select {
    height: 35px;
    border-radius: 5px;
    line-height: 35px;
    color: #545454;
    background-color: #fff;
    border: 0
}

.header-area .right .inner .nice-select:after {
    right: 20px;
    top: 52%
}

.header-area .right .inner .call i {
    display: inline-block;
    font-size: 18px;
    position: relative;
    top: 2px;
    margin-right: 3px;
    color: #fff
}

.header-area .right .inner .call a {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    position: relative
}

.header-area .right .inner .call a:before {
    position: absolute;
    content: '';
    width: 0;
    height: 1px;
    left: 0;
    bottom: 0;
    background-color: #fff;
    -webkit-transition: .5s;
    transition: .5s
}

.header-area .right .inner .call a:hover:before {
    width: 100%
}


.main-nav {
    background-color: rgba(255, 255, 255, .98);
    -webkit-transition: .5s;
    transition: .5s
}

.main-nav.menu-shrink {
    padding-top: 0;
    padding-bottom: 0;
    -webkit-box-shadow: 0 0 20px 0 #dddddd59;
    box-shadow: 0 0 20px 0 #dddddd59;
    z-index: 9999999
}



.main-nav .left .nice-select {
    border: 0;
    background-color: #fff;
    border-radius: 5px;
    height: 45px;
    line-height: 45px;
    color: #363636;
    font-size: 16px;
    width: 145px;
    padding-left: 15px;
    padding-right: 20px;
    -webkit-box-shadow: 0 0 20px 0 #dddddd59;
    box-shadow: 0 0 20px 0 #dddddd59
}

.main-nav .left .nice-select li {
    font-size: 15px
}

.main-nav nav .navbar-nav {
    margin-left: auto;
    margin-right: auto
}

.main-nav nav .navbar-nav .nav-item:hover .dropdown-menu:before {
    width: 45px
}

.main-nav nav .navbar-nav .nav-item:hover .dropdown-menu:after {
    height: 45px
}

.main-nav nav .navbar-nav .nav-item:hover a {
    color: #363636
}

.main-nav nav .navbar-nav .nav-item a {
    font-weight: 600;
    font-size: 16px;
    text-transform: unset;
    color: #363636;
    margin-left: 12px;
    margin-right: 12px;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s
}

.main-nav nav .navbar-nav .nav-item a:before {
    position: absolute;
    content: '';
    width: 0;
    height: 1px;
    left: 0;
    bottom: -2px;
    background-color: #363636;
    -webkit-transition: .5s;
    transition: .5s
}

.main-nav nav .navbar-nav .nav-item a:hover,
.main-nav nav .navbar-nav .nav-item a:focus,
.main-nav nav .navbar-nav .nav-item a.active {
    color: #363636
}

.main-nav nav .navbar-nav .nav-item a:hover:before,
.main-nav nav .navbar-nav .nav-item a:focus:before,
.main-nav nav .navbar-nav .nav-item a.active:before {
    width: 40%
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu {
    background: #fff;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    border: 0;
    border-radius: 0;
    -webkit-transition: .3s;
    transition: .3s;
    width: 260px
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu:before {
    position: absolute;
    content: '';
    width: 0;
    height: 2px;
    top: 0;
    left: 0;
    background-color: #363636;
    -webkit-transition: .5s;
    transition: .5s
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu:after {
    position: absolute;
    content: '';
    width: 2px;
    height: 0;
    top: 0;
    left: 0;
    background-color: #363636;
    -webkit-transition: .5s;
    transition: .5s
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li {
    border-bottom: 1px solid #f1f0f0
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
    top: 0 !important
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover a {
    color: #363636
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li a {
    text-transform: unset;
    padding: 12px 15px;
    color: #363636;
    font-weight: 600
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:before {
    display: none
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover,
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:focus,
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active {
    color: #f05454
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
    left: unset;
    right: -100%;
    top: 15px
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover a {
    color: #363636
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
    color: #363636;
    text-transform: unset
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover,
.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus,
.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
    color: #f05454
}

.main-nav .dropdown-toggle::after {
    display: none
}


@media (max-width: 991px) {
    .logo {
        height: auto
    }

    .logo>a {
        display: block
    }
}

.logo img {
    max-height: 42px;
    transition: all .3s ease-out 0s;
    vertical-align: top;
    width: auto
}

@media (max-width: 767px) {
    .logo img {
        max-height: 46px
    }
}

.side-nav h4 {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 16px;
    color: #545454;
    font-family: lato, sans-serif
}

.side-nav h4 span {
    display: inline-block;
    color: #f05454;
    font-weight: 600
}

.side-nav h4 a {
    display: inline-block;
    color: #522bf2;
    border-bottom: 1px solid #522bf2;
    font-weight: 600
}

.side-nav h4 a:hover {
    color: #f05454;
    border-bottom: 1px solid #f05454
}

.main-nav nav ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

nav .menu {
    margin-left: auto;
    margin-right: auto;
}

/* 导航下拉 */

.menu {
    margin: 0 0 0 30px;
    padding: 0
}

@media (max-width:1239px) {
    .menu {
        margin-left: 20px
    }
}

@media (max-width:991px) {
    .menu {
        width: 100%;
    }
}

.menu a,
.menu li {
    -webkit-transition: all .1s ease-out 0s;
    -o-transition: all .1s ease-out 0s;
    transition: all .1s ease-out 0s
}

.menu li {
    position: relative;
    float: left;
    list-style: none
}

@media (max-width:991px) {
    .menu li {
        float: none;
        height: auto
    }

    .menu li .bi-chevron-down {
        display: none
    }
}

.menu li.dropdown .bi-chevron-down {
    opacity: .6
}

.menu li.dropdown:hover>.sub-menu {
    opacity: 1;
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    -webkit-transition: opacity .1s, -webkit-transform .3s;
    -o-transition: transform .3s, opacity .1s;
    transition: transform .3s, opacity .1s;
    transition: transform .3s, opacity .1s, -webkit-transform .3s;
    visibility: visible
}

.menu li.dropdown:hover>.sub-menu:before {
    opacity: 1;
    -webkit-transition: opacity .1s .2s;
    -o-transition: opacity .1s .2s;
    transition: opacity .1s .2s
}

.menu li.dropdown .bi-chevron-down,
.menu li.dropdown:hover .bi-chevron-down {
    font-size: 0.7rem;
    padding: 0 3px;
    font-weight: 400;
    display: inline-block;
    -webkit-transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

.menu li.dropdown a:hover .bi-chevron-down {
    display: inline-block;
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.feature .fea:hover .bx,
.menu .sub-menu li.active a:hover,
.menu li.active .sub-menu a:hover,
.menu li.active a,
.new-theme .theme-wrap:hover .theme-title a {
    color: #fff
}

.menu li.active .sub-menu a {
    color: #333
}

@media (max-width:991px) {
    .menu li.active .sub-menu a {
        color: #f4f5ff
    }
}

.menu li i.new {
    position: absolute;
    right: 13px;
    top: 50%;
    display: block;
    padding: 2px;
    margin-top: -7px;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
    color: #fff;
    font-style: normal;
    background: #2ac36c;
    border-radius: 3px;
    opacity: .95
}

@media (max-width:991px) {
    .menu li i.new {
        display: none
    }
}

.menu li.has-flag a {
    padding-right: 30px
}

.menu a {
    display: block;
    color: #f4f5ff;
    padding: 0 15px;
    font-size: 1rem;
    outline: 0
}

.menu a:active,
.menu a:focus,
.menu a:hover {
    color: #fff;
    text-decoration: none
}

@media (max-width:1239px) {
    .menu a {
        padding: 0 12px
    }
}

@media (max-width:991px) {
    .menu a {
        line-height: 32px;
        padding: 0 15px
    }
}

.menu .sub-menu {
    backface-visibility: hidden;
    background: #fff;
    border-radius: 5px;
    box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, .15);
    display: block;
    list-style: none;
    opacity: 0;
    padding: 12px;
    position: absolute;
    top: 100%;
    transform: rotateX(-90deg);
    transform-origin: 0 0;
    transition: transform .3s, opacity .1s .2s, visibility .1s .3s;
    visibility: hidden;
    width: 220px;
}


@media (max-width:991px) {
    .menu .sub-menu {
        position: relative;
        display: block;
        width: 100%;
        padding: 10px 20px 0;
        background: 0 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        overflow: hidden;
        visibility: visible;
        opacity: 1;
        -webkit-transform: rotateX(0);
        transform: rotateX(0)
    }
}

.menu .sub-menu:before {
    border: 10px solid transparent;
    border-bottom-color: #fff;
    content: "";
    height: 0;
    left: 37px;
    line-height: 0;
    opacity: 0;
    position: absolute;
    top: -19px;
    transition: opacity .2s 0s;
    width: 0;
}


@media (max-width:767px) {
    .menu .sub-menu:before {
        border: 0
    }
}

.menu .sub-menu a em {
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 1;
    opacity: .88;
    vertical-align: middle;
    margin-right: 5px;
}



@media (max-width: 991px) {
    .menu .sub-menu a em {
        display: none
    }
}

.menu .sub-menu a:hover {
    background: #f1f3f5;
    color: #121212;
    font-weight: 600
}

.menu .sub-menu li {
    float: none;
    width: 100%;
    height: auto;
}

@media (max-width:991px) {
    .menu .sub-menu li {
        width: 47%;
        float: left;
        margin-bottom: 10px;
        margin-right: 3%;
        border: 1px solid rgba(0, 0, 0, 0.35);
        border-radius: 3px;
        text-align: center
    }

    .bd-navbar .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }

    .bd-navbar .navbar-nav .nav-link {
        font-family: HarmonyOSHans-Light, sans-serif;
    }
}

.menu .sub-menu li:last-child {
    border-bottom-width: 0
}

@media (max-width:991px) {
    .menu .sub-menu li:last-child {
        border-bottom-width: 1px
    }
}

.menu .sub-menu li.active a,
a {
    color: #000
}

@media (max-width:767px) {
    .menu .sub-menu li.active a {
        color: #fff
    }
}

.menu .sub-menu a {
    display: block;
    padding: 5px 12px;
    color: #000;
    line-height: 38px
}

@media (max-width:991px) {
    .menu .sub-menu a {
        padding: 0 10px;
    }
}

.menu.theme-single-hide {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .2s ease-out 0s;
    -o-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s
}

/* ============================================================================================= 
Banner
================================================================================================*/
.banner-area {
    background-color: #f5f5f5;
    padding: 50px 0;
    position: relative;
}

.banner-area .carousel-inner {
    border-radius: 30px;
}

/*================================================
05: item animation css style
==================================================*/
.item-animation {
    position: relative;
}

.item-animation:before {
    content: "";
    background: rgba(82, 43, 242, 0.5);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    opacity: 1;
    width: 0;
    z-index: 1;
}

.item-animation:after {
    content: "";
    background: rgba(199, 56, 247, 0.5);
    position: absolute;
    bottom: 50%;
    left: 0;
    right: 0;
    top: 50%;
    opacity: 1;
    width: 0;
    z-index: 1;
}

.item-animation:hover:before {
    left: 0;
    right: 0;
    opacity: 0;
    width: auto;
    transition: all linear 1s;
    -webkit-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -ms-transition: all linear 1s;
    -o-transition: all linear 1s;
}

.item-animation:hover:after {
    top: 0;
    bottom: 0;
    opacity: 0;
    width: auto;
    transition: all linear 1s;
    -webkit-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -ms-transition: all linear 1s;
    -o-transition: all linear 1s;
}


/*================================================
产品中心
==================================================*/

.home1.category .single-item {
    box-shadow: 2px 0 90px rgba(0, 0, 0, 0.15);
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}

.home1.category .single-item img {
    width: 100%;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.home1.category .single-item:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.home1.category .single-item .content {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 9;
}

.home1.category .single-item h5 {
    font-weight: 500;
    text-transform: uppercase;
    color: var(--dark);
}

.home1.category .single-item h5 span {
    display: block;
    font-weight: 700;
}

.home1.category .single-item a {
    display: inline-block;
    font-size: 16px;
    line-height: 32px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--dark);
    text-decoration: underline;
    margin-top: 5px;
}

.home1.category .single-item a:hover {
    color: var(--main);
}


/*================================================
解决方案 solution
==================================================*/
.home1.solution .item {
    position: relative;
    background-color: #fff;
}

.home1.solution .item img {
    width: 100%;
}

.home1.solution .item .content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}

.home1.solution .item .content:before {
    content: '';
    height: calc(100% - 100px);
    width: calc(100% - 150px);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 75px;
    right: 75px;
    z-index: 5;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.home1.solution .item .content:after {
    content: '';
    height: calc(100% - 60px);
    width: calc(100% - 190px);
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 95px;
    right: 95px;
    z-index: 5;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.home1.solution .item:hover .content:before {
    height: calc(100% - 60px);
    top: 30px;
    bottom: 30px;
}

.home1.solution .item:hover .content:after {
    width: calc(100% - 150px);
    left: 75px;
    right: 75px;
}

.home1.solution .item .content .text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 9;
}

.home1.solution .item .content h6 {
    font-size: 20px;
    font-weight: 400;
    text-transform: capitalize;
    color: #fff;
}

.home1.solution .item .content h4 {
    font-weight: 700;
    color: #fff;
    padding: 10px 0;
}

.home1.solution .item .content a {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    text-transform: capitalize;
    text-decoration: underline;
}

/* ============================================================================================= 
Blog-Area
================================================================================================*/

.blog-item {
    margin-bottom: 30px;
    background-color: #f9f9f9;
    -webkit-transition: .5s;
    transition: .5s
}

.blog-item:hover {
    background: #f5f3f3;
    border-radius: 10px;
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px)
}

.blog-item:hover .top span {
    color: #fff;
    background-color: #522bf2;
    border: 7px solid #fff;
}

.blog-item .top {
    position: relative;
    margin-bottom: 25px;
}

.blog-item .top a {
    display: block
}

.blog-item .top a img {
    width: 100%;
}

.blog-item .top span {
    font-family: "HarmonyOSHans-Light";
    font-size: 12px;
    display: inline-block;
    width: 85px;
    height: 85px;
    padding: 25px 15px 0;
    text-align: center;
    color: #363636;
    background-color: #fff;
    border: 7px solid #f5f5f5;
    font-weight: 600;
    border-radius: 50%;
    position: absolute;
    bottom: -20px;
    right: -4px;
    -webkit-transition: .5s;
    transition: .5s
}

.blog-item .bottom {
    padding: 10px 20px;
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px)
}

.blog-item .bottom h3 {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.blog-item .bottom h3 a {
    color: #363636
}

.blog-item .bottom h3 a:hover {
    color: #522bf2
}

.blog-item .item-excerpt {
    font-size: 16px;
    line-height: 1.625;
    margin-bottom: 15px;
    max-height: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3
}

.blog-item .item-excerpt p {
    margin-bottom: 0
}

.blog-item .bottom p {
    font-size: 13px;
    margin-bottom: 14px
}

.blog-item .bottom .blog-btn {
    display: inline-block;
    color: #919090
}


.blog-item .bottom .blog-btn:hover i {
    -webkit-animation: blog-rotate-ani 2s infinite linear;
    animation: blog-rotate-ani 2s infinite linear
}

.blog-item .bottom .blog-btn i {
    display: inline-block;
    -webkit-transition: .5s;
    transition: .5s;
    font-size: 17px;
    position: relative;
    top: 3px
}

.bd-aside h3 {
    font-weight: 400;
    color: #000;
}

.bd-aside ul li a {
    color: #000;
}

/* -----------Pagination -------------- */

ul.page-numbers,
ul.pagination {
    display: block;
    margin: 0 !important;
    padding-left: 0 !important;
    text-align: center
}

ul.page-numbers>li,
ul.pagination>li {
    background-color: rgba(38, 38, 38, 0.05);
    border-radius: 2px;
    box-sizing: border-box;
    color: rgba(38, 38, 38, 0.8);
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 28px;
    margin: 0 5px !important;
    min-width: 30px;
    padding: 0;
    text-align: center;
    vertical-align: top
}

@media (max-width: 767px) {

    ul.page-numbers>li.next>a,
    ul.page-numbers>li.prev>a,
    ul.pagination>li.next>a,
    ul.pagination>li.prev>a {
        display: flex;
        gap: 3px
    }
}

ul.page-numbers>li.next span,
ul.page-numbers>li.prev span,
ul.pagination>li.next span,
ul.pagination>li.prev span {
    display: none
}

ul.page-numbers>li.next>a:after,
ul.page-numbers>li.prev>a:before,
ul.pagination>li.next>a:after,
ul.pagination>li.prev>a:before {
    content: "\F285";
    display: block;
    font-family: bootstrap-icons;
    font-size: 15px
}

@media (max-width: 767px) {

    ul.page-numbers>li.next>a:after,
    ul.page-numbers>li.prev>a:before,
    ul.pagination>li.next>a:after,
    ul.pagination>li.prev>a:before {
        content: "\e654"
    }
}

ul.page-numbers>li.prev>a:before,
ul.pagination>li.prev>a:before {
    transform: rotate(180deg)
}

@media (max-width: 767px) {

    ul.page-numbers>li,
    ul.pagination>li {
        display: none
    }

    ul.page-numbers>li.next,
    ul.page-numbers>li.next span,
    ul.page-numbers>li.prev,
    ul.page-numbers>li.prev span,
    ul.pagination>li.next,
    ul.pagination>li.next span,
    ul.pagination>li.prev,
    ul.pagination>li.prev span {
        display: inline-block
    }
}

ul.page-numbers>li>a,
ul.page-numbers>li>span,
ul.pagination>li>a,
ul.pagination>li>span {
    color: inherit;
    display: block;
    padding: 0 8px;
    text-decoration: none !important
}

ul.page-numbers>li .wi,
ul.pagination>li .wi {
    font-size: 15px;
    vertical-align: top
}

ul.page-numbers>li:hover,
ul.pagination>li:hover {
    background: var(--member-hover, var(--theme-hover, #1162e8));
    color: #fff
}

ul.page-numbers>li.disabled,
ul.page-numbers>li.disabled:hover,
ul.pagination>li.disabled,
ul.pagination>li.disabled:hover {
    background-color: rgba(38, 38, 38, 0.05);
    color: rgba(38, 38, 38, 0.8)
}

ul.page-numbers>li.disabled:hover,
ul.pagination>li.disabled:hover {
    cursor: default
}

ul.page-numbers>li.active,
ul.pagination>li.active {
    background: var(--member-color, var(--theme-color, #206be7));
    color: #fff
}

ul.page-numbers .pagination-go,
ul.pagination .pagination-go {
    background: none;
    padding: 0;
    position: relative
}

ul.page-numbers .pagination-go .pgo-input,
ul.pagination .pagination-go .pgo-input {
    background: hsla(var(--member-color-hsl), .05);
    border: 1px solid var(--member-line-color, var(--theme-line-color));
    border-radius: var(--theme-border-radius-s, 2px);
    box-sizing: border-box;
    font-size: 13px;
    height: 28px;
    line-height: 26px;
    padding: 0 28px 0 8px;
    width: 66px
}

ul.page-numbers .pagination-go .pgo-input::-webkit-input-placeholder,
ul.page-numbers .pagination-go .pgo-input::placeholder,
ul.pagination .pagination-go .pgo-input::-webkit-input-placeholder,
ul.pagination .pagination-go .pgo-input::placeholder {
    color: var(--member-light-color, var(--theme-light-color))
}

ul.page-numbers .pagination-go .pgo-input:focus,
ul.pagination .pagination-go .pgo-input:focus {
    border-color: var(--member-hover, var(--theme-hover, #1162e8));
    outline: 0
}

ul.page-numbers .pagination-go .pgo-btn,
ul.pagination .pagination-go .pgo-btn {
    background: none;
    border: 0;
    color: var(--member-gray-color, var(--theme-gray-color));
    cursor: pointer;
    height: 28px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 28px
}

ul.page-numbers .pagination-go .pgo-btn:after,
ul.pagination .pagination-go .pgo-btn:after {
    content: "\e654";
    display: block;
    font-family: iconbg;
    font-size: 15px
}

ul.page-numbers .pagination-go .pgo-btn:hover,
ul.pagination .pagination-go .pgo-btn:hover {
    color: var(--member-hover, var(--theme-hover, #1162e8))
}

ul.page-numbers .pagination-go .pgo-btn:active,
ul.page-numbers .pagination-go .pgo-btn:focus,
ul.pagination .pagination-go .pgo-btn:active,
ul.pagination .pagination-go .pgo-btn:focus {
    background: none;
    outline: 0
}

.swiper-pagination-bullet {
    width: 15px !important;
    height: 15px !important;
}

.swiper-pagination-bullet-active {
    width: 30px !important;
    background-color: #522bf2 !important;
    height: 15px;
    border-radius: 10px !important;
}

/* ===================================================
新闻详情页
==================================================== */

.entry {
    background: #fff;
    padding: 40px;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

.pg-blog-title {
    font-family: HarmonyOSHans-Light, sans-serif;
    color: #000;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}

.pg-blog-meta {
    padding-left: 0;
}

.pg-blog-meta li {
    font-size: 14px;
    font-weight: 400;
    color: #a8a8a8;
    text-transform: capitalize;
    display: inline-block;
    vertical-align: middle;
}

.pg-blog-meta li:after {
    content: "-";
    padding: 0 10px;
}

.pg-blog-meta li:last-child:after {
    display: none;
}

.pg-blog-meta li a {
    color: #a8a8a8;
}

.pg-blog-meta li a:hover {
    color: #00AC1F;
}

.entry .mce-tinymce {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.entry .entry-video {
    position: relative;
    margin: 0 0 20px;
}

.entry .entry-video embed,
.entry .entry-video iframe,
.entry .entry-video video {
    display: block;
    width: 100% !important;
    height: 100%;
    vertical-align: top;
}

.entry .entry-video .mejs-container,
.entry .entry-video .mejs-container embed,
.entry .entry-video .mejs-container iframe,
.entry .entry-video .mejs-container video,
.entry .entry-video .wp-video,
.entry .entry-video .wp-video embed,
.entry .entry-video .wp-video iframe,
.entry .entry-video .wp-video video {
    height: 100% !important;
}

.entry .entry-content figure,
.entry .entry-head {
    margin-bottom: 20px;
}

.entry .entry-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .entry {
        background: #fff;
        padding: 20px 10px;
        margin-bottom: 20px;
    }

    .entry .entry-title {
        font-size: 22px;
    }
}

.entry .entry-info {
    padding-bottom: 10px;
    color: #828282;
    font-size: 0.9rem;
    font-weight: 300;
}

.entry .entry-info a {
    color: #828282;
}

.entry .entry-info .dot {
    margin: 0 6px;
    color: #ccc;
}

.entry .entry-excerpt {
    padding: 15px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
    color: #828282;
    background: #f5f5f5;
    border-radius: 3px;
}

.entry .entry-content {
    position: relative;
    font-size: 16px;
    color: #262626;
    line-height: 1.8;
}

.entry .entry-content .h1,
.entry .entry-content .h2,
.entry .entry-content .h3,
.entry .entry-content h1,
.entry .entry-content h2,
.entry .entry-content h3 {
    margin: 32px 0 16px;
    line-height: 1.4;
    font-weight: 500;
}

.entry .entry-content h4,
.entry .entry-content h5 {
    font-weight: 500;
}

.entry .entry-content .h1,
.entry .entry-content h1 {
    font-size: 24px;
}

.entry .entry-content .h2,
.entry .entry-content h2 {
    padding-bottom: 12px;
    font-size: 20px;
    border-bottom: 1px solid #efefef;
}

.entry .entry-content .h3,
.entry .entry-content h3 {
    font-size: 18px;
}

.entry .entry-content>.h3,
.entry .entry-content>h3 {
    position: relative;
    padding-left: 18px;
    line-height: 1.46;
    border: 0;
}

.entry .entry-content>.h3:before,
.entry .entry-content>h3:before {
    position: absolute;
    top: 4px;
    left: 0;
    content: '';
    width: 3px;
    height: calc(100% - 8px);
    border-radius: 3px;
    background-color: #c51119;
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), transparent);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent);
}

.entry .entry-content p {
    margin-bottom: 20px;
    line-height: 1.8;
    word-wrap: break-word;
    font-weight: 600;
    color: #333;
}

@media (max-width: 767px) {
    .entry .entry-content p {
        text-align: justify;
    }

    .entry .entry-content p.aligncenter,
    .entry .entry-content p.has-text-align-center {
        text-align: center;
    }

    .entry .entry-content p.has-text-align-left {
        text-align: left;
    }

    .entry .entry-content p.has-text-align-right {
        text-align: right;
    }
}

.entry .entry-content>p {
    white-space: pre-wrap;
}

.entry .entry-content p.has-drop-cap:not(:focus):first-letter {
    font-size: 3em;
    line-height: 1;
    font-weight: 300;
}

.entry .entry-content .woocommerce p {
    text-indent: 0 !important;
}

.entry .entry-content blockquote {
    color: #444;
    background: #fbfbfb;
}

.entry .entry-content ol,
.entry .entry-content ul {
    padding-left: 2em;
    margin-bottom: 20px;
    list-style-position: outside;
}

.entry .entry-content li {
    margin-bottom: 10px;
}

.entry .entry-content img {
    height: auto;
}

.entry .entry-content audio,
.entry .entry-content embed,
.entry .entry-content iframe,
.entry .entry-content img,
.entry .entry-content video {
    max-width: 100%;
    vertical-align: top;
}

@media (max-width: 767px) {
    .entry .entry-content video {
        display: block;
        width: 100%;
        height: auto;
    }

    .entry .entry-content .plyr__video-wrapper--fixed-ratio video {
        height: 100%;
    }
}

@media (max-width: 767px) {
    .entry .entry-content audio {
        display: block;
        width: 100%;
    }
}

@media (max-width: 767px) {

    .entry .entry-content embed,
    .entry .entry-content iframe {
        display: block;
        width: 100%;
        min-height: 200px;
        max-height: 500px;
    }
}

.entry .entry-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.entry .entry-content .alignleft {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.entry .entry-content .alignright {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
}

.entry .entry-content .wp-caption,
.entry .entry-content button,
.entry .entry-content input,
.entry .entry-content select,
.entry .entry-content textarea {
    max-width: 100%;
}

.entry .entry-content .wp-caption-text {
    padding-top: 5px;
    text-align: center;
    text-indent: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
}

.entry .entry-content table {
    width: 100%;
    border-collapse: collapse;
}

.entry .entry-content table td,
.entry .entry-content table th {
    padding: 0.5em;
    border: 1px solid #efefef;
}

.entry .entry-content .has-theme-light-color {
    color: #f5f5f5;
}

.entry .entry-content .has-theme-light-background-color {
    background-color: #f5f5f5;
}

.entry .entry-content .has-theme-gray-color {
    color: #999;
}

.entry .entry-content .has-theme-gray-background-color {
    background-color: #999;
}

.entry .entry-content .has-theme-black-color {
    color: #333;
}

.entry .entry-content .has-theme-black-background-color {
    background-color: #333;
}

.entry .entry-content .gallery {
    margin: 0 -10px;
    font-size: 0;
}

.entry .entry-content .gallery .gallery-item {
    display: inline-block;
    padding: 10px;
    text-align: center;
    vertical-align: top;
}

.entry .entry-content .gallery .gallery-item img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: 0;
}

.entry .entry-content .gallery-columns-1 .gallery-item {
    width: 100%;
}

.entry .entry-content .gallery-columns-2 .gallery-item {
    width: 50%;
}

.entry .entry-content .gallery-columns-3 .gallery-item {
    width: 33.33333%;
}

.entry .entry-content .gallery-columns-4 .gallery-item {
    width: 25%;
}

.entry .entry-content .gallery-columns-5 .gallery-item {
    width: 20%;
}

.entry .entry-content .gallery-columns-6 .gallery-item {
    width: 16.66667%;
}

.entry .entry-content .gallery-columns-7 .gallery-item {
    width: 14.28571%;
}

.entry .entry-content .gallery-columns-8 .gallery-item {
    width: 12.5%;
}

.entry .entry-content .gallery-columns-9 .gallery-item {
    width: 11.11111%;
}

.entry .entry-content .wp-video {
    width: auto !important;
}

.entry .entry-content .plyr--video {
    margin-bottom: 20px;
}

.entry .entry-content .j-wpcom-video {
    display: block;
    max-width: 100%;
}

.entry .entry-content.text-indent p {
    text-indent: 2em;
}

.entry .entry-content .wp-block-quote,
.entry .entry-content blockquote {
    position: relative;
    padding: 30px 30px 30px 85px;
    background: #f3f3f3;
    border-left: 0;
    font-size: 16px;
    border-radius: 3px;
}

@media (max-width: 1239px) {

    .entry .entry-content .wp-block-quote,
    .entry .entry-content blockquote {
        padding: 20px 20px 20px 70px;
    }
}

@media (max-width: 767px) {

    .entry .entry-content .wp-block-quote,
    .entry .entry-content blockquote {
        padding: 15px 15px 15px 60px;
    }
}

.entry .entry-content .wp-block-quote:before,
.entry .entry-content blockquote:before {
    position: absolute;
    width: 46px;
    height: 46px;
    left: 20px;
    top: 15px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% auto;
    content: '';
    opacity: 0.15;
}

@media (max-width: 1239px) {

    .entry .entry-content .wp-block-quote:before,
    .entry .entry-content blockquote:before {
        width: 42px;
        height: 42px;
        left: 15px;
    }
}

@media (max-width: 767px) {

    .entry .entry-content .wp-block-quote:before,
    .entry .entry-content blockquote:before {
        width: 36px;
        height: 36px;
        left: 10px;
    }
}

.entry .entry-content .wp-block-code,
.entry .entry-content pre {
    padding: 30px;
    background: #2b303b;
    border-radius: 3px;
    border: 0;
    color: #eee;
    overflow-x: scroll;
}

@media (max-width: 1239px) {

    .entry .entry-content .wp-block-code,
    .entry .entry-content pre {
        padding: 20px;
    }
}

@media (max-width: 767px) {

    .entry .entry-content .wp-block-code,
    .entry .entry-content pre {
        padding: 15px;
    }
}

.entry .entry-page p {
    margin: 0;
}

.page .entry .entry-head {
    margin-bottom: 45px;
}

.page .entry .entry-title {
    position: relative;
    margin-bottom: 0;
    text-align: center;
}

.page .entry .entry-title:after {
    position: absolute;
    left: 50%;
    bottom: -15px;
    width: 20px;
    height: 2px;
    margin-left: -10px;
    background: #999;
    content: '';
    border-radius: 2px;
}

.entry-footer {
    margin: 30px 0;
}

.entry-copyright {
    margin-top: 30px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.6;
    color: #828282;
    background: rgba(239, 239, 239, 0.4);
    border-radius: 4px;
}

.entry-copyright a,
.entry-copyright span {
    color: #5a5a5a;
}

.entry-copyright p {
    margin-bottom: 8px !important;
    text-indent: 0 !important;
}

.entry-copyright p:last-child {
    margin-bottom: 0 !important;
}

.entry-tag {
    font-size: 0;
}

.entry-tag a {
    display: inline-block;
    margin: 0 10px 5px 0;
    padding: 4px 15px;
    font-size: 12px;
    line-height: 1.2;
    color: #5a5a5a;
    border: 1px solid #efefef;
    border-radius: 3px;
}

.entry-tag a:focus,
.entry-tag a:hover {
    color: #fff;
    background: #c51119;
    border-color: #fff;
    text-decoration: none;
}

.el-boxed .entry .entry-video {
    margin: -30px -30px 20px;
}

@media (max-width: 1239px) {
    .el-boxed .entry .entry-video {
        margin: -20px -20px 20px;
    }
}

@media (max-width: 767px) {
    .el-boxed .entry .entry-video {
        margin: -20px -15px 20px;
    }
}

.entry-page {
    margin: 30px 0;
    overflow: hidden;
}

.entry-page-next,
.entry-page-prev {
    position: relative;
    width: 49%;
    padding: 60px 15px 10px;
    color: #fff;
    background-size: cover;
    background-position: 50%;
    border-radius: 4px;
    overflow: hidden;
}

.entry-page-prev {
    float: left;
}

@media (max-width: 767px) {

    .entry-page-next,
    .entry-page-prev {
        width: 100%;
        margin-bottom: 10px;
        float: none;
    }
}

.entry-page-next:before,
.entry-page-prev:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    content: '';
}

.entry-page-next:hover:before,
.entry-page-prev:hover:before {
    background: rgba(0, 0, 0, 0.7);
}

.entry-page-next a,
.entry-page-prev a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    color: #fff;
    font-size: 16px;
}

.entry-page-next a span,
.entry-page-prev a span {
    display: block;
    padding: 10px 15px 0;
    height: 50px;
    line-height: 20px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

.entry-page-next a:hover,
.entry-page-prev a:hover {
    color: #fff;
    text-decoration: none;
}

.entry-page-next .entry-page-info,
.entry-page-prev .entry-page-info {
    position: relative;
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
}

.entry-page-next .entry-page-info .wi,
.entry-page-prev .entry-page-info .wi {
    opacity: 0.9;
}

.entry-page-next {
    float: right;
}

.entry-page-nobg:before {
    background-color: #dddddd;
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.3), transparent);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
}

.entry-page-nobg:hover:before {
    background-color: #c51119;
}

.wpcom-icon {
    display: inline-block;
}

.icon-svg,
.wpcom-icon svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.box-comment img {
    max-width: 100%;
    vertical-align: top;
    height: auto;
}

.entry-related-title {
    margin: 30px 0 20px;
    font-size: 18px;
    font-weight: 500
}

.entry-related-title {
    position: relative;
    padding: 0 0 0 12px
}

.entry-related-title:before {
    position: absolute;
    left: 0;
    top: 1px;
    width: 3px;
    height: calc(100% - 2px);
    content: "";
    background-color: #c51119;
    border-radius: 3px
}

.entry-related {
    margin-bottom: 20px
}

/* ====================================================================
产品
======================================================================= */

.new-product {
    text-align: center;
}

.new-product-title {
    font-family: "HarmonyOSHans-Medium";
    font-size: 2.5rem;
    line-height: 48px;
    margin-bottom: 8px;
}



/* =================================产品列表============================================== */
.products-recommend {
  background-position: center center;
  background-size: cover;
}
.products-area {
    overflow: hidden
}products

.products-area .nav-pills .nav-link.active,
.products-area .nav-pills .show>.nav-link {
    background-color: #000;
}

.products-area .nav-link {
    color: #000;
}

.products-thumb {
    padding: 30px 5px;
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 20px 0 #dddddd59;
    box-shadow: 0 0 20px 0 #dddddd59;
    text-align: center;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden
}

.products-thumb:hover {
    background-color: #434e6e
}

.products-thumb:hover img {
    opacity: .2;
    visibility: visible
}

.products-thumb:hover img:nth-child(1) {
    left: 0;
    bottom: 0
}

.products-thumb:hover img:nth-child(2) {
    top: 0;
    right: 0
}

.products-thumb:hover i {
    color: #fff
}

.products-thumb:hover span {
    color: #fff
}

.products-thumb img {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s
}

.products-thumb img:nth-child(1) {
    left: -15px;
    bottom: -15px
}

.products-thumb img:nth-child(2) {
    top: -15px;
    right: -15px
}

.products-thumb i {
    display: block;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 5px;
    -webkit-transition: .5s;
    transition: .5s
}

.products-thumb span {
    display: block;
    font-weight: 600;
    -webkit-transition: .5s;
    transition: .5s
}

.products-item {
    text-align: center;
    background-color: #fff;
    padding-bottom: 40px;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s;
    margin-bottom: 30px;
}

.products-item:hover {
    -webkit-transform: translate(0, -5px);
    transform: translate(0, -5px)
}

.products-item:hover .top img {
    -webkit-transform: scale(1.1) rotate(10deg);
    transform: scale(1.1) rotate(10deg)
}

.products-item .top {
    position: relative;
    padding-top: 35px
}

.products-item .top .product-type {
    display: inline-block;
    color: #fff;
    padding: 3px 12px;
    font-size: 0.875rem;
    background-color: #f33;
    position: absolute;
    top: 30px;
    left: 0
}

.products-item .top .product-type.two {
    background-color: #197dff
}

.products-item .top img {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    -webkit-transition: .5s;
    transition: .5s
}

.products-item .top .inner {
    text-align: left;
    padding: 0 25px;
}

.products-item .top .inner h3 {
    margin-bottom: 5px;
    font-size: 1.15rem
}


.products-item .top .inner h3.item-excerpt {
    height: 52px;
    max-height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

.products-item .top .inner h3 a {
    color: #363636
}

.products-item .top .inner h3 a:hover {
    color: #522bf2
}

.products-item .top .inner span {
    display: block;
    color: #666;
    font-size: 0.8rem;
    height: 42px;
    max-height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}


.font-blod {
    font-weight: bold !important;
}

.join {
    display: inline-block;
    color: #fff;
    background-color: #434e6e;
    padding: 8px 18px;
    border-radius: 5px;
    border: 1px solid #434e6e
}

.join i {
    display: inline-block;
    font-size: 16px;
    position: relative;
    top: 1px;
    margin-right: 2px
}

.join:hover {
    color: #434e6e;
    background-color: #fff
}

/* 产品详情页 */
.product-detail-are .nav-tabs {
    border-bottom: none;
}

.product-detail-are .nav-tabs .nav-link {
    border: none;
    font-size: 18px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    position: relative;
}

.product-detail-are .nav-tabs .nav-item.show .nav-link,
.product-detail-are .nav-tabs .nav-link.active {
    border-color: transparent;
    color: #000;
    font-weight: 500;
}

.product-detail-are .nav-tabs .nav-link.active::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background-color: #000;
    border-radius: 3px;
    content: '';

}

.product-detail-content img {
    margin: 0 auto;
    height: auto;
    max-width: 100%;
    vertical-align: top;
}

@media (min-width:1200px) {
    .product-detail-are .nav-tabs .nav-link {
        padding: 10px 50px 10px 0;
    }
}

.cart-text {
    font-size: 12px;
}

/* 联系销售人员 */


.about-area .about-content {
    margin-bottom: 30px
}

.about-area .about-content .top {
    margin-bottom: 25px
}

.about-area .about-content .top h2 {
    font-size: 40px;
    margin-bottom: 10px
}

.about-area .about-content .top p {
    margin-bottom: 4px
}

.about-area .about-content .top p:last-child {
    margin-bottom: 0
}

.about-area .about-content .middle ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.about-area .about-content .middle ul li {
    list-style-type: none;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    max-width: 45%;
    background-color: #050a52;
    position: relative;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 3rem;
    margin-bottom: 25px;
    margin-right: 25px
}


.about-area .about-content .middle ul li h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.3
}


.about-area .about-content .middle ul li div.content {
    display: block;
    position: relative;
    color: #fff;
    padding: 10px 0;
}

.about-area .about-content .middle ul li div.content span {
    position: absolute;
    top: 10px;
    right: 15px;
}

.about-area .about-content .middle p {
    margin-bottom: 25px
}

/* 面包屑导航 */
.page-title-area {
    position: relative
}

.page-title-area .title-content {
    margin-top: 50px;
    position: relative;
    z-index: 1
}

.page-title-area .title-content h2 {
    font-size: 50px;
    margin-bottom: 15px
}

.page-title-area .title-content ul {
    margin: 0;
    padding: 0
}

.page-title-area .title-content ul li {
    list-style-type: none;
    display: inline-block;
    font-weight: 600;
    margin-right: 20px;
    position: relative
}

.page-title-area .title-content ul li:before {
    position: absolute;
    content: '>';
    top: -2px;
    right: -18px;
    color: #545454;
    font-size: 20px
}

.page-title-area .title-content ul li:last-child:before {
    display: none
}

.page-title-area .title-content ul li a {
    display: block;
    color: #545454
}

.page-title-area .title-content ul li a:hover {
    color: #f05454
}

.page-title-area .title-content ul li span {
    display: block
}

/*=========================================================================================
 产品详情页 
 ==========================================================================================*/


.product_title {
    margin: 0 0 16px;
    padding: 0;
    font-size: 1.75rem;
    line-height: 1.4;
}

.product-description {
    margin-bottom: 16px;
    font-weight: 600;
    color: #777;
}

.product-parameter .accordion-body {
    line-height: 1.6;
    font-weight: 500;
    font-size: 1rem;
}

.product-parameter .accordion-body h3 {
    margin: 20px 0;
}

.product-parameter .accordion-body h4 {
    line-height: 26px;
    margin: 20px 0 10px;
    font-size: 1.2rem;
    font-weight: 600;
}

.product-parameter .accordion-body ul {
    list-style: none;
    margin-bottom: 15px;
    padding: 0;
}

.product-parameter .accordion-body ul li {
    line-height: 1.3;
    padding: 5px 0 5px 15px;
    position: relative;
}

.product-parameter .accordion-body ul li:before {
    border: 1px solid #999;
    content: "";
    height: 0;
    left: 0;
    line-height: 0;
    position: absolute;
    top: 14px;
    width: 6px;
}

.pg-features {
    margin-top: 80px;
}

.pg-features:first-child,
.pg-features:only-child {
    margin-top: 0;
}

.pg-features:nth-child(even) .pg-features__description {
    padding-right: 50px;
    padding-left: 0;
}

.pg-features:nth-child(even) .pg-features__thumb:after {
    right: auto;
    left: -20px;
    background: #00AC1F;
}

/* .pg-features:nth-child(odd) .pg-features__thumb:after {
    background: #333982;
}

.pg-features__thumb {
    position: relative;
}

.pg-features__thumb:after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -20px;
    height: 70%;
    width: 80%;
    background: #333982;
} */

.pg-features__thumb>* {
    z-index: 1;
    position: relative;
}

.pg-features__description {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}


.pg-features__content {
    -webkit-flex-shrink: 100;
    -moz-flex-shrink: 100;
    -ms-flex-negative: 100;
    flex-shrink: 100;
}



@media (min-width: 1400px) {
    .pg-features__content h3 {
        color: #303030;
        text-transform: capitalize;
        font-size: 1.825rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
    }

    .pg-features__content p {
        font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin-top: 0;
        margin-bottom: 1rem;
        color: #000;
        font-size: 1rem;
        font-weight: 400;
    }
}

@media only screen and (min-width: 992px) and (max-width:1199px) {
    .pg-features:nth-child(even) .pg-features__description {
        padding-left: 0;
    }

    .pg-features .pg-features__description {
        padding-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width:991px) {
    .pg-features {
        margin-top: 50px;
    }

    .pg-features:nth-child(even) .pg-features__description {
        padding-left: 0;
    }

    .pg-features .pg-features__description {
        padding-right: 0;
    }

    .pg-features__thumb {
        margin-left: 20px;
        display: inline-block;
    }

    .pg-features__thumb:after {
        right: auto;
        left: -20px;
    }

    .pg-features__description {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .pg-features {
        margin-top: 50px;
    }

    .pg-features:nth-child(even) .pg-features__description {
        padding-left: 0;
    }

    .pg-features .pg-features__description {
        padding-right: 0;
    }

    .pg-features__thumb {
        margin-left: 20px;
        display: inline-block;
    }

    .pg-features__thumb:after {
        right: auto;
        left: -20px;
    }

    .pg-features__description {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .pg-features__description {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .pg-features__icon {
        margin-bottom: 20px;
    }
}

.pg-services__details h4 {
    margin-bottom: 7px;
    font-weight: 600;
}

.pg-services__details h3 {
    margin-bottom: 20px;
    font-weight: 700;
}

.pg-services__details p:last-child {
    margin-bottom: 0;
}

.pg-services-area__srevicelist {
    margin-top: 40px;
}

@media only screen and (min-width: 992px) and (max-width:1199px) {
    .pg-services__details {
        padding-right: 0;
    }

    .pg-services__details h3 {
        margin-bottom: 20px;
    }

    .pg-services__thumb {
        padding: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width:991px) {
    .pg-services__details {
        margin-top: 30px;
        padding-right: 0;
        text-align: center;
    }

    .pg-services__details h3 {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .pg-services__details {
        margin-top: 30px;
        padding-right: 0;
        text-align: center;
    }

    .pg-services__details h3 {
        margin-bottom: 20px;
    }
}

.brand-item {
    margin-bottom: 30px;
    background-color: #f8f9fa;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    -webkit-transition: .5s;
    transition: .5s
}

.brand-item a {
    display: block
}

.brand-item:hover {
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px)
}

/* =====================================================

======================================================== */
#modal-subscribe.fade .modal-dialog,#modal-trial.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    -webkit-transform: translate(-50%, -60%);
    transform: translate(-50%, -60%);
    position: relative;
    top: 50%;
    left: 50%
}

#modal-subscribe.show .modal-dialog,#modal-trial.show .modal-dialog {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

#modal-subscribe .modal-dialog,#modal-trial .modal-dialog  {
    max-width: 1000px;
    margin: 0
}

#modal-subscribe .modal-dialog .modal-content,#modal-trial .modal-dialog .modal-content {
    padding: 50px 50px 20px;
    border-radius: 10px;
    position: relative
}

#modal-subscribe .modal-dialog .modal-content .subscribe-shape img,#modal-trial .modal-dialog .modal-content .subscribe-shape img {
    position: absolute
}

#modal-subscribe .modal-dialog .modal-content .subscribe-shape img:nth-child(1),#modal-trial .modal-dialog .modal-content .subscribe-shape img:nth-child(1) {
    top: 10px;
    left: 40%
}

#modal-subscribe .modal-dialog .modal-content .subscribe-shape img:nth-child(2),#modal-trial .modal-dialog .modal-content .subscribe-shape img:nth-child(2)  {
    top: 40%;
    right: -1px
}

#modal-subscribe .modal-dialog .modal-content .subscribe-shape img:nth-child(3),#modal-trial .modal-dialog .modal-content .subscribe-shape img:nth-child(3)  {
    bottom: 0;
    left: 50px
}

#modal-subscribe .modal-dialog .modal-content .btn-close,#modal-trial .modal-dialog .modal-content .btn-close {
    position: absolute;
    top: -13px;
    right: 10px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 12px;
    -webkit-transition: .5s;
    transition: .5s;
    border-radius: 50%;
    border: 3px solid #ddd;
    background-color: #fff;
    color: #363636;
    padding: 0;
    opacity: 1
}

#modal-subscribe .modal-dialog .modal-content .btn-close:hover,#modal-trial .modal-dialog .modal-content .btn-close:hover {
    border: 3px solid #434e6e
}

#modal-subscribe .modal-dialog .modal-content .btn-close:focus,#modal-trial .modal-dialog .modal-content .btn-close:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

#modal-subscribe .modal-dialog .modal-content .modal-body,#modal-trial .modal-dialog .modal-content .modal-body {
    padding: 0
}

#modal-subscribe .subscribe-img,#modal-trial .subscribe-img {
    margin-bottom: 30px;
    text-align: center
}

#modal-subscribe .subscribe-content,#modal-trial .subscribe-content {
    margin-bottom: 30px
}

#modal-subscribe .subscribe-content h2,#modal-trial .subscribe-content h2 {
    font-size: 1.825rem;
    font-weight: 600;
    margin-bottom: 5px
}

#modal-subscribe .subscribe-content p,#modal-trial .subscribe-content p {
    margin-bottom: 15px
}

#modal-subscribe .subscribe-content form .form-control,#modal-trial .subscribe-content form .form-control {
    height: 62px;
    border: 0;
    margin-bottom: 15px;
    padding: .415rem 1rem;
    font-weight: 600;
    color: #000;
}

#modal-subscribe .subscribe-content form textarea.form-control,#modal-trial .subscribe-content form textarea.form-control  {
    height: auto;
}


#modal-subscribe .subscribe-content form .form-control:focus,#modal-trial .subscribe-content form .form-control:focus  {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

#modal-subscribe .subscribe-content form .common-btn,#modal-trial .subscribe-content form .common-btn {
    width: 100%;
    display: block
}

#modal-subscribe .subscribe-content form .validation-danger,#modal-trial .subscribe-content form .validation-danger {
    color: #dc3545 !important;
    margin-top: 10px
}

#modal-subscribe .subscribe-content form .validation-success,#modal-trial .subscribe-content form .validation-success {
    color: #28a745 !important;
    margin-top: 10px
}

#modal-subscribe .subscribe-content form .inner-check,#modal-trial .subscribe-content form .inner-check {
    margin-top: 15px
}

#modal-subscribe .subscribe-content form .inner-check .form-check,#modal-trial .subscribe-content form .inner-check .form-check {
    padding-left: 26px;
    margin-bottom: 5px
}

#modal-subscribe .subscribe-content form .inner-check .form-check .form-check-input,#modal-trial .subscribe-content form .inner-check .form-check .form-check-input  {
    margin-left: -26px;
    width: 15px;
    height: 15px;
    border-radius: 0;
    margin-top: 5px;
    border: 1px solid #363636
}

#modal-subscribe .subscribe-content form .inner-check .form-check .form-check-input:focus,#modal-trial .subscribe-content form .inner-check .form-check .form-check-input:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #363636
}

#modal-subscribe .subscribe-content form .inner-check .form-check .form-check-input:checked,#modal-trial .subscribe-content form .inner-check .form-check .form-check-input:checked  {
    background-color: #363636
}

#modal-subscribe .subscribe-content form .inner-check .form-check .form-check-label,#modal-trial .subscribe-content form .inner-check .form-check .form-check-label  {
    font-size: 15px;
    color: #545454
}

#modal-subscribe .subscribe-content form .inner-check .form-check .form-check-label a,#modal-trial .subscribe-content form .inner-check .form-check .form-check-label a {
    display: inline-block;
    color: #f05454;
    font-weight: 600
}

#modal-subscribe .subscribe-content form .inner-check .form-check .form-check-label a:hover,#modal-trial .subscribe-content form .inner-check .form-check .form-check-label a:hover {
    color: #545454
}

/*  */
.go-top {
    position: fixed;
    cursor: pointer;
    bottom: 0;
    right: 15px;
    background: #522bf2;
    color: #fff;
    z-index: 4;
    width: 45px;
    text-align: center;
    height: 45px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%
}

.go-top i {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transition: .6s;
    transition: .6s;
    font-size: 28px;
    line-height: 40px
}

.go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%
}

.go-top.active {
    bottom: 2%;
    -webkit-transform: translateY(-1%);
    transform: translateY(-1%);
    opacity: 1;
    visibility: visible
}

.go-top:hover,
.go-top:focus {
    color: #fff
}

.go-top:hover i:first-child,
.go-top:focus i:first-child {
    opacity: 0;
    top: 0;
    visibility: hidden
}

.go-top:hover i:last-child,
.go-top:focus i:last-child {
    opacity: 1;
    visibility: visible;
    top: 50%
}

.go-top.two {
    color: #434e6e
}

/* =================================================================================
404 Error Page
==================================================================================== */
.error-area {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
    text-align: center
}

.error-area .error-content i {
    color: #434e6e;
    display: inline-block;
    font-size: 100px
}

.error-area .error-content h1 {
    font-size: 130px;
    color: #434e6e;
    margin-bottom: 20px
}

.error-area .error-content h2 {
    font-size: 25px;
    color: #434e6e;
    margin-bottom: 10px
}

.error-area .error-content p {
    margin-bottom: 20px;
    font-weight: 500
}

/* =======================================================================================
解决方案
========================================================================================== */
.s-banner-area {
    position: relative;
    overflow: hidden
}

.s-banner-area .banner-shape img {
    position: absolute
}

.s-banner-area .banner-shape img:nth-child(1) {
    right: 0;
    bottom: 0;
    max-width: 300px;
    -webkit-animation: buy-ani-one 8s infinite linear;
    animation: buy-ani-one 8s infinite linear
}

.s-banner-area .banner-content {
    padding-left: 30px
}

.s-banner-area .banner-content h1 {
    font-size: 3.125rem;
    margin-bottom: 10px;
    line-height: 1.2;
    font-weight: 600;
}

.s-banner-area .banner-content p {
    color: #363636;
    font-weight: 600;
    margin-bottom: 10px
}

.s-banner-area .banner-content ul {
    margin: 0;
    padding: 0;
    margin-bottom: 20px
}

.s-banner-area .banner-content ul li {
    list-style-type: none;
    display: inline-block;
    font-weight: 600;
    margin-right: 15px
}

.s-banner-area .banner-content ul li:nth-child(2) {
    font-weight: 400
}

.room-tab-area .nav {
    border-radius: 1.25rem;
    box-shadow: 0 .1875rem .4375rem 0 rgba(0, 0, 0, .13), 0 .0625rem .125rem 0 rgba(0, 0, 0, .11);
    margin: .95rem 0;
    color: #505050;
}

.room-tab-area .nav-link {
    font-weight: 600;
    color: #000;
}

.room-tab-area .nav-pills .nav-link {
    border-radius: 0;
}

.room-tab-area .nav-pills .nav-link.active,
.room-tab-area .nav-pills .show>.nav-link {
    background-color: #522bf2;
}

.room-area {
    background-color: #fff;
    padding: 45px;
}

.room-area .room-content {
    margin-bottom: 30px
}

.room-area .room-content .top {
    margin-bottom: 25px
}

.room-area .room-content .top h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.room-area .room-content .top p {
    margin-bottom: 15px;
    font-weight: 600;
}

.room-area .room-content .top p:last-child {
    margin-bottom: 0
}

.room-area .room-content .top ul li {
    font-weight: 600;
    line-height: 1.8;
}

.room-area .room-content .middle ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.room-area .room-content .middle ul li {
    list-style-type: none;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 25px;
}

.room-area .room-content .middle ul li img {
    padding: 0 15px;

}

.room-area .room-content .middle ul li h3 {
    text-align: center;
    font-size: 0.825rem;
    color: #545454;
    margin-bottom: 0;
    line-height: 1.3
}

.room-area .room-content .middle p {
    margin-bottom: 25px
}

/* .room-area .room-img {
	margin-bottom: 30px
} */

.room-area .room-img img {
    border-radius: 15px;
    margin-left: 25px
}

/** @section Posts */
.post-classic {
    text-align: left;
}

.post-classic-figure {
    display: block;
    overflow: hidden;
}

.post-classic-figure img {
    width: 100%;
    transform: none;
    will-change: transform;
    transition: all .2s ease;
}

.post-classic-content {
    padding: 15px;
    background: #f9faf9;
}

.post-classic-title {
    font-weight: 500;
}

*+.post-classic-title {
    margin-top: 8px;
}

*+.post-classic-text {
    margin-top: 6px;
    height: 84px;
    max-height: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
}

@media (min-width: 768px) {
    .post-classic-content {
        padding: 25px 7% 20px;
    }

    .post-classic-text {
        line-height: 1.74;
    }

    *+.post-classic-title {
        margin-top: 14px;
    }

    *+.post-classic-text {
        margin-top: 12px;
    }
}

@media (min-width: 1200px) {
    .post-classic-content {
        padding: 34px 10% 30px;
    }

    *+.post-classic-title {
        margin-top: 20px;
    }

    *+.post-classic-text {
        margin-top: 18px;
    }
}

@media (min-width: 992px) {
    .desktop .post-classic:hover .post-classic-figure img {
        transform: scale(1.1);
    }
}

/*-------- 12. Breadcrumb style ---------*/
.breadcrumb-content ul li {
    display: inline-block;
    font-size: .875rem;
    font-weight: 600;
    margin-right: 18px;
    text-transform: uppercase;
    position: relative;
}

.breadcrumb-content ul li::before {
    position: absolute;
    width: 18px;
    height: 1px;
    background-color: #1f2226;
    content: "";
    right: -21px;
    top: 12px;
    z-index: 99;
    -webkit-transform: rotate(115deg);
    transform: rotate(115deg);
}

.breadcrumb-content ul li:last-child::before {
    display: none;
}

.breadcrumb-content ul li a:hover {
    color: #ff3535;
}

.bg-gray {
    background-color: #f6f6f6;
}

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

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

/*-------- 19. About us style ---------*/
.story-img {
    position: relative;
}

.story-img img {
    width: 100%;
}

.story-img .about-logo {
    margin: 0;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.story-img .about-logo h3 {
    background-color: #522bf2;
    border-radius: 100%;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    margin: 0;
    position: relative;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    width: 185px;
    height: 185px;
    line-height: 185px;
}

@media only screen and (max-width: 767px) {
    .story-img .about-logo h3 {
        width: 150px;
        height: 150px;
        line-height: 150px;
        font-size: 30px;
    }
}

.story-img .about-logo h3::before {
    border: 1px solid #fff;
    border-radius: 100%;
    content: "";
    height: 152px;
    left: 17px;
    line-height: 144px;
    position: absolute;
    top: 17px;
    width: 152px;
}

@media only screen and (max-width: 767px) {
    .story-img .about-logo h3::before {
        width: 130px;
        line-height: 130px;
        height: 130px;
        top: 10px;
        left: 10px;
    }
}

.story-details .story-details-top {
    margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
    .story-details .story-details-top {
        margin-bottom: 30px;
    }
}

.story-details .story-details-top>h2 {
    font-size: 36px;
    font-weight: bold;
    margin: 0 0 20px;
    text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
    .story-details .story-details-top>h2 {
        font-size: 27px;
        line-height: 25px;
        margin: 0 0 12px;
    }
}

.story-details .story-details-top>h2 span {
    color: #522bf2;
}

.story-details .story-details-bottom {
    margin-bottom: 48px;
}

@media only screen and (max-width: 767px) {
    .story-details .story-details-bottom {
        margin-bottom: 30px;
    }
}

.story-details .story-details-bottom:last-child {
    margin-bottom: 0;
}

.story-details .story-details-bottom h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
    .story-details .story-details-bottom h4 {
        margin-bottom: 10px;
    }
}

.story-details .story-details-bottom p {
    letter-spacing: 0.4px;
    line-height: 26px;
    margin: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .story-details {
        margin-top: 30px;
    }

    .story-details.pl-50 {
        padding-left: 0;
    }
}

@media only screen and (max-width: 767px) {
    .story-details {
        margin-top: 30px;
    }

    .story-details.pl-50 {
        padding-left: 0;
    }
}


.buy-area,
.contact-area {
    position: relative;
    overflow: hidden
}

.buy-area .buy-shape img,
.contact-area .contact-shape img {
    position: absolute
}

.buy-area .buy-shape img:nth-child(1),
.contact-area .contact-shape img:nth-child(1) {
    right: 0;
    bottom: 0;
    max-width: 300px;
    -webkit-animation: buy-ani-one 8s infinite linear;
    animation: buy-ani-one 8s infinite linear
}

.buy-area .buy-content {
    max-width: 600px;
    padding-left: 30px
}

.buy-area .buy-content h2 {
    font-size: 50px;
    margin-bottom: 10px;
    line-height: 1.3;
    margin-top: -10px
}

.buy-area .buy-content p {
    color: #363636;
    font-weight: 600;
    margin-bottom: 10px
}

.buy-area .buy-content ul {
    margin: 0;
    padding: 0;
    margin-bottom: 20px
}

.buy-area .buy-content ul li {
    list-style-type: none;
    display: inline-block;
    font-weight: 600;
    margin-right: 15px
}

.buy-area .buy-content ul li:nth-child(2) {
    font-weight: 400
}

@-webkit-keyframes buy-ani-one {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    50% {
        -webkit-transform: translate(50px, 0);
        transform: translate(50px, 0)
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes buy-ani-one {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    50% {
        -webkit-transform: translate(50px, 0);
        transform: translate(50px, 0)
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

/*-------- 12. Feature style ---------*/

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

.common-btn:first-of-type {
    margin-right: 15px;
}

.bg-gray-two {
    background-color: #f3f1ec !important;
}

/*更多特性*/
.p-features {
  position: relative;
  z-index: 0;
}

.p-features::before {
  content: "";
  position: absolute;
  top: 0;
  min-height: 100%;
  left: 0;
  right: 0;
  z-index: -1;
  background: var(--dark-layer-color);
}

.box-wrap {
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 25px 98px 0 rgba(0, 0, 0, 0.03);
  background-color: #fff;
  position: relative;
  transition: all 0.5s ease 0s;
}

.box-wrap:hover {
  box-shadow: 0 25px 98px 0 rgba(0, 0, 0, 0.1);
}

.box-wrap:hover h4.number {
  opacity: .2;
  transition: 0.3s ease-in-out;
}

.box-wrap h4 {
  font-size: 1.5rem;
  line-height: 26px;
  font-weight: 600;
  margin-top: 25px;
  margin-bottom: 15px;
  display: block;
}

.box-wrap p {
  min-height: 160px;
  font-size: .925rem;
}

a.read {
  font-size: 16px;
  color: var(--heading-color);
  transition: 0.3s ease-in-out;
  font-weight: 700;
  margin-top: 30px;
  display: inline-block;
  text-transform: capitalize;
}

a.read:hover {
  color: var(--primary-color);
}

h4.number {
  position: absolute;
  font-size:1.8rem;
  line-height: 60px;
  right: 40px;
  top: 30px;
  opacity: .07;
  transition: 0.3s ease-in-out;
}

h4.number2 {
  position: absolute;
  font-size: 4rem;
  line-height: 60px;
  right: 40px;
  top: 30px;
  opacity: .07;
  transition: 0.3s ease-in-out;
}

.search-box .icon {
  text-align: center;
  display: block;
  color: #7a7a7a;
}

.box-wrap .icon  {
  font-size: 30px;
  width: 70px !important;
  height: 70px !important;
  line-height: 70px !important;
  border-radius: 50%;
  text-align: center;
}

.green-clr-bg {
  color: #0abf53;
  background: rgba(10, 191, 83, 0.17);
}

.primary-clr-bg {
  color: #990033;
  background: rgba(153, 0, 51, 0.14);
}

.blue-clr-bg {
  color: #6168ff;
  background: rgba(97,104,255,.09);
}

@media (max-width: 415px) {
  h4.number {
    font-size: 50px;
  }
}

h3.title-style {
  font-size: 35px;
  line-height: 45px;
  font-weight: 700;
}

@media (max-width:991px) {
  h3.title-style {
    font-size: 30px;
    line-height: 40px;
  }
}

.page-title-area {
	height: 500px;
	background-color: #fff;
	position: relative
}

.page-title-area .title-content {
	margin-top: 50px;
	position: relative;
	z-index: 1
}

.page-title-area .title-content h2 {
	font-size: 2.725rem;
	margin-bottom: 15px
}

.page-title-area .title-content ul {
	margin: 0;
	padding: 0
}

.page-title-area .title-content ul li {
	list-style-type: none;
	display: inline-block;
	font-weight: 600;
	margin-right: 20px;
	position: relative
}

.page-title-area .title-content ul li:before {
	position: absolute;
	content: '>';
	top: -2px;
	right: -18px;
	color: #545454;
	font-size: 20px
}

.page-title-area .title-content ul li:last-child:before {
	display: none
}

.page-title-area .title-content ul li a {
	display: block;
	color: #545454
}

.page-title-area .title-content ul li a:hover {
	color: #f05454
}

.page-title-area .title-content ul li span {
	display: block
}

.page-title-area .title-img img {
	position: absolute
}

.page-title-area .title-img img:nth-child(1) {
	top: 0;
	right: 0;
	height: 100%
}

.page-title-area .title-img img:nth-child(2) {
	left: 20%;
	bottom: 10px;
	-webkit-animation: page-title-ani-one 10s infinite linear;
	animation: page-title-ani-one 10s infinite linear
}

.page-title-area .title-img img:nth-child(3) {
	left: 35%;
	top: 155px;
	-webkit-animation: page-title-ani-two 10s infinite linear;
	animation: page-title-ani-two 10s infinite linear
}

.page-title-area .title-img img:nth-child(4) {
	bottom: 0;
	left: 0;
	max-width: 160px
}

@-webkit-keyframes page-title-ani-one {
	0% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0)
	}

	30% {
		-webkit-transform: translate(25px,25px);
		transform: translate(25px,25px)
	}

	60% {
		-webkit-transform: translate(50px,-100px);
		transform: translate(50px,-100px)
	}

	100% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0)
	}
}

@keyframes page-title-ani-one {
	0% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0)
	}

	30% {
		-webkit-transform: translate(25px,25px);
		transform: translate(25px,25px)
	}

	60% {
		-webkit-transform: translate(50px,-100px);
		transform: translate(50px,-100px)
	}

	100% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0)
	}
}

@-webkit-keyframes page-title-ani-two {
	0% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0)
	}

	30% {
		-webkit-transform: translate(-25px,-25px);
		transform: translate(-25px,-25px)
	}

	60% {
		-webkit-transform: translate(-50px,100px);
		transform: translate(-50px,100px)
	}

	100% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0)
	}
}

@keyframes page-title-ani-two {
	0% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0)
	}

	30% {
		-webkit-transform: translate(-25px,-25px);
		transform: translate(-25px,-25px)
	}

	60% {
		-webkit-transform: translate(-50px,100px);
		transform: translate(-50px,100px)
	}

	100% {
		-webkit-transform: translate(0,0);
		transform: translate(0,0)
	}
}

/*客户案例*/
.case-wrap .case-img {
  overflow: hidden;
}
.case-wrap .case-img a img {
  width: 100%;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.case-wrap .case-content h3 {
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0;
  color: #383838;
  position: relative;
}
.case-wrap .case-content h3::before {
  position: absolute;
  right: 0px;
  bottom: -20px;
  width: 15px;
  height: 1px;
  background-color: #ebebeb;
  content: "";
  width: 81%;
  left: 0;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .case-wrap .case-content h3::before {
    width: 95%;
  }
}
.case-wrap .case-content h3 a {
  color: #383838;
}
.case-wrap .case-content h3 a:hover {
  color: #ff3535;
}
.case-wrap .case-content .case-meta ul li {
  display: inline-block;
  margin: 0 14px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .case-wrap .case-content .case-meta ul li {
    margin: 0 12px;
  }
}
@media only screen and (max-width: 767px) {
  .case-wrap .case-content .case-meta ul li {
    margin: 0 10px;
  }
}
.case-wrap .case-content .case-meta ul li::before {
  position: absolute;
  right: -22px;
  top: 12px;
  width: 15px;
  height: 1px;
  background-color: #999898;
  content: "";
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
}
.case-wrap .case-content .case-meta ul li:last-child::before {
  display: none;
}
.case-wrap .case-content .case-meta ul li {
  font-size: 13px;
  color: #919090;
}

.case-wrap .case-content .case-meta.case-meta-mrg {
  margin-bottom: 5px;
}
.case-wrap .case-content .case-meta.case-meta-mrg ul li {
  margin: 0 24px 0 0;
}
.case-wrap .case-content .case-mrg-border {
  padding: 15px 0 10px;
  margin-top: 20px;
}
.case-wrap .case-content p {
  margin: 0 auto;
  width: 79%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .case-wrap .case-content p {
    width: 94%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .case-wrap .case-content p {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .case-wrap .case-content p {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .case-wrap .case-content p {
    width: 93%;
  }
}
.case-wrap .case-content.case-content-mrg {
  margin: 0px 50px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .case-wrap .case-content.case-content-mrg {
    margin: 0px 0px 0;
  }
}
@media only screen and (max-width: 767px) {
  .case-wrap .case-content.case-content-mrg {
    margin: 0px 0px 0;
  }
}
.case-wrap .case-content.case-content-mrg-2 {
  margin: 25px 0 0;
}
@media only screen and (max-width: 767px) {
  .case-wrap .case-content.case-content-mrg-2 {
    margin: 12px 0 0;
  }
}
.case-wrap .case-content.case-content-mrg-2 h3:before {
  display: none;
}
.case-wrap:hover .case-img a img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .case-wrap.mr-20 {
    margin-right: 0;
  }
  .case-wrap.ml-20 {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .case-wrap.mr-20 {
    margin-right: 0;
  }
  .case-wrap.ml-20 {
    margin-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .case-area.pt-50 {
    padding-top: 0px;
  }
}

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