@font-face {
    font-family: 'poppins-light';
    src: url("../font/POPPINS-LIGHT.TTF");
}

@font-face {
    font-family: 'poppins-regular';
    src: url("../font/POPPINS-REGULAR.TTF");
}

@font-face {
    font-family: 'poppins-medium';
    src: url("../font/POPPINS-MEDIUM.TTF");
}

@font-face {
    font-family: 'firasans-extralight';
    src: url("../images/FIRASANS-EXTRALIGHT.TTF");
}
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root{
    --primary-color: #003947;
    --secondary-color: #92C424;
}

*{
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
    
}

body {
    background: #FFF;
    font-size: 15px;
}

@media (min-width: 1200px){
    .container{
        max-width: 1230px;
    }
}

a{
    color: #333;
    transition: all 0.5s;
}
.footer ul li a{
	color: #fff
}
a:hover,
a:active,
a:focus {
    color: var(--primary-color);
    outline: none;
    text-decoration: none;
}

section{
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.section-title,
.section-subtitle,
.section-intro{
    margin: 0;
    padding: 0;
}

.section-title{
    font-size: 40px;
}

.section-subtitle{
    font-size: 30px;
}

.section-intro{
    font-size: 20px;
}

.img{
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
}

.img img{
    position: absolute;
    width: 100%;
   
    top: 0;
    left: 0;
    display: block;
}

.warp{
    margin: 1rem;
    padding: 1rem;
    transition: all 0.5s;
}

.warp:hover{
    box-shadow: 0 0 2px 2px rgba(114,114,114,0.5);
}

.warp .img{
    padding-bottom: 100%;
}

.article table,
.article img{
    max-width: 100% !important;
}

.layui-layer-hui .layui-layer-content{
    color: #FFF;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.pagination p{
    margin:0;
    cursor:pointer
}

.pagination{
    justify-content:center;
    display: flex;
    padding-top: 2rem;
    padding-bottom: 0;
}

.pagination a{
    display:block;
    float:left;
    margin-right:10px;
    padding:2px 12px;
    height:40px;
    width: 40px;
    background:#FFF;
    text-decoration:none;
    color:#808080;
    font-size:15px;
    line-height:38px;
    position: relative;
}

.pagination a:hover{
    color:#FFF;
    background: var(--secondary-color);
}

.pagination a.cur{
    border:none;
    background:var(--secondary-color);
    color:#FFF;
}

.pagination a .fa{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.pagination p{
    float:left;
    padding:2px 12px;
    font-size:12px;
    height:24px;
    line-height:24px;
    color:#bbb;
    border:1px #CCC solid;
    background:#FCFCFC;
    margin-right:8px;
}

.pagination p.pageRemark{
    border-style:none;
    background:none;
    margin-right:0;
    padding:4px 0;
    color:#666;
}

.pagination p.pageRemark b{
    color:red;
}

.pagination p.pageEllipsis{
    border-style:none;
    background:none;
    padding:4px 0;
    color:#808080;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
#tool{
    border-radius: 25px;
    position: fixed;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    padding: 5px;
    background-color: var(--primary-color);
    z-index: 999;
}

#tool .item{
    position: relative;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.5s;
}

#tool .item.active{
    background-color: var(--secondary-color);
}

#tool .item:last-child{
    margin-bottom: 0;
}

#tool .item img{
    width: 100%;
    height: 100%;
}

#tool .item .info{
    position: absolute;
    top: -5px;
    right: -5px;
    height: 50px;
    display: flex;
    align-items: center;
    background-color: var(--secondary-color);
    color: #FFF;
    padding: 5px 55px 5px 20px;
    border-radius: 25px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
}

#tool .item .info a{
    color: #FFF;
}

#tool .item:hover{
    background-color: var(--secondary-color);
}

#tool .item:hover .info{
    opacity: 1;
    visibility: visible;
}

.more-btn{
    background-color: var(--primary-color);
    border: none;
    border-radius: 25px;
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    padding: 8px 50px;
    color: #FFF;
    transition: all 0.5s;
}

.more-btn:hover{
    background-color: var(--secondary-color);
}

.more-btn:focus,
.more-btn:active{
    outline: none;
}

.pointer-default{
    cursor: default;
}

/*--------------------------------------------------------------
# placeholderBox
--------------------------------------------------------------*/
#placeholderBox{
    height: 110px;/*高度要和#header一致*/
    transition: all 0.5s;
	display: none
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
 

#header .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*--------------------------------------------------------------
# Top Navigation Menu
--------------------------------------------------------------*/
.main-nav{
    display: none;
}
.main-nav,
.main-nav * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav > ul > li {
    position: relative;
    white-space: nowrap;
    float: left;
    height: 70px;
    line-height: 70px;
}

.main-nav > ul > li.drop-down > a{
    line-height: 66px;
}

.main-nav a {
    display: block;
    position: relative;
    color: #000;
    padding: 0 35px;
    transition: 0.3s;
    font-family: 'poppins-medium',sans-serif;
    font-size: 18px;
}

.main-nav a:hover,
.main-nav .active > a,
.main-nav li:hover > a {
    color: var(--primary-color);
    text-decoration: none;
}

.main-nav .drop-down ul {
    display: block;
    position: absolute;
    left: 0;
    top: calc(100% + 30px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
     
    background: #fff;
    box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
    transition: ease all 0.3s;
}

.main-nav .drop-down:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.main-nav .drop-down li {
    height: 50px;
    line-height: 50px;
    min-width: 180px;
    position: relative;
}

.main-nav .drop-down ul a {
    padding: 0 30px 0 15px;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    font-family: 'poppins-medium',sans-serif;
    border-bottom: 1px solid #EFEFEF;
}

.main-nav .drop-down li:last-child a{
    border-bottom: none;
}

.main-nav .drop-down ul a:before{
    position: absolute;
    content: '';
    width: 0;
    height: 50%;
    background-color: var(--secondary-color);
    top: 45%;
    left: 0;
    transform: translateY(-50%);
}

.main-nav .drop-down ul a:hover:before{
    width: 2px;
}

.main-nav .drop-down ul a:hover,
.main-nav .drop-down ul .active > a,
.main-nav .drop-down ul li:hover > a {
    color: var(--primary-color);
}

.main-nav ul li:nth-child(3) > a:after {
    content: "\f107";
    font-family: FontAwesome;
    padding-left: 10px;
}
.main-nav .drop-down ul li > a:after{
    display: none;
}

.main-nav .drop-down .drop-down ul {
    top: 0;
    left: calc(100% - 30px);
}

.main-nav .drop-down .drop-down:hover > ul {
    opacity: 1;
    top: 0;
    left: calc(100% + 15px);
}

.main-nav .drop-down .drop-down > a {
    padding-right: 35px;
}

.main-nav .drop-down .drop-down > a:after {
    content: "\f105";
    position: absolute;
    font-size: 20px;
    right: 0;
}

/* Mobile Navigation */

.mobile-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 9999;
    overflow-y: auto;
    left: -260px;
    width: 260px;
    padding-top: 18px;
    background: var(--primary-color);
    transition: 0.4s;
}

.mobile-nav * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-nav a {
    display: block;
    position: relative;
    color: #fff;
    padding: 10px 20px;
    font-weight: 500;
}

.mobile-nav a:hover,
.mobile-nav .active > a,
.mobile-nav li:hover > a {
    color: #8dc2fa;
    text-decoration: none;
}

.mobile-nav .drop-down > a:after {
    content: "\f078";
    font-family: FontAwesome;
    padding-left: 10px;
    position: absolute;
    right: 15px;
}

.mobile-nav .active.drop-down > a:after {
    content: "\f077";
}

.mobile-nav .drop-down > a {
    padding-right: 35px;
}

.mobile-nav .drop-down ul {
    display: none;
    overflow: hidden;
}

.mobile-nav .drop-down li {
    padding-left: 20px;
}

.mobile-nav-toggle {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9998;
    border: 0;
    background: none;
    font-size: 24px;
    transition: all 0.4s;
    outline: none !important;
    line-height: 1;
    cursor: pointer;
    text-align: right;
}

.mobile-nav-toggle i {
    margin: 18px 18px 0 0;
    color: var(--primary-color);
}

.mobile-nav-overly {
    width: 100%;
    height: 100%;
    z-index: 9997;
    top: 0;
    left: 0;
    position: fixed;
    background: rgba(0, 57, 71, 0.4);
    overflow: hidden;
    display: none;
}

.mobile-nav-active {
    overflow: hidden;
}

.mobile-nav-active .mobile-nav {
    left: 0;
}

.mobile-nav-active .mobile-nav-toggle i {
    color: #fff;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer{
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--primary-color);
    color: #FFF;
    position: relative;
}

.footer.home-page{
    padding-top: 10rem;
	margin-top: 243px
}

.footer h3{
    color: #FFF;
    font-size: 25px;
    margin-bottom: 20px;
}

.footer ul{
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.footer ul li{
    padding: 8px 0;
}

.footer ul li a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
}

.footer ul li a:hover{
    color: var(--secondary-color);
    text-decoration: underline;
}

.footer .social{
    display: flex;
    flex-wrap: wrap;
    margin-top: 5rem;
}

.footer .social .item{
    margin-bottom: 10px;
    padding: 8px;
    width: 40px;
    height: 40px;
    background-color: #002D38;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.5s;
}

.footer .social .item img{
    width: 100%;
    height: 100%;
}

.footer .social .item:hover{
    background-color: var(--secondary-color);
}

.footer h4{
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    color: #BBB;
    padding: 10px 0;
}

.footer  p{
    margin-bottom: 0.5rem;
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    color: #FFF;
}

.footer .guide{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5%;
    width: 100%;
    height: 300px;
    background: url("../image/bg-guide-banner.jpg") no-repeat center/cover;
    max-width: 1200px;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
}

.footer .guide .section-title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    color: #FFF;
    margin-bottom: 2rem;
}

.footer .guide p{
    font-size: 20px;
    margin-bottom: 2rem;
}

/* Main Footer */
.main-footer{
    display: none;
}

/* Mobile Footer */
.mobile-footer{
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: block;
}

