.mNavOpen{
    transform: translateX(0%) !important;
    transition: 0.35s ease-in-out;
}
.mNavClose{
    transform: translateX(100%) !important;
    transition: 0.35s ease-in-out;
}
@media screen and (max-width:414px){
	#indexProductBox .indexProduct .productListBox ul li .imgBox{
		max-height: 6.875rem !important;
	}
	#indexProductBox .indexProduct .productListBox ul li .imgBox img{
		min-height: 6.875rem !important;
	}
	.productListBox ul li .imgBox{
        max-height: 9rem;
    }
    .productListBox ul li .imgBox img{
    	min-height: 9rem;
    }
}
@media screen and (max-width:768px){
	/* topHeaderBox */
	#tophederBox{
		display: none !important;
	}
	#tophederBox:before{
		width: 100%;
		height: 2rem;
		border-radius: 0;
	}
	#tophederBox .container-fluid .row .topLeft{
		width:100%;
	}
	#tophederBox .container-fluid .row .topLeft span{
		line-height:2rem;
	}
	#tophederBox .container-fluid .row .topRight{
		display:none;
	}
	/* headerBox */
	#headerBox{
		position: fixed;
		top: 0;
		left: 0;
		height: 5rem;
		transition:0.35s ease-in-out;
	}
	#headerBox:before{
		height:5rem;
		background: var(--bColor);
	}
	.aboutNavBox .navList .navBox .nav{
		width: calc((100% - 3rem)/3);
	}
	#headerBox .header .leftLogo{
		margin:0;
	}
	#headerBox .header .leftLogo img{
		width: auto;
		height: 3rem;
		margin: 1rem 0 1rem -1rem;
		transition:0.35s ease-in-out;
	}
	#headerBox .header .leftLogo .logoFton{
		display:none;
		transition:0.35s ease-in-out;
	}
	#headerBox .header .rightNav{
		position: relative;
		top: 0.375rem;
		right: 0;
		width: auto;
		height:auto;
		margin: 2rem auto;
		transition:0.35s ease-in-out;
	}
	#headerBox .header .rightNav .mIconBox{
		display:block;
		transition:0.35s ease-in-out;
	}
	#headerBox .header .rightNav .navList{
		display: block;
		position: fixed;
		top: 5rem;
		left: 0;
		width:100vw;
		height: calc(100vh - 5rem);
		background: var(--fColor);
		transform: translateX(100%);
		transition:0.35s ease-in-out;
		z-index: 200;
	}
	#headerBox .header .rightNav .navList .nav{
		width: calc(100% - 3rem);
		margin: 0 1.5rem;
		border-right: none;
		border-bottom: 1px solid rgba(51,51,51,0.1);
	}
	#headerBox .header .rightNav .navList .nav .tiTle{
		display: block;
	}
	#headerBox .header .rightNav .navList .nav h1{
		text-align:left;
		width: 90%;
		margin: 0;
		font-size:0.875rem;
		color: var(--hColor);
		line-height: 4rem;
		transition:0.35s ease-in-out;
		float:left;
	}
	#headerBox .header .rightNav .navList .nav:hover h1:before{
		width:110%;
	}
	#headerBox .header .rightNav .navList .nav .iconfont{
		display:block;
		text-align: right;
		width: 0.875rem;
		margin: 1.5rem auto;
		font-size: 0.875rem;
		color: var(--desColor);
		transition:0.35s ease-in-out;
		float:right;
	}
	#headerBox .header .rightNav .navList .nav .iconfont:before{
	    display:block;
	    width:0.875rem;
	    height:0.875rem;
	}
	#headerBox .header .rightNav .navList .nav .child{
		width:100% !important;
		background: var(--fColor);
		border-bottom: 1px solid rgba(51,51,51,0.1);
	}
	#headerBox .header .rightNav .navList .nav .childList{
		width:100% !important;
	}
	#headerBox .header .rightNav .navList .nav:hover .childList{
		display: none;
		position: relative;
		top: -0.125rem;
		height: 0;
		margin: 4rem 0 0 0;
		border-radius: 0;
	}
	#headerBox .header .rightNav .navList .nav .childList .child a{
		display:block;
		width: 90%;
	}
	#headerBox .header .rightNav .navList .nav .childList .child h2{
		text-align: left;
		width:100%;
		padding: 0 0 0 2rem;
		font-size: 0.875rem;
		color: var(--hColor);
		line-height: 4rem;
	}

	/* #bannerBox */
	#bannerBox{
		position:relative;
		margin:5rem auto 0;
	}
	#bannerBox .imgBgBox{
		height:14rem;
	}
	#bannerBox .titleBox{
		top: calc((100% - 5rem)/2);
	}
	#bannerBox .swiper-button-prev{
		left: 1rem;
		margin: 0;
	}
	#bannerBox .swiper-button-next{
		right: 1rem;
		margin: 0;
	}
	#bannerBox .swiper-button-prev .iconfont, #bannerBox .swiper-button-next .iconfont{
		margin:0;
	}
	/* productTypeBox */
	#productTypeBox{
        margin:2rem auto 1rem;
        padding: 0 2rem;
    }
    #productTypeBox .topTitleBox{
        margin: 0 0 1.5rem;
    }
    #productTypeBox .topTitleBox span:nth-child(1){
        font-size:2rem;
    }
    #productTypeBox .topTitleBox span:nth-child(2){
        font-size: 1.5rem;
    }
    #productTypeBox .typeListBox ul{
        display:block;
        margin: 0;
    }
    #productTypeBox .typeListBox ul li{
        width: 100%;
        max-height: 100%;
        margin: 0 0 1rem;
        overflow:hidden;
        float: left;
    }
    #productTypeBox .typeListBox ul li:nth-child(2){
        margin: 0 0 1rem;
    }
    #productTypeBox .typeListBox ul li:nth-child(3){
        margin: 0 0 1rem;
    }
    #productTypeBox .typeListBox ul li .coverBox{
        border-radius: 0;
    }
    #productTypeBox .typeListBox ul li:hover .coverBox{
        top:30%;
        height:100%;
        border-radius:0;
    }
    #productTypeBox .typeListBox ul li .imgBox{
        padding: 0 0 50%;
        transition:0.35s ease-in-out;
    }
    #productTypeBox .typeListBox ul li .contentBox{
        top: auto;
        left:1rem;
        bottom: 1rem;
        transition: 0.35s ease-in-out;
    }
    #productTypeBox .typeListBox ul li .contentBox .title h1{
        font-size: 1.2rem;
    }
    /* .productListBox */
    .productListBox ul li{
    	width: calc((100% - 2rem)/2);
    }
	/* indexAboutBox */
	#indexAboutBox .topTitleBox{
		padding: 2rem 0;
	}
	#indexAboutBox .topTitleBox h1{
		font-size:2rem;
	}
	#indexAboutBox .aboutPic img{
		width:auto;
	}
	#indexAboutBox .contentBox .profileBox .more{
		color:var(--bColor);
		border: 1px solid var(--bColor);
	}
    /* indexAboutBox */
    #indexNewsListBox .topTitleBox{
    	margin: 0;
    	padding: 3rem 0;
    }
    #indexNewsListBox .listBox ul{
    	width: 100%;
    	padding: 0;
    	flex-wrap: wrap;
    }
    #indexNewsListBox .listBox ul li{
    	width:100%;
    	margin:1rem auto;
    	border-radius: 0.5rem;
    	box-shadow: 1px 4px 8px rgba(51,51,51,0.1);
    }
	/* footer_box */
    #footerBox{
    	padding:0 0 8px 0;
    }
    #footerBox .footer{
    	margin: 0;
    	padding: 16px 0 0 0;
    }
    #footerBox .footer .footer_nav{
    	display:none;
    }
    #footerBox .footer .footer_produt_nav{
    	display:none;
    }
    #footerBox .footer .listBox{
    	text-align: center;
    	width:100%;
    	margin: 2rem auto;
    }
    #footerBox .footer .listBox .nav{
    	text-align: center;
    	width: calc(100%/2);
    }
    #footerBox .footer .listBox .nav h1{
    	width: 100%;
    	padding:0;
    }
    #footerBox .footer .contactBox{
    	text-align: center;
    	width:100%;
    }
    #footerBox .footer .contactBox .logoBox img{
    	float:none;
    }
	/* copyRightBox */
	#copyRightBox .left{
		text-align: center;
		line-height:2;
	}
	#copyRightBox .right{
		display: block;
		text-align:center;
		width: 100%;
	}
	#copyRightBox .right a{
		display:inline-block;
		text-align: center;
		margin: 0;
		line-height:2;
		float:none;
	}
}
@media screen and (min-width:769px) and (max-width:1024px){
	/* headerBox */
	#headerBox{
		position: fixed;
		top: 0;
		left: 0;
		height: 5rem;
		transition:0.35s ease-in-out;
	}
	#headerBox:before{
		height:5rem;
		background: var(--bColor);
	}
	#headerBox .header .leftLogo{
		margin:0;
	}
	#headerBox .header .leftLogo img{
		width: auto;
		height: 3rem;
		margin: 1rem 0 1rem -1rem;
		transition:0.35s ease-in-out;
	}
	#headerBox .header .leftLogo .logoFton{
		display:none;
		transition:0.35s ease-in-out;
	}
	#headerBox .header .rightNav{
		position: relative;
		top: 0.375rem;
		right: 0;
		width: auto;
		height:auto;
		margin: 2rem auto;
		transition:0.35s ease-in-out;
	}
	#headerBox .header .rightNav .mIconBox{
		display:block;
		transition:0.35s ease-in-out;
	}
	#headerBox .header .rightNav .navList{
		display: block;
		position: fixed;
		top: 5rem;
		left: 0;
		width:100vw;
		height: calc(100vh - 5rem);
		background: var(--fColor);
		transform: translateX(100%);
		transition:0.35s ease-in-out;
		z-index: 200;
	}
	#headerBox .header .rightNav .navList .nav{
		width: calc(100% - 3rem);
		margin: 0 1.5rem;
		border-right: none;
		border-bottom: 1px solid rgba(51,51,51,0.1);
	}
	#headerBox .header .rightNav .navList .nav .tiTle{
		display: block;
	}
	#headerBox .header .rightNav .navList .nav h1{
		text-align:left;
		width: 90%;
		margin: 0;
		font-size:0.875rem;
		color: var(--hColor);
		line-height: 4rem;
		transition:0.35s ease-in-out;
		float:left;
	}
	#headerBox .header .rightNav .navList .nav:hover h1:before{
		width:110%;
	}
	#headerBox .header .rightNav .navList .nav .iconfont{
		display:block;
		text-align: right;
		width: 0.875rem;
		margin: 1.5rem auto;
		font-size: 0.875rem;
		color: var(--desColor);
		transition:0.35s ease-in-out;
		float:right;
	}
	#headerBox .header .rightNav .navList .nav .iconfont:before{
	    display:block;
	    width:0.875rem;
	    height:0.875rem;
	}
	#headerBox .header .rightNav .navList .nav .child{
		width:100% !important;
		background: var(--fColor);
		border-bottom: 1px solid rgba(51,51,51,0.1);
	}
	#headerBox .header .rightNav .navList .nav .childList{
		width:100% !important;
	}
	#headerBox .header .rightNav .navList .nav:hover .childList{
		display: none;
		position: relative;
		top: -0.125rem;
		height: 0;
		margin: 4rem 0 0 0;
		border-radius: 0;
	}
	#headerBox .header .rightNav .navList .nav .childList .child a{
		display:block;
		width: 90%;
	}
	#headerBox .header .rightNav .navList .nav .childList .child h2{
		text-align: left;
		width:100%;
		padding: 0 0 0 2rem;
		font-size: 0.875rem;
		color: var(--hColor);
	}
	/* productTypeBox */
	#productTypeBox{
		padding:0 2rem;
	}
	#productTypeBox .typeListBox ul{
        display: flex;
        width: calc(100% + 1rem);
        margin: 0;
        flex-wrap: wrap;
    }
    #productTypeBox .typeListBox ul li{
        width: calc(50% - 1rem);
        max-height: 400px;
        margin: 0 1rem 1rem 0;
        overflow: hidden;
        transition: 0.35s ease-in-out;
        float: left;
    }
    #productTypeBox .typeListBox ul li:nth-child(2){
        margin: 0 1rem 1rem 0;
    }
    #productTypeBox .typeListBox ul li:nth-child(3){
        margin: 0 1rem 1rem 0;
    }
    #productTypeBox .typeListBox ul li .coverBox{
        border-radius: 0;
    }
    #productTypeBox .typeListBox ul li:hover .coverBox{
        top:60%;
        height:100%;
        border-radius:0;
        transition: 0.35s ease-in-out;
    }
	/* copyRightBox */
	#footerBox .footer .contactBox .list:nth-child(2){
		display:none;
	}
	#footerBox .footer .contactBox .list:nth-child(3){
		display:none;
	}
	#footerBox .footer .contactBox .list:nth-child(4){
		display:none;
	}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	/* productTypeBox */
	#productTypeBox{
		padding:0 2rem;
	}
	#productTypeBox .typeListBox ul{
		width: calc(100% + 2.625rem);
	}
	#productTypeBox .typeListBox ul li{
        overflow:hidden;
    }
    #productTypeBox .typeListBox ul li:hover .coverBox{
        top:60%;
        height:100%;
        border-radius:0;
    }
	/* copyRightBox */
	#footerBox .footer .contactBox .list:nth-child(2){
		display:none;
	}
	#footerBox .footer .contactBox .list:nth-child(3){
		display:none;
	}
	#footerBox .footer .contactBox .list:nth-child(4){
		display:none;
	}
}
@media screen and (min-width:1281px) and (max-width:1366px){
	
}
@media screen and (min-width:1367px) and (max-width:1440px){
	
}
@media screen and (min-width:1441px) and (max-width:1680px){
	
}
@media screen and (min-width:1681px) and (max-width:1920px){
	
}