/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@font-face {
    font-family: 'comfortaa-bold';
    src: url("../../fonts/Comfortaa-Bold.TTF");
}

@font-face {
    font-family: 'comfortaa-medium';
    src: url("../../fonts/Comfortaa-Medium.TTF");
}
:root{
    --primary-color: #5B8095;
}

body {
    background: #F5F5F5;
    font-family: 'comfortaa-medium',sans-serif;
    font-size: 15px;
}

a{
    color: #A7A7A7;
    transition: all 0.5s;
}

a:hover,
a:active,
a:focus {
    color: var(--primary-color);
    outline: none;
    text-decoration: none;
}

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

.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;
    padding-bottom: 100%;
    overflow: hidden;
}

.img img{
    position: absolute;
    width: 100%;
    height: 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%;
}

button:active,
button:focus{
    outline: none;
}

.more-btn{
    border: none;
    font-size: 18px;
    background-color: var(--primary-color);
    color: #FFF;
    padding: 10px 25px;
    outline: none;
    transition: all 0.5s;
}

.more-btn:hover{
    background-color: #202020;
}

.inquiry-callback{
    background-color: #F4F4F4;
    padding: 10rem 0 20rem 0;
}

.inquiry-callback img{
    margin-bottom: 60px;
}

.inquiry-callback h2{
    font-size: 40px;
    padding: 0 0 30px 0;
}

.inquiry-callback p{
    font-size: 30px;
    color: #999;
    margin-bottom: 60px;
}

.inquiry-callback a{
    font-size: 20px;
    color: var(--primary-color);
    text-decoration: underline;
    margin-bottom: 30px;
}

.inquiry-callback b{
    font-size: 20px;
}

/*--------------------------------------------------------------
# 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(--primary-color);
}

.pagination a.cur{
    border:none;
    background:var(--primary-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;
}

.filter-mobile{
    display: none;
    padding-top: 2rem;
    padding-bottom: 0;
}

#filterMobile{

}

#filterMobile .mobile-filter-header{
    position: relative;
    display: block;
    font-size: 20px;
    background: var(--primary-color);
    padding: 10px;
    color: #FFF;
    border: none;
}

#filterMobile .mobile-filter-header i{
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(0);
    transition: all 0.5s;
}

#filterMobile a.collapsed i{
    transform: translateY(-50%) rotate(-180deg);
}

#filterMobile .level-1{
    padding: 5px 10px;
    background-color: #FFF;
    font-size: 20px;
}

#filterMobile .level-1 a{
    font-size: 20px;
    color: #202020;
}

#filterMobile .level-1 a:hover{
    color: var(--primary-color);
}

#filterMobile .level-2{
    padding: 10px 0 10px 20px;
}

#filterMobile .level-2 a{
    font-size: 15px;
    color: #A7A7A7;
}

/*--------------------------------------------------------------
# placeholderBox
--------------------------------------------------------------*/
#placeholderBox{
    height: 110px;/*高度要和#header一致*/
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
/*.back-to-top {
    position: fixed;
    display: none;
    background: var(--primary-color);
    color: #fff;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 1;
    font-size: 16px;
    border-radius: 50%;
    right: 15px;
    bottom: 15px;
    transition: background 0.5s;
    z-index: 11;
}

.back-to-top i {
    padding-top: 12px;
    color: #FFF;
}*/

#tool{
    position: fixed;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    padding: 5px;
    background-color: #202020;
    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(--primary-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(--primary-color);
    color: #FFF;
    padding: 5px 55px 5px 20px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
}

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

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

#broadsideForm{
    width: 400px;
    position: absolute;
    color: #FFF;
    right: calc(100% + 15px);
    cursor: default;
    padding: 0;
    bottom: calc(100% - 200px);
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
}

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

#broadsideForm .head{
    text-align: left;
    position: relative;
    width: 100%;
    font-size: 20px;
    background-color: var(--primary-color);
    padding: 10px 15px;
    line-height: 30px;
}

#broadsideForm .head > img{
    width: 30px;
    height: 30px;
}

#closeForm{
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer
}

#broadsideForm .form{
    padding: 20px 15px;
    background-color: #FFF;
    font-size: 12px;
    color: #999;
    display: grid;
}

#broadsideForm .form p{
    line-height: 2;
    margin-bottom: 10px;
    font-family: 'poppins-regular', sans-serif
}

#broadsideForm .form input{
    width: 100%;
    height: 45px;
    margin-bottom: 10px;
    border: 1px solid #D1D1D1;
    padding-left: 10px;
}

#broadsideForm .form textarea{
    width: 100%;
    height: 90px;
    border: 1px solid #D1D1D1;
    resize: none;
    padding-top: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
}

#broadsideFormBtn{
    width: 100%;
    background-color: var(--primary-color);
    border: none;
    font-size: 12px;
    color: #FFF;
    height: 40px;
    line-height: 40px
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header{
    background-color: #FFF;
    z-index: 999;
    padding: 20px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.5s;
    box-shadow: 0 0 5px 2px rgba(167,167,167,0.5);
}

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

#header .logo{
    max-width: 270px;
    max-height: 70px;
    line-height: 70px;
}

#header .logo img{
    width: 100%;
}

/*--------------------------------------------------------------
# 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: 70px;
}

.main-nav a {
    display: block;
    position: relative;
    font-family: 'comfortaa-bold',sans-serif;
    color: #202020;
    padding: 0 35px;
    transition: 0.5s;
}

.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;
    padding: 10px 0;
    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 20px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: #000;
}

.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 .drop-down > a:after {
    content: "\f107";
    font-family: FontAwesome;
    padding-left: 10px;
}*/

.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: 100%;
}

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

/* Mobile Navigation */

.mobile-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 9999;
    overflow-y: auto;
    left: -260px;
    width: 260px;
    padding-top: 18px;
    background: rgba(91,128,149,1);
    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(91,128,149,0.8);
    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: 6rem;
    padding-bottom: 0;
    background: url("../../home/images/bg-foot.jpg") no-repeat;
    background-size: cover;
    color: #FFF;
}

.footer .logo{
    width: 270px;
    margin-bottom: 20px;
}

.footer .company_slogan{
    font-size: 12px;
    line-height: 2;
}

.footer h3{
    font-size: 25px;
    margin-bottom: 15px;
}

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

.footer ul li{
    padding: 5px 0;
    margin-bottom: 10px;

}

.footer ul li a{
    font-family: 'comfortaa-bold',sans-serif;
    color: #FFF;
}

.footer ul li a:hover{
    text-decoration: underline;
}

.foot-form input,
.foot-form textarea{
    border: none;
    border-bottom: 1px solid #FFF;
    background-color: transparent;
    color: #FFF;
    font-size: 12px;
    width: 100%;
    margin-bottom: 15px;
}

.foot-form input::placeholder,
.foot-form textarea::placeholder{
    color: #FFF;
}