.mobile-footer .panel-heading{
    display: flex;
    justify-content:space-between;
    align-items: center;
}

.mobile-footer .panel-heading:after{
    content: "＋";
    color: #FFF;
    right: 25px;
    font-size: 20px;
}

.mobile-footer .panel-heading.active:after{
    content: '－' !important;
}

.mobile-footer .panel-heading .panel-title{
    font-size: 15px;
    padding: 10px 0;
    color: #FFF;
}

.mobile-footer .logo{
    width: 50%;
}

.footer .row:last-child .copyright{
    color: #FFF;
}

.footer .row:last-child .privacy{
    text-align: right;
}

.footer .row:last-child .privacy a{
    color: #FFF;
}

.footer .row:last-child .privacy a:hover{
    color: var(--secondary-color);
}

.footer .row:last-child .privacy span{
    color: #FFF;
    margin: 0 20px;
}

.footer hr{
    margin: 60px 0 20px 0;
}

/*--------------------------------------------------------------
# Section Banner
--------------------------------------------------------------*/
.banner{
    position: relative;
    padding-bottom: 11.7%;
    padding-top: 11.7%;
}

.banner:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    opacity: 0.5;
}

.banner > .container{
    position: absolute;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.banner > .container .container{
    height: 100%;
}

.banner > .container .section-title,
.banner > .container .section-intro{
    width: 50%;
    color: #FFF;
    margin-top: 20px;
}

.banner > .container .section-intro{
    font-size: 20px;
}

.banner.mobile{
    display: none;
    padding-bottom: 48%;
}

.banner.mobile .img{
    padding-bottom: 48%;
}

/*--------------------------------------------------------------
    Inquiry
--------------------------------------------------------------*/
.inquiry{
    background-color: #FBFBFB;
}

.inquiry .text,
.inquiry .form{
    padding-left: 15px;
    padding-right: 15px;
}

.inquiry .text{
    width: 40%;
}

.inquiry .text .section-title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    margin-bottom: 20px;
    line-height: 2;
}

.inquiry .text .section-intro{
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
    color: #999;
    line-height: 1.8;
}

.inquiry .form{
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 45px;
}

#inquiryName,
#inquiryEmail,
#inquiryCountry{
    padding-left: 10px;
    width: 32%;
    height: 45px;
    border: 1px solid #EDEDED;
    font-family: 'poppins-light',sans-serif;
    font-size: 12px;
}

#inquiryCode,
#inquiryPhone{
    padding-left: 10px;
    width: 49%;
    height: 45px;
    border: 1px solid #EDEDED;
    font-family: 'poppins-light',sans-serif;
    font-size: 12px;
}

#inquiryMessage{
    padding-top: 15px;
    padding-left: 15px;
    resize: none;
    width: 100%;
    border: 1px solid #EDEDED;
    height: 110px;
    font-family: 'poppins-light',sans-serif;
    font-size: 12px;
}

#sendInquiry{
    width: 100%;
    border: none;
    outline: none;
    background-color: var(--secondary-color);
    color: #FFF;
    font-family: 'poppins-medium',sans-serif;
    padding: 5px 0;
    transition: all 0.5s;
}

#sendInquiry:hover{
    background-color: var(--primary-color);
}

#commonInquiry{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 15%;
    background-color: transparent;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
}

#commonInquiry.show{
    opacity: 1;
    visibility: visible;
}

#commonInquiry .container{
    max-width: 900px;
}

#commonInquiry .section-title{
    font-size: 25px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.5;
}

#commonInquiry .row{
    position: relative;
    background-color: #FFF;
    padding: 80px 30px 50px 30px;
    box-shadow: 0 0 2px 2px rgba(114,114,114,0.3);
}

#commonInquiry .form{
    width: 100%;
    padding: 0;
}

#closeInquiryForm{
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    right: 15px;
    border: none;
    background-color: transparent;
    font-size: 25px;
    outline: none;
}

#commonInquiryName,
#commonInquiryEmail,
#commonInquiryCountry,
#commonInquiryPhone{
    width: calc(50% - 5px);
    margin-bottom: 10px;
    height: 45px;
    border: 1px solid #EDEDED;
    font-family: 'poppins-light',sans-serif;
    font-size: 12px;
    padding-left: 15px;
}

/*#commonInquiryName,
#commonInquiryEmail,
#commonInquiryCountry{
    padding-left: 10px;
    width: 32%;
    height: 45px;
    border: 1px solid #EDEDED;
    font-family: 'poppins-light',sans-serif;
    font-size: 12px;
}

#commonInquiryCode,
#commonInquiryPhone{
    padding-left: 10px;
    width: 49%;
    height: 45px;
    border: 1px solid #EDEDED;
    font-family: 'poppins-light',sans-serif;
    font-size: 12px;
}*/

#commonInquiryMessage{
    padding-top: 15px;
    padding-left: 15px;
    resize: none;
    width: 100%;
    border: 1px solid #EDEDED;
    height: 110px;
    font-family: 'poppins-light',sans-serif;
    font-size: 12px;
    margin-bottom: 15px;
}

#sendCommonInquiry{
    width: 100%;
    border: none;
    outline: none;
    background-color: var(--secondary-color);
    color: #FFF;
    font-family: 'poppins-medium',sans-serif;
    padding: 5px 0;
    transition: all 0.5s;
}

#sendCommonInquiry:hover{
    background-color: var(--primary-color);
}

/*--------------------------------------------------------------
# Index Carousel
--------------------------------------------------------------*/
.index-carousel,
.index-carousel-mobile{
    display: none;
}

.index-carousel,
.index-carousel-mobile{
    padding: 0;
}

.index-carousel .img{
    padding-bottom: 41.7%;
}

.index-carousel-mask{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 1;
    z-index: 2;
    transition: all 0.5s;
}

.index-carousel-mask.hide{
    opacity: 0;
    visibility: hidden;
}

.index-carousel-mobile .img{
    padding-bottom: 100%;
}

#indexCarousel,
#indexCarouselMobile{
    position: relative;
}

#indexCarousel .swiper-slide .img .text-box{
    position: absolute;
    padding: 20px;
    height: 100%;
    width: 30%;
    top: 0;
    left: 20%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    z-index: 2;
}

#indexCarousel .swiper-slide-active .index-carousel-mask{
    opacity: 0;
    visibility: hidden;
}

#indexCarousel .swiper-slide-active .img img{
    transform: scale(1.05);
    transition: all 6s;
}

#indexCarousel .swiper-slide-active .img .text-box{
    opacity: 1;
    visibility: visible;
    transition-property: opacity,visibility;
    transition-duration: 1s;
    transition-delay: 1.5s;
}

#indexCarousel .swiper-slide .img .text-box .title,
#indexCarousel .swiper-slide .img .text-box .subtitle{
    color: #FFF;
    font-size: 50px;
    margin-left: 80px;
    word-break: break-word;
}

#indexCarousel .swiper-slide .img .text-box .title{
    margin-left: 100px;
    margin-top: 100px;
}

#indexCarousel .swiper-slide-active .img .text-box .title,
#indexCarousel .swiper-slide-active .img .text-box .subtitle{
    transition-property: opacity,margin-left;
    transition-duration: 1s;
    transition-delay: 1.5s;
    margin-left: 0;
    opacity: 1;
}

#indexCarousel .swiper-slide-active .img .text-box .title{
    position: relative;
    font-family: 'poppins-medium',sans-serif;
}

#indexCarousel .swiper-slide .img .text-box .title > span{
    position: absolute;
    font-family: 'poppins-medium',sans-serif;
    font-size: 40px;
    color: #FFF;
    top: -50px;
    left: 0;
    opacity: 0;
}

#indexCarousel .swiper-slide-active .img .text-box .title > span {
    transition-property: top,opacity;
    transition-duration: 0.5s;
    transition-delay: 1.5s;
    top: 0;
    opacity: 1;
}

#indexCarouselMobile .swiper-slide .text-box{
    position: absolute;
    left: 50%;
    bottom: 60px;
    background-color: rgba(255,255,255,0.2);
    transform: translateX(-50%);
    padding: 10px 20px;
    opacity: 0;
}

#indexCarouselMobile .swiper-slide-active .text-box{
    transition-property: opacity,bottom;
    transition-duration: 1s;
    transition-delay: 1.5s;
    opacity: 1;
    bottom: 30px;
}

#indexCarouselMobile .swiper-slide .text-box .title,
#indexCarouselMobile .swiper-slide .text-box .subtitle,
#indexCarouselMobile .swiper-slide .text-box .title > span{
    font-size: 20px;
    color: #202020;
}

#indexCarouselMobile .swiper-slide .text-box .title{
    font-family: 'poppins-medium',sans-serif;
}

#timeProgress,
#timeProgressMobile{
    position: absolute;
    width: 0;
    height: 5px;
    background-color: var(--secondary-color);
    opacity: 0.4;
    top: 0;
    left: 0;
    z-index: 3;
}

#timeProgress.active,
#timeProgressMobile.active{
    width: 100%;
    transition: all 6s;
}

 
.btn-prev,
.btn-next{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #FFF;
    cursor: pointer;
    z-index: 99;
    transition: all 0.5s;
    box-shadow: 0 0 2px 2px rgba(114,114,114,0.5);
}

.btn-prev i,
.btn-next i{
    font-size: 25px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

.btn-prev i{
    left: 48%;
}

.btn-next i{
    left: 52%;
}

.btn-prev:hover,
.btn-next:hover{
    background-color: var(--primary-color);
}

.btn-prev:hover i,
.btn-next:hover i{
    color: #FFF;
}

.hr{
    padding: 0;
}

.banner > .container .section-title{
    font-size: 15px;
}

/*------------------------------------------------------------------
    FAQ
------------------------------------------------------------------*/
.faq-list{
    list-style: none;
    font-family: 'Roboto-medium',sans-serif;
    font-size: 20px;
    text-align: left;
    padding: 0;
}

.faq-list li{
    margin-bottom: 1rem;
    background-color: var(--primary-color);
}

.faq-list .question{
    position: relative;
    color: #FFF;
    padding: 1rem 2rem;
}

.faq-list .collapsed .question::after{
    content: '\f107';
    font-family: FontAwesome;
    transform: rotate(0);
}

.faq-list .question::after{
    content: '\f107';
    font-family: FontAwesome;
    position: absolute;
    top: 13px;
    right: 2rem;
    font-size: 25px;
    transition: all 0.5s;
    transform: rotate(180deg);
}

.faq-list .answer{
    background-color: #FFF;
    padding: 10px 2rem;
    font-size: 15px;
}

.faq .more-btn{
    background-color: var(--primary-color);
    border: none;
    color: #FFF;
    padding: 5px 30px;
    font-size: 18px;
}

.faq-list .show-more{
    margin-top: 2rem;
    text-align: center;
}

.faq.product .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
}

