﻿:root {
    /*default: 16px #333 1.6*/
    --container-width: 1450px;
    --body-font-family: Poppins;
    --title-font-family: Poppins;
    --body-font-size: 16px;
    --body-color: #555;
    --body-line-height: 1.7;
    --main-color: #f4544c;
    --sub-color: #dd2821;
    --overlay-color: rgba(0, 0, 0, 0.1);
    --bs-breadcrumb-divider:">";
    scroll-padding: 152px;
    --swiper-theme-color:#fff;
    --swiper-navigation-sides-offset:-45px;
}
/*全局基础设置*/
a{color:#444;}
a:hover{color:var(--main-color);}
.form-control::placeholder{color:#9b9b9b;font-size:13px}
.form-feedback .btn{font-weight:600;background-color:var(--main-color)}
.form-feedback .btn:hover{opacity:.7}
.widget-cart{ position: relative;display: block;padding: 12px;font-size: 18px;}
.cart-counter{ position: absolute;right:0;top:2px;display: none;text-align: center;width: 20px;height: 20px;line-height: 20px;font-size: 10px;border-radius: 50%;background: var(--main-color);color: #fff;}
.nav-quote{ margin-left:10px;background: var(--main-color);border-width: 0;color:#fff;font-size:14px;padding: 5px 15px; }
@media (max-width: 1200px) {
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
    .form-feedback .btn{font-size:14px;padding:10px 15px;}
}

@media (max-width: 576px) {
}


.swiper-button-prev, .swiper-button-next{background:var(--main-color);padding:5px;}
.swiper-button-prev::after, .swiper-button-next::after{font-size:30px;}
@media (max-width: 1200px) {
    .swiper-button-prev, .swiper-button-next{--swiper-navigation-sides-offset:0;}
}

.main-container{padding:30px 0}
@media(max-width:768px) {
    .main-container{ padding: 30px 0;}
}
/*搜索框弹窗*/
.dropdown-search>.search-btn{display:flex;align-items:center;margin-left: 30px;}
.dropdown-search .icon{margin-left:5px;color:var(--main-color);}
.dropdown-search .dropdown-menu{margin-top: 10px !important;min-width: 300px !important;padding: 20px;border-top: 4px solid var(--main-color);background: #f8f8f8}
.dropdown-search .dropdown-menu .btn {background:#ced4da}
@media(max-width:768px) {
    .dropdown-search .icon{margin:0;}
    .dropdown-search > .search-btn{margin-left:0}
    .dropdown-search .dropdown-menu{min-width:250px!important;padding:5px!important}
}

/*#region top bar & menu*/
.header{ padding: 12px 0;color:#555;background: #f8f8f8;line-height: 1;}
.header a{color:#555}
.header .split{margin:0 12px;}
.header .icon{ margin-right: 0.25rem;line-height: 1;}

.lang{margin-left:10px;}
.lang img{ margin-right: 5px;}
.lang .dropdown-toggle{ padding: 6px 0;background: transparent;border: 0;color: #000;}
.lang .dropdown-menu{ z-index: 1021;}
.lang .dropdown-item{ color: #666;}



.navbar-brand{ padding: 12px 0;}
.navbar-brand>.img-fluid{ max-height: 60px;max-width: 200px;transition: max-width 0.15s linear;}
@media(max-width:576px) {
    .navbar-brand>.img-fluid{max-width:170px}
}
.navbar {transition: background 0.3s linear; }
.navbar-nav .nav-item{ padding: 0 0;}
.navbar-nav .nav-link {flex-grow: 1;padding: 0.5rem 1.25rem;font-family: var(--title-font-family);text-transform: uppercase;color:#000;}
.navbar-nav .nav-link:hover,.navbar .nav-link.active{color:var(--main-color);}
/*.navbar-nav .nav-link::before{position:absolute;bottom: 0;left: 0;content:"";display:block;height:3px;width: 100%;background:var(--main-color)}
.navbar-nav .nav-link.active::before,.navbar .nav-link:hover::before{ width: 100%;}*/
.navbar-nav .dropdown-menu{background-color:rgba(0,0,0,.75);}
.dropdown.wide .dropdown-menu .thumbnail{filter:brightness(.8)}
.dropdown.wide .dropdown-menu .thumbnail:hover{filter:brightness(1)}
.dropdown.wide .dropdown-menu a{color:#fff;}

.navbar-nav .dropdown-item{ color: #fff;font-size:14px;}
.navbar-nav .dropdown-item:hover { background: var(--sub-color);color: #fff;}

.navbar .icon-bars{color:#000;}

@media(max-width:1200px) {
    .navbar-nav .nav-item{ padding: 0;}
    .navbar-nav .dropdown-menu{ width: 100%;}
    .navbar-nav .dropdown-item,.navbar-nav .nav-link{ text-align: center;justify-content: center;}
}

.fixed-switch{transform: translateY(calc(-100% - 0px));}
.sticky-menu .navbar-brand>.img-fluid{ max-width: 120px;}
.sticky-menu{ background: #f2f2f2;}

@keyframes slidedown {
    0% {
        transform: translateY(-70px);
    }
    100% {
        transform: translateY(0);
    }
}


.fixed-effect{background: #000;transition: background 0.8s linear;}
/*.fixed-effect1{transform: translateY(calc(-100% - 0px));}*/

.slide-effect{ background: #000;}
.slide-effect .navbar-toggler .icon{color:#fff!important;}
.slide-effect .logo{filter:initial!important}
.navbar.slide-effect .nav-link{ color: #fff}
/*#endregion*/

/**/

.banner-simple{ height: 367px;}
/*.banner-simple-contact {
    --overlay-color: rgba(0, 0, 0, 0.5);
}*/
/*.banner-simple.background {
    height: 350px;
}*/
@media(max-width:768px) {
    .banner-simple.background {height: 250px}
}

/*.swiper{--overlay-color: rgba(0, 0, 0, 0.5);}

.swiper.background {height: 350px;}
@media(max-width:8px) {
    .swiper.background {height: 220px;}
}*/
/*#region banner*/


/*banner-with-bread组件样式,不需要可删除*/
.banner-nav{ display: flex;flex-grow: 1;flex-direction: column;color: #fff;justify-content: center;align-items: center;}
.banner-nav .title{margin-bottom:12px;font-family: var(--title-font-family);text-transform: uppercase;font-weight: 600;font-size: 40px}
.banner-nav .breadcrumb{font-size: 15px;}
.banner-nav .breadcrumb-item a{color:#fff;}
.banner-nav .breadcrumb-item a:hover{text-decoration:underline;}
@media(max-width: 768px) {
    .banner-nav .title{ font-size: 28px;}
}


/*#region page-title &summary*/
.page-title{display: flex;background-repeat: no-repeat;background-position: center center;background-size: cover;line-height: 1;}
.page-title .container-xl,.page-title .container-fluid{display: flex;justify-content: space-between;align-items: center;}
.page-title .title{margin-bottom: 0;}
.page-title .breadcrumb:before{ font-family: cmsfont;content: "\f80a";margin-right: 0.25rem;}
@media(max-width:768px) {
    .page-title .container-xl, .page-title .container-fluid { flex-direction: column }
}
.page-summary{ margin-bottom: 30px;}
.page-summary h1,.page-summary h2,page-summary h3{ font-size: 18px;font-weight: 600;}

.shrink-wrapper{ margin-bottom: 30px;}
.shrink-wrapper .text{position: relative;overflow: hidden;text-overflow: ellipsis;transition: height .2s;margin-bottom: 8px;}
.shrink-wrapper .text::after {position: absolute;display: block;content: "";left: 0;right: 0;bottom: 0;height: 30px;background: linear-gradient(0,#fff 0,rgba(0,0,0,0));opacity: 1;transition: opacity .2s;}
.shrink-wrapper .text.expand{ max-height: 100% !important;text-overflow: unset;}
.shrink-btn{ background: transparent;border-width: 0;font-size: 14px;text-transform: uppercase;color: #696969;min-width:80px}
.shrink-btn::before{ display: inline-flex;font-family: CmsFont;content: "\f10b";margin-right: 5px;transition: transform .2s ease-in-out;}
.shrink-btn.expand::before{transform: rotate(-180deg)}

/*横向导航菜单*/
.menu-horizontal{display: flex;justify-content:center;list-style-type: none;padding: 0;margin: 0;}
.menu-horizontal .nav-item{display: flex;flex-direction: column;padding: 0 10px}
.menu-horizontal .nav-link{display: flex;justify-content: center;align-items: center;text-align: center;background: #f6f6f6;padding: 10px 25px;}
.menu-horizontal-wrapper{margin-bottom: 30px;}
.menu-horizontal .nav-link:hover{color:var(--main-color)}
.menu-horizontal .nav-link.active{ background: var(--main-color);color: #fff;}
@media(max-width:768px) {
    .menu-horizontal .nav-item{ padding: 0;border-bottom: 1px solid #eee;}
    .menu-horizontal .dropdown-menu {position: static;}
    .menu-horizontal .dropdown-item {text-align: center;}
}
    .filter-box .list-unstyled::-webkit-scrollbar {
        background: #F2F5FC;
        /*滚动条整体样式*/
        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 100%;
    }
::-webkit-scrollbar-thumb{background:#092E9F}
    /*#region row&col item*/
    .item-row.product {
        margin-bottom: 40px;
    }

.main-title{font-family: var(--title-font-family); font-size: 28px;margin-bottom: 25px;font-weight:700;line-height:1;color:#000;}

.product-col{ margin-bottom: 25px;border: 1px solid #E5E5E5;transition: all ease 0.2s;}
.product-col .entry-wrapper{ padding: 14px 8px;background: #f2f2f2;}
.product-col h3{ margin: 0;}
.product-col .entry-title{margin: 0;text-align: center;font-weight: normal;font-size:15px;margin-bottom:0;}
.product-col .thumbnail-wrapper{ overflow: hidden;}



.flip-front{transform: translate3d(0, 0, 1px) rotateY(0deg);backface-visibility: hidden;background: #FFF;box-shadow: 0px 0px 44px -10px rgba(0, 0, 0, 0.15);transform-style: preserve-3d;transition: ease transform 500ms;}
.product-col:hover .flip-front{transform: translate3d(0, 0, -1px) rotateY(-180deg);}
.flip-back{position:absolute;top:0;left:0;right:0;bottom:0;transform: translate3d(0, 0, -1px) rotateY(180deg);backface-visibility: hidden;background: #FFF;box-shadow: 0px 0px 44px -10px rgba(0, 0, 0, 0.15);transform-style: preserve-3d;transition: ease transform 500ms;}
.product-col:hover .flip-back{transform: translate3d(0, 0, 1px) rotateY(0deg);}


.article-col{margin-bottom:40px;background:#f9f9f9}
.article-col .entry-wrapper{padding: 20px 12px;}
/*.article-col:hover .thumbnail::before{ opacity: 0.1;}*/
.article-col .entry-meta{ padding-bottom: 10px;color: #9e9e9e;font-size:14px;}
.article-col .entry-title{ font-family: var(--title-font-family);font-size: 16px;margin-bottom: 15px;transition: all ease-in 0.2s;}
.article-col .entry-title:hover{color:var(--main-color)}
.article-col .entry-text{ font-size: 15px;color: #666;line-height: 1.4;}

/*
.article-row{margin-bottom:40px;}
.article-row .entry-wrapper{padding: 0 20px;}
.article-row:hover .thumbnail::before{ opacity: 0.2;}
.article-row .entry-meta{ padding-bottom: 10px;color: #777;font-size:14px;}
.article-row .entry-title{ font-family: var(--title-font-family);font-size: 22px;margin-bottom:15px;}
.article-row .entry-text{ color: #777;}
.article-row .more{ display: block;margin-top: 20px;font-size: 14px;font-weight: 700;text-transform: uppercase;transition: all ease 0.5s;}
@media(max-width:768px) {
    .article-row .entry-wrapper{ padding: 20px 0;}
    .item-row .entry-title{ font-size: 16px;}
}
*/
/*产品详情页参数*/
.product-cart{ display: flex;align-items:center;margin-top: 15px;}
.product-cart .btn {display: flex;align-items: center;justify-content: center;line-height: 1;cursor: pointer;flex-grow: var(--cart-btn-grow,1);}
.product-cart .btn:hover{opacity:.8}
.product-cart .btn:not(:first-child){margin-left:15px}
.product-cart .btn .icon{ margin-right: 5px;}
@media (max-width: 768px) {
    .product-cart .btn{font-size:14px;}
}


.pic-col{border:1px solid #f2f2f2;transition: all ease 0.2s;}
.pic-col:hover{border:1px solid #ddd}
.pic-col .entry-wrapper{padding: 0.5rem 0.75rem;text-align: center;background: #eee;}
.pic-col .entry-title{ margin: 0;font-size:15px;}

/*.video-col{margin-bottom:24px;border: 1px solid #f6f6f6;overflow: hidden;}
.video-col .entry-wrapper{padding: 0.875rem 0.75rem;background: #777;color:#fff;}
.video-col .entry-title{ margin: 0;font-size:15px;font-weight: 400;text-align: center;}
*/
.sidebar{ top: 0;margin-bottom: 1.25rem;position:sticky;}

.widget{ margin-bottom: 30px;}
.widget-header{ margin-bottom: 10px;}
.widget-header .title{position:relative;font-family:var(--title-font-family);font-size:24px;font-weight:600;color:#222;margin: 0;padding:10px 0;font-style:italic;}
.widget-collapse .menu-item{border-bottom:solid 1px #f2f2f2;}
.widget-collapse .menu-link{ padding: 12px 8px;color:#666;}
.widget-collapse .menu-link:hover{color:var(--main-color)}
@keyframes moveLeftRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0); 
  }
}
.widget-collapse .menu-link::before{content:"\f056";font-family:cmsfont;padding-right:8px;}
.widget-collapse .menu-link:hover::before{animation: moveLeftRight .6s ease-in-out infinite;display:inline-block;}
.widget-collapse .sub-menu .menu-link{ padding-left: 36px;}
.widget-collapse .third-menu .menu-link{ padding-left: 28px;}
.widget-collapse .menu-item.active .menu-link{ color:var(--sub-color)}
.widget-collapse .drop:after{ font-family: cmsfont;content: "\f10b";transition: transform .2s ease-in-out;color: #777;}
.widget-collapse .drop.collapsed:after{transform: rotate(-180deg);}
@media(max-width:768px) {
    .widget-header {margin-bottom: 15px;}
    .sidebar{ border-width: 0;padding: 0;background: #fff;}
}
.media-product{padding:10px;margin-bottom:15px;border:1px solid #eee;}
.media-product:hover{ border-color: var(--main-color);transition: all ease 0.3s;}
.media-product img{ max-width: 85px;margin-right: 12px;}
.media-product .post-title{margin: 0;font-size: 14px;font-weight: normal;margin-bottom: 2px;line-height: 1.5;}
.media-product .post-title a:hover{ color: var(--main-color);transition: color ease 0.2s;}
.media-product .no{ margin: 5px 0 0;font-size: 12px;color:#8395a2;}
.media-product .more{margin: 5px 0 0;text-transform: uppercase;color:var(--main-color);font-size:12px;}
.media-product .more:after{font-family:cmsfont;content:"\f0da";padding-left:5px;}
.media-product .more:hover{color:var(--main-color);transition:all ease .2s;}
@media(max-width:992px) {
    .media-product img{max-width:100px}
}

/*page*/
.nav-page-wrapper {display: flex;justify-content: center;margin-top: 2rem;}
.nav-page-wrapper a {background: #342C2A;color: #fff;padding: 5px 10px;margin-right: 10px;}
.nav-page-wrapper a:last-child{ margin-right: 0;}
/*#endregion*/

/*#region content wrapper*/

/*.content-wrapper .row {align-items: center;--content-col-padding: 15px}
.content-wrapper .row > [class*="col-"]:last-child {padding-top: 20px;padding-bottom: 20px;}
@media(min-width:768px) {
    .content-wrapper .row {margin-bottom: 40px}
    .content-wrapper .row:nth-of-type(even) > [class*="col-"]:last-child {order: -1;}
    .content-wrapper .row > [class*="col-"]:first-child {padding-right: var(--content-col-padding,15px)}
    .content-wrapper .row:nth-of-type(even) > [class*="col-"]:first-child {padding-right: 15px;padding-left: var(--content-col-padding,15px);}
}*/
.content-wrapper{ padding: 20px;}
.content-wrapper header{ margin-bottom: 20px;text-align: center;}
.content-wrapper .summary{padding-bottom: 20px;margin: 30px 0;font-size:14px;text-transform: uppercase;color: #777;border-bottom: 1px solid #e0e4e6;}
.content-wrapper .split{font-style: normal;margin: 0 12px;}

.content-wrapper h2,.content-wrapper h3{font-size: 20px;font-weight: 500;color:#0c2e60}
.content-wrapper a{color:var(--main-color)}
.content-wrapper table thead th{ background: var(--main-color);color: #fff;font-weight: 500;font-size:30px;}
.content-wrapper table th,.content-wrapper table td {padding: 0.5rem;border: 1px solid #dee2e6;text-align: center;font-weight:600;color:#000;border:1px solid #000;}
.content-wrapper table tbody tr:hover {background-color: rgba(0, 0, 0, 0.075);color: #555;}
.content-wrapper table tbody tr td:nth-of-type(2n+1){background-color: rgba(0, 0, 0, 0.03);}
.content-wrapper img{max-width:100%;height: auto;}
/*.content-wrapper table p{ margin-bottom: 0;}*/


.post-nav{padding: 15px 20px;margin-bottom: 30px;background: #f2f2f2;line-height:1.5;font-size:14px;border-radius: 5px;}
.post-nav span{ font-weight: 600;color: var(--main-color);}
.post-nav a:hover{color:var(--main-color)}
@media(max-width:768px){
    .post-nav{flex-direction: column}
    .post-nav .next{ margin-top: 8px;}
}

.page-item{border:0;}
.page-item:not(:first-child){margin-left:10px;}
.page-link{padding: .5rem 0.875rem;border-radius:50%;}
.page-item.active .page-link {color: #fff;background-color: var(--main-color);}
.page-link:hover{text-decoration:underline;}

/*#end content wrapper*/
.item-list {list-style-type: none;margin: 0;padding: 0;margin-bottom: 15px;}
.item-list li {border-bottom: 1px dashed #eee;padding:12px 0;}
.item-list>li>a {display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.item-list>li>a:hover {color: #FE8301;}
.item-list li a::before{font-family:cmsfont;content:"\f122";margin-right:8px;margin-left: 4px;}
.item-list li time {float: right;padding-right: 5px;margin-left: 8px;color: #999;}
/*#endregion*/

/*#region 锚点定位功能*/
.widget-nav-container{position:sticky;top:0px;background:#fff;border-bottom:1px solid #dfdfdf;}
.widget-nav-container .drop::after{content: "\f10b";font-weight: 600;color: #666;font-size: 18px;}
.widget-nav-container .drop.collapsed::after {transform: rotate(-90deg);}

.widget-nav-header{ display: flex;align-items: center;justify-content: space-between;padding: 10px;}
.widget-nav-header .header-title{ display: flex;align-items: center;margin: 0;font-weight: 600;}
.widget-nav-header .header-title::before{ font-family: CmsFont;content: "\f0cb";margin-right: 5px;}
.widget-nav-header .drop::after{ font-size: 22px;}


.widget-nav-list{ margin: 0!important;padding: 0!important;list-style-type: none;line-height: 1.4;counter-reset: list;font-size: 16px;font-weight: 600;display:flex;}
.widget-nav-list.sub-list{ font-weight: 400;font-size: 14px;}

.widget-nav-item{position: relative;}
.widget-nav-item .drop{ position: absolute;padding: 5px 8px;}
.widget-nav-item .nav-text{ display: block;overflow: hidden;}
.widget-nav-item .anchor{ display: flex;padding: 5px 10px 5px 28px;color: #333;}
.widget-nav-item .anchor.active{ background: #ff0000}
.widget-nav-list.sub-list .anchor{ padding-left: 43px}
/*#endregion*/

.faq-row{ margin-bottom: 0;}
.faq-row .entry-title{display:flex;justify-content:space-between;align-items:center;margin:0;cursor:pointer;padding: 15px 10px;font-size:16px;font-weight:600;transition: all ease 0.2s;background-color:var(--main-color);color:#fff;padding:23px 30px;margin-bottom:20px;}
.faq-row .entry-title::after{font-family: CmsFont;content: "\f067";margin-left:8px;font-size:16px;font-weight:normal;color:#fff;transition:all ease 0.2s;transform: rotate(-45deg);}
.faq-row .entry-title.collapsed{background-color:#f4f4f4;color:#000;}
.faq-row .entry-title.collapsed::after{transform: rotate(-90deg);}
.faq-row .entry-wrapper{ padding: 15px;color: #777;}
.faq-row .entry-wrapper img{ max-width: 100%;}

/*#region footer*/
.page-footer {background-size: cover;background-position: center center;background-repeat: no-repeat;background: #313337;color: #fff;padding-top: 50px;}
/*footer li{ padding: 3px 0;}*/
/*footer .row >[class*="col-"]{margin-bottom:20px;}*/
.footer-title{font-family: var(--title-font-family);font-size:18px;margin-bottom:15px;font-weight: bold}
footer a{color:#fff;word-break:break-all;}
footer a:hover{ color: #ccc;}
footer .contact-info .icon{ margin-right: 5px;}
.footer-logo{margin-bottom:20px;}
.footer-contact .icon{padding-right:10px;}
.social .social-item{background-color:#333!important;color:#fff!important}
.social .social-item:hover{background-color:var(--main-color)!important;color:#fff!important}

.footer-bottom{padding: 12px 0;border-top: 1px solid #555;font-size: 14px;color: #ccc;margin-top:50px;}
.footer-bottom a{ color: #ccc;}
@media (max-width: 1200px) {
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
    .footer-bottom{margin-top:20px;}
}

@media (max-width: 576px) {
}


/*#endregion*/
.home-title{ position: relative;color: #333;font-weight: 600;font-size: 2rem;font-family: var(--title-font-family);padding-bottom: 15px;margin-bottom: 30px;text-transform: uppercase;}
.home-title::after {display: block;content: "";width: 120px;height: 2px;background-color:var(--main-color);margin-top: 12px;}
.home-title.text-center{text-align: center;}
.home-title.text-center::after{ margin-left: auto;margin-right: auto;}

.home-container{ position: relative;margin-top: -60px;}

.home-features .row>*{ display: flex;}
.feature-wrapper{ display: flex;flex-grow: 1;align-items: center;padding:20px;border-radius: 16px;background:#fff;border: 1px solid #f6f6f6;margin-bottom: 20px;box-shadow: rgba(0, 0, 0, 0.15) 0 5px 10px 0;}
.feature-wrapper p{ padding-left: 15px;margin: 0;align-items: center;}

@media(max-width:992px) {
    .home-container{ top: 0;padding:40px 0 0}
    .feature-wrapper{ border-radius: 0;box-shadow: none;border-color: #eee}
    }
    /*#endregion*/

    
.widget.contact{background:var(--main-color);padding:16px;color:#fff;}
.widget.contact .title{font-weight:600;font-size:22px;}
.widget.contact .btn{background:#fff;color:var(--main-color)}
.widget.contact .btn:hover{background:#fff;opacity:.9}

.partner-container{padding:70px 0;}
@media (max-width: 768px) {
    .partner-container{padding:30px 0;}
}

.banner-title {color:#fff;    font-size: 2.3em;    line-height: 1.2;    font-weight: 700;}
.related-products h2{    color: var(--main-color);    font-size: 25px;    text-transform: uppercase;    border-bottom: 2px solid var(--main-color);    padding-bottom: 10px;    margin: 30px 0 30px;    display: inline-block;}

.btn.btn-video, .btn.btn-download{background-color: var(--main-color);    color: #fff;    padding: 15px 20px;  margin:0px 10px;   font-weight: 700;    text-transform: capitalize;}
.hide {display:none;}

.category-description {margin:30px auto;}