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

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

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

@font-face {
    font-family: 'poppins-regular';
    src: url("../../font/POPPINS-REGULAR.TTF");
}
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root{
    --primary-color: #364964;
    --secondary-color: #F08200;
    --aux-color-light:#80CEF3;
    --aux-color-dark:#232323;
    --primary-bg-color:#DFF0FA;
}

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

body {
    background: #FFF;
}

a{
    color: #D0D0D0;
}

input,
textarea,
button{
    outline: none;
}

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

textarea:hover,
textarea:focus,
textarea:active{
    outline: none;
}

select:hover,
select:focus,
select:active{
    outline: none;
}

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

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

@media (min-width: 1201px) {
    .container{
        max-width: 1265px;
    }
}

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

.section-title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 40px;
    color: #202020;
    margin-bottom: 1rem;
}

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

.article-title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 40px;
    margin-bottom: 20px;
}

.prev-btn,
.next-btn {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    box-shadow: 0 0 2px 2px rgba(201, 201, 201, 0.5);
    background-color: var(--primary-color);
    transform: translateY(-50%);
    transition: all 0.3s;
    color: #FFF;
}

.prev-btn:hover,
.next-btn:hover{
    background: var(--secondary-color);
    cursor: pointer;
    color: #FFF;
}

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

.prev-btn {
    top: 50%;
    left: 0;
}

.next-btn {
    top: 50%;
    right: 0;
}


.more-btn{
    font-size: 20px;
    color: #FFF;
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
}

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

.layui-form-select dl dd.layui-this{
    background-color: var(--primary-color) !important;
}

.social-link{
    display: flex;
    margin-top: 2rem;
}

.social-link .social-item{
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin-right: 1rem;
    transition: all 0.5s;
}

.social-link .social-item i {
    font-size: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #FFF;
}

.social-link .social-item:hover{
    background-color: #FFF;
}

.social-link .social-item:hover i{
    color: var(--primary-color);
}

.form{
    position: relative;
    display: block;
    width: 100%;
    max-width: 1265px;
    margin: 0 auto;
    padding: 0 15px;
}

#formSpecial1,#formSpecial2,#formSpecial3{
    display: none;
}

#formSpecial1.show,
#formSpecial2.show,
#formSpecial3.show{
    display: flex;
}

.form.show{
    /*display: block;*/
}

.form .content{
    background: url("../../home/images/bg/form/bg.jpg") no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
}

.form .content .left{
    padding: 25px 4rem 25px 25px;
}

.form .left p{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    line-height: 2;
}

.form .left span{
    color: red;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
}

.form-category{
    display: none;
    justify-content: space-between;
    margin-top: 4rem;
}

.form-category.show{
    display: flex;
}

.form-category .item{
    width: 31%;
    position: relative;
    cursor: pointer;
    transition: all 0.5s;
}

.form-category .item .img{
    padding-bottom: 100%;
}

.form-category.big .item .img{
    padding-bottom: 140%;
}

.form-category .item .text{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    font-family: 'poppins-bold',sans-serif;
    font-size: 20px;
    color: #FFF;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgba(235,235,235,0.6);
}

.form-category .item.active .text{
    background-color: rgba(1,64,153,0.6);
}

.form .content .right{
    padding: 25px 25px 25px 0;
}

.form .content .right .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    margin-bottom: 2.5rem;
}

.form .content .right input,
.form .content .right select,
.form .content .right textarea{
    width: 100%;
    border: 1px solid #EFEFEF;
    font-family: 'poppins-light',sans-serif;
    color: #999;
    padding-left: 1rem;
    font-size: 13px;
}

.form .content .right input,
.form .content .right select{
    height: 45px;
    margin-bottom: 10px;
}

.form .content .right textarea{
    resize: none;
    margin-bottom: 10px;
    padding: 1rem;
}

.form .content .right button{
    width: 100%;
    border: none;
    background-color: var(--primary-color);
    color: #FFF;
    font-family: 'poppins-medium',sans-serif;
    height: 45px;
    transition: all 0.5s;
}

.form .content .right button:hover{
    background-color: var(--secondary-color);
}

.search-select{
    position: relative;
    padding-right: 30px;
    font-size: 15px;
    color: #999;
}

.search-select-option-box{
    width: calc(100% - 30px);
    height: 200px;
    position: absolute;
    top: calc(100% - 10px);
    background-color: #FFF;
    overflow-y: scroll;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.search-select-option-box.show{
    opacity: 1;
    visibility: visible;
}

.search-select-option-box::-webkit-scrollbar{
    width: 4px;
}

.search-select-option-box::-webkit-scrollbar-thumb{
    border-radius: 2px;
    background-color: var(--primary-color);
}

.search-select-option{
    padding: 5px 15px;
    color: #999;
    cursor: pointer;
}

.search-select-option:hover{
    background-color: var(--primary-color);
    color: #FFF;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.pagination p{
    margin:0;
    cursor:pointer
}
.pagination{
    justify-content:center;
    display: flex;
    padding-top: 80px;
    padding-bottom: 20px;
}
.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;
    font-family: 'poppins-medium',sans-serif;
    line-height:38px;
}
.pagination a:hover{
    color:#fff;
    background: var(--primary-color);
    border:1px var(--primary-color) solid;
}
.pagination a.cur{
    border:none;
    background:var(--primary-color);
    color:#fff;
}
.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:0px;
    padding:4px 0px;
    color:#666;
}
.pagination p.pageRemark b{
    color:red;
}
.pagination p.pageEllipsis{
    border-style:none;
    background:none;
    padding:4px 0px;
    color:#808080;
}

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

.banner.mobile{
    display: none;
}

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

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

.banner .text{
    position: absolute;
}

.banner .text .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    color: #FFF;
    margin-bottom: 1rem;
}

.banner .text .intro{
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
    color: #FFF;
    line-height: 2;
}

/*--------------------------------------------------------------
# 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: 135px;
    transition: background 0.5s;
    z-index: 11;
}

.back-to-top i {
    padding-top: 12px;
    color: #fff;
}

/*--------------------------------------------------------------
# Recommend Products
--------------------------------------------------------------*/
.related-products{
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.related-products .section-title{
    padding-bottom: 4rem;
}

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

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

.related-products .box .text{
    font-family: "poppins-medium",sans-serif;
    font-size: 15px;
    text-align: center;
    padding: 0 15px;
    margin: 10px 0;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    transition: 0.5s;
}

.related-products .item .img img{
    transition: all 0.3s;
}

.related-products .item:hover .img img{
    transform: scale(1.1);
}

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

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

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

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header{
    background-color: transparent;
    z-index: 999;
    padding: 20px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.5s;
}

#header.header-scrolled{
    background-color: #FFF;
    box-shadow: 0 0 30px rgba(127, 137, 161, 0.3);
}

#header.header-scrolled .main-nav.home-page a{
    color: #202020;
}

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

/*--------------------------------------------------------------
# Top Navigation Menu
--------------------------------------------------------------*/
.main-nav{
    display: none;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
}
.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 a {
    display: block;
    position: relative;
    color: #000;
    padding: 0 35px;
    transition: 0.3s;
    /*text-transform: uppercase;*/
}

.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;
    border-top: 5px solid var(--primary-color);
}

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

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

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

.main-nav .drop-down li:hover{
    background-color: var(--primary-color);
}

.main-nav .drop-down li:hover a{
    color: #FFF !important;
}

.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: "\f0d7";*/
    content: '';
    font-family: FontAwesome;
    padding-left: 10px;
}

.main-nav ul>li>i{
    position: absolute;
    bottom: 0;
    left: 50%;
    opacity: 0;
    color: var(--primary-color);
    font-size: 15px;
}

.main-nav ul>li:hover i{
    opacity: 1;
}

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

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

.main-nav .flag,
.mobile-nav .flag{
    margin-right: 1rem;
}

.main-nav.home-page a{
    color: #FFF;
}

/* Mobile Navigation */

.mobile-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 9999;
    overflow-y: auto;
    left: -260px;
    width: 260px;
    padding-top: 18px;
    background: linear-gradient(to right,#0681CC,#014099);
    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 .drop-down.active > ul{
    display: block;
}

.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: #065e77;
}

.mobile-nav-overly {
    width: 100%;
    height: 100%;
    z-index: 9997;
    top: 0;
    left: 0;
    position: fixed;
    background: rgba(4, 98, 180, 0.5);
    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;
}

.mobile-nav-active .mobile-nav .fa-sort-desc{
    display: none !important;
}

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

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

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

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

.footer .item{
    padding-left: 15px;
    padding-right: 15px;
    width: 20%;
}

.footer .item h3{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    margin-bottom: 20px;
}

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

.footer .item p{
    margin-bottom: 0.5rem;
}

.footer .social-links{
    display: flex;
    padding-top: 5rem;
}

.footer .social-links .social-item{
    position: relative;
    width: 35px;
    height: 35px;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin-right: 1rem;
    transition: all 0.5s;
}

.footer .social-links .social-item i{
    font-size: 20px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    color: #FFF;
}

.footer .social-links .social-item:hover{
    cursor: pointer;
    background-color: #FFF;
}

.footer .social-links .social-item:hover i{
    color: var(--primary-color);
}

.footer .item a{
    font-family: "poppins-medium",sans-serif;
    font-size: 14px;
    color: #BBB;
    transition: 0.5s;
}

.footer .item a:hover{
    color: #FFF;
    text-decoration: underline;
}

.footer .item input,
.footer .item textarea,
.footer .item button{
    border: none;
    width: 100%;
}

.footer .item input{
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 10px;
}

.footer .item textarea{
    margin-top: 5px;
    resize: none;
    height: 100px;
    padding-left: 10px;
    padding-top: 5px;
}

.footer .item button{
    height: 35px;
    font-size: 12px;
    font-family: "poppins-medium",sans-serif;
    margin-top: 5px;
    background-color: #FFF;
    color: #202020;
    outline: none;
}

.footer .item.item-2,
.footer .item.item-3{
    width: 15%;
}

.footer .item-4,
.footer .item-5{
    width: 15%;
}

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

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

.mobile-footer .item{
    width: 100%;
}

.mobile-footer .item a{
    color: #FFF;
}

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

.mobile-footer .other{
    border-top: 1px solid #EFEFEF82;
    padding-top: 1rem;
    margin-top: 1rem;
    text-align: center
}

.mobile-footer .other a{
    color: #FFF;
}

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

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

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

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

.index-carousel .text{
    position: absolute;
    width: 45%;
    height: 100%;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
}

.index-carousel-mobile .text{
    position: absolute;
    top: 4rem;
    left: 0;
    width: 100%;
    text-align: center;
}

.index-carousel .text .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 40px;
    color: #FFF;
    margin-bottom: 20px;
}

.index-carousel-mobile .text .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 25px;
    color: #FFF;
    margin-bottom: 20px;
}

.index-carousel .text .intro{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #FFF;
    margin-bottom: 5px;
}

.index-carousel-mobile .text .intro{
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    color: #FFF;
    margin-bottom: 5px;
}

.index-carousel .text .link-btn{
    border: 2px solid #FFF;
    background-color: transparent;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #FFF;
    padding: 5px 20px;
    border-radius: 5px;
    margin-top: 3rem;
    transition: all 0.5s;
}