.faq.product .list .item{
    width: 100%;
    position: relative;
    padding-left: 70px;
    margin-bottom: 3rem;
}

.faq.product .list .item:last-child{
    margin-bottom: 0;
}

.faq.product .list .item .ico{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}

.faq.product .list .item .text h3{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    margin-bottom: 5px;
}

.faq.product .list .item .text p{
    color: #666;
}

.faq.common .more-btn{
    background-color: var(--secondary-color);
}

.faq.common .more-btn:hover{
    background-color: var(--primary-color);
}

/*------------------------------------------------------------------
    Featured
------------------------------------------------------------------*/
.featured.main{
    display: block;
}

.featured.mobile{
    display: none;
}

.featured .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 3rem;
}

.featured-tab{
    display: flex;
    /*flex-wrap: wrap;*/
    align-items: center;
    justify-content: space-between;
}

.featured-tab .item{
    background-color: #CDCDCD;
    margin-right: 10px;
    padding: 20px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    width: 100%;
    display: flex;
}

.featured-tab .item.active{
    background-color: var(--secondary-color);
}

.featured-tab .item:last-child{
    margin-right: 0;
}

.featured-tab .item .ico{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.featured-tab .item .name{
    width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    white-space: nowrap;
    color: #FFF;
    text-align: left;
}

.featured-content{
    border: 1px solid #CDCDCD;
    border-top: none;
    padding: 3rem 2rem 2rem 2rem;
    flex-wrap: wrap;
    display: none;
}

.featured-content.active{
    display: flex;
}

.featured-content .img{
    width: 45%;
    padding-bottom: 32.5%;
}

.featured-content .text{
    width: 40%;
    margin-left: 15%;
}

.featured-content .text h2{
    font-family: 'poppins-medium',sans-serif;
    font-size: 25px;
    margin-bottom: 20px;
    position: relative;
}

.featured-content .text p{
    font-size: 18px;
    color: #999;
}

.featured-content .text .ico{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    top: 0;
    left: -70px;
    padding: 10px;
}

.featured-content .text .ico img{
    width: 100%;
    height: 100%;
}

#featuredTabBox{
    position: relative;
    padding: 0 30px;
}

#featuredTab{
    width: 100%;
    height: 40px;
    line-height: 40px;
}

#featuredTab .swiper-slide{
    display: flex;
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    background-color: #CDCDCD;
    padding: 0 10px;
    align-items: center;
    /*width: unset;*/
}

#featuredTab .swiper-slide .ico{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

#featuredTab .swiper-slide-active{
    background-color: var(--secondary-color);
    color: #FFF;
}

.featured-prev,
.featured-next{
    position: absolute;
    top: 0;
    width: 30px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
}

.featured-prev{
    left: 0;
    /*text-align: left;*/
}

.featured-next{
    right: 0;
    /*text-align: right;*/
}

.featured-prev i,
.featured-next i{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.featured-prev i{
    animation-name: move-left;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-duration: 0.8s;
}

.featured-next i{
    animation-name: move-right;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-duration: 0.8s;
}

@keyframes move-left {
    /*外部容器宽度30px*/
    /*箭头宽度20px*/
    0%{
        right:10px
    }

    50%{
        right: 15px;
    }

    100%{
        right: 10px;
    }
}

@keyframes move-right {
    /*外部容器宽度30px*/
    /*箭头宽度20px*/
    0%{
        left:10px
    }

    50%{
        left: 15px;
    }

    100%{
        left: 10px;
    }
}
/*--------------------------------------------------------------
# Accordion Panel
--------------------------------------------------------------*/
.accordion-panel{
    padding-top: 0;
    padding-bottom: 0;
}

.tab-box{
    position: relative;
    height: 700px;
    margin-top: 4rem;
}

.tab-box .category-box{
    position: relative;
    align-items: stretch;
    width: 100%;
    height: 700px;
    display: flex;
}

.tab-box .category-box .item{
    overflow: hidden;
    height: 100%;
    width: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    padding: 2rem 4rem 4rem 4rem;
    margin-right: 10px;
    border-right: 1px solid #FFF;
    flex: 1;
    object-fit: revert;
    transition: all 0.5s;
}

.tab-box .category-box .item:before{
    content: '';
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    transition: all 0.5s;
}

.tab-box .item.active{
    flex: 15;
    padding-top: 4rem;
    padding-bottom: 4rem;
    justify-content: normal;
}

.tab-box .item.active:before{
    opacity: 0;
}

.tab-box .category-box .item:last-child{
    margin-right: 0;
}

.tab-box .category-box .item .category{
    font-family: 'Roboto-medium', sans-serif;
    font-size: 30px;
    color: #FFF;
    transition: all 0.5s;
    white-space: nowrap;
}

.tab-box .item:last-child{
    border: none;
}

.tab-box .item.active .category{
    font-size: 50px !important;
    margin-bottom: 2rem !important;
    animation: none;
    white-space: unset;
    text-shadow: -2px 3px rgba(0,0,0,0.2);
}

.has-unfold .category-header .category{
    animation: rotate-text 0.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    margin-bottom: 2rem;
}

.tab-box .item:hover .category{
    margin-bottom: 2rem;
}

.tab-box .item .category{
    transition: all 0.5s;
}

.tab-box .category-box .item .category-detail{
    width: 100%;
    height: 0;
    visibility: hidden;
    transition: all 0.5s;
    overflow: hidden;
}

.tab-box .category-box .item.active .category-detail{
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 200px;
    z-index: 1;
}

.tab-box .category-box .item .category-detail .subtitle{
    font-family: 'Roboto-regular', sans-serif;
    font-size: 18px;
    color: #FFF;
}

.tab-box .category-box .item .category-detail .intro{
    font-family: 'Roboto-regular', sans-serif;
    font-size: 20px;
    color: #FFF;
    margin-bottom: 2rem;
    text-shadow: -2px 1px rgba(0,0,0,0.2);
}

.tab-box .category-box .item .category-detail .link i{
    color: #FFF;
    margin-left: 10px;
    transition: all 0.5s;
}

.tab-box .category-box .item .category-detail .link:hover i{
    margin-left: 10px;
}

@keyframes rotate-text {
    0%{}
    100%{transform: rotate(-90deg)}
}

.mobile-accordion-panel .card{
    border: 1px solid #FFF;
    margin-bottom: 10px;
    position: relative;
}

.mobile-accordion-panel .card:before{
    position: absolute;
    content: '';
    background-color: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.mobile-accordion-panel .card.show:before{
    opacity: 0;
    visibility: hidden;
}

.mobile-accordion-panel .card.show .category{
    transition: all 0s;
    opacity: 0;
}

.mobile-accordion-panel .card:last-child{
    margin-bottom: 0;
}

.mobile-accordion-panel .card-header{
    background-color: transparent;
    border: none;
}

.mobile-accordion-panel .card-header button{
    padding: 0;
    font-family: 'Roboto-medium',sans-serif;
    font-size: 20px;
    color: #FFF;
    position: relative;
}

.mobile-accordion-panel .card-header button .ico{
    position: absolute;
    top: 50%;
    right: 1rem;
    transition: all 0.5s;
}

.mobile-accordion-panel .card-header button .category{
    font-family: 'Roboto-medium',sans-serif;
    font-size: 25px;
    color: #FFF;
    transition: all 0.5s;
}

.has-unfold .card .card-header button .category{
    font-size: 25px;
    color: #8B8B8B;
}

.has-unfold .card.show-contents .card-header button .category{
    font-size: 30px;
    color: #FFF;
}

.show-contents button .category{
    font-size: 30px;
    color: #FFF;
}

.mobile-accordion-panel .card-header button:hover,
.mobile-accordion-panel .card-header button:active,
.mobile-accordion-panel .card-header button:focus{
    outline: none;
    text-decoration: none;
}

.mobile-accordion-panel .show-contents .card-header button .ico{
    top: 0.75rem;
    transform: rotate(225deg);
}

.mobile-accordion-panel .card .card-body .subtitle{
    font-family: 'Roboto-medium',sans-serif;
    font-size: 25px;
    margin-bottom: 20px;
    color: #FFF;
}

.mobile-accordion-panel .card .card-body .intro{
    font-family: 'Roboto-regular',sans-serif;
    font-size: 15px;
    margin-bottom: 20px;
    color: #FFF;
}

.mobile-accordion-panel .card .card-body .more-btn{
    font-size: 15px;
}

.mobile-accordion-panel .card .card-body .more-btn i{
    margin-left: 10px;
    color: #FFF;
}

/*--------------------------------------------------------------
# Company
--------------------------------------------------------------*/
.company .subtitle{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    margin-bottom: 15px;
}

.company .slogan{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    margin-bottom: 15px;
}

.company .intro{
    font-family: 'poppins-medium',sans-serif;
    color: #666;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.company-data{
    position: relative;
    background: url("../image/bg-company-data.jpg");
    background-size: cover;background-attachment: fixed;
    padding-top: 2rem;
    padding-bottom: 0;
}

.company-data:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: 0;
}

.company-data .item{
    width: 100%;
    max-width: 20%;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 2rem;
    text-align: center;
    z-index: 1;
}

.company-data.product{
    padding: 0;
}

.company-data.product .item{
    max-width: 25%;
}

.company-data .item img{
    margin-bottom: 10px;
}

.company-data .item h2{
    font-family: 'poppins-medium',sans-serif;
    font-size: 50px;
    color: #FFF;
}

.company-data .item p{
    color: #FFF;
}

.company-certificate .section-title{
    margin-top: 1rem;
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
}

.company-certificate .swiper-box{
    position: relative;
    padding: 0 80px;
}

.company-certificate .section-intro{
    width: 60%;
    text-align: center;
    word-break: break-word;
    margin: 0 auto 4rem auto;
}

.company-certificate .img{
    padding-bottom: 148%;
}

.company-certificate .ce-name{
    text-align: center;
    font-family: 'poppins-regular',sans-serif;
    font-size: 18px;
    margin-top: 10px;
}

#companyCe .swiper-slide {
    transition: 300ms;
    transform: scale(0.6);
}