.foot-form input{
    height: 35px;
}

.foot-form textarea{
    height: 70px;
    resize: none;
    margin-bottom: 0;
}

.submit-btn{
    width: 100%;
    border: 1px solid #FFF;
    font-size: 12px;
    color: #FFF;
    background-color: var(--primary-color);
    padding: 10px 0;
}

.submit-btn:hover{
    background-color: #202020;
}

.footer .social{
    display: flex;
    flex-wrap: wrap;
}

.footer .social .item{
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #FFF;
    font-size: 20px;
    margin-right: 10px;
}

.footer .social .item i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.footer .policy{
    text-align: right;
}

.footer .policy a{
    color: #FFF;
}

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

.main-footer > .container-fluid{
    margin-top: 3rem;
    background-color: var(--primary-color);
    padding: 2rem 0;
    line-height: 35px;
}

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

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

.mobile-footer .panel-heading{
    color: #FFF;
}

.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: 20px;
    padding: 10px 0;
}

.mobile-footer > .container-fluid{
    margin-top: 20px;
    padding-top: 20px;
    background-color: var(--primary-color);
    padding-bottom: 20px;
}

.mobile-footer > .container-fluid .row{
    align-items: center;
}

.mobile-footer .social,
.mobile-footer .copyright,
.mobile-footer .policy{
    max-width: 100%;
    flex: 100%;
    text-align: center;
}

.mobile-footer .social,
.mobile-footer .copyright{
    margin-bottom: 15px;
}

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

/*--------------------------------------------------------------
# Section Banner
--------------------------------------------------------------*/
.banner{
    position: relative;
    padding: 0;
}

.banner.mobile{
    display: none;
}

.banner .img{
    padding-bottom: 20.8%;
}

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

.banner .img:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.2);
    z-index: 1;
}

.banner .text{
    position: absolute;
    z-index: 2;
}

.banner .text .title{
    font-size: 30px;
    color: #FFF;
    margin-bottom: 1rem;
}

.banner .text .intro{
    font-size: 15px;
    color: #FFF;
    line-height: 2;
}

/*--------------------------------------------------------------
# Index Carousel
--------------------------------------------------------------*/
.index-carousel{
    padding: 0;
}

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

.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: 999;
    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;
}

.index-about{
    background-color: #F5F5F5;
}

.index-about h2{
    color: #202020;
}

.index-about p{
    line-height: 1.5;
    color: #666;
    margin-bottom: 20px;
}

.index-about .img{
    padding-bottom: 56.6%;
    overflow: unset;
}

.index-about .img .index-about-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    left: -20px;
    z-index: 0;
}

.index-about .img iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.index-about hr{
    background-color: #636363;
    margin: 20px 0;
}

.index-category-product{
    background-color: #FFF;
}

.index-category-product h2{
    margin-bottom: 40px;
    text-align: left;
}

.index-category-product .img{
    margin-bottom: 15px;
    transition: all 0.5s;
    overflow: hidden;
}

.index-category-product .img img{
    transition: all 0.5s;
}

.index-category-product .img:hover img{
    transform: scale(1.2);
}

.index-category-product .text{
    color: #202020;
    transition: all 0.5s;
    line-height: 1.5;
    text-align: center;
}

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

.index-category-product .item:hover .text{
    color: var(--primary-color);
}

.index-category-product .more-btn{
    margin-top: 40px;
}

.new-arrival{
    background-color: #F5F5F5;
}

.new-arrival .img{
    padding-bottom: 53%;
}

.new-arrival .box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #FFF;
    text-align: center;
    font-size: 40px;
    padding: 50px;
    z-index: 1;
}

.new-arrival .box h2{
    margin-bottom: 30px;
}

.recommend-blog{
    background-color: #F5F5F5;
}

.recommend-blog > .container{
    position: relative;
    padding-top: 200px;
}

.recommend-blog > .container:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    background-color: var(--primary-color);
    z-index: 0;
}

.recommend-blog .head{
    position: absolute;
    width: 100%;
    text-align: center;
    color: #FFF;
    top: 30px;
}

.recommend-blog .head p{
    font-size: 20px;
    margin-bottom: 20px;
}

.recommend-blog .head h2{
    margin-bottom: 20px;
}

.recommend-blog .head a{
    color: #FFF;
    font-size: 20px;
    text-decoration: underline;
    transition: 0.5s;
}

.recommend-blog .head a:hover{
    font-size: 25px;
}

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

.recommend-blog .item .img{
    padding-bottom: 80.7%;
}

.recommend-blog .item .text{
    padding: 20px;
    background-color: #FFF;
}

.recommend-blog .item .text .title,
.recommend-blog .item .text .date{
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
}