.index-carousel-mobile .text .link-btn{
    border: 2px solid #FFF;
    background-color: transparent;
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 1rem;
    transition: all 0.5s;
}

.index-carousel .text .link-btn:hover,
.index-carousel-mobile .text .link-btn:hover{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.index-carousel-pagination{
    text-align: left;
}

.index-carousel-pagination .swiper-pagination-bullet{
    width: 80px;
    height: 6px;
    border-radius: unset;
    background-color: #FFF;
}

.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{
    margin-top: 0;
    padding: 0;
}

.index-about .img.main{
    padding-bottom: 34%;
}

.company-advantage{
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: var(--primary-color);
}

.company-advantage .advantage-box{
    display: flex;
    flex-wrap: wrap;
}

.company-advantage .advantage-box .item{
    padding: 0 0 1rem 0;
    width: 20%;
    text-align: center;
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
}

.company-advantage .advantage-box .item .ico{
    width: 30%;
    display: flex;
    align-items: center;
}

.company-advantage .advantage-box .item .ico,
.company-advantage .advantage-box .item .num{
    /*margin-bottom: 10px;*/
}

.company-advantage .advantage-box .item .txt{
    font-family: 'poppins-bold',sans-serif;
    font-size: 25px;
    color: #FFF;
    width: 70%;
    text-align: left;
}

.company-advantage .advantage-box .item .num{
    font-weight: bold;
    font-size: 20px;
}

.company-advantage .advantage-box .item .text{
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
    color: #FFF;
}

.product-category{
    padding: 4rem 0 0;
}

.product-category .section-title{
    margin: 0;
}

.product-category .big{
    position: relative;
    padding-top: 1rem;
}

.product-category .big .img{
    padding-bottom: 29%;
}

.product-category .big .text{
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
}

.product-category .big .text .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 35px;
    color: var(--aux-color-dark);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
}

.product-category .big .text .intro{
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    color: var(--aux-color-dark);
    white-space: nowrap;
    overflow: hidden;
}

.product-category .big .text button{
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    background-color: #FFF;
    margin-top: 25px;
    border: none;
    height: 40px;
    padding: 0 30px;
    border-radius: 20px;
    transition: all 0.5s;
}

.product-category .big .text button:hover{
    background-color: var(--secondary-color);
    color: #FFF;
}

.product-category .small-box .container{
    padding-left: 0;
    padding-right: 0;
}

.product-category .small-box .row{
    padding-left: 8px;
    padding-right: 8px;
}

.product-category .small-box .item{
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

.product-category .small-box .item:hover .text,
.product-category .small-box .item:focus .text,
.product-category .small-box .item:active .text {
    bottom: 0 !important;
    transition: all 0.8s;
}

.product-category .small-box .item .img{
    padding-bottom: 51%;
}

.product-category .small-box .item .mobile-img{
    padding-bottom: 135%;
    display: none;
}

.product-category .small-box .item .text{
    position: absolute;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.6);
    width: calc(100% - 16px);
    padding: 5px 15px;
    bottom: 0;
    transition: all 0.8s;
}

.product-category .small-box .item .text .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 25px;
    color: #FFF;
}

.product-category .small-box .item .text .intro{
    font-size: 20px;
    color: #FFF;
    transition: all 0.5s;
}

.company-main-business{
    display: block;
    position: relative;
    padding: 4rem 0 0;
}

.company-main-business .section-title{
    margin: 0;
}

.company-main-business .bg-box{
    padding-top: 1rem;
    position: relative;
}

.company-main-business-mobile{
    display: none;
}

.company-main-business .main-business{
    width: 40%;
}

.company-main-business .main-business .item{
    display: none;
}

.company-main-business .main-business .item.active{
    display: block;
}

.company-main-business .img{
    display: none;
    padding-bottom: 33.3%;
    opacity: 0;
}

.company-main-business .img.active{
    display: block;
    opacity: 1;
}

.company-main-business .main-business .item .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 35px;
    color: #FFF;
    white-space: nowrap;
}

.company-main-business .main-business .item .intro{
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    color: #FFF;
    line-height: 2;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.company-main-business .main-business .item .more a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #FFF;
    text-decoration: underline;
    transition: all 0.5s;
}

.company-main-business .main-business .item .more a:hover{
    color: var(--secondary-color);
}

.company-main-business ul{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}

.company-main-business ul li{
    font-family: 'poppins-medium',sans-serif;
    font-size: 1rem;
    color: #FFF;
    padding: 0 1rem 5px 1rem;
    border-bottom: 5px solid #FFFFFF50;
    cursor: pointer;
}

.company-main-business ul li:hover{
    text-decoration: underline;
}

.company-main-business ul li.active{
    border-color: #FFF;
}

.company-main-business .content-box{
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100%;
    height: calc(100% - 1rem);
}

.index-1{
    padding-top: 1rem;
}
.index-1 .row{
    padding-left: 8px;
    padding-right: 8px;
}

.index-1 .item{
    position: relative;
    padding-left: 8px;
    padding-right: 8px;
}

.index-1 .item:hover .text .more{
    transform: scale(1);
}

.index-1 .item .img{
    padding-bottom: 51.2%;
}

.index-1 .item .mobile-img{
    padding-bottom: 135%;
    display: none;
}

.index-1 .item .text{
    position: absolute;
    width: calc(100% - 16px);
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
}

.index-1 .item .text .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    color: #FFF;
}

.index-1 .item .text .more{
    transform: scale(0.9);
    transition: all 0.5s;
    white-space: nowrap;
}

.index-1 .item .text .more a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #FFF;
    text-decoration: underline;
    font-weight: normal;
}

.index-news-list .section-title{
    margin-bottom: 4rem;
}

.index-news-list .item{
    box-shadow: 0 0 2px 2px rgba(201,201,201,0.5);
    margin-bottom: 1rem;
}

.index-news-list .item .img{
    padding-bottom: 75%;
}

.index-news-list .item .text{
    padding: 10px 15px;
}

.index-news-list .item .text .title{
    text-align: left;
    height: 60px;
    margin: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.index-news-list .item .text .title a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #202020;
}

.index-news-list .item .text .title:hover a{
    color: var(--primary-color);
    text-decoration: underline;
}

.index-news-list .item .text .intro{
    text-align: left;
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
}

.index-news-list .item .text .date{
    text-align: left;
    font-family: 'poppins-regular',sans-serif;
    font-size: 14px;
    color: #202020;
    margin-top: 20px;
}

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

.products .filter{
    margin-top: 1rem;
    width: 25%;
    display: block;
}

.products .filter-mobile{
    display: none;
}

.products .list{
    width: 72%;
    padding-left: 3%;
}

.products .filter-title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    background-color: #fff;
    padding: 0 1rem;
    margin: 10px 0;
    border-left: 3px solid var(--primary-color);
}

.products .filter .level-1 li{
    background-color: #F4F4F4;
    padding: 10px 1rem;
}

.products .filter .level-1 li a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    color: #202020;
    transition: 0.5s;
}

.products .filter .level-1 li a:hover{
    color: var(--primary-color);
}

.products .filter .level-1 li.active{
    background-color: var(--primary-color);
}

.products .filter .level-1 li.active a{
    color: #FFF;
}

.products .filter .level-2 li:first-child{
    border-top:none;
}

.products .filter .level-2 li{
    background-color: #FFF;
    border-top: 1px solid #F4F4F4;
    border-left: 1px solid #F4F4F4;
    border-right: 1px solid #F4F4F4;
}

.products .filter .level-2 li a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 12px;
    color: #999;
}

.products .filter .level-2 li a:hover{
    text-decoration: underline;
}

.products .filter .level-2 li.active{
    background-color: #057FCA;
}

.products .filter .level-2 li.active a{
    color: #FFF;
}

.products .list .item{
    margin-top: 1rem;
}

.products .list .item img{
    transition: all 0.3s;
}

.products .list .item:hover img{
    transform: scale(1.1);
}

.products .list .item:hover .text .title{
    text-decoration: underline;
}

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

.products .list .text{
    height: 36px;
    padding: 0 20px;
    margin: 10px 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.products .list .text .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    color: #202020;
}

.products .list .item:hover .text>.title{
    transition: all 0.5s;
    color: var(--primary-color);
}

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

.product-detail-1 .left{
    max-width: 50%;
    flex: 50%;
    padding-left: 0;
    padding-right: 30px;
}

.product-detail-1 .right{
    max-width: 50%;
    flex: 50;
}

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

.gallery-prev,
.gallery-next{
    position: absolute;
    width: 30px;
    height: 100%;
    background-color: #F4F4F4;
    bottom: 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    display: block !important;
    transition: all 0.5s;
}

.gallery-prev{
    left: 0;
}

.gallery-next{
    right: 0;
}

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

.gallery-prev:hover,
.gallery-next:hover{
    background-color: var(--primary-color);
    color: #FFF;
    cursor: pointer;
}

.thumbs-box .swiper-slide .img{
    border: 1px solid transparent;
}

.thumbs-box .swiper-slide.swiper-slide-thumb-active .img{
    border-color: var(--primary-color);
}

.product-detail-1 .right{
    position: relative;
    background-color: #F3F3F3;
    padding: 40px 30px 10px 30px;
}

.product-detail-1 .right .title{
    height: 90px;
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    margin-bottom: 2rem;
    color: #202020;
    border-bottom: 1px solid #CDCDCD;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.product-detail-1 .right .intro{
    height: 300px;
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
    overflow-y: scroll;
    /*text-overflow: ellipsis;*/
    /*display: -webkit-box;*/
    /*-webkit-box-orient: vertical;*/
    /*-webkit-line-clamp:6;*/
}

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

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

.product-detail-1 .right .download{
    position: relative;
    padding: 0 60px;
    margin-top: 80px;
}

.product-detail-1 .right .download .item{
    background-color: #FFF;
    border-radius: 8px;
    padding: 10px;
}

.product-detail-1 .right .download .item .title{
    height: 46px;
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    margin-bottom: 10px;
    border: none;
}

.product-detail-1 .right .download .item .ext{
    font-family: 'poppins-regular',sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
}

.product-detail-1 .right .download .item .ico{
    font-size: 12px;
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid #535353;
    border-radius: 10px;
}

.product-detail-1 .right .download .item .ico i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #535353;
}

.download-prev,
.download-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 60%;
    display: block !important;
    background-color: #E1E1E1;
    font-size: 25px;
    cursor: pointer;
    transition: all 0.5s;
}

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

.download-prev{
    left: 0;
}

.download-next{
    right: 0;
}

.download-prev i,
.download-next i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

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

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

.product-detail-2 .detail-tab .item{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #202020;
    text-align: center;
    background-color: #E1E1E1;
    padding: 20px 0;
    cursor: pointer;
}

.product-detail-2 .detail-tab .item.active{
    color: var(--primary-color);
    background-color: #F4F4F4;
}

.detail-tab-content-box>div{
    background-color: #F4F4F4;
    display: none;
    padding: 3rem 4rem;
}

.detail-tab-content-box>div{
    overflow-x: auto;

}

.detail-tab-content-box>div.active{
    display: block;
}

.detail-tab-content-box img,
.detail-tab-content-box table{
    max-width: 100% !important;
}

.detail-tab-content-box table{
    word-break: break-word;
}

.about-menu{
    display: flex;
    position: fixed;
    top: 50%;
    right: -185px;
    transition: all 0.5s;
    z-index: 99;
}