#companyCe .swiper-slide.swiper-slide-prev,
#companyCe .swiper-slide.swiper-slide-next{
    transform: scale(0.8);
}

#companyCe .swiper-slide.swiper-slide-prev{
    transform-origin: left;
}

#companyCe .swiper-slide.swiper-slide-next{
    transform-origin: right;
}

#companyCe .swiper-slide-active,
#companyCe .swiper-slide-duplicate-active{
    transform: scale(1);
}

.company-ce-prev{
    left: 0;
}

.company-ce-next{
    right: 0;
}

#companyCarousel{
    margin-bottom: 1rem;
}

#companyCarousel .swiper-slide .img,
#companyCarouselThumb .swiper-slide .img{
    padding-bottom: 59.4%;
}

.carousel-thumb{
    padding: 0 50px;
    position: relative;
}

.carousel-thumb .company-carousel-thumb-prev,
.carousel-thumb .company-carousel-thumb-next{
    border-radius: 0;
    width: 30px;
    height: 100%;
    box-shadow: none;
}

.carousel-thumb .company-carousel-thumb-prev:hover,
.carousel-thumb .company-carousel-thumb-next:hover{
    background-color: transparent;
}

.carousel-thumb .company-carousel-thumb-prev:hover i,
.carousel-thumb .company-carousel-thumb-next:hover i{
    color: #202020;
}

.carousel-thumb .company-carousel-thumb-prev{
    left: 0;
}

.carousel-thumb .company-carousel-thumb-next{
    right: 0;
}

.about-1{
    padding-top: 0;
}

.about-1 .item{
    width: 20%;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 2rem;
    text-align: center;
}

.about-1 .item img{
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}

.about-1 .item p{
    font-family: 'poppins-medium',sans-serif;
    font-size: 18px;
}

.history{
    padding-bottom: 8rem;
    position: relative;
    background-color: #FBFBFB;
}

.history .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
}

#companyHistory{
    position: relative;
    padding-bottom: 260px;
}

#companyHistory:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: var(--primary-color);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#companyHistory .swiper-slide{
    height: 260px;
}

#companyHistory .swiper-slide{
    position: relative;
    text-align: center;
    color: #202020;
}

#companyHistory .swiper-slide:nth-child(even){
    padding-top: 260px;
}

#companyHistory .swiper-slide .year{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    color: #202020;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#companyHistory .swiper-slide:nth-child(odd) .year{
    bottom: -70px;
}

#companyHistory .swiper-slide:nth-child(even) .year{
    bottom: 15px;
}

#companyHistory .swiper-slide .content{
    position: relative;
    height: 100%;
    padding-bottom: 60px;
    /*overflow: hidden;*/
    display: flex;
    justify-content: end;
    flex-direction: column;
}

#companyHistory .swiper-slide:nth-child(even) .content{
    display: block;
    padding-bottom: 0;
    padding-top: 65px;
}

#companyHistory .swiper-slide .content:before{
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border: 4px solid var(--primary-color);
    background-color: var(--secondary-color);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    bottom: -13px;
}

#companyHistory .swiper-slide:nth-child(even) .content:before{
    bottom: 47px;
}

#companyHistory .swiper-slide .content:after{
    content: '';
    position: absolute;
    width: 4px;
    height: 50px;
    background-color: var(--primary-color);
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: -1;
}

#companyHistory .swiper-slide:nth-child(even) .content:after{
    bottom: 5px;
}

#companyHistory .swiper-slide:nth-child(even) .content:before {
    bottom: 52px;
}

.history-prev,
.history-next{
    top: unset;
    bottom: 2rem;
    box-shadow: none;
    background-color: transparent;
}

.history-prev:hover,
.history-next:hover{
    background-color: transparent;
}

.history-prev:hover i,
.history-next:hover i{
    color: var(--secondary-color);
}

.history-prev{
    left: 45% !important;
}

.history-next{
    right: 45% !important;
}

.company-exh{
    background-color: #FBFBFB;
}

.company-exh .layui-flow-more{
    width: 100%;
}

.company-exh .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
}

#exhibitionList .item{
    margin-bottom: 2rem;
}

#exhibitionList .item .img{
    padding-bottom: 59.1%;
}

#exhibitionList .more-btn{
    padding: 5px 25px;
}

.comparison-1 .text{
    padding-right: 70px;
    max-width: 55%;
}

.comparison-1 .img-box{
    max-width: 45%;
}

.comparison-1 .text .section-title{
    font-family: 'poppins-medium',sans-serif;
    color: #202020;
    margin-bottom: 2rem;
}

.comparison-1 .text{
    color: #666;
}

.comparison-1 .img{
    padding-bottom: 100%;
}

.comparison-2{
    background-color: #FBFBFB;
}

.comparison-2 .item{
    position: relative;
    margin-bottom: 2rem;
}

.comparison-2 .item .img{
    padding-bottom: 67%;
}

.comparison-2 .item .mask{
    position: absolute;
    z-index: 10;
    background-color: rgba(0,0,0,0.5);
    padding: 20px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

.comparison-2 .item .mask h3{
    text-align: center;
    font-family: 'poppins-medium',sans-serif;
    color: #FFF;
    font-size: 25px;
    transition: all 0.5s;
}

.comparison-2 .item .mask p{
    /*height: 114px;*/
    height: 0;
    color: #FFF;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    transition: all 0.5s;
}

.comparison-2 .item:hover .mask h3{
    text-align: left;
    margin-bottom: 10px;
}

.comparison-2 .item:hover .mask p{
    height: 114px;
}

.contact .form input,
.contact .form textarea{
    width: 100% !important;
    margin-bottom: 10px;
}

.contact .form textarea{
    height: 200px !important;
}

.contact .form #sendInquiry{
    padding: 10px 0;
    transition: all 0.5s;
}

.contact .form #sendInquiry:hover{
    background-color: var(--primary-color);
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
    font-size: 35px;
}

.contact .company-info .img{
    padding-bottom: 32.7%;
    margin-bottom: 2rem;
}

.contact .company-info > p{
    margin-bottom: 20px;
    font-family: 'poppins-medium',sans-serif;
    color: #999;
}

.contact-info .item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.contact-info .item .ico{
    width: 40px;
    margin-right: 15px;
}

.contact-info .item .ico img{
    width: 40px;
    height: 40px;
}

.contact-info .item .text{
    font-family: 'poppins-medium',sans-serif;
    width: calc(90% - 45px);
}

/*--------------------------------------------------------------
# Solution
--------------------------------------------------------------*/

.recommend-solution > .container > .row{
    margin-right: -8px;
    margin-left: -8px;
}

.recommend-solution > .container > .row > div{
    padding-left: 8px;
    padding-right: 8px;
}

.recommend-solution > .container > .row > div:first-child{
    padding-left: 50px;
    padding-right: 30px;
}


.recommend-solution .item{
    margin-bottom: 16px;
    position: relative;
}

.recommend-solution .item img{
    transition: all 0.5s;
}

.recommend-solution .item:hover img{
    transform: scale(1.1);
}

.recommend-solution .item .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 10px;
}

.recommend-solution .item p{
    color: #666;
    margin-bottom: 15px;
}

.recommend-solution .item .img{
    padding-bottom: 75%;
}

.recommend-solution .item .text{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.4);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
}

.recommend-solution .item .more-btn{
    font-size: 15px;
    padding: 5px 20px;
}

.list.solution .category > div{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #FFF;
    background-color: var(--secondary-color);
    padding: 10px 25px;
}

.list.solution .category > ul{
    padding-left: 25px;
}

.list.solution .category > ul li{
    padding: 10px 0;
}

.list.solution .category > ul li a{
    font-family: 'poppins-medium',sans-serif;
    color: #202020;
}

.list.solution .category > ul li a:hover{
    color: var(--secondary-color);
}

.list.solution .category > ul li a.active{
    color: var(--secondary-color);
}

.list.solution .item{
    margin-bottom: 2rem;
}

.list.solution .item .img{
    padding-bottom: 80.2%;
    margin-bottom: 10px;
    cursor: pointer;
}

.list.solution .item .img img{
    transition: all 1s;
}

.list.solution .item:hover .img img{
    transform: scale(1.2);
}

.list.solution .item .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #202020;
    margin-bottom: 10px;
    transition: all 0.5s;
}

.list.solution .item .title:hover{
    color: var(--secondary-color);
}

.list.solution .item .intro{
    color: #999;
    /*overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;*/
}

#solutionList .layui-flow-more{
    width: 100%;
    margin-top: 3rem;
}

#solutionList .layui-flow-more .more-btn{
    background-color: var(--secondary-color);
    border-radius: 0;
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    padding: 3px 25px;
}

#solutionList .layui-flow-more .more-btn:hover{
    background-color: var(--primary-color);
}

.article-solution .article-title{
    margin-bottom: 2rem;
    font-family: 'poppins-medium',sans-serif;
    text-align: center;
}

.article-solution .article-title.text-left{
    font-size: 25px;
}

#productFilter .mobile-filter-header i {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #FFF;
}

#productFilter a.collapsed i::before{
    content: "\f078" !important;
}

#productFilter .mobile-filter-header{
    position: relative;
    display: block;
    font-size: 20px;
    font-family: "poppins-medium",sans-serif;
    background-color: var(--secondary-color);
    padding: 10px;
    color: #FFF;
    border: none;
}

#productFilter .level-1{
    background-color: #FFF;
    border-left: 1px solid #EEE;
    border-right: 1px solid #EEE;
    border-bottom: 1px solid #EEE;

}