.recommend-blog .item .text .title{
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.recommend-blog .item .text .title a{
    color: #202020;
}

.recommend-blog .item .text .title a:hover{
    color: var(--primary-color);
}

.recommend-blog .item .text .date{
    color: #666;
}

.recommend-blog .item .text .intro{
    font-family: 'comfortaa-medium',sans-serif;
    color: #999;
    height: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

.recommend-blog .item:hover .text .intro{
    text-decoration: underline;
}

.category-menu-box{
    position: absolute;
    z-index: 10;
    width: calc(100% - 18px);
    top: 0;
    bottom: unset;
    display: block;
}

.category-menu-box.fixed{
    position: fixed;
    top: 150px;
    bottom: unset;
    max-width: calc(16.666667% - 30px);
}

.category-menu-box.position-bottom{
    position: absolute;
    top: unset;
    bottom: 0;
}

.category-menu-box .head{
    background-color: var(--primary-color);
    color: #FFF;
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 20px;
    padding: 10px 20px;
}

.category-menu-box .category-menu{

}

.category-menu .contraction{
    position: absolute;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.category-menu-box .category-menu .floor{
    padding: 10px 0;
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 18px;
    position: relative;
    background-color: #FFF;
}

.category-menu-box .category-menu .floor:last-child{
    padding-top: 5px;
}

.category-menu-box .category-menu .floor.active a{
    color: var(--primary-color);
}

.category-menu-box .category-menu .floor a{
    color: #202020;
}

.category-menu-box .category-menu .floor > a{
    display: block;
    padding: 0 20px;
    width: fit-content;
}

.category-menu-box .category-menu .floor a:hover{
    color: var(--primary-color);
}

.category-menu-box .category-menu .floor ul{
    padding: 10px 0;
    background-color: #F5F5F5;
    margin-top: 10px;
    display: none;
}

.category-menu-box .category-menu .floor ul li{
    padding: 10px 20px;
    font-size: 15px;
    border-bottom: 1px solid #E2E2E2;
}

.category-menu-box .category-menu .floor ul li:last-child{
    padding-bottom: 5px;
    border-bottom: none;
}

/*------------------------------------------------------------------
    Product
------------------------------------------------------------------*/
.product-list .fillter{
    position: relative;
}

.product-list .list{
    padding-left: 45px;
}

.product-list .list > .item{
    padding-bottom: 2rem;
    border-bottom: 1px solid #E2E2E2;
}

.product-list .list > .item:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.product-list .list > .item .category-name{
    font-family: 'comfortaa-bold',sans-serif;
    margin-bottom: 2rem;
}

.product-list .list > .item .intro{
    color: #999;
    line-height: 2;
    margin-bottom: 40px;
}

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

.product-list .list .item .img{
    margin-bottom: 15px;
    cursor: pointer;
}

.product-list .list .item .text{
    font-size: 20px;
    color: #202020;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: all 0.5s;
}

.download-center.product-list .list .item .text{
    text-align: left;
}

.product-list .list .item .intro{
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-list .list .item:hover > .text{
    color: var(--primary-color);
}

.product-2,
.product-6{
    background-color: #FFF;
}

.product-1 .section-title,
.product-2 .section-title,
.product-3 .section-title,
.product-4 .section-title,
.product-5 .section-title,
.product-6 .section-title,
.product-7 .section-title{
    margin-bottom: 40px;
}

#productList .layui-flow-more{
    flex: 100%;
}

.product-1 .layui-flow-more{
    flex: 100%;
}

.product-1 > .container > .row{
    margin-left: -30px;
    margin-right: -30px;
}

.product-1 > .container > .row > div{
    padding-left: 30px;
    padding-right: 30px;
}

.product-1 .item{
    margin-bottom: 3rem;
}

.product-1 .item .img{
    margin-bottom: 15px;
}

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

.product-1 .item .text{
    font-size: 20px;
    color: #202020;
    line-height: 1.5;
    transition: all 0.5s;
}

.product-1 .item:hover .img img{
    transform: scale(1.2);
}

.product-1 .item:hover .text{
    color: var(--primary-color);
}

.product-2 .exp-list,
.product-2 .img-box{
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.product-2 .exp-list{
    max-width: 45%;
    flex: 45%;
}

.product-2 .img-box{
    max-width: 55%;
    flex: 55%;
}

.product-2 .faq-list .question{
    background-color: #EDEDED;
    font-size: 20px;
    color: #202020;
    border-left: none;
}

.product-2 .faq-list .answer{
    background-color: #FFF;
    color: #666;
}

#materialsSwiper .swiper-slide .img{
    padding-bottom: 77.6%;
    opacity: 0;
    transition: all 0.5s;
}

#materialsSwiper .swiper-slide-active .img{
    opacity: 1;
}

#materialsSwiper .swiper-pagination-bullet{
    background-color: #FFF;
}

#materialsSwiper .swiper-pagination-bullet-active{
    background-color: var(--primary-color);
}

