:root {
    --animate-delay: 0.5s;
    --base-default-color: #033d92;
    --base-default-font: Arial, Helvetica, sans-serif;
    --base-default-font-size: 16px;
    --base-default-font-weight: 400;
}

ul,
ol {
    list-style: none;
}
ul,
ol,
li {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #333;
    transition: all 0.5s ease;
}
a:hover {
    color: var(--base-default-color);
}
body {
    font-family: var(--base-default-font);
    font-size: var(--base-default-font-size);
    font-weight: var(--base-default-font-weight);
    background-color: #fff;
    color: #333;
    overflow-x: hidden;
}

header{
    width: 100%;
    height: 150px;
    border-top: 18px solid var(--base-default-color);
    position: relative;
}

.top-bar{
    width: calc(50% + 36px);
    min-width: 720px;
    height: 48px;
    background: var(--base-default-color);
    position: absolute;
    top: -18px;
    right: 0;
    padding-left: 48px;
    display: flex;
    align-items: center;
    color: #fff;
}
.top-bar::before{
    display: block;
    content: "";
    width: 36px;
    height: 36px;
    background: #fff;
    clip-path: path('M -7 9 Q 9 0,18 18 T 36 36 H 0 Z');
    --web-kit-clip-path: path('M 0 0 Q 9 0,18 18 T 36 36 H 0 Z');
    position: absolute;
    left: -1px;
    top: 12px;
}
.top-bar .follow-us ul{
    display: flex;
    width: 80px;
    justify-content: space-between;
}
.top-bar .follow-us ul li{
    width: 31px;
    height: 31px;
}
.top-bar .follow-us ul li.facebook{
    background: url("../icon/icon-facebook.png") no-repeat;
}
.top-bar .follow-us ul li.linkedin{
    background: url("../icon/icon-linkin.png") no-repeat;
}
.top-bar .follow-us ul li a{
    display: block;
    height: 31px;
    text-indent: -9999px;
}
.top-bar .tel{
    padding-left: 30px;
    margin-left: 30px;
    background: url("../icon/icon-tel.png") left center no-repeat;
}
.top-bar .email{
    padding-left: 30px;
    margin-left: 30px;
    background: url("../icon/icon-email.png") left center no-repeat;
}
.top-bar .email a { color:#FFFFFF;}
.logo-header{
    width: 219px;
    height: 46px;
    background: url("../images/logo-header.png") no-repeat;
    position: absolute;
    left: calc(50% - 700px);
    top: 56px;
}
.logo-header a{
    display: block;
    height: 46px;
    text-indent: -9999px;
}

header .search{
    width: 175px;
    height: 27px;
    position: absolute;
    right: calc(50% - 700px);
    top: 72px;
}
header .search input{
    width: 100%;
    height: 27px;
    border: 1px solid var(--base-default-color);
    padding: 0 0 0 5px;
    border-radius: 5px;
}
header .search input::placeholder{
    color: #ccc;
}
header .search button{
    position: absolute;
    right: 3px;
    top: 0;
    border: none;
    background: none;
}
.swiper-index .swiper-slide img{
    width: 100%;
}
.product-categories{
    width: 100%;
    padding: 100px 0 40px;
    background: url("../images/bg-product-categories.jpg") center 100px no-repeat;
}
.product-categories .b-head{
    font-size: 60px;
    line-height: 70px;
    font-weight: bold;
    color: var(--base-default-color);
    text-align: center;
}
.product-categories .b-sub-head{
    font-size: 50px;
    color: #1f1f1f;
    line-height: 60px;
    text-align: center;
}
.product-categories .b-body{
    width: 1400px;
    padding: 130px 0 0 620px;
    margin: 0 auto;
    position: relative;
}
.product-categories .b-body::before{
    content: "";
    display: block;
    width: 1000px;
    height: 327px;
    background: var(--base-default-color);
    position: absolute;
    right: 0;
    top: 230px;
}
.product-categories .b-body .txt{
    position: relative;
    z-index: 0;
    color: #fff;
}
.product-categories .b-body .txt strong{
    font-size: 54px;
    color: var(--base-default-color);
}
.product-categories .b-body .txt ul{
    padding: 40px 0 0 100px;
    font-size: 22px;
    line-height: 200%;
}
.product-categories .b-body .txt ul li{
    padding: 0 0 0 40px;
    background: url("../icon/icon-selected.png") left center no-repeat;
}
.product-categories .b-body .txt .footer{
    padding: 50px 100px 0 10px;
    color: var(--base-default-color);
    font-size: 24px;
    line-height: 120%;
}
.product-categories .b-body .txt .link{
    text-align: right;
    padding: 10px 20px 0 0;
}
.product-categories .b-body .txt .link a{
    display: inline-block;
    height: 38px;
    line-height: 38px;
    background: var(--base-default-color);
    color: #fff;
    padding: 0 25px;
}
.product-categories .b-body .img{
    position: absolute;
    left: 0;
    top: 100px;
}
.count-up-index{
    color: #fff;
    padding: 80px 0 190px;
    background: var(--base-default-color) url("../images/bg-count-up.jpg") center top no-repeat;
}

.count-up-index ul{
    width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.count-up-index ul li{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("../images/bg-count-up-item.png") right center no-repeat;
}
.count-up-index ul li:last-child{
    background: none;
}
.count-up-index ul li strong{
    font-weight: normal;
    font-size: 26px;
}
.count-up-index ul li strong em{
    font-size: 52px;
    font-style: normal;
}
.count-up-index ul li span{
    font-size: 24px;
}
.company{
    width: 1400px;
    margin: -113px auto 0;
    background: #fff;
    padding: 85px 40px 95px;
    box-shadow: 3px 3px 10px rgba(0,0,0,.1);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
}
.company .video{
    padding: 20px 0 0;
    width: 686px;
	position:relative;
}

.company .video .fancybox{}
.company .video .b-head{
    height: 53px;
    padding: 0 0 0 70px;
    background: url("../icon/icon-play.png") no-repeat;
	position:absolute;
	z-index:2;
	top:45%;
	left:36%;
	color:#FFFFFF;
}
.company .video .b-body{
    padding: 0;
	opacity:0.8;
}
.company .video .b-body img{
    width: 100%;
}
.company .video .b-head strong{
    display: inline-block;
    line-height: 40px;
    border-bottom: 2px solid #033d92;
    font-size: 24px;
    font-weight:bold;
	color:#033d92;
}
.company .profile{
    width: 600px;
}
.company .profile .b-head{
    font-size: 42px;
    line-height: 100%;
}
.company .profile .b-body{
    padding: 10px 0 0;
    font-size: 18px;
    line-height: 1.8em;
}
.company .profile .b-more a{
    display: inline-block;
    line-height: 40px;
    color: #fff;
    padding: 0 15px;
    background: var(--base-default-color);
}
.certificates{
    width: 100%;
    background: #d6d3d3;
    margin: 60px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px calc(50% - 700px);
}
.certificates .b-head{
    width: 280px;
    font-size: 26px;
    font-style: italic;
    color: var(--base-default-color);
}
.certificates .b-body{
    width: 1048px;
}
.certificates .b-body ul{
    display: flex;
    justify-content: space-between;
}
.contact-message{
    width: 100%;
    padding: 25px calc(50% - 700px);
    color: #fff;
    background: var(--base-default-color) url("../images/bg-contact-message.jpg") center top no-repeat;
    display: flex;
    justify-content: space-between;
}
.contact-message .contact{
    width: 720px;
}
.contact-message .contact .b-head, .contact-message .message .b-head{
    font-size: 18px;
}
.contact-message .contact .b-body{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.contact-message .contact .b-body dl{
    width: 320px;
    margin: 20px 0 0;
}
.contact-message .contact .b-body dl dt{
    font-size: 18px;
    margin: 0 0 5px;
}
.contact-message .contact .b-body dl dd{
    margin: 0;
}
.contact-message .contact .b-body dl dd a{ color:#FFFFFF;}
.contact-message .contact .b-body dl.contact-follow-us dd{
    width: 31px;
    height: 31px;
    display: inline-block;
    margin: 0 10px 0 0;
}
.contact-message .contact .b-body dl.contact-follow-us dd.facebook{
    background: url("../icon/icon-facebook.png") no-repeat;
}
.contact-message .contact .b-body dl.contact-follow-us dd.linkedin{
    background: url("../icon/icon-linkin.png") no-repeat;
}
.contact-message .contact .b-body dl.contact-follow-us dd a{
    display: block;
    height: 31px;
    text-indent: -9999px;
}
.contact-message .contact .b-foot{
    padding: 50px 0 0;
    font-size: 22px;
    font-style: italic;
}
.contact-message .message{
    width: 650px;
    padding: 0 60px 0 0;
}
.contact-message .message .b-body{
    padding: 20px 0 0;
}
.contact-message .message .b-body form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.contact-message .message .b-body form .form-item{
    margin: 0 0 10px;
}
.contact-message .message .b-body form .form-item:nth-child(1), .contact-message .message .b-body form .form-item:nth-child(2){
    width: calc(33% - 5px);
}

.contact-message .message .b-body form input, .contact-message .message .b-body form textarea{
    width: 100%;
    background: #fff;
    border: none;
}
.contact-message .message .b-body form input{
    height: 52px;
    padding: 10px;
}
.contact-message .message .b-body form textarea{
    min-height: 140px;
    padding: 10px;
}
.contact-message .message .b-body form button{
    background: #fff;
    border: none;
    width: 137px;
    height: 31px;
    color: var(--base-default-color);
    margin: 18px 0 0;
}
.contact-message .message .b-body form .form-item:nth-child(3){
    width: calc(33% - 5px);
}
.contact-message .message .b-body form .form-item:nth-child(4){
    width: calc(33% - 5px);
}
.contact-message .message .b-body form .form-item:nth-child(5){
    width: 100%;
}
.contact-message .message .b-body form .form-item:nth-child(6){
    width: 50%;
}
.contact-message .message .b-body form .form-item:nth-child(6) input { width:120px;}
.contact-message .message .b-body form .form-item:nth-child(7){
    width: 100%;
}
footer{
    width: 100%;
    padding: 50px calc(50% - 700px) 0;
    background: #202332;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
footer::before{
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 88px;
    top: auto;
    height: 1px;
    background: #6c6c6c;
}
footer::after{
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 87px;
    top: auto;
    height: 1px;
    background: #474747;
}
.logo-footer{
    width: 219px;
	padding-top:30px;
}
.logo-footer a{
    display: block;
    width: 100%;
    height: 47px;
    background: url("../images/logo-footer.png") no-repeat;
    text-indent: -9999px;
}
.logo-footer .logo-txt{
    font-size: 16px;
    color: #fff;
    padding: 30px 0 0;
}
.nav-footer{
    width: 800px;
    display: flex;
    justify-content: space-between;
    color: #fff;
}
.nav-footer a{
    color: #fff;
}
.nav-footer dl:nth-child(2){
    width: 260px;
    display: flex;
    flex-wrap: wrap;
}
.nav-footer dl dt{
    display: inline-block;
    font-size: 24px;
    line-height: 36px;
    border-bottom: 3px solid var(--base-default-color);
    margin: 0 100px 30px 0;
}
.nav-footer dl dd{
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 6px;
}
.nav-footer dl:nth-child(2) dd{
    width: 50%;
}
.copyright{
    width: 100%;
    height: 87px;
    line-height: 87px;
    text-align: center;
    color: #fff;
}

.banner{
    width: 100%;
    text-align: center;
    position: relative;
}
.banner img{
    width: 100%;
}
.banner .sub-category{
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}
.banner .sub-category ul{
    display: flex;
}
.banner .sub-category ul li{
    height: 44px;
    padding: 0 10px;
}
.banner .sub-category ul li a{
    display: block;
    height: 44px;
    line-height: 42px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255, .5);
    background: rgba(255,255,255, .5);
    padding: 0 20px;
    color: #fff;
    transition: all .5s ease;
    font-size: 20px;
}
.banner .sub-category ul li.active a, .banner .sub-category ul li a:hover{
    background: rgba(3, 61, 146, .5);
}
.breadcrumb{
    width: 1400px;
    margin: 20px auto 0;
    font-size: 18px;
}
.main{
    width: 1400px;
    margin: 20px auto 0;
}
.box-1 .b-head{
    font-size: 30px;
    line-height: 50px;
    position: relative;
}
.box-1 .b-head::before{
    content: "";
    display: block;
    width: 43px;
    height: 3px;
    background: var(--base-default-color);
    position: absolute;
    left: 0;
    bottom: 0;
}
.box-1 .b-body{
    padding: 40px 0 0;
}
.about .b-body{
    display: flex;
    justify-content: space-between;
}
.about .b-body .txt{
    width: 695px;
    position: relative;
}
.about .b-body .txt::before{
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    background: #f2f3f5;
    z-index: -1;
}
.about .b-body .txt .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.about .b-body .txt .title strong{
    line-height: 70px;
    font-size: 32px;
    font-weight: bold;
}
.about .b-body .txt .title strong em{
    font-size: 42px;
    font-weight: bold;
    font-style: italic;
}
.about .b-body .txt .title .play{
    line-height: 37px;
    padding: 0 0 0 50px;
    background: url("../icon/icon-play.png") left center no-repeat;
    background-size: contain;
    position: relative;
    font-weight: bold;
}
.about .b-body .txt .title .play::before{
    display: block;
    content: "";
    position: absolute;
    height: 1px;
    left: 50px;
    top: auto;
    right: 0;
    bottom: 5px;
    background: var(--base-default-color);
}
.about .b-body .txt .content{
    line-height: 30px;
    padding: 10px 0 0;
}
.about .b-body .txt .cert{
    margin-top: 100px;
}
.about .b-body .txt .cert ul{
    display: flex;
    justify-content: space-between;
}
.about .b-body .img{
    width: 685px;
    position: relative;
}
.about .b-body .img img{
    width: 100%;
}
.about .b-body .img .img-txt{
    position: absolute;
    left: 0;
    top: auto;
    right: 0;
    bottom: 0;
    padding: 20px 60px;
    background: rgba(21, 69, 143, .8);
    color: #fff;
    font-size: 18px;
    line-height: 1.8em;
}
/*------------------------*/
.about .b-body2{
    display: flex;
    justify-content: space-between;
}
.about .b-body2 .txt{
    width: 100%;
    position: relative;
}
.about .b-body2 .txt::before{
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    /*background: #f2f3f5;*/
    z-index: -1;
}
.about .b-body2 .txt .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.about .b-body2 .txt .title strong{
    line-height: 70px;
    font-size: 32px;
    font-weight: bold;
}
.about .b-body2 .txt .title strong em{
    font-size: 42px;
    font-weight: bold;
    font-style: italic;
}
.about .b-body2 .txt .title .play{
    line-height: 37px;
    padding: 0 0 0 50px;
    background: url("../icon/icon-play.png") left center no-repeat;
    background-size: contain;
    position: relative;
    font-weight: bold;
}
.about .b-body2 .txt .title .play::before{
    display: block;
    content: "";
    position: absolute;
    height: 1px;
    left: 50px;
    top: auto;
    right: 0;
    bottom: 5px;
    background: var(--base-default-color);
}
.about .b-body2 .txt .content{
    line-height: 30px;
    padding: 10px 0 0;
}
.about .b-body2 .txt .content img{ max-width:100%; margin-top:20px; margin-bottom:20px;}
.about .b-body2 .txt .cert{
    margin-top: 100px;
}
.about .b-body2 .txt .cert ul{
    display: flex;
    justify-content: space-between;
}
.about .b-body2 .img{
    width: 685px;
    position: relative;
}
.about .b-body2 .img img{
    width: 100%;
}
.about .b-body2 .img .img-txt{
    position: absolute;
    left: 0;
    top: auto;
    right: 0;
    bottom: 0;
    padding: 20px 60px;
    background: rgba(21, 69, 143, .8);
    color: #fff;
    font-size: 18px;
    line-height: 1.8em;
}
/*-----------------------------------*/
.count-up-pj{
    margin: 0;
    background: #fff;
}
.count-up-pj img { max-width:100%;}
.count-up-pj-title h2{ 
	text-align:center;
	padding-top:30px;
    font-size: 35px;
    font-weight: bold;
    font-style: italic;

}
.count-up-about{
    margin: 50px 0;
    background: #f2f3f5;
    border-radius: 10px;
    padding: 60px 65px;
}
.count-up-about ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.count-up-about ul li{
    width: calc(20% - 18px);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    padding: 20px 0;
}
.count-up-about ul li strong{
    font-size: 30px;
    color: #000;
    transition: all .5s ease;
}
.count-up-about ul li:hover strong{
    color: #015bbb;
}
.count-up-about ul li strong em{
    font-size: 47px;
    font-style: normal;
}
.count-up-about ul li span{
    font-size: 17px;
    color: #898989;
}
.manufacture .b-body .txt{
    line-height: 30px;
    color: #858585;
}
.manufacture .b-body .img-list{
    margin: 20px 0;
}
.manufacture .b-body .img-list ul{
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 39px);
}
.manufacture .b-body .img-list ul li{
    width: calc(33.33333333% - 39px);
    margin: 0 39px 50px 0;
}

.manufacture .b-body .img-list ul li.honorli{
    width: calc(25% - 39px);
    margin: 0 39px 50px 0;
}
.manufacture .b-body .img-list ul li figure{
    position: relative;
}
.manufacture .b-body .img-list ul li figure img{
    width: 100%;
}
.manufacture .b-body .img-list ul li figure figcaption{
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    background: var(--base-default-color);
    font-size: 16px;
    position: absolute;
    left: 30px;
    top: auto;
    right: 30px;
    bottom: -25px;
}
.products .b-body{
    display: flex;
    justify-content: space-between;
}
.products .b-body .box-filter{
    width: 320px;
}
.products .b-body .box-filter .filter-item{
    margin: 0 0 40px;
}
.products .b-body .box-filter .filter-item .title{
    font-weight: bold;
}
.products .b-body .box-filter .filter-item .content ul li{
    line-height: 17px;
}
.products .b-body .product-list{
    width: 1050px;
}
.products .b-body .product-list ul{
    display: flex;
    flex-wrap: wrap;
    width: 1072px;
}
.products .b-body .product-list ul li{
    width: calc(33.333333333% - 22px);
    margin: 0 22px 40px 0;
}
.products .b-body .product-list ul li figure{
    position: relative;
    border: 1px solid #e8e8e8;
    padding: 15px;
    overflow: hidden;
}
.products .b-body .product-list ul li figure img{
    width: 100%;
}
.products .b-body .product-list ul li figure figcaption .name{
    font-size: 18px;
    padding: 10px 0 20px;
    border-bottom: 1px solid #e8e8e8;
    text-align: center;
}
.products .b-body .product-list ul li figure figcaption .name a{
    color: #4c5256;
}
.products .b-body .product-list ul li figure figcaption .more{
    padding: 10px 0;
    text-align: center;
    color: #bcbcb7;
}
.products .b-body .product-list ul li figure figcaption .more2{
    padding: 10px 0;
    text-align: center;
    color: #fff;
    margin-top:30px;
    border-top:solid 1px #efefef;
}
.products .b-body .product-list ul li figure figcaption .description{
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
    height: 100%;
    background: rgba(3, 61, 146, .8);
    padding: 40px 20px 0;
    color: #fff;
    transition: all .5s ease;
    white-space: pre-wrap;
    line-height: 2.5em;
}
.products .b-body .product-list ul li figure:hover figcaption .description{
    top: 0;
}

.product-detail{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;
}
.product-detail .album {
    width: 600px;
    margin: 0 100px 0 0;
}
.product-params-swiper {
    overflow: hidden;
}
.product-params-swiper img {
    width: 100%;
    border: 4px solid #eaeaea;
}
.product-params-swiper-thumb {
    overflow: hidden;
    margin: 20px 0 0;
    padding: 0 30px;
    position: relative;
}
.product-params-swiper-thumb::before,.product-params-swiper-thumb::after{
    content: "";
    display: block;
    width: 30px;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.product-params-swiper-thumb::after{
    left: auto;
    right: 0;
}
.product-params-swiper-thumb img {
    width: 100%;
    border: 4px solid #eaeaea;
    transition: all 0.3s ease;
}
.swiper-slide-thumb-active img {
    border-color: var(--base-default-color);
}
.product-params-swiper-thumb .swiper-button-prev::after, .product-params-swiper-thumb .swiper-button-next::after{
    font-size: 20px;
}
.product-params-swiper-thumb .swiper-button-prev{
    left: 0;
}
.product-params-swiper-thumb .swiper-button-next{
    right: 0;
}.product-detail .info {
     flex: 1;
 }
.product-detail .info .sku{
    margin: 0 0 40px;
    font-size: 20px;
}
.product-detail .info h1 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 50px;
}
.product-detail .info .detail .b-head {
    font-size: 20px;
    line-height: 36px;
    border-bottom: 1px solid #e5e7e8;
}
.product-detail .info .detail .b-body {
    font-size: 16px;
    line-height: 30px;
    padding: 20px 0 40px;
    border-bottom: 1px solid #e5e7e8;
    color: #797676;
}
.product-detail .info .price {
    font-size: 18px;
    display: flex;
    padding: 30px 0 40px;
    color: var(--base-default-color);
}
.product-detail .info .price::before {
    content: '';
    display: block;
    width: 29px;
    height: 29px;
    margin: 0 10px 0 0;
    background: url(../icon/lock.jpg) no-repeat;
}
.product-detail .info .btns {
    padding: 140px 0 0;
}
.product-detail .info .btns ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product-detail .info .btns ul li a {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 51px;
    border-radius: 26px;
}
.product-detail .info .btns ul li a svg {
    margin-right: 10px;
    width: 28px;
    height: 28px;
}
.product-detail .info .btns ul li:nth-child(1) a {
    background: var(--base-default-color);
    color: #fff;
}
.product-detail .info .btns ul li:nth-child(2) a {
    background: #34373a;
    color: #fff;
}
.product-detail .info .btns ul li:nth-child(3) a {
    background: #eaeaea;
    color: #fff;
}
.product-detail .description {
    width: 100%;
    margin: 60px 0 0;
}
.product-detail .description .b-head {
    width: 163px;
    height: 49px;
    line-height: 49px;
    background: #34373a;
    color: #fff;
    text-align: center;
}
.product-detail .description .b-body {
    width: 100%;
    padding: 40px 0;
}

.product-detail .message {
    width: 100%;
    margin: 40px 0;
}
.product-detail .message .b-head {
    font-size: 20px;
    font-weight: bold;
    padding: 0 0 0 20px;
    background: url(../icon/play-fill.svg) left center no-repeat;
}
.product-detail .message .b-des {
    color: #888;
    line-height: 30px;
    padding: 5px 0;
}
.product-detail .message .b-body {
    padding: 20px 0 0;
}
.product-detail .message .b-body ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.product-detail .message .b-body li:nth-child(1),
.product-detail .message .b-body li:nth-child(4),
.product-detail .message .b-body li:nth-child(5),
.product-detail .message .b-body li:nth-child(6) {
    width: 100%;
}
.product-detail .message .b-body li:nth-child(2),
.product-detail .message .b-body li:nth-child(3),
.product-detail .message .b-body li:nth-child(4) {
    width: calc(33% - 10px);
}
.product-detail .message .b-body li .ipt-msg,
.product-detail .message .b-body li .textarea-msg {
    width: 100%;
    height: 46px;
    padding: 10px;
    background: #fff;
    line-height: 24px;
    border: 1px solid #d3d6d9;
}
.product-detail .message .b-body li .textarea-msg {
    height: 100px;
}
.product-detail .message .b-body li .btn-msg {
    width: 163px;
    height: 49px;
    line-height: 49px;
    background: var(--base-default-color);
    border: none;
    color: #fff;
}
.product-detail .message .b-body li .ipt-msg:disabled {
    background: #34373a;
    color: #fff;
}
.certification .b-body{
    padding: 70px 0 0;
}

.list-blog {
    padding: 40px 0 0;
}
.list-blog ul li {
    padding: 40px 0;
    border-bottom: 1px solid #c8cbcd;
}
.list-blog ul li figure {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.list-blog ul li figure img {
    width: 400px;
    margin: 0 40px 0 0;
    border: solid 1px #f2f2f2;
}
.list-blog ul li figure figcaption {
    flex: 1;
}
.list-blog ul li figure figcaption span {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #d6d6d6;
    margin-bottom: 30px;
}
.list-blog ul li figure figcaption span svg {
    margin-right: 10px;
}
.list-blog ul li figure figcaption strong {
    display: block;
    line-height: 120%;
    padding: 5px 0;
    margin-bottom: 20px;
    font-size: 24px;
}
.list-blog ul li figure figcaption p {
    font-size: 16px;
    line-height: 32px;
    color: #b9b9b6;
}
.list-blog ul li figure .more{
    margin: 20px 0 0;
}
.list-blog ul li figure .more a {
    display: inline-block;
    line-height: 38px;
    padding: 0 20px;
    color: #fff;
    font-size: 13px;
    background: var(--base-default-color);
}
.blog-main {
    padding: 40px 0 0;
}
.blog-main h1 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}
.blog-info {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #767676;
    font-size: 14px;
}
.blog-info svg {
    margin: 0 10px;
}
.blog-content {
    padding: 40px 0;
}
.blog-content p {
    text-indent: 2em;
}
.blog-content img {
    max-width: 100%;
}
.contact-us{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.contact-us .contact{
    width: 340px;
}
.contact-us .contact .b-body{
    padding: 20px 0 0;
}
.contact-us .contact ul li{
    height: 40px;
    line-height: 24px;
    padding: 8px 0 8px 60px;
    margin-bottom: 20px;
    font-size: 14px;
    position: relative;
}
.contact-us .contact ul li::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #dbdbdb;
    position: absolute;
    left: 0;
    top: 0;
}
.contact-us .contact ul li.tel::before{
    background: #fff url("../icon/icon-contact-tel.png") center center no-repeat;
}
.contact-us .contact ul li.email::before{
    background: #fff url("../icon/icon-contact-email.png") center center no-repeat;
}
.contact-us .contact ul li.phone::before{
    background: #fff url("../icon/icon-contact-whatsapp.png") center center no-repeat;
}
.contact-us .contact ul li.address::before{
    background: #fff url("../icon/icon-contact-address.png") center center no-repeat;
}
.contact-us .message{
    width: 588px;
}
.contact-us .message .b-body{
    padding: 20px 0 0;
}
.contact-us .message .b-body form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.contact-us .message .b-body form .form-item{
    margin: 0 0 10px;
}
.contact-us .message .b-body form .form-item:nth-child(1), .contact-us .message .b-body form .form-item:nth-child(2){
    width: calc(33% - 5px);
}
.contact-us .message .b-body form input, .contact-us .message .b-body form textarea{
    width: 100%;
    background: #fff;
    border: 1px solid #646464;
}
.contact-us .message .b-body form input{
    height: 52px;
    padding: 10px;
}
.contact-us .message .b-body form textarea{
    min-height: 140px;
    padding: 10px;
}
.contact-us .message .b-body form button{
    background: var(--base-default-color);
    border: none;
    width: 137px;
    height: 40px;
    color: var(--base-default-color);
    margin: 18px 0 0;
    color: #fff;
}
.contact-us .message .b-body form .form-item:nth-child(3){
    width: calc(33% - 5px);
}
.contact-us .message .b-body form .form-item:nth-child(4){
    width: calc(33% - 5px);
}
.contact-us .message .b-body form .form-item:nth-child(5){
    width: 100%;
}
.contact-us .message .b-body form .form-item:nth-child(6){
    width: 100%;
}

.contact-us .message .b-body form .form-item:nth-child(6) input{
    width: 100px;
}
.contact-us .follow-us{
    width: 100%;
}
.contact-us .follow-us .b-body{
    padding: 20px 0 0;
}
.contact-us .follow-us ul{
    display: flex;
    width: 80px;
    justify-content: space-between;
}
.contact-us .follow-us ul li{
    width: 31px;
    height: 31px;
}
.contact-us .follow-us ul li.facebook{
    background: url("../icon/icon-facebook-blue.png") no-repeat;
}
.contact-us .follow-us ul li.linkedin{
    background: url("../icon/icon-linkin-blue.png") no-repeat;
}
.contact-us .follow-us ul li a{
    display: block;
    height: 31px;
    text-indent: -9999px;
}
.contact-us .box-map{
    width: 100%;
    margin: 40px 0;
}
.contact-us .box-map iframe{
    width: 100%;
    height: 500px;
}
.tool-bar{
    position: fixed;
    right: 10px;
    top: 220px;
    z-index: 9997;
}
.tool-bar ul li{
    width: 55px;
    height: 55px;
    margin: 0 0 10px;
    position: relative;
}
.tool-bar ul li a{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: rgba(0,154,68,.8);
    display: flex;
    justify-content: center;
    align-items: center;
}
.tool-bar ul li.wechat .qrcode{
    width: 200px;
    height: 200px;
    padding: 20px;
    background: rgba(67,67,67,.5);
    position: absolute;
    right: 60px;
    top: 0;
    border-radius: 20px;
    display: none;
}
.tool-bar ul li.wechat:hover .qrcode{
    display: block;
}
.tool-bar ul li img{
    width: 50%;
}
.tool-bar ul li.wechat .qrcode img{
    width: 100%;
}

@media screen and (min-width: 1200px){
    .nav-header{
        width: 898px;
        height: 46px;
        position: absolute;
        left: calc(50% - 360px);
        top: 54px;
        font-size: 16px;
    }
    .nav-header>ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    .nav-header>ul>li{
        flex: 1;
        text-align: center;
        padding:0 8px;
        position: relative;
        height: 38px;
        line-height: 38px;
    }
    .nav-header>ul>li>a{
        display: block;
        line-height: 38px;
        padding:0 8px;
    }
    .nav-header>ul>li:hover>a{
        background: var(--base-default-color);
        color: #fff;
    }
    .nav-header>ul>li::after{
        content: "/";
        position: absolute;
        right: 0;
        top: 1px;
    }
    .nav-header>ul>li:last-child::after{
        display: none;
    }

    .nav-header > ul > li > ul.sub {
        display: block;
        transform: scaleY(0);
        transform-origin: 0 0;
        position: absolute;
        top: 30px;
        left: 8px;
        background-color: var(--base-default-color);
        z-index: 999;
        transition: all 0.3s ease;
        min-width: 160px;
        border: none;
        border-radius: 0;
        padding: 20px 0;
    }
    .nav-header > ul > li:hover > ul.sub {
        transform: scaleY(1);
    }
    .nav-header > ul > li > ul.sub > li {
        height: 50px;
        line-height: 49px;
        padding: 0 20px;
        border-bottom: 1px solid #004dbe;
        position: relative;
    }
    .nav-header > ul > li > ul.sub > li > span {
        display: block;
        width: 7px;
        height: 7px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        transform: rotate(45deg);
        position: absolute;
        top: calc(50% - 3px);
        right: 20px;
        transition: all 0.3s ease;
    }
    .nav-header > ul > li > ul.sub > li > a {
        color: #fff;
    }
    .nav-header > ul > li > ul.sub > li:hover > a{
        color: #559aff;
    }
    .nav-header > ul > li > ul.sub > li:hover > span {
        border-color: var(--base-default-color);
        transform: rotate(-45deg);
    }
}
@media screen and (min-width: 1440px) {
    .nav-header{
        width: 920px;
        left: calc(50% - 440px);
    }
}
@media screen and (min-width: 1200px) and (max-width: 1439px) {
    .logo-header{
        left: calc(50% - 600px);
    }
    .nav-header{
        width: 750px;
        font-size: 14px;
    }
    .nav-header>ul>li{
        padding:0;
    }
    header .search{
        right: calc(50% - 600px);
    }
    .product-categories .b-body{
        width: 1200px;
        padding: 130px 0 0 600px;
    }
    .product-categories .b-body .txt strong{
        font-size: 50px;
    }
    .product-categories .b-body .txt ul{
        padding: 60px 0 0 120px;
        font-size: 20px;
    }
    .product-categories .b-body .txt .footer{
        padding: 60px 30px 0 100px;
        font-size: 20px;
    }
    .count-up-index ul{
        width: 1200px;
    }
    .count-up-index ul li span{
        font-size: 20px;
    }
    .company{
        width: 1200px;
		padding:85px 40px 75px;
    }
    .company .video{
        width: 580px;
    }
    .company .profile{
        width: 510px;
    }
    .company .profile .b-head{
        font-size: 40px;
    }
    .company .profile .b-body{
        font-size: 16px;
		padding:0;
    }
	
    .certificates{
        padding: 25px calc(50% - 600px);
    }
    .certificates .b-head{
        width: 220px;
        font-size: 20px;
    }
    .certificates .b-body{
        width: 940px;
    }
    .contact-message{
        padding: 25px calc(50% - 600px);
    }
    .contact-message .contact{
        width: 620px;
    }
    .contact-message .contact .b-foot{
        font-size: 20px;
    }
    .contact-message .message{
        width: 550px;
        padding: 0 20px 0 0;
    }
    .contact-message .contact .b-body dl{
        width: 270px;
    }
    footer{
        padding: 50px calc(50% - 600px) 0;
    }
    .nav-footer{
        width: 600px;
    }
    .breadcrumb{
        width: 1200px;
    }
    .main{
        width: 1200px;
    }
    .about .b-body .txt{
        width: 595px;
    }
    .about .b-body .img{
        width: 585px;
    }
    .about .b-body .img .img-txt{
        padding: 20px 30px;
        font-size: 16px;
    }
    .about .b-body .txt .content{
        font-size: 14px;
        line-height: 26px;
    }
    .about .b-body .txt .cert{
        margin-top: 30px;
    }
    .products .b-body .box-filter{
        width: 220px;
    }
    .products .b-body .product-list{
        width: 960px;
    }
    .products .b-body .product-list ul{
        width: 982px;
    }
	
/*--------------------*/
 .about .b-body2 .txt{
        width: 100%;
    }
    .about .b-body2 .img{
        width: 585px;
    }
    .about .b-body2 .img .img-txt{
        padding: 20px 30px;
        font-size: 16px;
    }
    .about .b-body2 .txt .content{
        font-size: 14px;
        line-height: 26px;
    }
    .about .b-body2 .txt .cert{
        margin-top: 30px;
    }
    .products .b-body2 .box-filter{
        width: 220px;
    }
    .products .b-body2 .product-list{
        width: 960px;
    }
    .products .b-body2 .product-list ul{
        width: 982px;
    }
/*--------------------*/	

    .product-detail .album{
        margin: 0 40px 0 0;
    }
    .certification .b-body img{
        width: 100%;
    }
}
@media screen and (max-width: 1199px) {
    .logo-header{
        left: 20px;
    }
    .nav-header {
        height: auto;
        font-size: 20px;
        position: absolute;
        right: 0;
        top: 0%;
        width: 100%;
        transform: none;
        z-index: 998;
        padding: 150px 40px 0;
    }
    .nav-header .btn-header-nav {
        position: absolute;
        right: 20px;
        top: 70px;
        display: block;
        width: 30px;
        height: 30px;
    }
    .nav-header .btn-header-nav::before,
    .nav-header .btn-header-nav::after,
    .nav-header .btn-header-nav i {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background: #505050;
        position: absolute;
        left: 0;
        top: 50%;
        transition: all 0.5s ease;
    }
    .header-index .nav-header .btn-header-nav::before,
    .header-index .nav-header .btn-header-nav::after,
    .header-index .nav-header .btn-header-nav i,
    .nav-header.show .btn-header-nav::before,
    .nav-header.show .btn-header-nav::after,
    .nav-header.show .btn-header-nav i {
        background: #fff;
    }
    .nav-header .btn-header-nav::before {
        transform: translateY(-12px);
    }
    .nav-header .btn-header-nav::after {
        transform: translateY(10px);
    }
    .nav-header .btn-header-nav i {
        transform: translateY(-1px);
    }
    .nav-header.show .btn-header-nav::before {
        transform: translateY(-1px);
        transform: rotate(-45deg);
    }
    .nav-header.show .btn-header-nav::after {
        transform: translateY(-1px);
        transform: rotate(45deg);
    }
    .nav-header.show .btn-header-nav i {
        opacity: 0;
    }
    header .offcanvas-backdrop.show {
        background: rgba(0, 0, 0, 0.7);
        z-index: 997;
        opacity: 1;
    }

    .nav-header > ul {
        display: none;
    }
    .nav-header > ul > li {
        height: auto;
        padding: 20px 0;
    }
    .nav-header > ul > li > a {
        color: #fff;
    }
    .nav-header > ul > li > span {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 10px;
        background: url(../images/arrow-right.svg) no-repeat;
        background-size: cover;
        transition: all 0.5s ease;
        mask: url(../images/arrow-right.svg);
        background: #fff;
        position: relative;
        top: 2px;
    }
    .nav-header > ul > li > span.show {
        transform: rotate(90deg);
    }
    .nav-header.show {
        color: #fff;
    }
    .nav-header.show > ul {
        display: block;
    }
    .nav-header > ul > li > ul {
        position: static !important;
        transform: none !important;
        margin: 10px 0 0 !important;
    }
    .nav-header > ul > li > ul.dropdown-menu {
        background: rgba(0, 0, 0, 0.3);
        padding: 20px;
        line-height: 2em;
    }
    .nav-header > ul > li > ul > li a {
        color: #fff;
    }
    header .search{
        right: 80px;
    }
    .product-categories .b-body{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 40px 0 0;
    }
    .product-categories .b-body .txt{
        order: 2;
    }
    .product-categories .b-body .txt strong{
        display: block;
        text-align: center;
    }
    .product-categories .b-body::before{
        display: none;
    }
    .product-categories .b-body .txt ul{
        background: var(--base-default-color);
        padding: 40px;
    }
    .product-categories .b-body .txt .footer{
        padding: 20px 40px;
    }
    .product-categories .b-body .img{
        position: relative;
        order: 1;
        top: 0;
        text-align: center;
        max-width: 100%;
        padding: 0 20px;
    }
    .count-up-index ul{
        width: 100%;
    }
    .count-up-index ul li strong{
        font-size: 20px;
    }
    .count-up-index ul li strong em{
        font-size: 30px;
    }
    .count-up-index ul li span{
        font-size: 16px;
        text-align: center;
    }
    .company{
        width: 100%;
        flex-direction: column;
    }
    .company .video{
        width: 100%;
    }
	.company .video .b-head strong { display:none;}
    .company .profile{
        width: 100%;
        margin: 40px 0 0;
    }
    .certificates{
        flex-direction: column;
        padding: 40px;
    }
    .certificates .b-head{
        width: 100%;
        text-align: center;
        margin: 0 0 40px;
    }
    .certificates .b-body{
        width: 100%;
    }
    .contact-message{
        flex-direction: column;
        padding: 40px;
    }
    .contact-message .contact{
        width: 100%;
    }
    .contact-message .message{
        width: 100%;
        padding: 0;
    }
    footer{
        flex-direction: column;
        align-items: center;
    }
    .logo-footer{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .logo-footer a{
        width: 219px;
        margin: 0 20px 0 0;
    }
    .logo-footer .logo-txt{
        width: 300px;
        padding: 0;
    }
    .nav-footer{
        width: 600px;
        margin: 40px 0 0;
    }
    .breadcrumb{
        width: 100%;
        padding: 0 40px;
    }
    .main{
        width: 100%;
        padding: 40px;
    }
    .about .b-body{
        flex-direction: column;
    }
    .about .b-body .txt{
        width: 100%;
    }
    .about .b-body .txt .cert{
        margin: 40px 0 0;
    }
    .about .b-body .img{
        width: 100%;
        margin: 40px 0 0;
    }
	
/*-----------------------------*/
    .about .b-body2{
        flex-direction: column;
    }
    .about .b-body2 .txt{
        width: 100%;
    }
    .about .b-body2 .txt .cert{
        margin: 40px 0 0;
    }
    .about .b-body2 .img{
        width: 100%;
        margin: 40px 0 0;
    }
/*-----------------------------*/

    .count-up-about{
        padding: 20px;
    }
    .count-up-about ul li{
        height: 140px;
        justify-content: center;
        text-align: center;
    }
    .count-up-about ul li strong{
        font-size: 20px;
        line-height: 100%;
    }
    .count-up-about ul li strong em{
        font-size: 30px;
    }
    .count-up-about ul li span{
        font-size: 14px;
        text-align: center;
    }
    .products .b-body .box-filter{
        width: 200px;
    }
    .products .b-body .product-list{
        width: calc(100% - 220px);
    }
    .products .b-body .product-list ul{
        width: calc(100% + 22px);
    }
    .products .b-body .product-list ul li figure{
        height: 100%;
    }
    .product-detail .album{
        margin: 0 auto;
    }
    .product-detail{
        flex-direction: column;
    }
    .product-detail .info{
        width: 100%;
        margin: 40px 0 0;
    }
    .product-detail .info h1{
        margin-bottom: 40px;
    }
    .product-detail .info .btns{
        padding: 40px 0 0;
    }
    .certification .b-body img{
        width: 100%;
    }
    .contact-us .contact{
        width: 100%;
        margin-bottom: 40px;
    }
    .contact-us .contact .b-body ul{
        display: flex;
        flex-wrap: wrap;
    }
    .contact-us .contact .b-body ul li{
        width: 50%;
    }
    .contact-us .message{
        width: 100%;
        margin-bottom: 40px;
    }
}
@media screen and (max-width: 800px) {
    .product-categories .b-body .img img{
        width: 100%;
    }
    .contact-message .message{
        margin: 40px 0 0;
    }
    .manufacture .b-body .img-list ul li{
        width: calc(50% - 39px);
    }
    .products .b-body .product-list ul li{
        width: calc(50% - 22px);
    }
    .products .b-body .product-list ul li figure{
        padding: 10px;
    }
    .products .b-body .product-list ul li figure figcaption .name{
        font-size: 16px;
        padding: 10px 0;
    }
}
@media screen and (max-width: 600px){
    .tool-bar { right:10px;}
    .top-bar{
        display: none;
    }
    header{
        height: 100px;
    }
    .logo-header{
        top: 25px;
    }
    .nav-header .btn-header-nav{
        top: 30px;
    }
    header .search{
        display: none;
    }
    .product-categories{
        padding: 40px;
    }
    .product-categories .b-head{
        font-size: 40px;
        line-height: 50px;
    }
    .product-categories .b-sub-head{
        font-size: 30px;
        line-height: 40px;
    }
    .product-categories .b-body .txt strong{
        font-size: 40px;
    }
    .product-categories .b-body .txt ul{
        font-size: 18px;
    }
    .count-up-index ul{
        flex-wrap: wrap;
    }
    .count-up-index ul li{
        text-align: center;
        width: 33.3333333%;
        flex: auto;
        margin: 0 0 30px;
    }
    .company .profile .b-head{
        font-size: 30px;
    }
    .nav-footer{
        display: none;
    }
    .logo-footer .logo-txt{
        width: calc(100% - 240px);
    }
    .copyright{
        margin: 40px 0 0;
    }
    .main{
        padding: 20px;
    }
    .count-up-about ul{
        justify-content: center;
    }
    .count-up-about ul li{
        width: calc(50% - 20px);
        margin: 0 10px 20px;
    }
    .manufacture .b-body .img-list ul{
        width: 100%;
        justify-content: space-between;
    }
    .manufacture .b-body .img-list ul li{
        width: calc(50% - 10px);
        margin: 0 0 20px;
    }
.manufacture .b-body .img-list ul li.honorli{
    width: calc(33.33% - 19px);
    margin: 0 5px 20px 5px;
}
    .manufacture .b-body .img-list ul li figure figcaption{
        left: 10px;
        right: 10px;
        font-size: 14px;
        height: 30px;
        bottom: -15px;
        line-height: 30px;
    }
    .products .b-body{
        flex-direction: column;
    }
    .products .b-body .box-filter{
        width: 100%;
    }
    .products .b-body .box-filter .filter-item .content ul{
        display: flex;
        flex-wrap: wrap;
    }
    .products .b-body .box-filter .filter-item .content ul li{
        padding: 0 20px 0 0;
    }
    .products .b-body .product-list{
        width: 100%;
    }
    .box-1 .b-head{
        font-size: 24px;
        line-height: 40px;
    }
    .breadcrumb{
        padding: 0 20px;
    }
    .banner .sub-category{
        width: 100%;
    }
    .banner .sub-category ul{
        justify-content: center;
    }
    .product-detail .album{
        width: 100%;
    }
    .product-detail .info .btns ul{
        flex-wrap: wrap;
        justify-content: center;
    }
    .product-detail .info .btns ul li{
        margin: 0 10px 20px;
    }
    .contact-us .contact .b-body ul li{
        width: 100%;
    }
}
/*=====================================cj======================================================*/
.fancybox-slide--iframe .fancybox-content
{
    width: 100%;
    max-width: 80%;
    height: 100%;
    min-height: 90%;
    max-height: 90%;
    margin: 0;
}

.msg  a {
    font-size: 16px;
    color: #0a5ca4;
}

.swiper-pagination-bullet { width:12px; height:12px;}