#productFilter .level-1 a{
    padding: 10px;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #202020;
    display: block;
}

#productFilter .level-1.active a{
    color: var(--secondary-color);
}

/*--------------------------------------------------------------
    Product
--------------------------------------------------------------*/
.product-advantage{
    padding-top: 0;
}

.product-advantage .item{
    text-align: center;
    width: 100%;
    max-width: 12.5%;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 1rem;
}

.product-advantage .item img{
    width: 80px;
    height: 80px;
}

.product-advantage .item p{
    height: 36px;
    font-family: 'firasans-extralight',sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.list.product .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
}

.list.product .item{
    margin-bottom: 2rem;
}

.list.product .item .img{
    padding-bottom: 74.7%;
    margin-bottom: 1rem;
}

.list.product .item .title{
    height: 48px;
    line-height: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    margin-bottom: 1rem;
}

.list.product .item .title a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 17px;
    color: #202020;
}

.list.product .item .title a:hover{
    color: var(--secondary-color);
}

.list.product .item .param{
    font-size: 14px;
    color: #999;
    margin-bottom: 5px;
}

.list.product .item .more{
    display: block;
    margin-top: 1rem;
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    color: #202020;
    text-decoration: underline;
}

.list.product .item .more:hover{
    color: var(--secondary-color);
}

.list.product .item:hover a{
    color: var(--secondary-color);
}

#productsList > .layui-flow-more{
    max-width: 100%;
    flex: 100%;
}

#productsList > .layui-flow-more .more-btn{
    background-color: var(--secondary-color);
    border-radius: 0;
    padding: 8px 25px;
    font-size: 15px;
    font-family: 'poppins-medium',sans-serif;
    margin: 0 10px;
}

#productsList > .layui-flow-more a{
    height: unset;
    line-height: unset;
}

.quotation-btn{
    background-color: var(--primary-color);
    color: #FFF;
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    border: none;
    padding: 8px 25px;
    margin: 0 10px;
    transition: all 0.5s;
}

.quotation-btn:hover{
    background-color: var(--secondary-color);
}

.details-show .show{
    margin-bottom: 2rem;
}

.details-show .show .img{
    display: none;
    padding-bottom: 41.7%;
    transition: all 0.5s;
}

.details-show .show .img.active{
    display: block;
}

.details-show .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
}

.details-show .show-list{
    width: 50%;
    margin: 0 auto;
}

.details-show .show-list .item{
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    max-width: 20%;
    margin-bottom: 2rem;
}

.details-show .show-list .item .img{
    padding-bottom: 100%;
    cursor: pointer;
    margin-bottom: 10px;
}

.details-show .show-list .item .text{
    height: 45px;
    font-family: 'poppins-medium',sans-serif;
    text-align: center;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.details-show .show-list .item .text.active{
    color: var(--secondary-color);
}

.recommend-product .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 5rem;
}

.recommend-product .item{
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    max-width: 20%;
    margin-bottom: 2rem;
    text-align: center;
}

.recommend-product .item:last-child{
    margin-bottom: 0;
}

.recommend-product .item:hover a{
    color: var(--secondary-color);
}

.recommend-product .item .img{
    padding-bottom: 76.8%;
    margin-bottom: 10px;
}

.recommend-product .item .title{
    color: #202020;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
}

.recommend-product .item .title:hover{
    color: var(--secondary-color);
}

.recommend-product .item img{
    transition: all 0.5s;
}

.recommend-product .item:hover img{
    transform: scale(1.1);
}

.why-choose .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
}

.why-choose .row{
    height: 392px;
}

.why-choose .img-box{
    width: 67%;
    height: 100%;
    padding-left: 15px;
    padding-right: 0;
    overflow: hidden;
}

.why-choose .img-box img{
    width: 100%;
    height: 100%;
}

.why-choose .reason{
    width: 33%;
    height: 100%;
    padding-left: 5px;
    padding-right: 10px;
    display: flex;
    flex-wrap: wrap;
}

.why-choose .reason .item{
    width: 50%;
    height: calc(50% - 5px);
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.why-choose .reason .item .content{
    background-color: #F7F7F7;
    padding: 5px;
    height: 100%;
    overflow: hidden;
}

.why-choose .reason .item img{
    width: 50px;
    height: 50px;
}

.why-choose .reason .item .content img{
    margin-bottom: 6px;
}

.why-choose .reason .item .content .title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 5px;
}

.why-choose .reason .item .content .intro{
    height: 95px;
    overflow: hidden;
    font-size: 12px;
    text-align: center;
}

#advantageCompany{
    height: 100%;
}

.advantage-company-prev,
.advantage-company-next{
    background-color: transparent;
    box-shadow: none;
}

.advantage-company-prev i,
.advantage-company-next i{
    color: #FFF;
}

.advantage-company-prev:hover,
.advantage-company-next:hover{
    background-color: transparent;
}

.advantage-company-prev{
    left: 0 !important;
}

.advantage-company-next{
    right: 0 !important;
}

.company-data.product .item{
    margin-top: 2rem;
}

.product-ce .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
}

.product-ce{
    padding-top: 0;
}

.product-ce .img{
    padding-bottom: 150%;
    margin-bottom: 2rem;
}

.more-info{
    padding-bottom: 0;
}

.more-info .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
}

.more-info .section-subtitle{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #666;
    margin-bottom: 4rem;
}

.more-info .item{
    margin-bottom: 3rem;
}

.more-info .item:last-child{
    margin-bottom: 5rem;
}

.more-info .item > div{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #202020;
}

.more-info .item .img{
    padding-bottom: 58.9%;
}

.more-info .item .img iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
}

.more-info.about .item h2{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    margin-bottom: 1rem;
}

.more-info.about .item p{
    color: #666;
}

.more-info.about .item .text{
    display: flex;
    align-items: center;
}

/*--------------------------------------------------------------
    Product Detail
--------------------------------------------------------------*/
.detail-product .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    color: #202020;
    margin-bottom: 2rem;
}

.detail-product .carousel .img{
    padding-bottom: 74.7%;
}

.detail-product .carousel .thumbs-box{
    padding: 20px;
    background-color: #F4F4F4;
}

.gallery-prev,
.gallery-next{
    position: absolute;
    cursor: pointer;
    width: 30px;
    height: 60px;
    line-height: 65px;
    text-align: center;
    background-color: #999;
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.gallery-prev i,
.gallery-next i{
    color: #FFF;
}

.gallery-prev{
    left: 0;
    border-radius: 0 6px 6px 0;
}

.gallery-next{
    right: 0;
    border-radius: 6px 0 0 6px;
}

.detail-product .info{
    padding: 30px 40px;
    box-shadow: 0 0 2px 2px rgba(114,114,114,0.3);
}

.detail-product .info .specifications{
    font-family: 'poppins-medium',sans-serif;
    font-size: 25px;
    margin-bottom: 1rem;
}

.detail-product .info .intro{
    color: #666;
    margin-bottom: 1rem;
}

.detail-product .info .param .item{
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(102, 102, 102, 0.51);
}

.detail-product .info .param .item .param-title{
    font-family: 'poppins-medium',sans-serif;
    color: #202020;
}

.detail-product .info .param .item .param-details{
    font-family: 'poppins-medium',sans-serif;
    color: #666;
}

.detail-product .info .btn-box{
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.detail-product .info .btn-box button{
    width: 32%;
    border: none;
    color: #FFF;
    font-family: 'poppins-medium',sans-serif;
    background-color: #25D366;
    padding: 8px 0;
    outline: none;
}

.detail-product .info .btn-box button:hover{
    text-decoration: underline;
}

.describe .tab{
    display: flex;
    flex-wrap: wrap;
}

.describe .tab > li{
    width: 100%;
    max-width: 33.333333%;
    background-color: var(--primary-color);
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #FFF;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
}

.describe .tab > li.active{
    background-color: var(--secondary-color);
    color: #FFF;
}

.describe .content{
    display: none;
    padding: 20px 0;
    overflow: hidden;
}

.describe .content.active{
    display: block;
}

.describe .content img,
.describe .content table{
    max-width: 100%;
}

/*.describe .content table{
    width: 100%;
}*/

.related-product .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 5rem;

}

#relatedProducts .swiper-slide .img{
    padding-bottom: 74.7%;
    margin-bottom: 1rem;
}

#relatedProducts .swiper-slide .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
}

#relatedProducts .swiper-slide .more{
    font-family: 'poppins-medium',sans-serif;
    text-decoration: underline;
    transition: all 0.5s;
}

.related-prev{
    left: -100px !important;
}

.related-next{
    right: -100px !important;
}

#relatedProducts .swiper-slide:hover .more{
    color: var(--secondary-color);
}

#sendBtn1{
    background-color: var(--secondary-color);
}

#sendBtn2{
    background-color: var(--primary-color);
}

#productInquiry{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 110px;
    left: 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
}

#productInquiry.show{
    opacity: 1;
    visibility: visible;
}

#productInquiry:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    opacity: 0.5;
}

#productInquiry .form{
    position: relative;
    background-color: #F3F3F3;
    padding: 4rem 3rem;
}

#productInquiry .form .close-btn{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    border: none;
    background-color: transparent;
    font-size: 20px;
    outline: none;
}

#productInquiry .form .form-title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    color: #202020;
    margin-bottom: 10px;
}

#productInquiry .form .form-subtitle{
    color: #666;
    margin-bottom: 1rem;
}

#productInquiry .form .box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#productInquiry .form input,
#productInquiry .form textarea{
    resize: none;
    height: 45px;
    border: 1px solid #EDEDED;
    font-family: 'poppins-light',sans-serif;
    font-size: 12px;
    padding-left: 10px;
    margin-bottom: 15px;
}

#productInquiryName,
#productInquiryEmail,
#productInquiryCountry{
    width: 32%;
}

#productInquiryCode,
#productInquiryPhone{
    width: 49%;
}

#productInquiryMessage{
    width: 100%;
    padding-top: 15px;
    height: 110px !important;
}

#productSendInquiry{
    width: 100%;
    border: none;
    outline: none;
    background-color: var(--secondary-color);
    color: #FFF;
    font-family: 'poppins-medium',sans-serif;
    padding: 10px 0;
}