.product-3 .item{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.product-3 .item .img{
    order: 1;
    width: 100%;
    max-width: 60%;
    padding-bottom: 36%;
}

.product-3 .item .text{
    order: 2;
    width: 100%;
    max-width: 40%;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: #FFF;
    padding: 0 40px;
}

.product-3 .item .text .title{
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 30px;
    margin-bottom: 20px;
}

.product-3 .item .text .content{
    color: #666;
    line-height: 1.5;
}

.product-3 .item:nth-child(even) .img{
    order: 2;
}

.product-3 .item:nth-child(even) .text{
    order: 1;
}

.product-4 .img{
    padding-bottom: 56.4%;
}

.product-4 .img iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.product-5 .item{
    background-color: #FFF;
    text-align: center;
    font-family: 'comfortaa-bold', sans-serif;
    padding: 30px 20px;
    overflow: hidden;
    margin-bottom: 30px;
    transition: all 0.5s;
}

.product-5 .item .title{
    font-size: 30px;
    line-height: 1.5;
    margin-bottom: 10px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.product-5 .item .content{
    line-height: 1.5;
    margin-bottom: 40px;
    min-height: 90px;
}

.product-5 .item .icon{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.product-5 .item .icon:before{
    position: absolute;
    font-size: 200px;
    color: #666;
    bottom: -45px;
    left: 0;
    opacity: 0.3;
    z-index: 1;
}

.product-5 .item .icon > img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.product-5 .item .icon > span{
    position: absolute;
    font-size: 200px;
    color: #666;
    bottom: -45px;
    left: 0;
    z-index: 1;
    opacity: 0.1;
}

.product-5 .item:hover{
    background-color: var(--primary-color);
    color: #FFF;
}

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

.product-6 > .container{
    position: relative;
    padding-bottom: 60px;
}

.product-6 .swiper-slide{
    text-align: center;
}

.product-6 .swiper-slide .fa{
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.product-6 .swiper-slide .txt{
    width: 80%;
    margin: 0 auto 25px auto;
    line-height: 1.5;
}

.product-6 .swiper-slide .line{
    width: 50px;
    margin: 0 auto;
}

.product-6 .swiper-slide .line hr{
    background-color: var(--primary-color);
    margin-bottom: 25px;
}

.product-6 .swiper-slide .name{
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 20px;
    margin-bottom: 15px;
}

.customer-pagination{
    bottom: 0 !important;
}

.customer-pagination .swiper-pagination-bullet-active{
    background-color: var(--primary-color);
}

.product-detail-1{
    padding-bottom: 0;
}

.product-detail-2{
    padding-top: 0;
    padding-bottom: 0;
}

.product-detail-3{
    padding-top: 0;
}

.product-detail-1 .detail-carousel,
.product-detail-1 .detail-info{
    padding: 0 15px;
    width: 100%;
}

.product-detail-1 .detail-carousel{
    max-width: 45%;
    flex: 45%;
}

.product-detail-1 .detail-info{
    padding-left: 0;
    max-width: 55%;
    flex: 55%;
}

.product-detail-1 .detail-carousel .img{
    padding-bottom: 100%;
    border: 1px solid #F4F4F4;
}

.product-detail-1 .detail-carousel .img iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.product-detail-1 .detail-carousel .thumbs-box{
    position: relative;
    padding: 0 40px;
    margin-top: 1rem;
}

.product-detail-1 .galler-prev,
.product-detail-1 .galler-next{
    position: absolute;
    width: 30px;
    height: 100%;
    background-color: var(--primary-color);
    bottom: 0;
    display: block !important;
    transition: all 0.5s;
    cursor: pointer;
}

.galler-prev{
    left: 0;
}

.galler-next{
    right: 0;
}

.galler-prev i,
.galler-next i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 25px;
    color: #FFF;
}

.product-detail-1 .detail-info .info-box{
    position: relative;
    background-color: #F4F4F4;
    height: 100%;
    padding: 2rem 2rem;
}

.product-detail-1 .detail-info hr{
    margin: 30px 0;
}

.product-detail-1 .detail-info .info-box .title{
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 30px;
    margin-bottom: 1rem;
}

.product-detail-1 .detail-info .info-box .intro{
    height: 300px;
    color: #666;
    line-height: 1.8;
    font-family: 'comfortaa-medium',sans-serif;
    overflow-y: scroll;
}

.product-detail-1 .detail-info .info-box .intro::-webkit-scrollbar{
    width: 4px;
}

.product-detail-1 .detail-info .info-box .intro::-webkit-scrollbar-thumb{
    border-radius: 2px;
    background-color: var(--primary-color);
}

.product-detail-1 .detail-info .info-box .btn-box{
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    width: 100%;
}

#inquiryBtn{
    background-color: var(--primary-color);
    color: #FFF;
    border: none;
    border-radius: 5px;
    padding: 10px 40px;
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 20px;
    margin-right: 5%;
}

.product-detail-1 .social-btn{
    border: none;
    background-color: transparent;
    font-size: 25px;
    width: 40px;
    height: 40px;
}

.product-detail-2 .section-title,
.product-detail-3 .section-title{
    margin-bottom: 40px;
}

.related-products{
    background-color: #FFF;
}

.related-products .section-title{
    margin-bottom: 40px;
}

.related-products .box{
    position: relative;
    padding: 0 80px;
}

.related-products .box .img{
    padding-bottom: 100%;
}

.related-products .box .text{
    font-size: 20px;
    padding: 0 15px;
    margin-top: 10px;
    color: #000;

    transition: 0.5s;
}

.related-products .box .text .title{
    margin-bottom: 10px;
    line-height: 1.5;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.related-products .box .text .param{
    margin-bottom: 10px;
    font-size: 15px;
    color: #666;
}

.related-products .item:hover .text{
    color: var(--primary-color);
}

.related-prev,
.related-next{
    border: none;
    box-shadow: none;
    background-color: transparent;
    font-size: 35px;
    top: 35%;
}

.related-prev i,
.related-next i{
    font-size: 35px;
    transition: all 0.5s;
}

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

.related-prev:hover i,
.related-next:hover i{
    color: var(--primary-color);
}

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

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

/*------------------------------------------------------------------
    Solution
------------------------------------------------------------------*/
.solution-list .item{
    margin-bottom: 3rem;
}

.solution-list .item .img{
    padding-bottom: 70.4%;
    margin-bottom: 20px;
}

.solution-list .item .text{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.solution-list .item .text .title{
    width: calc(100% - 60px);
    margin-right: 20px;
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 20px;
    color: #202020;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    transition: color 0.5s;
}

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

.solution-list .item .text .flag{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.solution-list .item .text .flag img{
    width: 100%;
    height: 100%;
}

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

.article-solution .article-title{
    font-family: 'comfortaa-bold',sans-serif;
    margin-bottom: 30px;
}

.article-solution .img.main-img{
    padding-bottom: 37%;
}

.article-solution .content{
    line-height: 2;
}

.article-solution .detail-item{
    align-items: center;
}

.article-solution .detail-item .img{
    padding-bottom: 58%;
}

.article-solution .detail-item h2{
    margin-bottom: 15px;
    font-family: 'comfortaa-bold', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-solution .detail-item .img-box{
    order: 1;
}

.article-solution .detail-item .text{
    order: 2;
}

.article-solution .detail-item:nth-child(even) .img-box{
    order: 2;
}

.article-solution .detail-item:nth-child(even) .text{
    order: 1;
}

.article-solution .other{
    box-shadow: 0 0 2px 2px rgba(127, 137, 161, 0.3);
    margin-top: 2rem;
}

.article-solution .other h2{
    font-family: 'comfortaa-bold', sans-serif;
}

.article-solution .other .item{
    display: flex;
    padding: 15px 0;
    align-items: center;
}

.article-solution .other .item .img{
    padding-bottom: 23%;
    width: 30%;
}

.article-solution .other .item .text{
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.article-solution .other .item .text a{
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 15px;
    color: #000;
    line-height: 1.8;
}

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

.article-solution .info{
    box-shadow: 0 0 2px 2px rgba(127, 137, 161, 0.3);
    margin-top: 4rem;
    border-bottom: 5px solid var(--primary-color);
}

.article-solution .info .item .field{
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 20px;
    margin: 0;
}

.article-solution .info .item .value{
    font-size: 18px;
    color: #A3A3A3;
    padding: 10px 0;
}

.article-solution .info .social-links{
    padding-top: 1rem;
}

.article-solution .info .social-links img{
    width: 30px;
    height: 30px;
    margin-right: 1rem;
}

/*------------------------------------------------------------------
    News
------------------------------------------------------------------*/
.list-news{
    padding-top: 0;
}

.list-news .list{
    margin-top: 72px;
}

.list-news .list .item{
    height: 200px;
    background-color: #FFF;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 0 2px 2px rgba(156, 156, 156, 0.2);
    margin-bottom: 20px;
    transition: all 0.5s;
}

.list-news .list .item .img{
    width: 100%;
    max-width: 250px;
    padding-bottom: 200px;
}

.list-news .list .item .text{
    width: 100%;
    flex: 57.2%;
    padding: 0 30px;
}

.list-news .list .item .text .title{
    height: 87px;
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 30px;
    line-height: 1.8;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.list-news .list .item .text .title a{
    color: #202020;
}

.list-news .list .item .text .intro{
    font-size: 15px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: all 0.5s;
}

.list-news .list .item .text .more{
    width: 100%;
    max-width: 14.2%;
    flex: 14.2%;
}

.list-news .list .item .more{
    width: 150px;
    height: 100%;
    padding-top: 60px;
}

.list-news .list .item .more a{
    color: #202020;
    font-size: 15px;
    transition: all 0.5s;
}

.list-news .list .item .more .icon{
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
    background: url('/public/static/home/images/detail-more.png') no-repeat;
    background-size: cover;
    transition: all 0.5s;
}

.list-news .list .item .more p{
    font-size: 20px;
}

.list-news .list .item:hover{
    background-color: #F5F5F5;
}

.list-news .list .item:hover .text a,
.list-news .list .item:hover .text .intro{

}

.list-news .list .item:hover .more{
    background-color: #FFF;
}

/*------------------------------------------------------------------
    About
------------------------------------------------------------------*/
.company-carousel .container-fluid{
    padding: 0;
}

.company-carousel .section-title,
.company-history .section-title,
.company-env .section-title,
.company-certificate .section-title,
.company-exhibition .section-title{
    margin-bottom: 50px;
}

#companyCarousel .img{
    padding-bottom: 69.8%;
}

.company-history{
    background-color: #FFF;
}

#history{
    position: relative;
}

#timeLine{
    position: absolute;
    width: 3px;
    border: none;
    background-color: #DDD;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#history .item{
    position: relative;
    width: 45%;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

#history .item:before{
    content: '';
    width: 26px;
    height: 26px;
    background-color: #FFF;
    border: 4px solid #202020;
    border-radius: 50%;
    position: absolute;
}

#history .item:after{
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background-color: #DDD;
    top: 13px;
    transform: translateY(-50%);
}

#history .item:nth-child(odd) {
    margin-left: 55%;
}

#history .item:nth-child(odd):before{
    right: calc(100% + 70px);
}

#history .item:nth-child(odd):after{
    right: calc(100% + 45px);
}

#history .item:nth-child(even){
    margin-right: 55%;
}