.about-menu.show{
    right: 0;
}

.about-menu .ico{
    width: 50px;
    height: 50px;
    padding: 8px;
    background-color: #FFF;
    cursor: pointer;
}

.about-menu .ico img{
    width: 100%;
    height: 100%;
}

.about-menu .menu{
    position: relative;
    width: 185px;
    padding: 20px 25px;
    background-color: #FFF;
}

.about-menu .menu .close{
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 15px;
}

.about-menu .menu ul{
    padding-left: 14px;
    border-left: 1px solid;
    margin: 0;
}

.about-menu .menu ul li{
    padding: 3px 0;
}

.about-menu .menu ul li a{
    font-family: 'poppins-regular',sans-serif;
    font-size: 12px;
    color: #666;
    transition: all 0.5s;
}

.about-menu .menu ul li a:hover{
    color: var(--primary-color);
}

.about-menu .menu ul li.active a{
    color: var(--primary-color);
}

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

.company-info .section-title{
    margin-bottom: 20px;
}

.company-info .video iframe{
    width: 100%;
    height: 400px;
}

.company-info .text{
    padding-left: 3rem;
}

.company-info .text .intro{
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
    color: #202020;
    line-height: 2;
    margin-bottom: 20px;
}

.company-info .text button{
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    background-color: var(--primary-color);
    color: #FFF;
    padding: 5px 15px;
    border-radius: 5px;
    border: none;
    transition: all 0.5s;
}

.company-info .text button:hover{
    background-color: var(--secondary-color);
}

.company-carousel{
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.company-carousel .img{
    padding-bottom: 66.6%;
}

.vr-show{
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}

.vr-show > .container{
    position: relative;
    padding: 0 15px;
}

.vr-show .img{
    padding-bottom: 18.5%;
}

.vr-show .content {
    width: calc(100% - 30px);
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background-color: rgba(1,64,153,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vr-show .content .section-title{
    color: #FFF;
    margin-bottom: 1rem;
}

.vr-show .content button{
    border: none;
    background-color: var(--secondary-color);
    padding: 5px 30px;
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    color: #FFF;
    border-radius: 5px;
    transition: all 0.5s;
}

.vr-show .content button:hover{
    transform: scale(1.2);
}

.enterprise-culture{
    margin-top: 1rem;
    padding: 0;
    position: relative;
}

.enterprise-culture .container{
    position: relative;
}

.enterprise-culture .mask{
    padding-left: calc((100% - 1200px) / 2 + 15px);
    padding-right: 50px;
    width: 62.5%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 15px;
    background-color: rgba(0,0,0,0.5);
    color: #FFF;
    display: flex;
    align-items: center;
}

.enterprise-culture .mask .section-title{
    color: #FFF;
    margin-bottom: 2rem;
}

.enterprise-culture .mask .content ul{
    padding-left: 0;
    margin: 0;
}

.enterprise-culture .mask .content ul li{
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
    margin-bottom: 20px;
}

/*--------------------------------------------------
    Milestones
--------------------------------------------------- */
.milestones{
    margin-top: 1rem;
}

.milestones > .container{
    padding-top: 41.6%;
    position: relative;
}

.milestones .content{
    position: absolute;
    top: 0;
    left: 15px;
    width: calc(100% - 30px);
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    background-image: url("../../home/images/bg/about/milestones.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.milestones .left,
.milestones .right{
    height: 100%;
}

.milestones .left{
    width: 18%;
    background-color: rgba(1,64,153,0.6);
    display: flex;
    align-items: center;
}

.milestones .right{
    width: 82%;
    background-color: rgba(0,0,0,0.6);
    position: relative;
    padding:150px 5%;
}

.milestones .left .section-title{
    color: #FFF;
    text-align: center;
    width: 100%;
}

#milestonesSwiper{
    max-height: 100%;
}

#milestonesSwiper .line{
    height: 100%;
    width: 1px;
    background-color: #FFF;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 10px;
}

#milestonesSwiper .swiper-slide{
    color: #FFF;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    display: flex;
    align-items: center;
}

#milestonesSwiper .swiper-slide .text{
    position: relative;
    padding-left: 30px;
}

#milestonesSwiper .swiper-slide .text:before{
    position: absolute;
    content: "";
    top: 50%;
    left: 5px;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    background-color: #ffffff;
    border-radius: 50%;
}

#milestonesSwiper .swiper-slide.year{
    font-family: 'poppins-medium',sans-serif;
}

#milestonesSwiper .swiper-slide.year .text{
    font-size: 40px;
}

#milestonesSwiper .swiper-slide.year .text:before{
    width: 16px;
    height: 16px;
    left: 3px;
}

.milestones-prev,
.milestones-next{
    position: absolute;
    color: #FFF;
    font-size: 50px;
    left: 5.8%;
}

.milestones-prev{
    top: 50px;
}

.milestones-next{
    bottom: 50px;
}

.culture-wall .img{
    padding-bottom: 72.5%;
}

.culture-wall .culture-wall-box{
    position: relative;
}