/*--------------------------------------------------------------
    News
--------------------------------------------------------------*/
.recommend-blog{
    margin-bottom: 15rem;
}

.recommend-blog .section-title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 20px;
}

.recommend-blog .row{
    height: 525px;
}

.recommend-blog .main{
    max-width: 45%;
    overflow: hidden;
}

.recommend-blog .main .img{
    padding-bottom: 52.6%;
}

.recommend-blog .main .img img{
    transition: all 1s;
}

.recommend-blog .main .img:hover img{
    transform: scale(1.1);
}

.recommend-blog .main .text{
    padding: 20px;
    background-color: #F6F6F6;
}

.recommend-blog .main .text .title{
    height: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    margin-bottom: 20px;
}

.recommend-blog .main .text .title a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #202020;
}

.recommend-blog .main .text .intro{
    height: 75px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    margin-bottom: 20px;
}

.recommend-blog .main .text .time{
    color: #999;
}

.recommend-blog .main .item:hover a{
    color: var(--secondary-color);
}

.recommend-blog .secondary{
    max-width: 55%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
}

.recommend-blog .secondary .item{
    height: calc(33.333333% - 6px);
    overflow: hidden;
    margin-bottom: 10px;
    transition: all 0.5s;
}

.recommend-blog .secondary .item:last-child{
    margin-bottom: 0;
}

.recommend-blog .secondary .item .content{
    display: flex;
    height: 100%;
}

.recommend-blog .secondary .item:hover{
    box-shadow: 0 0 2px 2px rgba(114,114,114,0.3);
}

.recommend-blog .secondary .item:hover .content .text .title a{
    color: var(--secondary-color) !important;
}

.recommend-blog .secondary .item .content .img{
    width: 30%;
    padding-bottom: 30%;
}

.recommend-blog .secondary .item .content .img img{
    transition: all 1s;
}

.recommend-blog .secondary .item .content .img:hover img{
    transform: scale(1.1);
}

.recommend-blog .secondary .item .content .text{
    width: 70%;
    padding: 0 30px;
    display: flex;
    align-items: center;
}

.recommend-blog .secondary .item .content .text > div{
    width: 100%;
}

.recommend-blog .secondary .item .content .text .title{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommend-blog .secondary .item .content .text .title a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #202020;
}
.recommend-blog .secondary .item .content .text .title,
.recommend-blog .secondary .item .content .text .time{
    margin-bottom: 15px;
}

.recommend-blog .secondary .item .content .text .time,
.recommend-blog .secondary .item .content .text .intro{
    color: #999;
}

.recommend-blog .secondary .item .content .text .intro{
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.list.blog .item{
    position: relative;
    margin-bottom: 2rem;
    overflow: hidden;
}

.list.blog .item .img{
    padding-bottom: 52.6%;
}

.list.blog .item .mask{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -105px;
    transition: all 0.5s;
    background-color: transparent;
    padding: 20px;
}

.list.blog .item:hover .mask{
    bottom: 0;
    background-color: #FBFBFB;
}

.list.blog .item .title{
    color: #FFF;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    margin-bottom: 20px;
}

.list.blog .item:hover .title,
.list.blog .item:hover .more{
    color: var(--secondary-color);
}

.list.blog .item .intro{
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    margin-bottom: 10px;
}

.list.blog .item .more{
    text-decoration: underline;
    color: #202020;
}

.article-news{
    padding-top: 7rem;
    padding-bottom: 4rem;
}

.article-news .article-title{
    margin-bottom: 2rem;
    font-family: 'poppins-medium',sans-serif;
}

.article-news .content{
    word-break: break-word;
}

.article-news .other{
    padding: 2rem;
    margin-left: 4rem;
    box-shadow: 0 0 2px 2px rgba(114,114,114,0.4);
    border-bottom: 3px solid var(--secondary-color);
}

.article-news .other hr{
    margin-bottom: 2rem;
}

.article-news .other h2{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    margin-bottom: 2rem;
}

.article-news .other .item{
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.article-news .other .item .img{
    width: 30%;
    padding-bottom: 15.78%;
    flex: 30%;
}

.article-news .other .item .text{
    width: 70%;
    flex: 70%;
    padding-left: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.article-news .other .item .text a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    color: #202020;
}

.article-news .other .item:hover .text a{
    color: var(--secondary-color);
}

.article-news .other .social{
    display: flex;
    flex-wrap: wrap;
}

.article-news .other .social .item{
    margin-right: 10px;
    margin-bottom: 0;
}

.article-news .other .social .item img{
    width: 30px;
    height: 30px;
}

@media (min-width: 768px) {
    .section-title{
        font-size: 35px;
    }

    .section-subtitle{
        font-size: 25px;
    }

    .section-intro{
        font-size: 15px;
    }

    #placeholderBox{
        height: 70px;
    }

    #header{
        height: 70px;
        padding: 10px 0;
    }

    #header .logo img{
        max-height: 50px;
    }

    .btn-prev{
        left: 30px;
    }

    .btn-next{
        right: 30px;
    }

    .banner{
        padding-bottom: 20%;
    }

    .banner > .container .section-title,
    .banner > .container .section-intro{
        width: 100%;
    }

    .banner > .container .section-title{
        font-size: 40px;
    }

    .banner > .container .section-intro{
        font-size: 17px;
    }

    .index-carousel{
        display: block;
    }

    .index-carousel-mobile{
        display: none;
    }

    #indexCarousel .swiper-slide-active .img .text-box{
        width: 40%;
    }

    #indexCarousel .swiper-slide-active .img .text-box .title,
    #indexCarousel .swiper-slide-active .img .text-box .subtitle,
    #indexCarousel .swiper-slide-active .img .text-box .title > span{
        font-size: 30px;
    }

/*--------------------------------------------------------------
    Accordion Panel
--------------------------------------------------------------*/
    .accordion-panel{
        display: none;
    }

    .mobile-accordion-panel{
        display: block;
    }

/*--------------------------------------------------------------
    News
--------------------------------------------------------------*/
    .recommend-blog{
        margin-bottom: 0;
    }

    .recommend-blog .row{
        height: unset;
    }

    .recommend-blog .main{
        max-width: 100%;
        margin-bottom: 15px;
    }

    .recommend-blog .secondary {
        max-width: 100%;
    }

    .article-news .other{
        margin-top: 2rem;
        margin-left: 0;
    }
/*--------------------------------------------------------------
    Recommend Category Product
--------------------------------------------------------------*/
    .mobile-accordion-panel{
        padding-top: 0;
        padding-bottom: 0;
    }

/*--------------------------------------------------------------
    Company Information
--------------------------------------------------------------*/
    .company iframe{
        height: 500px;
        margin-bottom: 1rem;
    }
/*--------------------------------------------------------------
    Company Data
--------------------------------------------------------------*/
    .company-data .item{
        max-width: 50%;
    }
/*--------------------------------------------------------------
    Solution
--------------------------------------------------------------*/
    .recommend-solution > .container > .row > div:first-child{
        padding-left: 8px;
        padding-right: 8px;
    }

    .featured-content .img{
        padding-bottom: 72.2%;
        width: 100%;
        margin-bottom: 15px;
    }

    .featured-content .text{
        width: 100%;
    }

    .mobile-category{
        position: relative;
        padding: 0;
        margin-bottom: 20px;
        background-color: var(--secondary-color);
    }

    .list.solution .category{
        display: none;
    }

    .mobile-category{
        display: block;
    }

/*--------------------------------------------------------------
    Product
--------------------------------------------------------------*/
    .product-advantage{
        padding-bottom: 3rem;
    }

    .product-advantage .item{
        max-width: 25%;
        margin-bottom: 2rem;
    }

    .details-show{
        padding-bottom: 3rem;
    }

    .recommend-product{
        padding-top: 5rem;
        padding-bottom: 3rem;
    }

    .recommend-product .item{
        max-width: 50%;
    }

    .why-choose .row{
        height: auto;
    }

    .why-choose .img-box,
    .why-choose .reason{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .why-choose .img-box{
        height: 360px;
        margin-bottom: 10px;
    }

    .why-choose .reason{
        padding-right: 10px;
        padding-left: 10px;
    }

    .company-data.product .item{
        max-width: 50%;
    }

    .more-info .item .img{
        margin-bottom: 1rem;
    }

    .detail-product .carousel .thumbs-box{
        margin-bottom: 2rem;
    }

    .describe{
        padding-top: 0;
    }

    .related-prev{
        left: 0 !important;
    }

    .related-next{
        right: 0 !important;
    }


    .inquiry .text,
    .inquiry .form{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .inquiry .text{
        margin-bottom: 20px;
    }

    #inquiryName,
    #inquiryEmail,
    #inquiryCountry,
    #inquiryCode,
    #inquiryPhone,
    #inquiryMessage{
        margin-bottom: 10px;
    }

    .carousel-thumb{
        margin-bottom: 20px;
    }

    .company .intro{
        margin-bottom: 0;
    }

    .history-prev{
        left: 40% !important;
    }

    .history-next{
        right: 40% !important;
    }

    .comparison-1 .text,
    .comparison-1 .img-box{
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .comparison-1 .img-box{
        order: 1;
        margin-bottom: 2rem;
    }

    .comparison-1 .text{
        order: 2;
    }

    /*.list.solution .item{
        max-width: 50%;
        flex: 50%;
    }*/

    .contact .company-info{
        margin-bottom: 2rem;
    }

    #commonInquiry .container{
        width: 700px;
    }
}