#history .item:nth-child(even):before{
    left: calc(100% + 25px);
}

#history .item:nth-child(even):after{
    left: 100%;
}

#history .item .time{
    position: absolute;
    font-size: 20px;
    color: #666;
    background-color: #F5F5F5;
    padding: 10px 15px;
}

#history .item .time:before{
    content: '';
    width: 15px;
    height: 15px;
    background-color: #F5F5F5;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

#history .item:nth-child(odd) .time:before{
    left: calc(100% - 10px);
}

#history .item:nth-child(even) .time:before{
    right: calc(100% - 10px);
}

#history .item .text .title{
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 30px;
    margin-bottom: 20px;
}

#history .item .text .content{
    line-height: 2;
    color: #666;
    text-decoration: underline;
}

#history .item:nth-child(odd) .time{
    top: -7px;
    right: calc(100% + 180px);
}

#history .item:nth-child(even) .time{
    top: -7px;
    left: calc(100% + 70px);
}

#companyEnv .img{
    padding-bottom: 68.5%;
}

#companyEnv .img:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.8);
    z-index: 1;
}

#companyEnv .swiper-slide-active .img:before{
    background-color: transparent;
}

#companyEnv .env-prev,
#companyEnv .env-next{
    position: absolute;
    cursor: pointer;
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 35px;
    z-index: 1;
}

#companyEnv .env-prev i,
#companyEnv .env-next i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: color 0.5s;
}

#companyEnv .env-prev:hover i,
#companyEnv .env-next:hover i{
    color: var(--primary-color);
}

#companyEnv .env-prev{
    left: 590px;
}

#companyEnv .env-next{
    right: 590px;
}

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

.certificate-prev,
.certificate-next{
    position: absolute;
    cursor: pointer;
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 35px;
}

.certificate-prev i,
.certificate-next i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: color 0.5s;
}

.certificate-prev:hover i,
.certificate-next:hover i{
    color: var(--primary-color);
}

.certificate-prev{
    left: 0;
}

.certificate-next{
    right: 0;
}

#companyCertificate .img{
    padding-bottom: 149%;
}

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

#companyExh .img{
    padding-bottom: 72.5%;
}

#companyExh .show-more{
    width: 100%;
}

/*------------------------------------------------------------------
    Download
------------------------------------------------------------------*/
#downloadForm{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    top: 0;
    left: 0;
    z-index: 10;
    padding: 0;
    display: none;
}

#downloadForm.show{
    display: block;
}

#closeDownLoad{
    border: none;
    width: 30px;
    height: 30px;
    font-size: 25px;
    background-color: transparent;
    position: absolute;
    top: 20px;
    right: 20px;
}

#downloadForm > .container{
    height: 100%;
    position: relative;
}

#downloadForm .form{
    position: absolute;
    width: calc(75% - 60px);
    background-color: #FFF;
    box-shadow: 0 0 2px 2px rgba(127, 137, 161, 0.3);
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    padding: 45px;
    border-radius: 8px;
}

#downloadForm .form h2{
    margin-bottom: 40px;
}

#downloadForm .form input{
    width: 32%;
    border: none;
    border-bottom: 1px solid #666;
    background-color: transparent;
    font-size: 12px;
    margin-bottom: 25px;
    height: 35px;
}

#downloadForm .form input[type=checkbox] {
    height: 12px;
    width: unset;
    margin-right: 10px;
}

#downloadForm .form textarea{
    width: 100%;
    border: none;
    border-bottom: 1px solid #666;
    background-color: transparent;
    font-size: 12px;
    margin-bottom: 25px;
    height: 70px;
    resize: none;
}

#downloadForm .form > div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#downloadForm .form .disclaimer{
    font-size: 12px;
}

#downloadForm .form .disclaimer a{
    text-decoration: underline;
}

#downloadForm .form .submit-btn{
    width: unset;
    margin: 20px auto 0 auto;
    border: none;
    font-size: 15px;
    padding: 10px 30px;
}

/*------------------------------------------------------------------
    Video
------------------------------------------------------------------*/
.video{
    font-size: 30px;
    background-color: #F4F4F4;
}

.video .filter-mobile,
.video #productFilter{
    padding: 0;
}

.video #productFilter{
    margin-bottom: 15px;
}

.video .item{
    margin-bottom: 2rem;
    cursor: pointer;
}

.video .item .img{
    padding-bottom: 64.8%;
    margin-bottom: 10px;
}

.video .item .text{
    height: 36px;
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 10px;
}

.video .item .intro{
    height: 28px;
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#videoPlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

#playBox{
    width: 70%;
    height: 70%;
}

#playBox iframe{
    width: 100%;
    height: 100%;
}

/*------------------------------------------------------------------
    Process
------------------------------------------------------------------*/
.production-2{
    background-color: #EEE;
}

.production-2 .section-title{
    margin-bottom: 4rem;
}