.swiper-wrapper{
    -webkit-transition-timing-function: linear !important;    /*之前是ease-out*/
    -moz-transition-timing-function: linear !important;
    -ms-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

.swiper-pagination-progressbar{
    background: rgba(1,64,153,0.3);
}

.swiper-pagination.culture-wall-pagination{
    position: absolute;
    bottom: 0;
    top: unset;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
    background-color: rgba(1,64,153,1);
}

.exporting-countries{
    padding-top: 0;
}

.exporting-countries > .container{
    position: relative;
}

.exporting-countries .content{
    background-image: url("../../home/images/bg/about/map.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

.exporting-countries .content .text-box{
    padding: 1rem 0 1rem 3rem;
}

.exporting-countries .content .num{
    font-family: 'poppins-medium',sans-serif;
    color: var(--primary-color);
}

.exporting-countries .content .text{
    font-family: 'poppins-medium',sans-serif;
}

.partners .section-title{
    margin-bottom: 30px;
}

.partners{
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.partners .item{
    margin-top: 1rem;
}

.partners .item .img{
    padding-bottom: 50%;
}

.partners .item .text{
    margin-top: 1rem;
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    text-align: center;
    height: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.service-team .section-title{
    text-align: center;
    margin-bottom: 3rem;
}

.service-team{
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.service-team .item{
    margin-top: 2rem;
}

.service-team .item .img{
    padding-bottom: calc(100% - 8rem);
    border-radius: 50%;
    width: calc(100% - 8rem);
    margin: 0 auto;
}

.service-team .item .text{
    text-align: center;
}

.service-team .item .text .name{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    margin: 20px 0 0 0;
}

.service-team .item .text .intro{
    height: 90px;
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
    margin: 20px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:4;
}

.history-exhibition{
    padding-top: 0;
    padding-bottom: 0;
}

.history-exhibition .content-box{
    background-color: #F4F4F4;
    padding-top: 3rem;
}

.history-exhibition .section-title{
    margin-bottom: 3rem;
}

.history-exhibition .section-intro{
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
    width: 80%;
    margin: 0 auto 3rem auto;
}

.history-exhibition .map{
    position: relative;
}

.map-mark{
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    border: 2px solid #FFF;
    cursor: pointer;
    animation: animated-border 1.5s infinite;/*边框扩散效果*/
}

/*边框扩散效果*/
@keyframes animated-border {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
}
/*边框扩散效果*/

.map-mark:hover .partner-box{
    visibility: inherit;
    opacity: 1;
}

.map-mark .partner-box{
    position: absolute;
    top: -165px;
    left: -75px;
    background-color: #FFF;
    border-radius: 50%;
    z-index: 2;
    width: 150px;
    height: 150px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
}

.map-mark .partner-box img{
    width: 100%;
    height: 100%;
}

.history-exhibition .map .map-mark-cn{
    top: 36%;
    right: 20%;
}

/*俄罗斯*/
.history-exhibition .map .map-mark-ru{
    top: 20%;
    right: 19%;
}

/*埃及*/
.history-exhibition .map .map-mark-eg{
    top: 41%;
    right: 41.5%;
}
/*伊朗*/
.history-exhibition .map .map-mark-ir{
    top: 38%;
    right: 35%;
}

/*土耳其*/
.history-exhibition .map .map-mark-tr{
    top: 34%;
    right: 41%;
}

/*澳大利亚*/
.history-exhibition .map .map-mark-au{
    top: 70%;
    right: 15%;
}

/*日本*/
.history-exhibition .map .map-mark-jp{
    top: 34%;
    right: 13%;
}

/*韩国*/
.history-exhibition .map .map-mark-kr{
    top: 35.5%;
    right: 16.5%;
}

/*泰国*/
.history-exhibition .map .map-mark-th{
    top: 48%;
    right: 22.5%;
}

/*印尼*/
.history-exhibition .map .map-mark-id{
    top: 59%;
    right: 18%;
}

/*德国*/
.history-exhibition .map .map-mark-de{
    top: 27%;
    right: 47%;
}

/*美国*/
.history-exhibition .map .map-mark-us{
    top: 36%;
    right: 84%;
}

/*加拿大*/
.history-exhibition .map .map-mark-ca{
    top: 28%;
    right: 82%;
}

/*巴西*/
.history-exhibition .map .map-mark-br{
    top: 64%;
    right: 70%;
}

.strength{
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.strength .section-title{
    text-align: center;
    margin-bottom: 2rem;
}

.strength-category{
    display: flex;
    flex-wrap: wrap;
    background-color: #F4F4F4;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 5rem;
}

.strength-category > div{
    padding: 10px 0;
    width: 25%;
    cursor: pointer;
}

.strength-category > div:hover{
    text-decoration: underline;
}

.strength-category > div.active{
    background-color: var(--primary-color);
    color: #FFF;
    font-family: 'poppins-bold',sans-serif;
}

.strength-category-content .carousel-box{
    padding: 0 80px;
    position: relative;
    display: none;
}

.strength-category-content .carousel-box.active{
    display: block;
}

.strength-category-content .carousel-box .img{
    padding-bottom: 112.2%;
}

#honor .img{
    padding-bottom: 61.5%;
}

.industry-benchmark{
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}

.industry-benchmark .content-box{
    background-color: #F4F4F4;
    padding-top: 3rem;
}

.industry-benchmark .industry-benchmark-box{
    position: relative;
    padding: 0 15px 4rem 15px;
}

.industry-benchmark .industry-benchmark-box .industry-benchmark-pagination{
    width: calc(100% - 30px);
    left: 15px;
}

.industry-benchmark .section-title{
    text-align: center;
    margin-bottom: 3rem;
}

.industry-benchmark .img{
    padding-bottom: 66.6%;
}

.industry-benchmark .text{
    height: 75px;
    text-align: center;
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    margin-top: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
}

.industry-benchmark-pagination{
    top: unset !important;
    bottom: 30px;
    left: 15px;
}

.oem-business{
    padding: 0;
}

.oem-business > .container{
    padding: 0 15px;
    position: relative;
}

.oem-business .content{
    width: calc(100% - 30px);
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background-color: rgba(1,64,153,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.oem-business .content .text{
    width: 41%;
}

.oem-business .content .section-title,
.oem-business .content .section-intro{
    color: #FFF;
    margin-bottom: 1rem;
}

.oem-business .content .section-intro{
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
}

.oem-business .content button{
    border: none;
    background-color: var(--secondary-color);
    padding: 5px 30px;
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    color: #FFF;
    border-radius: 5px;
    transition: all 0.5s;
}

.oem-business .content button:hover{
    transform: scale(1.2);
}

.factory-1{
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.factory-1 .left{
    position: relative;
}

.factory-1 .left .img{
    padding-bottom: 62%;
}

.factory-1 .left .mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.5s;
}

.factory-1 .left .mask img{
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
}

.factory-1 .left:hover .mask{
    opacity: 1;
}

.factory-1 .left .mask p{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    margin-top: 1rem;
    color: #FFF;
}

.factory-1 .right .box{
    display: flex;
    flex-wrap: wrap;
}

.factory-1 .right .box .item{
    width: 50%;
    padding: 30px 40px;
    border: 2px solid transparent;
    text-align: center;
}

.factory-1 .right .box .item.upper-left{
    border-right: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}

.factory-1 .right .box .item.upper-right{
    border-left: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}

.factory-1 .right .box .item.left-lower{
    border-top: 1px solid var(--primary-color);
    border-right: 1px solid var(--primary-color);
}

.factory-1 .right .box .item.right-lower{
    border-top: 1px solid var(--primary-color);
    border-left: 1px solid var(--primary-color);
}

.factory-1 .right .box .item .num{
    font-family: 'poppins-medium',sans-serif;
    font-size: 40px;
    color: var(--primary-color);
}

#workshop .img{
    /*padding-bottom: 51%;*/
    padding-bottom: 64%;
}

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

.factory-prev:after{
    content: "\f053";
    font-family: FontAwesome;
    font-size: 25px;
}

.factory-next:after{
    content: "\f054";
    font-family: FontAwesome;
    font-size: 25px;
}

.factory-2{
    padding-top: 0;
    padding-bottom: 4rem;
}

.factory-2 .row{
    background-color: #F4F4F4;
    margin: 0;
    align-items: center;
}

.factory-2 .carousel{
    padding-left: 2rem;
    padding-right: 0;
}

.factory-2 .text{
    display: flex;
    align-items: center;
    padding: 2rem 1rem 2rem 2rem;
}

.factory-2 .text .intro{
   line-height: 2;
}

.factory-3{
    padding-top: 0;
    padding-bottom: 0;
}

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

.factory-3 .section-title{
    text-align: center;
    margin-bottom: 4rem;
}

.factory-3 .item .img{
    padding-bottom: 55.3%;
}

.factory-3 .item .text{
    height: 60px;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    text-align: center;
    margin-top: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.factory-4{
    padding-top: 0;
    padding-bottom: 0;
}

.factory-4 > .container > div{
    background-color: #F4F4F4;
    padding: 2rem 1rem;
}

.factory-4 .section-title{
    text-align: center;
    margin-bottom: 4rem;
}

.factory-4 .carousel-box{
    position: relative;
    padding: 0 100px;
}

.factory-4 .carousel-box .img{
    padding-bottom: 58.6%;
}

.factory-4 .carousel-box .text{
    height: 60px;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    text-align: center;
    margin-top: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.factory-5{
    padding: 0;
}

.factory-5 > .container{
    padding: 0 15px;
    position: relative;
}

.factory-5 .img{
    padding-bottom: 18.5%;
}

.factory-5 .content{
    width: calc(100% - 30px);
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background-color: rgba(1,64,153,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.factory-5 .content .text{
    width: 41%;
}

.factory-5 .content .section-title,
.factory-5 .content .section-intro{
    color: #FFF;
    margin-bottom: 1rem;
}

.factory-5 .content .section-intro{
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
}

.factory-5 .content button{
    border: none;
    background-color: var(--secondary-color);
    padding: 5px 30px;
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    color: #FFF;
    border-radius: 5px;
    transition: all 0.5s;
}

.factory-5 .content button:hover{
    transform: scale(1.2);
}

.oem-1,.odm-1{
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.oem-1 button,
.odm-1 button{
    border: none;
    color: #FFF;
    border-radius: 5px;
    font-size: 20px;
    padding: 8px 20px;
    margin-top: 4rem;
    transition: all 0.5s;
}

.oem-1 button{
    background-color: var(--primary-color);
}

.oem-1 button:hover{
    background-color: var(--secondary-color);
}

.odm-1 button{
    background-color: var(--secondary-color);
}

.odm-1 button:hover{
    background-color: var(--primary-color);
}

.oem-1 .section-title,
.odm-1 .section-title{
    text-align: center;
    margin-bottom: 2rem;
}

.oem-1 .box,
.odm-1 .box{
    display: flex;
    flex-wrap: wrap;
}

.oem-1 .box .item,
.odm-1 .box .item{
    width: 11%;
    margin: 0 0.75% 15px 0.75%;
    box-shadow: 0 0 2px 2px rgba(201,201,201,0.6);
    text-align: center;
    padding: 30px 8px;
    transition: all 0.5s;
}

.oem-1 .box .item:hover{
    background-color: var(--primary-color);
}

.odm-1 .box .item:hover{
    background-color: var(--secondary-color);
}

.oem-1 .box .item:hover .text,
.odm-1 .box .item:hover .text{
    color: #FFF;
}

.oem-1 .box .item .icon,
.odm-1 .box .item .icon{
    width: 44px;
    height: 44px;
    margin: 0 auto 10px auto;
}

.oem-1 .box .item-1 .icon{
    background: url("../../home/images/icon/oem/1.png");
}

.odm-1 .box .item-1 .icon{
    background: url("../../home/images/icon/odm/1.png");
}

.oem-1 .box .item-1:hover .icon{
    background: url("../../home/images/icon/oem/1-light.png");
}

.odm-1 .box .item-1:hover .icon{
    background: url("../../home/images/icon/odm/1-light.png");
}

.oem-1 .box .item-2 .icon{
    background: url("../../home/images/icon/oem/2.png");
}

.odm-1 .box .item-2 .icon{
    background: url("../../home/images/icon/odm/2.png");
}

.oem-1 .box .item-2:hover .icon{
    background: url("../../home/images/icon/oem/2-light.png");
}

.odm-1 .box .item-2:hover .icon{
    background: url("../../home/images/icon/odm/2-light.png");
}

.oem-1 .box .item-3 .icon{
    background: url("../../home/images/icon/oem/3.png");
}

.odm-1 .box .item-3 .icon{
    background: url("../../home/images/icon/odm/3.png");
}

.oem-1 .box .item-3:hover .icon{
    background: url("../../home/images/icon/oem/3-light.png");
}

.odm-1 .box .item-3:hover .icon{
    background: url("../../home/images/icon/odm/3-light.png");
}

.oem-1 .box .item-4 .icon{
    background: url("../../home/images/icon/oem/4.png");
}

.odm-1 .box .item-4 .icon{
    background: url("../../home/images/icon/odm/4.png");
}

.oem-1 .box .item-4:hover .icon{
    background: url("../../home/images/icon/oem/4-light.png");
}

.odm-1 .box .item-4:hover .icon{
    background: url("../../home/images/icon/odm/4-light.png");
}

.oem-1 .box .item-5 .icon{
    background: url("../../home/images/icon/oem/5.png");
}

.odm-1 .box .item-5 .icon{
    background: url("../../home/images/icon/odm/5.png");
}

.oem-1 .box .item-5:hover .icon{
    background: url("../../home/images/icon/oem/5-light.png");
}

.odm-1 .box .item-5:hover .icon{
    background: url("../../home/images/icon/odm/5-light.png");
}

.oem-1 .box .item-6 .icon{
    background: url("../../home/images/icon/oem/6.png");
}

.odm-1 .box .item-6 .icon{
    background: url("../../home/images/icon/odm/6.png");
}

.oem-1 .box .item-6:hover .icon{
    background: url("../../home/images/icon/oem/6-light.png");
}

.odm-1 .box .item-6:hover .icon{
    background: url("../../home/images/icon/odm/6-light.png");
}

.oem-1 .box .item-7 .icon{
    background: url("../../home/images/icon/oem/7.png");
}

.odm-1 .box .item-7 .icon{
    background: url("../../home/images/icon/odm/7.png");
}

.oem-1 .box .item-7:hover .icon{
    background: url("../../home/images/icon/oem/7-light.png");
}

.odm-1 .box .item-7:hover .icon{
    background: url("../../home/images/icon/odm/7-light.png");
}

.oem-1 .box .item-8 .icon{
    background: url("../../home/images/icon/oem/8.png");
}

.odm-1 .box .item-8 .icon{
    background: url("../../home/images/icon/odm/8.png");
}

.oem-1 .box .item-8:hover .icon{
    background: url("../../home/images/icon/oem/8-light.png");
}

.odm-1 .box .item-8:hover .icon{
    background: url("../../home/images/icon/oem/8-light.png");
}

.oem-1 .box .item .text,
.odm-1 .box .item .text{
    font-family: 'poppins-medium',sans-serif;
}

.oem-2{
    padding-top: 0;
    padding-bottom: 0;
}

.oem-2 > .container > div{
    padding: 1rem;
    background-color: #F4F4F4;
}

.oem-2 .section-title{
    text-align: center;
    margin-bottom: 2rem;
}

.oem-2 .category .category-name{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
}

.oem-2 .category .category-name::after{
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.oem-2 .category .item{
    margin-bottom: 1rem;
    cursor: pointer;
}

.oem-2 .category .item .img{
    padding-bottom: 59.6%;
}

.oem-2 .category .item .text{
    height: 60px;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #202020;
    margin-top: 1rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.oem-2 .category .item .img img{
    transition: all 0.5s;
}

.oem-2 .category .item:hover .img img{
    transform: scale(1.2);
}

.oem-3{
    padding: 0;
}

.oem-3 > .container{
    padding: 0 15px;
    position: relative;
}

.oem-3 .content{
    width: calc(100% - 30px);
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background-color: rgba(1,64,153,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.oem-3 .content .text{
    width: 50%;
}

.oem-3 .content .section-title,
.oem-3 .content .section-intro{
    color: #FFF;
    margin-bottom: 1rem;
}

.oem-3 .content .section-intro{
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
}

.oem-3 .content button{
    border: none;
    background-color: var(--secondary-color);
    padding: 5px 30px;
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    color: #FFF;
    border-radius: 5px;
    transition: all 0.5s;
}

.oem-3 .content button:hover{
    transform: scale(1.2);
}

.oem-iframe{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: #FFFFFF60;
    visibility: hidden;
}

.oem-iframe.show{
    visibility: inherit;
}

.oem-iframe .box{
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 700px;
    background-color: #FFF;
    width: 100%;
    max-width: 1236px;
    box-shadow: 0 0 2px 2px rgba(201,201,201,0.6);
    padding: 4rem 2rem;
    display: flex;
}

.oem-iframe .box .close{
    position: absolute;
    top: 1rem;
    left: 1rem;
    cursor: pointer;
}

.oem-iframe .box .left{
    width: 65%;
    height: 100%;
    padding: 0 2rem;
    overflow: hidden;
}

.oem-iframe .box .left .img{
    padding-bottom: 51.3%;
}

.oem-iframe .box .left .text{
    font-size: 20px;
    line-height: 1.5;
    margin-top: 2rem;
}

.oem-iframe .box .right{
    width: 35%;
    height: 100%;
    padding: 6rem 2rem;
    position: relative;
}

.oem-iframe .box .right button{
    border: none;
    background-color: var(--primary-color);
    font-size: 25px;
    color: #FFF;
    width: 100%;
    height: 100%;
}

.oem-iframe .box .right .prev-btn{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.oem-iframe .box .right .next-btn{
    top: unset;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.oem-iframe .box .right .swiper-slide-thumb-active button{
    background-color: var(--secondary-color);
}

.service-process .img{
    padding-bottom: 25.3%;
}

.service-process button{
    margin-top: 5rem;
    background-color: var(--secondary-color);
    color: #FFF;
    border: none;
    padding: 8px 20px;
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    border-radius: 5px;
}

.service-process-content .img{
    padding-bottom: 55%;
}

.service-process-content .text{
    display: flex;
    align-items: center;
    line-height: 2;
}

.odm-3{
    padding: 0;
}

.odm-3 > .container{
    padding: 0 15px;
    position: relative;
}

.odm-3 .content{
    width: calc(100% - 30px);
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background-color: rgba(240,130,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.odm-3 .content .text{
    width: 50%;
}

.odm-3 .content .section-title,
.odm-3 .content .section-intro{
    color: #FFF;
    margin-bottom: 1rem;
}

.odm-3 .content .section-intro{
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
}

.odm-3 .content button{
    border: none;
    background-color: var(--primary-color);
    padding: 5px 30px;
    font-family: 'poppins-regular',sans-serif;
    font-size: 20px;
    color: #FFF;
    border-radius: 5px;
    transition: all 0.5s;
}

.odm-3 .content button:hover{
    transform: scale(1.2);
}

.download-center-filter{
    padding-top: 5rem;
    padding-bottom: 0;
}

.download-center-filter .section-title{
    margin-bottom: 3rem;
}

.download-center-filter .search-keywords{
    padding: 20px 50px;
    display: flex;
    background-color: var(--primary-color);
}

.download-center-filter .search-keywords input{
    width: calc(100% - 70px);
    height: 70px;
    font-size: 20px;
    padding-left: 15px;
    border: none;
    color: #999;
}

.download-center-filter .search-keywords button{
    width: 70px;
    height: 70px;
    background-color: #FFF;
    border: none;
    font-size: 35px;
    line-height: 70px;
}

.download-center-filter .search-option{
    padding: 20px 50px;
    background-color: #F4F4F4;
    display: flex;
    flex-wrap: wrap;
}

.download-center-filter .search-option .item{
    position: relative;
    width: 25%;
}

.search-option .item.reset{
    width: 15%;
}

.search-option .item.series-select{
    width: 35%;
}

.download-center-filter .search-option .item select{
    width: 95%;
    height: 50px;
    border-color: #B5B5B5;
    color: #999;
    padding-left: 15px;
}

#resetSearch{
    border: 1px solid #B5B5B5;
    height: 50px;
    width: 100%;
    display: none;
    font-family: 'poppins-medium',sans-serif;
}

#resetSearch.show{
    display: block;
}

.search-result{
    padding-top: 1rem;
    padding-bottom: 9rem;
}

.search-result .layui-flow-more{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.search-result .list{
    padding: 0 55px;
}

.search-result .result-count{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
}

.search-result .list .even{
    background-color: #F4F4F4;
}

.search-result .list th{
    position: relative;
    background-color: var(--primary-color);
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #FFF;
    padding: 15px 20px;
    font-weight: unset;
}

.search-result .list th .sort-ico{
    margin-left: 10px;
    cursor: pointer;
}

.search-result .list th .sort-ico.active:before{
    content: '\f107' !important;
}


.search-result .list td{
    font-family: 'poppins-medium',sans-serif;
    font-weight: unset;
    padding: 15px 20px;
}

.search-result .list button{
    border: none;
    background-color: var(--primary-color);
    border-radius: 5px;
    color: #FFF;
    font-size: 20px;
    margin-top: 2rem;
    padding: 8px 20px;
    transition: all 0.5s;
}

.search-result .list button:hover{
    background-color: #F08200;
}

#cancelBtn{
    position: relative;
    border-radius: unset;
    border: 2px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    padding-right: 40px;
    margin-top: 0;
    margin-bottom: 10px;
    display: none;
}

#cancelBtn.show{
    display: initial;
}

#cancelBtn:after{
    content: '×';
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    position: absolute;
    color: var(--primary-color);
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

#downloadBtn{
    border-radius: unset;
    border: 2px solid var(--primary-color);
    margin-top: 0;
    margin-bottom: 10px;
    display: none;
}

#downloadBtn.show{
    display: initial;
}

#downloadForm{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
}

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

#downloadForm .form{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 4rem;
    background: unset;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
    text-align: center;
}

#downloadForm .form input{
    width: 100%;
    height: 45px;
    margin-bottom: 1rem;
    padding-left: 10px;
    font-family: 'poppins-light',sans-serif;
    font-size: 13px;
    border: 1px solid #EFEFEF;
}

#downloadForm .form .title{
    font-family: 'poppins-medium',sans-serif;
    margin-bottom: 2rem;
}

#downloadForm .form .tips{
    text-align: left;
    margin-bottom: 1rem;
}

#downloadFormSubBtn{
    border: none;
    background-color: var(--primary-color);
    color: #FFF;
    width: 100%;
    height: 45px;
    transition: all 0.5s;
}

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

#closeDownloadForm{
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: none;
    background-color: transparent;
    font-size: 25px;
    transition: all 0.5s;
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.service .row{
    background-color: #F4F4F4;
}

.service .img{
    padding-bottom: 68%;
}

.service .text{
    display: flex;
    align-items: center;
    padding: 0 50px
}

.service .text .intro{
    font-size: 20px;
    line-height: 2;
    margin-bottom: 3rem;
}

.service .text .section-title a{
    font-size: 40px;
    color: #202020;
}

.service .text .link{
    font-size: 20px;
    color: #202020;
    transition: all 0.5s;
    line-height: 35px;
}

.service .text .link:hover{
    color: var(--primary-color);
    text-decoration: underline;
    font-size: 22px;
}

.faq-list{
    list-style: none;
    font-family: 'poppins-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: 10px 2rem;
}

.faq-list .collapsed .question::after{
    content: '\f107';
    font-family: FontAwesome;
}

.faq-list .question::after{
    content: '\f106';
    font-family: FontAwesome;
    position: absolute;
    right: 2rem;
    font-size: 20px;
}

.faq-list .answer{
    background-color: #FFF;
    padding: 10px 2rem;
    font-family: 'poppins-medium',sans-serif;
}

.faq .more-btn{
    background-color: var(--primary-color);
    transition: all 0.5s;
}

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

.contact .text{
    height: calc(100% - 7px);
    background-color: var(--primary-color);
    padding: 3rem;
}

.contact .text .section-title{
    color: #FFF;
}

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

.contact .text .item .ico{
    margin-right: 15px;
}

.contact .text .item .text{
    padding: 0;
    color: #FFF;
    line-height: 2;
    font-family: 'poppins-medium',sans-serif;
    font-weight: unset;
}

.news-category-tab{
    padding-top: 5rem;
}

.news-category-tab .section-title{
    margin-bottom: 3rem;
}

.news-category-tab .box{
    display: flex;
    flex-wrap: wrap;
}

.news-category-tab .box .item{
    width: 25%;
    padding: 0 10px;
    margin-bottom: 10px;
}

.news-category-tab .box .tab-item{
    width: 100%;
    text-align: center;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #202020;
    background-color: #FFF;
    border: 1px solid #F4F4F4;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
}

.news-category-tab .box .tab-item.active{
    background-color: var(--primary-color);
    color: #FFF;
}

.news-list{
    padding-top: 0;
}

.news-list .item{
    display: flex;
    padding: 1rem 0;
    border-bottom: 1px solid #DCDCDC;
}

.news-list .item:last-child{
    border: none;
}

.news-list .item .img{
    width: 23%;
    padding-bottom: 17.5%;
}

.news-list .item .img img{
    transition: all 0.3s;
}

.news-list .item .img img:hover{
    transform: scale(1.1);
    transition: all 0.3s;
}

.news-list .item .text{
    display: flex;
    align-items: center;
    padding-left: 2rem;
    width: 77%;
}

.news-list .item .text .title{
    font-size: 30px;
}

.news-list .item .text .title:hover{
    text-decoration: underline;
}

.news-list .item .text .title,
.news-list .item .text .intro{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.news-list .item .text .title a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    color: #202020;
    transition: all 0.5s;
}

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

.news-list .item .text .intro{
    line-height: 2;
}

.related-news{
    background-color: #F4F4F4;
}

.related-box{
    position: relative;
    padding-top: 2rem;
    padding-bottom: 5rem;
}

.related-box .prev-btn,
.related-box .next-btn{
    top: unset;
    bottom: -25px;
    background-color: transparent;
    box-shadow: unset;
    color: #202020;
}

.related-box .prev-btn{
    left: 45%;
}

.related-news .next-btn{
    right: 45%;
}

.related-box .prev-btn:hover,
.related-box .next-btn:hover{
    color: var(--secondary-color);
}

.solution-category-tab .section-title{
    margin-bottom: 4rem;
}

.solution-category-tab .box{
    display: flex;
    justify-content: center;
}

.solution-category-tab .box .item{
    width: 25%;
    padding: 0 10px;
}

.solution-category-tab .box .tab-item{
    width: 100%;
    text-align: center;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #202020;
    background-color: #FFF;
    border: 1px solid #F4F4F4;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
}

.solution-category-tab .box .tab-item.active{
    background-color: var(--primary-color);
    color: #FFF;
}

.case-list .item{
    margin-bottom: 1rem;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}

.case-list .item:hover img{
    transform: scale(1.1);
}

.case-list .item:hover .text{
    text-decoration: underline;
}

.case-list .item .img{
    padding-bottom: 100%;
}

.case-list .item .img img{
    transition: all 0.3s;
}

.case-list .item .text{
    height: 60px;
    text-align: center;
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    margin: 10px 0;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

.case-iframe{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 999;
    display: none;
}

.case-iframe.show{
    display: block;
}

.case-iframe .box{
    max-width: 1265px;
    width: 100%;
    height: 770px;
    background-color: #FFF;
    box-shadow: 0 0 2px 2px rgba(201,201,201,0.6);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 4rem 2rem;
}

.case-iframe .box .close{
    position: absolute;
    top: 1rem;
    left: 1rem;
    cursor: pointer;
}

.case-iframe .box iframe{
    height: 100%;
}

.case-details{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.case-details .item-1{
    width: 60%;
    padding: 0 2rem;
}

.case-details .item-2{
    width: 40%;
    padding: 0 2rem 0 4rem;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    align-content: start;
}

.case-details .item-3{
    width: 60%;
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    color: #202020;
    line-height: 2;
    padding: 1rem 2rem 0 2rem;
}

.case-details .item-4{
    width: 40%;
    padding: 4rem 2rem 0 4rem;
    font-family: 'poppins-medium',sans-serif;
    font-size: 18px;
    color: #878787;
}

.case-details .item-1 .img{
    padding-bottom: 48.2%;
}

.case-details .item-2 > .item{
    width: 100%;
    height: 30%;
    display: flex;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #EDEDED;
}

.case-details .item-2 > .item:first-child{
    border-color: transparent;
}

.case-details .item-2 h2{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    /*height: 10%;*/
}

.case-details .item-2 > .item .img{
    width: 16%;
    padding-bottom: 16%;
    margin-right: 10px;
}

.case-details .item-2 > .item a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 15px;
    color: #202020;
    transition: all 0.5s;
}

.case-details .item-2 > .item a:hover{
    color: var(--primary-color);
    text-decoration: underline;
}

.case-details .item-4 h2{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    color: #202020;
    margin-bottom: 2rem;
}

.solution-list .item{
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.solution-list .item .img{
    padding-bottom: 100%;
}

.solution-list .item .mask{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}

.solution-list .item .mask{
    opacity: 0;
    transition: all 0.5s;
}

.solution-list .item:hover .mask{
    opacity: 1;
}

.solution-list .item .mask .text{
    padding: 0 15px;
    position: absolute;
    bottom: 0;
}

.solution-list .item .mask .text .title{
    font-family: 'poppins-medium',sans-serif;
    font-size: 30px;
    color: #FFF;
}

.solution-list .item .mask .text .intro{
    color: #FFF;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    margin-bottom: 10px;
}

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

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

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

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

.article-solution .other .item .img{
    padding-bottom: 30%;
    width: 30%;
    margin-right: 1rem;
}

.article-solution .other .item .img img{
    transition: all 0.3s;
}

.article-solution .other .item .text a{
    font-family: "poppins-medium",sans-serif;
    color: #000;
}

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

.article-solution .other .item:hover .text{
    text-decoration: underline;
}

.article-solution .info{
    padding: 2rem;
    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: 'poppins-medium', sans-serif;
    font-size: 20px;
}

.article-solution .info .item .value{
    font-family: 'poppins-medium', sans-serif;
    font-size: 18px;
    color: #A3A3A3;
    padding: 10px 0;
}

.article-solution .info .social-links{
    border-top: 1px solid #EFEFEF;
    padding: 2rem 0 0 0;
}

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

#downloadCenter{
    width: 100%;
}

#downloadCenter input[type=checkbox]{
    width: 20px;
    height: 20px;
    border: 1px solid;
    border-radius: 0;
    margin-left: 20px;
    margin-right: 20px;
}

#downloadCenterMobile{
    display: none;
}

.products .filter-mobile{
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    position: relative;
}

#productFilter .mobile-filter-header{
    position: relative;
    display: block;
    font-size: 20px;
    font-family: "poppins-medium",sans-serif;
    background: linear-gradient(to right,#0681CC,#014099);
    padding: 10px;
    color: #FFF;
    border: none;
}

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

#productFilter .level-1{
    padding: 5px 0 5px 10px;
    background-color: #F4F4F4;
}

#productFilter .level-1 a{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
}

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

#productFilter .level-2 a{
    font-family: 'poppins-regular',sans-serif;
    font-size: 15px;
}

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

.search-option .item:after{
    /*display: inline-block;*/
    content: '\f078';
    font-family: FontAwesome;
    position: absolute;
    font-size: 15px;
    top: 25px;
    right: 8%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #B5B5B5;
}

.search-option .item.reset:after{
    content: ' ';
}

.search-option .item .default{
    width: 95%;
    height: 50px;
    background-color: #FFF;
    padding: 10px 15px;
    cursor: pointer;
    font-family: 'poppins-medium', sans-serif;
    color: #B5B5B5;
    /*line-height: 35px;*/
    border: 1px solid #DDD;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
}

.search-option .item .options{
    position: absolute;
    left: 0;
    min-width: 100%;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
}

.search-option .item .options.show{
    opacity: 1;
    visibility: initial;
}

.search-option .item .options .child{
    width: 95%;
    background-color: #FFF;
    min-height: 50px;
    padding: 10px 15px;
    cursor: pointer;
    font-family: 'poppins-medium', sans-serif;
    color: #202020;
    border-left: 1px solid #B5B5B5;
    border-right: 1px solid #B5B5B5;
}

.search-option .item .options .child.active{
    background-color: var(--primary-color);
    color: #FFF;
}

.search-option .item .options .child:first-child{
    border-top: 1px solid transparent;
}

.search-option .item .options .child:last-child{
    border-bottom: 1px solid #B5B5B5;
}

.search-option .item .options .child:hover{
    background-color: var(--primary-color);
    color: #FFF;
}

#fileTotalNum{
    font-family: 'poppins-medium',sans-serif;
    font-size: 20px;
    color: #202020;
}

@media (min-width: 768px) {
    .index-carousel-pagination{
        bottom: 20px;
    }

    .index-carousel-pagination .swiper-pagination-bullet{
        width: 30px;
        height: 5px;
    }

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

    .banner .text{
        left: 45px;
        top: 50%;
        transform: translateY(-50%);
    }

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

    .btn-prev{
        left: 30px;
    }

    .btn-next{
        right: 30px;
    }

    .index-carousel{
        display: block;
    }

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

    .index-carousel .text .link-btn{
        padding: 5px 20px;
        margin-top: 10px;
        font-size: 12px;
    }

    .index-carousel .text .title{
        font-size: 30px;
    }

    .index-carousel .text .intro{
        font-size: 12px;
    }

    .product-category .big .pc-img{
        display: block;
    }

    .product-category .big .mobile-img{
        display: none;
    }

    .product-category .small-box .item .text .title{
        font-size: 25px;
    }

    .company-main-business .content-box{
        padding: 1rem 2rem 0 2rem;
    }

    .company-main-business .main-business{
        width: 100%;
    }

    .company-main-business .main-business .item .title{
        font-size: 25px;
    }

    .company-main-business .main-business .item .intro{
        font-size: 15px;
        line-height: 1.8;
        padding: 10px 0;
    }

    .index-1 .item .text .title{
        font-size: 25px;
    }

    .company-main-business .main-business .item .more a{
        font-size: 15px;
    }

    .company-main-business ul{
        margin-top: 1rem;
    }

    .index-news-list{
        padding-top: 4rem;
    }

    .index-news-list .section-title{
        margin-bottom: 1rem;
    }

    .products{
        padding-top: 1rem;
    }

    .products .filter{
        display: none;
    }

    .products .filter-mobile{
        display: block;
        width: 100%;
    }

    .products .list{
        width: 100%;
    }

    .form-category .item:hover img{
        transform: scale(1.1);
    }

    .form-category .item:hover .text{
        text-decoration: underline;
    }

    .form-category .item .img img{
        transition: all 0.3s;
    }

    .form-category .item .text{
        font-size: 12px;
    }

    .product-detail-1 .right .download{
        margin-top: 25px;
    }

    .product-detail-1 .right{
        padding: 10px 30px;
    }

    .company-info .video{
        margin-bottom: 1rem;
    }

    .company-info .text{
        padding-left: 15px;
    }

    .vr-show{

    }

    .enterprise-culture{

    }

    .enterprise-culture .img{
        padding-bottom: 60%;
    }

    .enterprise-culture .mask{
        padding-left: 50px;
        width: calc(100% - 30px);
    }

    .enterprise-culture .mask .section-title{
        margin-bottom: 1rem;
    }

    .enterprise-culture .mask .content ul li{
        margin-bottom: 10px;
    }

    .milestones{
        padding-top: 0;
        padding-bottom: 0;
    }

    .milestones > .container{
        padding-top: 70%;
    }

    .milestones .left{
        width: 100%;
        height: 95px;
        padding-left: 3rem;
        padding-top: 1rem;
        background-color: rgba(0,0,0,0.6);
    }

    .milestones .right{
        width: 100%;
        height: calc(100% - 95px);
        padding: 50px;
    }

    .milestones-prev{
        top: -10px;
        left: 44px;
    }

    .milestones-next{
        bottom: -10px;
        left: 44px;
    }

    .culture-wall{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .culture-wall .section-title{
        margin-bottom: 2rem;
    }

    .culture-wall .culture-wall-box{
        padding-bottom: 2rem;
    }

    .exporting-countries{
        padding-bottom: 0;
    }

    .exporting-countries .content .num{
        font-size: 30px;
    }

    .exporting-countries .content .text{
        font-size: 18px;
    }

    .strength{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .oem-business .img{
        padding-bottom: 25%;
    }

    .oem-business .content .text{
        width: 75%;
    }

    .oem-business .content .section-title{
        font-size: 25px;
    }

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

    .oem-business .content button{
        font-size: 15px;
    }

    .factory-1{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .factory-1 .left{
        margin-bottom: 15px;
    }

    .factory-2 .carousel{
        padding-left: 0;
        margin-bottom: 0;
    }

    .factory-4 .carousel-box{
        padding: 0 50px;
    }


    .oem-1 .box .item,
    .odm-1 .box .item{
        width: 23%;
        margin:0 1% 15px 1%;
    }

    .oem-3 .img,
    .odm-3 .img,
    .factory-5 .img{
        padding-bottom: 25%
    }

    .oem-3 .content .text,
    .odm-3 .content .text,
    .factory-5 .content .text{
        width: 75%;
    }

    .oem-3 .content .section-title,
    .odm-3 .content .section-title,
    .factory-5 .content .section-title{
        font-size: 25px;
    }

    .oem-3 .content .section-intro,
    .odm-3 .content .section-intro,
    .factory-5 .content .section-intro{
        font-size: 15px;
    }

    .oem-3 .content button,
    .odm-3 .content button,
    .factory-5 .content button{
        font-size: 15px;
    }

    .service-process-content .img{
        margin-bottom: 20px;
    }

    .service-process-content .img{
        margin-bottom: 20px;
    }

    .solution-category-tab .section-title{
        margin-bottom: 2rem;
    }

    .solution-category-tab .box .item{
        width: 40%;
    }

    .solution-list{
        padding-top: 0;
    }

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

    .case-list{
        padding-top: 0;
    }

    .service .text{
        padding: 15px !important;
    }

    .news-category-tab .box .item {
        width: 100%;
        padding: 0 10px;
    }

    .download-center-filter .search-option .item{
        width: 100%;
    }

    .search-option .item .default{
        width: 100%;
        margin-bottom: 10px;
    }

    .search-option .item .options .child{
        width: 100%;
    }

    .search-option .item:after{
        right: 3%;
    }

    .search-result .list{
        padding: 0;
    }

    .product-category .big .text{
        left: 5%;
    }

    .company-advantage .advantage-box .item{
        width: 100%;
        justify-content: center;
    }

    .company-advantage .advantage-box .item .ico{
        width: 50px;
        margin-right: 15px;
    }

    .company-advantage .advantage-box .item .txt{
        width: 140px;
    }

    .index-1{
        padding-top: 4rem;
        padding-bottom: 0;
    }

    .form{
        max-width: 720px;
    }

    .vr-show .img{
        padding-bottom: 25%;
    }
}

@media (min-width: 992px) {
    .index-carousel-pagination .swiper-pagination-bullet{
        width: 80px;
        height: 6px;
    }

    .index-carousel .text .link-btn{
        padding: 5px 20px;
        margin-top: 1.5rem;
        font-size: 16px;
    }

    .index-carousel .text .title{
        font-size: 30px;
    }

    .index-carousel .text .intro{
        font-size: 18px;
    }

    .product-category .big .text .title{
        font-size: 28px;
    }

    .product-category .small-box .item .text .title{
        font-size: 28px;
    }

    .product-category .big .text{
        left: 10%;
    }

    .company-main-business{
        padding-top: 0;
        margin-top: 4rem;
    }

    .company-main-business .content-box{
        padding: 2rem 0 0 3rem;
    }

    .company-main-business .main-business{
        width: 70%;
    }

    .company-main-business .main-business .item .title{
        font-size: 30px;
    }

    .company-main-business .main-business .item .intro{
        font-size: 18px;
        padding: 1rem 0;
    }

    .company-main-business .main-business .item .more a{
        font-size: 20px;
    }

    .company-main-business ul{

    }

    .products .filter{
        display: block;
    }

    .products .filter-mobile{
        display: none;
    }

    .products .list{
        width: 72%;
        padding-left: 3%;
    }

    .product-detail-1 .right{
        padding: 10px 30px;
    }

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

    .company-info .text{
        padding-left: 3rem;
    }

    .vr-show{

    }

    .enterprise-culture{

    }

    .enterprise-culture .img{
        padding-bottom: 45%;
    }

    .enterprise-culture .mask{
        width: 60%;
        padding-left: 3rem;
    }

    .enterprise-culture .mask .section-title{
        margin-bottom: 1rem;
    }

    .enterprise-culture .mask .content ul li{
        margin-bottom: 1rem;
    }

    .milestones > .container{
        padding-top: 55%;
    }

    .milestones .left{
        width: 25%;
        height: 100%;
        padding: 0;
        background-color: rgba(1,64,153,0.6);
    }

    .milestones .right{
        width: 75%;
        height: 100%;
        padding: 50px;
    }

    .culture-wall{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .culture-wall .section-title{
        margin-bottom: 3rem;
    }

    .culture-wall .culture-wall-box{
        padding-bottom: 3rem;
    }

    .exporting-countries .content .num{
        font-size: 40px;
    }

    .exporting-countries .content .text{
        font-size: 20px;
    }

    .strength{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .factory-1{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .factory-1 .left{
        margin-bottom: unset;
    }

    .factory-2 .carousel{
        padding-left: 2rem;
        margin-bottom: unset;
    }

    .factory-4 .carousel-box{
        padding: 0 100px;
    }

    .service-process-content .img{
        margin-bottom: unset;
    }

    .oem-3 .img,
    .odm-3 .img,
    .factory-5 .img{
        padding-bottom: 25%
    }

    .oem-3 .content .section-title,
    .odm-3 .content .section-title,
    .factory-5 .content .section-title{
        font-size: 30px;
    }

    .oem-3 .content .section-intro,
    .odm-3 .content .section-intro,
    .factory-5 .content .section-intro{
        font-size: 18px;
    }

    .oem-3 .content button,
    .odm-3 .content button,
    .factory-5 .content button{
        font-size: 18px;
    }

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

    .oem-business .content .section-intro{
        font-size: 18px;
    }

    .oem-business .content button{
        font-size: 18px;
    }

    .solution-category-tab .section-title{
        margin-bottom: 4rem;
    }

    .solution-category-tab .box .item{
        width: 25%;
    }

    .solution-list{
        padding-top: 3rem;
    }

    .article-solution .content{
        margin-bottom: unset;
    }

    .case-list{
        padding-top: 3rem;
    }

    .case-details .item-1{
        padding: 0 2rem;
    }

    .service .text{
        padding: 0 50px !important;
    }

    .download-center-filter .search-option .item{
        width: 25%;
    }

    .search-option .item.series-select {
        width: 35%;
    }

    .search-option .item.reset {
        width: 15%;
    }

    .search-option .item .default{
        width: 95%;
        margin-bottom: 0;
    }

    .search-option .item .options .child{
        width: 95%;
    }

    .search-option .item:after{
        right: 8%;
    }

    .form-category .item .text{
        font-size: 18px;
    }

    .company-advantage .advantage-box .item{
        width: 20%;
        justify-content: unset;
    }

    .company-advantage .advantage-box .item .ico{
        width: 30%;
        margin-right: unset;
    }

    .company-advantage .advantage-box .item .txt{
        width: 70%;
    }

    .index-1{
        padding-top: 4rem;
    }

    .form{
        max-width: 960px;
    }
}

@media (min-width: 1200px) {

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

    .banner .text{
        top: 50%;
        left: calc((100% - 1200px) / 2);
        width: 25%;
        transform: translateY(-50%);
    }

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

    .btn-prev{
        left: 180px;
    }

    .btn-next{
        right: 180px;
    }

    .index-carousel-pagination{
        bottom: 50px !important;
    }

    .index-carousel .text .title{
        font-size: 40px;
    }

    .product-category .big .text .title{
        font-size: 35px;
    }

    .company-main-business .main-business{
        width: 40%;
    }

    .company-main-business .main-business .item .title{
        font-size: 35px;
    }

    .company-main-business .main-business .item .intro{
        font-size: 20px;
        padding: 1rem 0 2rem 0;
    }

    .company-main-business .content-box{

    }

    .service-process-content .odd .text{
        padding-left: 5rem;
        padding-right: 0;
    }

    .service-process-content .even .text{
        padding-left: 0;
        padding-right: 5rem;
    }

    .product-detail-1 .right .download{
        margin-top: 80px;
    }

    .product-detail-1 .right{
        padding: 40px 30px 10px 30px;
    }

    .vr-show{

    }

    .enterprise-culture{

    }

    .enterprise-culture .img{
        padding-bottom: 37.5%;
    }

    .enterprise-culture .mask{
        padding-left: calc((100% - 1200px) / 2 + 15px);
        padding-right: 50px;
        width: 62.5%;
        height: 100%;
        position: absolute;
        background-color: rgba(0,0,0,0.5);
        color: #FFF;
        display: flex;
        align-items: center;
    }

    .enterprise-culture .mask .section-title{
        margin-bottom: 2rem;
    }

    .enterprise-culture .mask .content ul li{
        font-size: 15px;
        margin-bottom: 20px;
    }

    .milestones > .container{
        padding-top:41.6%
    }

    .milestones .left{
        width: 25%;
    }

    .milestones .right{
        width: 75%;
        padding: 10rem 5%;
    }

    .milestones-prev{
        top: 50px;
        left: 5.8%;
    }

    .milestones-next{
        bottom: 50px;
        left: 5.8%;
    }

    .culture-wall{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .culture-wall .section-title{
        margin-bottom: 4rem;
    }

    .culture-wall .culture-wall-box{
        padding-bottom: 4rem;
    }

    .strength{
        padding-top: 4rem;
        padding-bottom: 5rem;
    }

    .oem-business .img{
        padding-bottom: 18.5%;
    }

    .oem-business .content .text{
        width: 50%;
    }

    .oem-business .content .section-title{
        font-size: 35px;
    }

    .oem-1 .box .item, .odm-1 .box .item{
        width: 11%;
        margin: 0 0.75% 15px 0.75%;
    }

    .oem-3 .img,
    .odm-3 .img,
    .factory-5 .img{
        padding-bottom: 18.5%
    }

    .oem-3 .content .text,
    .odm-3 .content .text,
    .factory-5 .content .text{
        width: 50%;
    }

    .oem-3 .content .section-title,
    .odm-3 .content .section-title,
    .factory-5 .content .section-title{
        font-size: 35px;
    }

    .oem-3 .content .section-intro,
    .odm-3 .content .section-intro,
    .factory-5 .content .section-intro{
        font-size: 18px;
    }

    .oem-3 .content button,
    .odm-3 .content button,
    .factory-5 .content button{
        font-size: 18px;
    }

    .news-category-tab .box .item {
        width: 25%;
        padding: 0 10px;
    }

    .form-category .item .text{
        font-size: 20px;
    }

    #downloadForm .form{
        width: 35%;
    }

    .index-carousel .text .intro{
        font-size: 20px;
    }

    .index-carousel .text .title{
        font-size: 35px;
    }

    .index-carousel .text .link-btn{
        padding: 5px 20px;
        margin-top:3rem;
        font-size: 20px;
    }

    .product-category .big .text .title{
        font-size: 30px;
    }

    .product-category .small-box .item .text .title{
        font-size: 25px;
    }

    .product-category .big .text{
        left: 15%;
    }

    .index-1{
        padding-top: 4rem;
    }

    .form{
        max-width: 1265px;
    }

    .vr-show .img{
        padding-bottom: 18.5%;
    }

    #inquiryContent2,
    #inquiryContent3{
        height: 66px;
    }
}

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

    .back-to-top{
        width: 30px;
        height: 30px;
    }

    .back-to-top i{
        padding-top: 6px;
    }

    .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 img{
        max-height: 40px;
    }

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

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

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

    .btn-prev{
        left: 15px;
    }

    .btn-next{
        right: 15px;
    }

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

    .mobile-footer .panel-heading .panel-title{
        font-size: 18px;
    }

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

    .index-carousel{
        display: none;
    }

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

    .company-advantage .advantage-box .item{
        width: 50%;
        justify-content: center;
    }

    .company-advantage .advantage-box .item .ico{
        width: 50px;
        margin-right: 15px;
        display: none;
    }

    .company-advantage .advantage-box .item .txt{
        width: 150px;
        font-size: 25px;
    }

    .product-category .big .img{
        padding-bottom: 135%;
    }

    .product-category .big .pc-img{
        display: none;
    }

    .product-category .big .mobile-img{
        display: block;
    }

    .product-category .big .text{
        top: 20%;
        text-align: center;
        left: 50%;
        transform: translate(-50%,-20%);
    }

    .product-category .big .text .title{
        font-size: 25px;
    }

    .product-category .big .text .intro{
        font-size: 15px;
    }

    .product-category .big .text button{
        font-size: 15px;
        height: 30px;
        padding: 0 20px;
    }

    .product-category .pc-img{
        display: none;
    }

    .product-category .small-box .item .mobile-img{
        display: block;
    }

    .product-category .small-box .row{
        padding-left: 0;
        padding-right: 0;
    }

    .product-category .small-box .item{
        padding-left: 15px;
        padding-right: 15px;
    }

    .product-category .small-box .item .text{
        width: calc(100% - 30px);
        display: block;
    }

    .product-category .small-box .item .text .title{
        font-size: 25px;
    }

    .product-category .small-box .item .text .intro{
        font-size: 15px;
    }

    .company-main-business{
        display: none;
    }

    .company-main-business-mobile{
        display: flex;
        flex-wrap: wrap;
        padding: 1rem 15px 0 15px;
    }

    .company-main-business-mobile .item{
        width: 100%;
        margin-bottom: 1rem;
        position: relative;
    }

    .company-main-business-mobile .item .img{
        padding-bottom: 48%;
    }

    .company-main-business-mobile .item .title{
        position: absolute;
        top: 30%;
        left: 15px;
        color: #FFF;
        font-family: 'poppins-medium',sans-serif;
        font-size: 25px;
    }

    .company-main-business-mobile .item .more{
        position: absolute;
        top: 55%;
        left: 15px;
        color: #FFF;
        font-size: 15px;
    }

    .index-1{
        padding-top: 4rem;
    }

    .index-1 .row{
        padding-left: 15px;
        padding-right: 15px;
    }

    .index-1 .item{
        padding: 0;
        margin-bottom: 1rem;
    }

    .index-1 .item .pc-img{
        display: none;
    }

    .index-1 .item .mobile-img{
        display: block;
    }

    .index-1 .item .text{
        display: block;
        width: 100%;
        padding: 5px 15px;
    }

    .index-1 .item .text .title{
        font-size: 25px;
    }

    .index-1 .item .text .more{
        transform: unset;
    }

    .index-1 .item .text .more a{
        font-size: 15px;
    }

    .index-news-list{
        padding-top: 4rem;
    }

    .index-news-list .section-title{
        margin-bottom: 1rem;
    }


    /*--------------------------------------------------
     Inquiry Form
    ----------------------------------------------------*/
    .form-category{
        margin-top: 1rem;
    }

    .form .content .left{
        padding: 2rem 1rem 1rem 1rem;
    }

    .form .left span{
        font-size: 20px;
    }

    .form .content .right{
        padding: 0 1rem 2rem 1rem;
    }

    .form-category .item .text{
        font-size: 15px;
    }

    .form .content .right .title{
        margin-bottom: 1rem;
        font-size: 25px;
    }

    /*--------------------------------------------------
     Product
    ---------------------------------------------------*/
    .products .filter{
        display: none;
    }

    .products .filter-mobile{
        display: block;
    }

    .products .list{
        width: 100%;
        padding-left: 0;
    }

    .products .list .row{
        margin: 0;
    }

    .products .list .text{
        height: 46px;
    }

    .products .list .text .title{
        font-size: 20px;
    }

    .product-detail-1 .left,
    .product-detail-1 .right{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        max-width: unset;
        flex: unset;
    }

    .product-detail-1 .left{
        margin-bottom: 1rem;
    }

    .product-detail-1 .right{
        padding-top: 2rem;
    }

    .product-detail-1 .right .title{
        font-size: 25px;
        height: unset;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
    }

    .product-detail-1 .right .download{
        margin-top: 35px;
    }

    .product-detail-2 .detail-tab .item{
        padding: 10px 0;
    }

    .detail-tab-content-box>div{
        padding: 2rem 1rem;
    }

    .detail-tab-content-box iframe{
        height: 300px !important;
    }

    .related-products{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .related-products .box{
        padding: 0 60px;
    }

    .related-products .section-title{
        padding-bottom: 2rem;
        margin-bottom: 0;
    }

    .related-products .box .text{
        font-size: 20px;
    }

    /*--------------------------------------------------------
     About Company
    --------------------------------------------------------*/
    .company-info .video iframe{
        height: 300px;
    }

    .company-info .text{
        padding-left: 15px;
    }

    .company-info .text button{
        font-size: 15px;
    }

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

    .company-carousel{
        padding-bottom: 1rem;
    }

    .vr-show .img{
        padding-bottom: 85%;
    }

    .vr-show .img img{
        display: none;
    }

    .vr-show .content{
        background-image: url("../../home/images/bg/about/vr-room-mobile.jpg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .enterprise-culture .img{
        padding-bottom: 140%;
    }

    .enterprise-culture .mask .section-title{
        font-size: 30px;
        margin-bottom: 1rem;
    }

    .enterprise-culture .mask{
        width: calc(100% - 30px);
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .enterprise-culture .mask .content ul li{
        margin-bottom: 1rem;
    }

    .milestones > .container{
        padding-top: 100%;
    }

    .milestones .left{
        width: 100%;
        height: 15%;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.6);
    }

    .milestones .left .section-title{
        margin-bottom: 0;
    }

    .milestones .right{
        width: 100%;
        height: 85%;
        padding: 40px 5%;
    }

    .milestones-prev{
        top: -23px;
        left: 13px;
    }

    .milestones-next {
        bottom: -23px;
        left: 13px;
    }

    #milestonesSwiper .swiper-slide.year .text{
        font-size: 25px;
    }

    .culture-wall{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .culture-wall .section-title{
        margin-bottom: 2rem;
    }

    .culture-wall .culture-wall-box{
        padding-bottom: 2rem;
    }

    .exporting-countries{

    }

    .exporting-countries .content .num{
        font-size: 30px;
    }

    .exporting-countries .content .text{
        font-size: 15px;
    }

    .partners{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .partners .item{
        width: 50%;
        max-width: 50%;
    }

    .partners .item .text{
        height: 50px;
    }

    .service-team {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .service-team .section-title{
        margin-bottom: 2rem;
    }

    .service-team .item{
        width: 50%;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .service-team .item .img{
        width: calc(100% - 2rem);
        padding-bottom: calc(100% - 2rem);
    }

    .service-team .item .text .name{
        margin: 10px 0;
        font-size: 18px;
        height: 58px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
    }

    .service-team .item .text .intro{
        margin: 0;
        height: 120px;
        -webkit-line-clamp: 5;
    }

    .strength {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .strength-category{
        margin-bottom: 2rem;
    }

    .strength-category > div{
        width: 100%;
    }

    .strength-category-content .carousel-box{
        padding: 0 50px;
    }

    .industry-benchmark{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .industry-benchmark .section-title{
        margin-bottom: 2rem;
    }

    .industry-benchmark .industry-benchmark-box{
        padding-bottom: 2rem;
    }

    .oem-business .content{
        background-image: url("../../home/images/bg/about/oem-mobile.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .oem-business .content .text{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .oem-business .content button{
        font-size: 15px;
    }

    .factory-1{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .factory-1 .right{
        margin-top: 2rem;
    }

    .factory-1 .right .box .item{
        padding: 30px 15px;
    }

    .factory-1 .right .box .item .num{
        font-size: 30px;
    }

    .factory-2{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .factory-2 .carousel{
        margin-bottom: 0;
        padding-left: 0;
    }

    .factory-2 .text{
        padding: 1rem;
    }

    .factory-3{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .factory-3 .section-title{
        margin-bottom: 2rem;
    }

    .factory-3 .item .text{
        height: unset;
    }

    .factory-4{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

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

    .factory-4 .carousel-box{
        padding: 0 50px;
    }

    .factory-5 .img img{
        display: none;
    }

    .factory-5 .content{
        background-image: url("../../home/images/bg/about/factory-mobile.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .oem-1, .odm-1 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .oem-1 .box .item, .odm-1 .box .item{
        width: calc(50% - 30px);
        margin: 10px 15px;
    }

    .oem-1 button, .odm-1 button{
        margin-top: 2rem;
        font-size: 15px;
    }

    .oem-2{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .oem-2 .category .category-name{
        font-size: 25px;
    }

    .oem-2 .category .item .text{
        height: unset;
    }

    .oem-3 .img,
    .odm-3 .img,
    .factory-5 .img{
        padding-bottom: 85%
    }

    .oem-3 .content .text,
    .odm-3 .content .text,
    .factory-5 .content .text{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .oem-3 .content .section-title,
    .odm-3 .content .section-title,
    .factory-5 .content .section-title{
        font-size: 30px;
    }

    .oem-3 .content .section-intro,
    .odm-3 .content .section-intro,
    .factory-5 .content .section-intro{
        font-size: 20px;
    }

    .oem-3 .content button,
    .odm-3 .content button,
    .factory-5 .content button{
        font-size: 15px;
    }

    .oem-3 .img img,
    .odm-3 .img img{
        display: none;
    }

    .oem-3 .content{
         background-image: url("../../home/images/bg/about/oem-mobile.jpg");
         background-size: contain;
         background-repeat: no-repeat;
     }

    .odm-3 .content{
        background-image: url("../../home/images/bg/about/odm-mobile.jpg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .oem-iframe .box{
        top: 54%;
        height: 615px;
    }

    .service-process-content .section-title{
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .milestones .content{
        background-image: url("../../home/images/bg/about/milestones-mobile.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    /*--------------------------------------------------------
       Solution
    --------------------------------------------------------*/
    .solution-category-tab .section-title{
        margin-bottom: 2rem;
    }

    .solution-category-tab .box{
        flex-wrap: wrap;
    }

    .solution-category-tab .box .item{
        width: 100%;
        margin-bottom: 10px;
    }

    .solution-category-tab .box .tab-item{
        height: 50px;
        line-height: 50px;
        font-size: 18px;
    }

    .service .row{
        background-color: #FFF;
    }

    .service .text{
        padding: 0 15px !important;
    }

    .service .text > div{
        background-color: #F4F4F4;
        padding: 1rem;
        width: 100%;
    }

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

    /*--------------------------------------------------------
       Download Center
    --------------------------------------------------------*/

    .download-center-filter{
        padding-top: 2rem;
    }

    .download-center-filter .section-title{
        margin-bottom: 2rem;
    }

    .download-center-filter .search-option{
        flex-wrap: wrap;
        padding: 20px 15px;
    }

    .download-center-filter .search-keywords{
        padding: 20px 15px;
    }

    .download-center-filter .search-option .item{
        width: 100%;
        margin-bottom: 10px;
    }

    .download-center-filter .search-option .item select{
        width: 100%;
    }

    .search-result .list{
        padding: 0;
    }

    #downloadCenter{
        display: none;
    }

    #downloadCenterMobile{
        display: block;
    }

    .search-result .list td{
        padding: 15px 10px;
    }

    .search-result .list td p{
        font-family: 'poppins-medium',sans-serif;
        font-size: 18px;
    }

    /*-----------------------------------------------------
        News
    ------------------------------------------------------------*/
    .news-category-tab{
        padding-top: 2rem;
    }

    .news-category-tab .section-title{
        margin-bottom: 2rem;
    }

    .news-category-tab .box{
        flex-wrap: wrap;
    }

    .news-category-tab .box .item{
        width: 100%;
        margin-bottom: 10px;
    }

    .news-category-tab .box .tab-item{
        height: 50px;
        line-height: 50px;
        font-size: 18px;
    }

    .news-list .item{
        flex-wrap: wrap;
    }

    .news-list .item .img,
    .news-list .item .text{
        width: 100%;
    }

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

    .news-list .item .img{
        padding-bottom: 74.6%;
    }

    .news-list .item .text{
        padding-left: 0;
    }

    .related-box .prev-btn{
        left: 25%;
    }

    .related-box .next-btn{
        right: 25%;
    }

    #resetSearch{
        width: 100%;
    }

    .index-about .img.main{
        display: none;
    }

    .index-about .img.mobile{
        display: block;
        padding-bottom: 135%;
    }

    .exporting-countries .content{
        background-position: left;
    }

    .exporting-countries .content .text-box{
        padding: 1rem 2rem;
    }

    .exporting-countries .content .item{
        margin-top: 1rem;
    }

    .map-mark{
        width: 12px;
        height: 12px;
        border: 2px solid #FFF;
    }

    .map-mark .partner-box{
        width: 100px;
        height: 100px;
        top: -115px;
        left: -45px;
    }

    .case-iframe{
        top: 205px;
    }

    .case-details .item-1,
    .case-details .item-2,
    .case-details .item-3,
    .case-details .item-4{
        width: 100%;
        padding: 0;
    }

    .case-iframe .box{
        padding: 3rem 2rem;
    }

    .search-option .item .default{
        width: 100%;
    }

    .search-option .item .options .child{
        width: 100%;
    }

    #downloadCenterMobile .even{
        background-color: #F4F4F4;
    }

    #downloadCenterMobile .even td{
        background-color: #F4F4F4;
    }

    .search-option .item:after{
        right: 6%;
    }

    .search-result{
        padding-bottom: 6rem;
    }

    .search-result .list button{
        font-size: 16px;
        padding: 0 20px;
    }

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

    .oem-business .img{
        padding-bottom: 85%;
    }
}