@media (min-width: 992px) {
    .banner > .container .section-title,
    .banner > .container .section-intro{
        margin-top: 25px;
    }

/*--------------------------------------------------------------
    News
--------------------------------------------------------------*/
    .recommend-blog .row{
        height: 462px;
    }

    .recommend-blog .main{
        max-width: 45%;
    }

    .recommend-blog .secondary {
        max-width: 55%;
    }

    .article-news .other{
        margin-top: 0;
        margin-left: 0;
    }

/*--------------------------------------------------------------
    Company Information
--------------------------------------------------------------*/
    .company iframe{
        height: 100%;
    }

/*--------------------------------------------------------------
    Company Data
--------------------------------------------------------------*/
    .company-data .item{
        max-width: 20%;
    }


/*------------------------------------------------------------------
    Featured
------------------------------------------------------------------*/
    .featured-content .img{
        width: 45%;
        padding-bottom: 32.5%;
        margin-bottom: 0;
    }

    .featured-content .text{
        width: 40%;
    }

/*--------------------------------------------------------------
    Product
--------------------------------------------------------------*/
    .product-advantage .item{
        max-width: 12.5%;
    }

    .recommend-product .item{
        max-width: 25%;
    }

    .why-choose .img-box{
        height: 420px;
    }

    .company-data.product .item{
        max-width: 25%;
    }

    .more-info .item .img{
        margin-bottom: 0;
    }

    .detail-product .carousel .thumbs-box{
        margin-bottom: 0;
    }

    .describe{
        padding-top: 5rem;
    }

    .inquiry .text{
        width: 40%;
        margin-bottom: 0;
    }

    .inquiry .form{
        width: 60%;
        padding-left: 45px;
    }

    #inquiryName, #inquiryEmail, #inquiryCountry, #inquiryCode, #inquiryPhone, #inquiryMessage{
        margin-bottom: 0;
    }

    .carousel-thumb{
        margin-bottom: 0;
    }

    .company .intro{
        margin-bottom: 2rem;
    }

    .history-prev{
        left: 45% !important;
    }

    .history-next{
        right: 45% !important;
    }

    .comparison-1 .img-box{
        order: 2;
        margin-bottom: 0;
        max-width: 45%;
    }

    .comparison-1 .text{
        order: 1;
        padding-right: 70px;
        max-width: 55%;
    }
/*--------------------------------------------------------------
    Solution
--------------------------------------------------------------*/
    .list.solution .category{
        display: block;
    }

    .mobile-category{
        display: none;
    }

    .contact .inquiry-form .form input,
    .contact .inquiry-form .form textarea{
        margin-bottom: 10px !important;
    }

    .contact .company-info{
        margin-bottom: 0;
    }

    .details-show{
        padding-bottom: 1rem;
    }

    #commonInquiry .container{
        width: 850px;
    }
}

@media (min-width: 1200px) {
    .section-title{
        font-size: 35px;
    }

    .section-subtitle{
        font-size: 30px;
    }

    .section-intro{
        font-size: 20px;
    }

    #placeholderBox{
        height: 100px;
    }

    #header{
        height: 100px;
        padding: 15px 0;
    }

    #header .logo img{
        max-height: 75px;
    }

    .main-nav{
        display: block;
    }

    .main-nav > ul > li{
        height: 70px;
        line-height: 70px;
    }

    .main-nav > ul > li.drop-down > a{
        line-height: 66px;
    }

    .main-nav a{
        padding: 0 25px;
    }

    .mobile-nav{
        display: none;
    }

    .mobile-nav-toggle{
        display: none;
    }

    .main-footer{
        display: block;
    }

    .mobile-footer{
        display: none;
    }

    .btn-prev{
        left: 180px;
    }

    .btn-next{
        right: 180px;
    }

    .banner{
        padding-bottom: 11.7%;
    }

    .banner > .container .section-title,
    .banner > .container .section-intro{
        width: 50%;
        margin-top: 20px;
    }

    #inquiryName, #inquiryEmail, #inquiryCountry, #inquiryCode, #inquiryPhone, #inquiryMessage{
        margin-bottom: 10px;
    }

    #indexCarousel .swiper-slide-active .img .text-box{
        width: 30%;
    }

    #indexCarousel .swiper-slide-active .img .text-box .title,
    #indexCarousel .swiper-slide-active .img .text-box .subtitle,
    #indexCarousel .swiper-slide-active .img .text-box .title > span{
        font-size: 40px;
    }

/*--------------------------------------------------------------
# Accordion Panel
--------------------------------------------------------------*/
    .accordion-panel{
        display: block;
    }


    .mobile-accordion-panel{
        display: none;
    }
/*--------------------------------------------------------------
# Company
--------------------------------------------------------------*/
    .company-ce-prev{
        left: 0;
    }

    .company-ce-next{
        right: 0;
    }

/*--------------------------------------------------------------
    Solution
--------------------------------------------------------------*/
    .recommend-solution > .container > .row > div:first-child{
      
        padding-right: 30px;
    }

/*--------------------------------------------------------------
    News
--------------------------------------------------------------*/
  

    .recommend-blog .row{
        height: 525px;
    }

    .article-news .other{
        margin-left: 4rem;
    }

/*--------------------------------------------------------------
    Product
--------------------------------------------------------------*/
    .why-choose .row {
        height: 392px;
    }

    .why-choose .img-box{
        width: 67%;
        height: 100%;
        padding-left: 15px;
        padding-right: 0;
    }

    .why-choose .reason{
        width: 33%;
        padding-left: 5px;
        padding-right: 10px;
    }

    .related-prev {
        left: -100px !important;
    }

    .related-next {
        right: -100px !important;
    }

    #productsList > div{
        padding:0 90px;
    }

    .list.product .lis{
        max-width: 1390px;
    }

    #commonInquiry .container{
        width: 900px;
    }

}

@media (max-width: 767px) {
    section{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .section-title{
        font-size: 20px;
    }

    .section-subtitle{
        font-size: 20px;
    }

    .section-intro{
        font-size: 15px;
    }

    #placeholderBox{
        height: 50px;
    }

    #header{
        height: 50px;
        padding: 5px 0;
    }

    #header .logo img{
        max-height: 40px;
    }

    .footer .row:last-child .copyright,
    .footer .row:last-child .privacy{
        font-size: 14px;
        text-align: left;
    }

    .footer .row:last-child .privacy a{
        font-size: 14px;
    }

    .footer hr{
        margin-top: 20px;
    }

    .footer h4{
        font-size: 14px;
    }

    .mobile-nav-toggle i{
        margin: 10px 15px 0 0;
    }

    .footer ul li a{
        font-size: 14px;
    }

    .footer p{
        font-size: 14px;
    }

    .footer .social .item{
        margin-right: 6px;
    }

    #tool{
        visibility: hidden;
        opacity: 0;
    }

    .btn-prev,
    .btn-next{
        width: 30px;
        height: 30px;
    }

    .btn-prev{
        left: 15px;
    }

    .btn-next{
        right: 15px;
    }

    .btn-prev i,
    .btn-next i{
        font-size: 15px;
    }

    .banner{
        display: none;
    }

    .banner.mobile{
        display: block;
    }

    .banner > .container .section-title,
    .banner > .container .section-intro{
        width: 100%;
    }

    .banner > .container .section-title{
        font-size: 20px;
    }

    .banner > .container .section-intro{
        font-size: 14px;
    }

    .index-carousel{
        display: none;
        margin-bottom: 2rem;
    }

    .index-carousel-prev,
    .index-carousel-next{
        display: none;
    }

    .index-carousel-mobile{
        display: block;
    }

    #indexCarouselMobile .swiper-slide .text-box{
        width: 50%;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(0);
        background-color: rgba(0,0,0,0.4);
        display: flex;
        align-items: center;
    }

    #indexCarouselMobile .swiper-slide .text-box .title,
    #indexCarouselMobile .swiper-slide .text-box .subtitle{
        color: #FFF;
    }

    #indexCarouselMobile .swiper-slide .text-box .subtitle{
        margin-bottom: 30px;
    }

    #commonInquiry .container{
        width: 280px;
    }

    #commonInquiry .row{
        padding: 40px 20px 20px 20px;
    }

    #commonInquiryName,
    #commonInquiryEmail,
    #commonInquiryCountry,
    #commonInquiryPhone{
        width: 49%;
    }

/*--------------------------------------------------------------
    Accordion Panel
--------------------------------------------------------------*/
    .accordion-panel{
        display: none;
    }

    .mobile-accordion-panel{
        display: block;
    }

    .mobile-accordion-panel .card .card-body .subtitle{
        font-size: 20px;
    }

    .mobile-accordion-panel .card .card-body .intro{
        font-size: 14px;
    }

    .mobile-accordion-panel .card .card-body .more-btn{
        font-size: 14px;
    }