.production-2 .process-tab{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.production-2 .process-tab .item{
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 22px;
    background-color: #D4D4D4;
    padding: 15px 0;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.production-2 .process-tab .item>div{
    font-size: 22px;
}

.production-2 .process-tab .item.active{
    background-color: var(--primary-color);
    color: #FFF;
}

.production-2 .process-tab .item>div{
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.production-2 .process-tab .item>div>img {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.production-2 .production-content{
    position: relative;
}

.production-2 .production-content .item{
    display: none;
}

.production-2 .production-content .item.active{
    display: flex;
    flex-wrap: wrap;
}

.production-2 .production-content .item .img{
    width: 54.95%;
    padding-bottom: 35.4%;
    order: 2;
}

.production-2 .production-content .item .img-prev-btn{
    left: 10px;
    z-index: 1;
}

.production-2 .production-content .item .img-next-btn{
    right: 10px;
    z-index: 1;
}

.production-2 .production-content .item .img-prev-btn i,
.production-2 .production-content .item .img-next-btn i{
    font-size: 20px;
}

.production-2 .production-content .item .text{
    width: 45%;
    order: 1;
    background-color: #DBDBDB;
    display: flex;
    align-items: center;
    padding: 0 3rem;
}

.production-2 .production-content .item .text .title{
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 30px;
    margin-bottom: 10px;
}

.production-2 .production-content .item .text .content{
    line-height: 1.5;
    color: #666;
}

.production-2 .production-content .item .text ul li{
    font-family: 'poppins-regular',sans-serif;
    font-size: 18px;
    list-style: inside;
}

.product-3.process .item .text .content{
    margin-bottom: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
}

.product-3.process .item .img{
    order: 1;
}

.product-3.process .item:nth-child(even) .img{
    order: 2;
}

.product-3.process .item .text{
    order: 2;
}

.product-3.process .item .text > div{
    width: 100%;
}

.product-3.process .item:nth-child(even) .text{
    order: 1;
}

/*------------------------------------------------------------------
    Services
------------------------------------------------------------------*/
.services-1 .section-title,
.services-1 .intro{
    margin-bottom: 20px;
}

.services-1 .intro{
    line-height: 1.8;
}

.services-1 .item:first-child{
    margin-top: 100px;
}

.services-1 .item{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-top: 150px;
}

.services-1 .item .img,
.services-1 .item .text{
    width: 100%;
    max-width: 55%;
}

.services-1 .item .img{
    order: 1;
    padding-bottom: 35.6%;
}

.services-1 .item .text{
    order: 2;
    position: absolute;
    top: -15%;
    background-color: #FFF;
    padding: 50px 100px;
    text-align: center;
    display: flex;
    align-items: center;
}

.services-1 .item .text > div{
    width: 100%;
}

.services-1 .item .text .ico{
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
}

.services-1 .item .text .title{
    font-family: 'comfortaa-bold',sans-serif;
    font-size: 30px;
    margin-bottom: 15px;
}

.services-1 .item .text .content{
    height: 135px;
    color: #666;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.services-1 .item:nth-child(odd) .img{
    margin-left: 45%;
}

.services-1 .item:nth-child(even) .img{
    order: 2;
}

.services-1 .item:nth-child(even) .text{
    order: 1;
    right: 15px;
}

.services-2 .content{
    line-height: 1.8;
    color: #666;
    margin-bottom: 40px;
}

.services-2 .row > div{
    margin-bottom: 30px;
}

.services-2 .img{
    padding-bottom: 69%;
}

/*------------------------------------------------------------------
    Contact
------------------------------------------------------------------*/
.contact-1{
    color: #FFF;
    padding-bottom: 0;
}

.contact-1 .row > div{
    padding: 50px;
}

.contact-1 .row > div:nth-child(1) {
    background-color: #5b8095;
}

.contact-1 .row > div:nth-child(2){
    background-color: #727374;
}

.contact-1 .title{
    font-size: 20px;
    margin-bottom: 15px;
}

.contact-1 .title i{
    font-size: 35px;
    margin-right: 15px;
}

.contact-1 .phone{
    font-size: 30px;
    margin-bottom: 20px;
}

.contact-1 button{
    border: none;
    background-color: #FFF;
    color: #5b8095;
    padding:10px 15px;
    margin-top: 20px;
}

.contact-2{
    padding: 0;
}

.contact-2 .container{
    background-color: #FFF;
    padding: 20px;
    height: 500px;
}

#companyAddress{
    width: 100%;
    height: 100%;
}

.contact-3{
    padding-top: 0;
}

.contact-3 .row > div:nth-child(1) {
    padding: 50px 0 50px 50px;
}

.contact-3 .row > div:nth-child(1) > div{
    padding-right: 50px;
    border-right: 1px solid #202020;
}

.contact-3 .row > div:nth-child(2) {
    padding: 50px 50px 50px 0;
}

.contact-3 .row > div:nth-child(2) > div{
    padding-left: 50px;
}

.contact-3 .title{
    font-size: 30px;
    margin-bottom: 15px;
}

.contact-3 .content{
    line-height: 1.5;
    color: #666;
}

/*------------------------------------------------------------------
    FAQ
------------------------------------------------------------------*/
.faq-list{
    list-style: none;
    font-size: 20px;
    text-align: left;
    padding: 0;
}

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

.faq-list .question{
    position: relative;
    background-color: #FFF;
    color: #202020;
    padding: 1rem 2rem;
    border-left: 3px solid var(--primary-color);
}

.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: #F5F5F5;
    padding: 15px 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;
}

@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 .text{
        left: 45px;
        top: 50%;
        transform: translateY(-50%);
    }

    .banner .text .title{
        font-size: 25px;
    }

    .filter-mobile{
        display: block;
    }

    .recommend-blog > .container{
        padding-top: 240px;
    }

    .filter-mobile{
        display: block;
    }

/*------------------------------------------------------------------
    Product
------------------------------------------------------------------*/
    .product-list .fillter{
        display: none;
    }

    .product-2 .exp-list,
    .product-2 .img-box{
        max-width: 100%;
        flex: 100%;
    }

    .product-2 .exp-list{
        order: 2;
    }

    .product-2 .img-box{
        order: 1;
        margin-bottom: 15px;
    }

    .product-5 .item .title{
        height: 90px;
    }

    .product-detail-1 .detail-carousel,
    .product-detail-1 .detail-info{
        max-width: 100%;
        flex: 100%;
    }

    .product-detail-1 .detail-info{
        padding: 0;
    }

    .product-detail-1 .detail-info .info-box{
        padding: 2rem 1rem;
    }

    .product-detail-1 .detail-info .info-box .btn-box{
        left: 1rem;
    }

/*------------------------------------------------------------------
    Solution
------------------------------------------------------------------*/
    .article-solution .detail-item{
        margin-top: 2rem;
    }

    .article-solution .detail-item h2{
        font-size: 25px;
        margin-top: 1rem;
    }

    .article-solution .other{
        padding: 2rem;
    }

    .article-solution .other .item .text{
        padding-left: 2rem;
    }

    .article-solution .info{
        padding: 2rem;
    }

    .article-solution .detail-item .img-box,
    .article-solution .detail-item:nth-child(even) .img-box{
        order: 1;
    }

    .article-solution .detail-item .text,
    .article-solution .detail-item:nth-child(even) .text{
        order: 2;
    }

    /*------------------------------------------------------------------
        News
    ------------------------------------------------------------------*/
    .list-news .list .item .text{
        flex: 40%;
    }

    .list-news .list .item .text .title{
        height: 77px;
        font-size: 20px;
    }

    /*------------------------------------------------------------------
        process
    ------------------------------------------------------------------*/

    .production-2{
        padding-top: 5rem;
    }

    .production-2 .process-tab{
        margin-top: 3rem;
    }

    .production-2 .process-tab .item{
        width: calc(50% - 5px);
        max-width: 50%;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    /*.production-2 .process-tab .item>div{
        width: 60px;
        height: 60px;
    }*/

    .production-2 .process-tab .item>div>img{
        width: 65%;
        height: 65%;
    }

    .production-2 .production-content .item .img{
        order: 1;
        width: 100%;
        padding-bottom: 64%;
    }

    .production-2 .production-content .item .text{
        order: 2;
        width: 100%;
        padding: 1rem;
    }

    /*------------------------------------------------------------------
        History
    ------------------------------------------------------------------*/
    #timeLine{
        left: 167px;
    }

    #history .item{
        width: 60%;
    }

    #history .item:nth-child(even){
        margin-left: 250px;
        margin-right: 0;
    }

    #history .item:nth-child(even):before {
        right: calc(100% + 70px);
        left: unset;
    }

    #history .item:nth-child(even):after {
        left: unset;
        right: calc(100% + 45px);
    }

    #history .item:nth-child(odd) {
        margin-left: 250px;
    }

    #history .item:nth-child(odd) .time{
        left: -260px;
        right: unset;
    }

    #history .item:nth-child(even) .time{
        right: unset;
        left: -260px;
    }

    #history .item:nth-child(even) .time:before{
        right: unset;
        left: calc(100% - 7px);
    }

    #companyEnv .env-prev {
        left: 210px;
    }

    #companyEnv .env-next {
        right: 210px;
    }

    .services-1 .item .text{
        padding: 30px 40px;
    }

    .video .category-menu-box{
        display: none;
    }

    #playBox{
        width: 75%;
        height: 40%;
    }

    .product-list .list{
        padding-left: 15px;
    }

    #downloadForm .form{
        width: calc(100% - 30px);
    }
}

@media (min-width: 992px) {
    #broadsideForm{
        width: 400px;
    }

    .recommend-blog > .container{
        padding-top: 200px;
    }

    .filter-mobile{
        display: none;
    }

    /*------------------------------------------------------------------
        Product
    ------------------------------------------------------------------*/
    .product-list .fillter{
        display: block;
    }

    .product-2 .exp-list{
        order: 1;
        flex: 45%;
        max-width: 45%;
    }

    .product-2 .img-box{
        order: 2;
        flex: 55%;
        max-width: 55%;
        margin-bottom: 0;
    }

    .product-detail-1 .detail-carousel {
        max-width: 45%;
        flex: 45%;
    }

    .product-detail-1 .detail-info {
        padding-left: 0;
        max-width: 55%;
        flex: 55%;
    }

    .product-detail-1 .detail-info .info-box{
        padding: 2rem;
    }

    .product-detail-1 .detail-info .info-box .btn-box{
        left: 2rem;
    }
/*------------------------------------------------------------------
    Solution
------------------------------------------------------------------*/
    .article-solution .other{
        padding: 1rem;
    }

    .article-solution .other h2{
        font-size: 25px;
    }

    .article-solution .other .item .text{
        padding-left: 1rem;
    }

    .article-solution .info{
        padding: 1rem;
    }

    .article-solution .detail-item h2{
        margin-top: 0;
        font-size: 20px;
    }

    .article-solution .detail-item{
        margin-top: 2rem;
    }

    .article-solution .detail-item:nth-child(even) .img-box{
        order: 2;
    }

    .article-solution .detail-item:nth-child(even) .text{
        order: 1;
    }
    /*------------------------------------------------------------------
        News
    ------------------------------------------------------------------*/
    .list-news .list .item .text .title {
        height: 90px;
        font-size: 25px;
    }

    /*------------------------------------------------------------------
    Process
    ------------------------------------------------------------------*/
    .production-2 .process-tab{
        margin-top: 3rem;
    }

    .production-2 .process-tab .item{
        max-width: calc(16.66666% - 5px);
        border-radius: 8px 8px 0 0;
        margin-bottom: 0;
    }

    /*.production-2 .process-tab .item>div{
        width: 70px;
        height: 70px;
    }*/

    .production-2 .process-tab .item>div>img{
        width: 65%;
        height: 65%;
    }

    #companyEnv .env-prev {
        left: 300px;
    }

    #companyEnv .env-next {
        right: 300px;
    }

    .video .category-menu-box{
        display: block;
    }

    #playBox {
        width: 70%;
        height: 70%;
    }

    .product-list .list{
        padding-left: 45px;
    }
}

@media (min-width: 1200px) {
    section{
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .container{
        max-width: 1230px;
    }

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

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

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

    #placeholderBox{
        height: 110px;
    }

    #header{
        height: 110px;
        padding: 20px 0;
    }

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

    .main-nav{
        display: block;
    }

    .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 .text{
        top: 50%;
        left: calc((100% - 1170px) / 2);
        width: 35%;
        transform: translateY(-50%);
    }

    .banner .text .title{
        font-size: 30px;
    }