/*--------------------------------------------------------------
    News
--------------------------------------------------------------*/
    .recommend-blog .row{
        height: unset;
    }

    .recommend-blog .main{
        max-width: 100%;
        margin-bottom: 15px;
    }

    .recommend-blog .secondary {
        max-width: 100%;
    }

    .recommend-blog .main .text .title a{
        font-size: 15px;
    }

    .recommend-blog .main .text .intro{
        height: 65px;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .recommend-blog .main .text .time{
        font-size: 14px;
    }

    .recommend-blog .secondary .item .content .text .title a{
        font-size: 15px;
    }

    .recommend-blog .secondary .item .content .text .time{
        font-size: 14px;
    }

    .recommend-blog{
        margin-bottom: 0;
    }

    .recommend-blog .section-title{
        margin-bottom: 2rem;
    }

    .recommend-blog .secondary .item .content .text{
        padding: 0 15px;
    }

    .recommend-blog .secondary .item .content .text .title, .recommend-blog .secondary .item .content .text .time{
        margin-bottom: 5px;
    }

    .recommend-blog .main .text .title{
        height: unset;
        margin-bottom: 10px;
    }

    .recommend-blog .secondary .item .content .text .intro{
        height: 36px;
        font-size: 12px;
    }

    .list.blog .item .title{
        font-size: 15px;
    }

    .list.blog .item .intro,
    .list.blog .item .more{
        font-size: 14px;
    }

    .article-news .article-title{
        font-size: 15px;
    }

    .article-news .other h2{
        font-size: 25px;
        margin-bottom: 10px;
    }

    .article-news .other .item .text a{
        font-size: 14px;
    }

/*--------------------------------------------------------------
    Featured
--------------------------------------------------------------*/
    .featured.main{
        display: none;
    }

    .featured.mobile{
        display: block;
    }

    .featured .section-title{
        margin-bottom: 1rem;
    }

    .featured-tab{
        flex-wrap: wrap;
    }

    .featured-tab .item{
        max-width: 100% !important;
        padding: 10px;
        margin-right: 0;
        /*margin-bottom: 10px;*/
    }

    .featured-tab .item:last-child{
        margin-bottom: 0;
    }

    .featured-tab .item .name{
        font-size: 18px;
    }

    .featured-content{
        border: 1px solid #CDCDCD;
        padding: 15px;
    }

    .featured-content .img,
    .featured-content .text{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .featured-content .img{
        padding-bottom: 72.2%;
        margin-bottom: 20px;
    }

    .featured-content .text h2{
        font-size: 20px;
        margin-bottom: 10px;
    }

    .featured-content .text p{
        font-size: 14px;
    }

    .mobile-accordion-panel .card-header button .category{
        font-size: 15px;
    }

    .company .slogan{
        font-size: 25px;
    }

    .company .video{
        order: 1;
    }

    .company .video iframe{
        height: 280px;
        margin-bottom: 20px;
    }

    .company .text{
        order: 2;
        margin-bottom: 3rem;
    }

    .company-data .item{
        max-width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .company-data .item img{
        width: 40px;
        height: 40px;
        margin-bottom: 1rem;
    }

    .company-data .item h2{
        font-size: 25px;
        margin-bottom: 1rem;
    }

    .company-data .item p{
        font-size: 16px;
        margin-bottom: 1rem;
    }

    .recommend-solution{
        padding-bottom: 3rem;
    }

    .recommend-solution > .container > .row > div:first-child{
        margin-top: 3rem;
        padding-left: 15px;
        padding-right: 15px;
    }

    .company-certificate{
        padding-bottom: 3rem;
    }

    .company-certificate .section-title{
        margin-bottom: 1rem;
    }

    .product-advantage{
        padding-top: 3rem;
        padding-bottom: 1rem;
    }

    .product-advantage .item{
        max-width: 50%;
    }

    .list.product .section-title{
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .details-show .section-title{
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .recommend-product .section-title{
        margin-bottom: 1rem;
    }

    .recommend-product .item{
        max-width: 100%;
    }

    .why-choose .section-title{
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .why-choose .row {
        height: auto;
    }

    .why-choose .img-box,
    .why-choose .reason{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .why-choose .img-box {
        height: 170px;
        margin-bottom: 10px;
    }

    .why-choose .reason .item{
        height: unset;
    }

    .why-choose .reason{
        padding-right: 5px;
        margin-left: -5px;
        margin-right: -5px;
    }

    .why-choose .reason .item .content .title{
        font-size: 14px;
    }

    .why-choose .reason .item .content .intro{
        height: 140px;
    }

    .company-data.product .item {
        max-width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .product-ce .section-title{
        margin-top: 3rem;
    }

    .product-ce{
        padding-bottom: 3rem;
    }

    .more-info .section-title{
        margin-top:1rem;
    }

    .more-info .section-subtitle{
        margin-bottom: 2rem;
        font-size: 15px;
    }

    .more-info .item .img{
        margin-bottom: 1rem;
    }

    .more-info .item:last-child{
        margin-bottom: 3rem;
    }

    .faq.product .section-title{
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .faq.product .list .item{
        padding-left: 50px;
        margin-bottom: 20px;
    }

    .faq.product .list .item .ico{
        width: 40px;
        height: 40px;
    }

    .faq.product .list .item .text h3{
        font-size: 15px;
    }

    .faq.product .list .item .text p{
        font-size: 14px;
    }

/*-------------------------------------------------------------------------------
    Faq
-------------------------------------------------------------------------------*/
    .faq-list .question,
    .faq-list .answer{
        font-size: 14px;
    }

    .inquiry .text .section-title{
        font-size: 20px;
        margin-bottom: 0;
    }

    .inquiry .text .section-intro{
        font-size: 14px;
        margin-bottom: 10px;
    }

    .inquiry .text, .inquiry .form{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    #sendInquiry{
        font-size: 14px;
    }

    #commonInquiry{
        top: 45px;
    }

    #commonInquiry .section-title{
        font-size: 15px;
    }

    #inquiryName, #inquiryEmail, #inquiryCountry,#inquiryCode, #inquiryPhone,#inquiryMessage{
        width: 100%;
        margin-bottom: 10px;
        height: 35px;
    }

    #commonInquiryMessage{
        height: 80px;
    }

    #closeInquiryForm{
        top: 5px;
        right: 5px;
        font-size: 15px;
    }

/*-------------------------------------------------------------------------------
    Product
-------------------------------------------------------------------------------*/
    #productsList .col-lg-4{
        width: 50%;
    }

    .list.product .item .title{
        height: unset;
        -webkit-line-clamp: 99;
    }

    .list.product .item .title a{
        font-size: 15px;
    }

    .list.product .item .param{
        font-size: 12px;
    }

    .list.product .item .more{
        display: none;
    }

    .detail-product .title{
        font-size: 25px;
    }

    .detail-product .info .specifications{
        font-size: 20px;
    }

    .detail-product .info{
        padding: 15px;
    }

    .detail-product .info .intro{
        font-size: 14px;
        margin-bottom: 0;
    }

    .detail-product .info .param .item .param-title,
    .detail-product .info .param .item .param-details{
        font-size: 14px;
    }

    .detail-product .info .btn-box{
        flex-wrap: wrap;
    }

    .detail-product .info .btn-box button{
        width: 100%;
        margin-bottom: 10px;
        font-size: 14px;
    }

    #sendBtn1,
    #sendBtn2{
        font-size: 14px;
    }

    .detail-product .carousel .thumbs-box{
        margin-bottom: 20px;
    }

    .describe .tab > li{
        width: 33.333333%;
        font-size: 14px;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #productInquiry .form{
        padding: 1rem;
    }

    #productInquiry .form .form-title{
        font-size: 15px;
    }

    #productInquiry .form .form-subtitle{
        font-size: 14px;
    }

    #productSendInquiry{
        font-size: 14px;
    }

    .related-product .section-title{
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    #productInquiry{
        top: 40px;
    }

    #productInquiry .form .close-btn{
        top: 10px;
        right: 10px;
    }

    #productInquiryName,
    #productInquiryEmail,
    #productInquiryCountry,
    #productInquiryCode,
    #productInquiryPhone,
    #productInquiryMessage{
        width: 100%;
        margin-bottom: 5px !important;
    }

    .details-show .show-list{
        width: 100%;
        margin-left: -5px;
        margin-right: -5px;
    }

    .details-show .show-list .item{
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 10px;
        max-width: 25%;
    }

    .details-show .show-list .item .img{
        margin-bottom: 5px;
    }

    .details-show .show-list .item .text{
        height: 36px;
        font-size: 12px;
    }

    #relatedProducts .swiper-slide .title,
    #relatedProducts .swiper-slide .more{
        font-size: 14px;
    }

    .related-prev {
        left: 15px !important;
    }

    .related-next {
        right: 15px !important;
    }

    .carousel-thumb{
        margin-bottom: 20px;
    }

    #categoryCe .col-sm-6{
        max-width: 50%;
        flex: 50%;
    }

    .history .section-title{
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .history-prev, .history-next{
        width: 50px;
        height: 50px;
    }

    .history-prev i, .history-next i{
        font-size: 25px;
    }

    .history-prev{
        left: 35% !important;%;
    }

    .history-next{
        right: 35% !important;
    }

    .more-info .item:first-child{
        margin-top: 2rem;
    }

    .more-info.about .item h2{
        font-size: 20px;
    }

    .company-exh .section-title{
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    #exhibitionList .more-btn{
        font-size: 15px;
    }

    #exhibitionList .item{
        max-width: 50% !important;
        flex: 50% !important;
    }

    .comparison-1 .img-box,
    .comparison-1 .text{
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .comparison-1 .img-box{
        order: 1;
        margin-bottom: 20px;
    }

    .comparison-1 .text{
        order: 2;
        font-size: 14px;
    }

    .comparison-1 .text .section-title{
        margin-bottom: 1rem;
    }

    .list.solution .category{
        display: none;
    }

    .mobile-category {
        display: block;
    }

    #productFilter .mobile-filter-header{
        font-size: 15px;
    }

    #productFilter .level-1 a{
        font-size: 18px;
    }

    .list.solution .item{
        max-width: 50% !important;
        flex: 50% !important;
    }

    .list.solution .item .title,
    .list.solution .item .intro,
    #solutionList .layui-flow-more .more-btn{
        font-size: 14px;
    }

    .article-news .content{
        margin-bottom: 2rem;
    }

    .article-news .other{
        margin: 0;
    }

    .contact .section-title{
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .contact .section-title{
        margin-bottom: 2rem;
        font-size: 25px;
    }

    .product-advantage .item p{
        height: 30px;
        font-size: 14px;
    }

    .quotation-btn{
        font-size: 14px;
    }

    .recommend-product .item .title{
        font-size: 15px;
    }
/*-------------------------------------------------------------------------------
    About
-------------------------------------------------------------------------------*/
    .about-1 .item{
        width: 50%;
    }

    .company .subtitle{
        font-size: 15px;
    }

    .company .slogan{
        font-size: 20px;
    }

    .company .intro{
        font-size: 14px;
    }

    .company .more-btn{
        font-size: 15px;
    }

    .about-1 .item p{
        font-size: 15px;
    }

    #companyHistory .swiper-slide .year{
        font-size: 25px;
    }

    #companyHistory .swiper-slide .content{
        font-size: 14px;
    }

    #companyHistory{
        padding-bottom: 200px;
    }

    #companyHistory .swiper-slide{
        height: 200px;
    }

    #companyHistory .swiper-slide:nth-child(even){
        padding-top: 200px;
    }
/*-------------------------------------------------------------------------------
    Contact Us
-------------------------------------------------------------------------------*/
    .contact .section-title{
        font-size: 20px;
        margin-bottom: 15px;
    }

    .contact .company-info > p{
        font-size: 14px;
    }

    .contact-info .item{
        align-items: flex-start;
    }

    .contact-info .item .text{
        font-size: 14px;
    }

    .recommend-solution .item p{
        font-size: 14px;
    }

    .recommend-solution .item .text{
        font-size: 15px;
    }
}