/*------------------------------------------------------------------
    Solution
------------------------------------------------------------------*/
    .article-solution .other{
        padding: 2rem;
    }

    .article-solution .other h2{
        font-size: 30px;
    }

    .article-solution .info{
        padding: 2rem;
    }

    .article-solution .detail-item h2{
        font-size: 30px;
    }

    .article-solution .detail-item{
        margin-top: 3rem;
    }

    /*------------------------------------------------------------------
    Process
    ------------------------------------------------------------------*/
    .production-2{
        padding-top: 5rem;
    }

    .production-2 .process-tab{
        margin-top: 5rem;
    }

    /*.production-2 .process-tab .item>div{
        width: 80px;
        height: 80px;
    }*/

    .production-2 .process-tab .item>div>img{
        width: 70%;
        height: 70%;
    }

    .production-2 .production-content .item .img{
        order: 2;
        width: 54.95%;
        padding-bottom: 35.4%;
    }

    .production-2 .production-content .item .img .img{
        padding-bottom: 75.4%;
    }

    .production-2 .production-content .item .text{
        order: 1;
        width: 45%;
        padding: 0 3rem;
    }

    /*------------------------------------------------------------------
        History
    ------------------------------------------------------------------*/
    #timeLine{
        left: 50%;
    }

    #history .item{
        width: 40%;
    }

    #history .item:nth-child(odd) {
        margin-left: 60%;
    }

    #history .item:nth-child(even){
        margin-right: 60%;
        margin-left: unset;
    }

    #history .item:nth-child(odd):before{
        right: calc(100% + 107px);
    }

    #history .item:nth-child(odd):after{
        right: calc(100% + 82px);
    }

    #history .item:nth-child(even):before{
        left: calc(100% + 107px);
    }

    #history .item:nth-child(even):after{
        left: calc(100% + 82px);
    }

    #history .item:nth-child(odd) .time{
        left: -320px;
        right: unset;
    }

    #history .item:nth-child(even) .time{
        left: calc(100% + 180px);
        right: unset;
    }

    #history .item:nth-child(even) .time:before{
        right: calc(100% - 10px);
        left: unset;
    }

    #companyEnv .env-prev {
        left: 590px;
    }

    #companyEnv .env-next {
        right: 590px;
    }

    .services-1 .item .text{
        padding: 50px 100px;
    }

    #downloadForm .form{
        width: calc(75% - 60px);
    }
}

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

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

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

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

    #placeholderBox{
        height: 50px;
    }

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

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

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

    .mobile-nav-toggle i{
        margin: 10px 15px 0 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 .text{
        position: relative;
        width: calc(100% - 30px);
        color: #202020;
        top: unset;
        left: unset;
        transform: unset;
        border-bottom: 1px solid #EFEFEF;
        margin: 0 auto;
    }

    .banner .text .title{
        font-size: 25px;
        position: absolute;
        top: -160px;
    }

    .banner .text .intro{
        color: #202020;
        margin: 10px 0;
    }

    .pagination{
        padding-top: 2rem;
    }

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

    #broadsideForm{
        width: 280px;
        bottom: calc(100% - 350px);
    }

    .recommend-blog .head{
        width: unset;

    }

    .filter-mobile{
        display: block;
    }

    .index-about{
        padding-top: 2rem;
    }

    .index-about .img .index-about-bg{
        top: -8px;
        left: -10px;
    }

    .index-about > .container > .row > div:nth-child(1){
        margin-bottom: 30px;
    }

    .new-arrival .img,
    .new-arrival .box{
        position: relative;
    }

    .new-arrival .img{
        margin-bottom: 20px;
    }

    .new-arrival .box{
        top: unset;
        left: unset;
        transform: none;
    }

    /*------------------------------------------------------------------
        Product
    ------------------------------------------------------------------*/
    .product-1 > .container > .row{
        margin-left: -15px;
        margin-right: -15px;
    }

    .product-2 .exp-list,
    .product-2 .img-box{
        max-width: 100%;
        flex: 100%;
    }

    .product-2 .exp-list{
        order: 2;
    }

    .product-2 .img-box{
        order: 1;
        margin-bottom: 15px;
    }

    .product-3 .item .img,
    .product-3 .item .text{
        max-width: 100%;
        flex: 100%;
    }

    .product-3 .item .img{
        order: 1 !important;
    }

    .product-3 .item .text{
        padding: 20px;
        order: 2 !important;
    }

    .product-detail-1 .detail-carousel,
    .product-detail-1 .detail-info{
        max-width: 100%;
        flex: 100%;
    }

    .product-detail-1 .detail-info{
        padding: 0;
    }

    .product-detail-1 .detail-info .info-box{
        padding: 2rem 1rem;
    }

    .product-detail-1 .detail-info .info-box .btn-box{
        left: 1rem;
    }

    /*------------------------------------------------------------------
        Solution
    ------------------------------------------------------------------*/
    .article-solution .detail-item{
        margin-top: 1rem;
        padding-bottom: 1rem;
    }

    .article-solution .detail-item .detail-title{
        font-size: 20px;
        padding-top: 1rem;
        margin-bottom: 10px;
    }

    .article-solution .detail-item .detail-content{
        line-height: 1.5;
    }

    .article-solution .other{
        padding: 1rem;
    }

    .article-solution .other h2{
        font-size: 25px;
        margin-bottom: 0;
    }

    .article-solution .other .item .text{
        padding-left: 1rem;
    }

    .article-solution .info{
        margin-top: 1rem;
        padding: 1rem;
    }

    .article-solution .detail-item .img-box,
    .article-solution .detail-item:nth-child(even) .img-box{
        order: 1;
    }

    .article-solution .detail-item .text,
    .article-solution .detail-item:nth-child(even) .text{
        order: 2;
    }

    /*------------------------------------------------------------------
        News
    ------------------------------------------------------------------*/
    .list-news .list .item{
        height: unset;
    }

    .list-news .list .item .img{
        max-width: 100%;
        flex: 100%;
        max-height: unset;
        padding-bottom: 80%;
    }

    .list-news .list .item .text{
        width: 75%;
        margin: 0;
        padding: 10px;
    }

    .list-news .list .item .text .title{
        height: 70px;
        font-size: 20px;
    }

    .list-news .list .item .more{
        width: 25%;
        margin: 0;
        padding: 10px;
    }

    /*------------------------------------------------------------------
        Process
    ------------------------------------------------------------------*/
    .product-list .category-menu-box{
        display: none;
    }

    .product-list .list{
        padding-left: 15px;
    }

    .production-2 .section-title{
        margin-bottom: 2rem;
        display: none;
    }

    .production-2 .process-tab{
        margin-top: 0;
        flex-wrap: wrap;
    }

    .production-2 .process-tab .item{
        width: calc(50% - 5px);
        max-width: 50%;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .production-2 .process-tab .item>div{
        font-size: 18px;
    }

    .production-2 .process-tab .item>div>img{
        width: 65%;
        height: 65%;
    }

    .production-2 .production-content .item .img{
        order: 1;
        width: 100%;
        padding-bottom: 64.6%;
    }

    .production-2 .production-content .item .img-prev-btn,
    .production-2 .production-content .item .img-next-btn{
        top: 50%;
    }

    .production-2 .production-content .item .text{
        order: 2;
        width: 100%;
        padding: 1rem;
    }

    .production-2 .production-content .item .text .title{
        font-size: 25px;
    }

    .services-1 .item .img,
    .services-1 .item .text{
        position: relative;
    }

    .services-1 .item:first-child{
        margin-top: 0;
    }

    .services-1 .item{
        margin-top: 0;
        margin-bottom: 30px;
    }

    .services-1 .item:nth-child(odd) .img{
        margin-left: 0;
    }

    .services-1 .item .img{
        max-width: 100%;
        padding-bottom: 65.3%;
        order: 1 !important;
    }

    .services-1 .item .text{
        max-width: 100%;
        padding: 20px;
        top: unset;
        order: 2 !important;
    }

    .services-1 .item:nth-child(even) .text{
        right: unset;
    }

    .services-1 .item .text .content{
        height: unset;
        -webkit-line-clamp: unset;
    }

    /*------------------------------------------------------------------
        History
    ------------------------------------------------------------------*/
    #timeLine{
        display: none;
    }

    #history .item {
        width: 100%;
        margin: 0 0 30px 0 !important;
        padding-top: 60px;
    }

    #history .item:before,
    #history .item:after{
        display: none !important;
    }

    #history .item .time{
        top: 0 !important;
        right: unset !important;
        left: 0 !important;
    }

    #history .item:nth-child(even){
        margin-left: 250px;
        margin-right: 0;
    }

    #history .item:nth-child(even):before {
        right: calc(100% + 70px);
        left: unset;
    }

    #history .item:nth-child(even):after {
        left: unset;
        right: calc(100% + 45px);
    }

    #history .item:nth-child(odd) {
        margin-left: 250px;
    }

    #history .item:nth-child(even) .time{
        right: calc(100% + 115px);
        left: unset;
    }

    #history .item .text .title{
        font-size: 20px;
    }

    .video .category-menu-box{
        display: none;
    }

    #playBox {
        width: 80%;
        height: 40%;
    }

    #downloadForm .form{
        width: calc(100% - 30px);
    }

    #downloadForm .form h2{
        font-size: 20px;
        margin-bottom: 20px;
    }

    #downloadForm .form input{
        width: 100%;
    }

    #downloadForm .form input[type=checkbox] {
        height: 12px;
        width: unset;
        margin-right: 10px;
        margin-bottom: 0;
    }

    .company-carousel,
    .company-history,
    .company-env,
    .company-certificate,
    .company-exhibition{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}