html {
    font-size:100%;
}
body{
    font-size:16px;
    cursor:default;
    overflow-x: hidden;
}
body::-webkit-scrollbar{
    width: 4px;
    height: 4px;
    opacity:0.4;
}
body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(255,153,0,0.2);
    background: var(--bColor);
}
a{
    color:var(--hColor);
}
a,a:hover,a:active{
    text-decoration:none;
}
a:hover,a:active{
    color:var(--bColor);
}
ul{
    list-style:none;
    margin:0;
    padding:0;
}
/* h1,h2,h3,h4,h5,h6,p,span{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
} */
:root{
    --hColor:rgba(0,0,0,1);
    --bColor:rgba(236,102,0,1);
    --bgColor:rgba(243,243,243,1);
    --fColor:rgba(255,255,255,1);
    --fdColor:rgba(192,192,192,1);
    --desColor:rgba(102,102,102,1);
    --borderColor:rgba(0,0,0,0.1);
    --lineColor:rgba(255,255,255,0.1);
    --footerList:rgba(128,128,128,1);
}
.container-fluid{
    position: relative;
    width:100%;
    max-width: 1480px;
    margin:0 auto;
    padding:0 2rem;
}
.row{
    margin:0;
    padding:0;
}
/* headerBox */
#headerBox{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: auto;
    z-index:100;
}
#headerBox:before{
    content:" ";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height: 6rem;
    background: rgba(255,255,255,0.6);
    box-shadow: 1px 4px 8px rgb(51 51 51 / 10%);
    z-index: 0;
}
#headerBox .header{
    position:relative;
}
#headerBox .header .leftLogo{
    position:relative;
    margin:1rem 0;
    width:196px;
    height:66px;
    float:left;
}
#headerBox .header .rightNav{
    position:relative;
    text-align:right;
    width: 50%;
    float:right;
}
#headerBox .header .rightNav .mIconBox{
	display:none;
}
#headerBox .header .rightNav .mobileIcon{
	display: none;
	position: relative;
	top: 0;
	right: 0;
	transition:0.35s ease-in-out;
	z-index: 100;
}
#headerBox .header .rightNav .mobileIcon span{
	display: block;
	position: relative;
	width: 1rem;
	height: 2px;
	background: var(--fColor);
	animation: navMiddle 0.75s ease-in-out;
	transition:0.35s ease-in-out;
	z-index: 2;
}
#headerBox .header .rightNav .mobileIcon span:before{
	position: absolute;
	content:" ";
	top: 6px;
	right: 0;
	width: 1.5rem;
	height:2px;
	background: var(--fColor);
	animation: navBefore 0.75s ease-in-out;
	transition:0.35s ease-in-out;
	z-index:2;
}
#headerBox .header .rightNav .mobileIcon span:after{
	position: absolute;
	content:" ";
	bottom: 6px;
	right: 0;
	width: 1.5rem;
	height: 2px;
	background: var(--fColor);
	animation: navAfter 0.75s ease-in-out;
	transition:0.35s ease-in-out;
	z-index:2;
}
#headerBox .header .rightNav .mobileNavBox .activeIcon{
	display: block;
	position: absolute;
	top: 0.5rem;
	right: 0;
	transition:0.35s ease-in-out;
	z-index: 100;
}
#headerBox .header .rightNav .mobileNavBox .activeIcon span{
	display: block;
	position: relative;
	width: 1.5rem;
	height:2px;
	background: transparent;
	transition:0.35s ease-in-out;
	z-index: 2;
}
.headerBox .mobileNavBox .activeIcon span:before{
	position: absolute;
	content:" ";
	top: -6px;
	right: 0;
	width: 1.5rem;
	height:2px;
	background: var(--fColor);
	transform:rotate(45deg);
	transition:0.35s ease-in-out;
	z-index:2;
}
.headerBox .mobileNavBox .activeIcon span:hover:before{
	background:var(--bColor);
	transition:0.35s ease-in-out;
}
.headerBox .mobileNavBox .activeIcon span:active:before{
	background:var(--bColor);
	transition:0.35s ease-in-out;
}
#headerBox .header .rightNav .activeIcon{
	display: block;
	position: absolute;
	top: 0rem;
	right: 0;
	transition:0.35s ease-in-out;
	z-index: 100;
}
#headerBox .header .rightNav .activeIcon span{
	display: block;
	position: relative;
	width: 1.5rem;
	height:2px;
	background: transparent;
	transition:0.35s ease-in-out;
	z-index: 2;
}
#headerBox .header .rightNav .activeIcon span:before{
	position: absolute;
	content:" ";
	top: 0px;
	right: 0;
	width: 1.5rem;
	height:2px;
	background: var(--fColor);
	transform:rotate(45deg);
	transition:0.35s ease-in-out;
	z-index:2;
}
#headerBox .header .rightNav .activeIcon span:hover:before{
	background: var(--fColor);
	transition:0.35s ease-in-out;
}
#headerBox .header .rightNav .activeIcon span:active:before{
	background:var(--bColor);
	transition:0.35s ease-in-out;
}
#headerBox .header .rightNav .activeIcon span:after{
	position: absolute;
	content:" ";
	bottom: 0;
	right: 0;
	width: 1.5rem;
	height: 2px;
	background: var(--fColor);
	transform:rotate(-45deg);
	transition:0.35s ease-in-out;
	z-index:2;
}
#headerBox .header .rightNav .activeIcon span:hover:after{
	background: var(--fColor);
	transition:0.35s ease-in-out;
}
#headerBox .header .rightNav .activeIcon span:active:after{
	background:var(--bColor);
	transition:0.35s ease-in-out;
}
#headerBox .header .rightNav .navList{
    display:flex;
    position:relative;
    flex-wrap: wrap;
}
#headerBox .header .rightNav .navList .nav{
    position:relative;
    width:calc(100%/6);
}
#headerBox .header .rightNav .navList .nav h1{
    text-align: center;
    margin: 0;
    padding: 0;
    font-size:1rem;
    color: var(--hColor);
    line-height:6rem;
    transition:0.35s ease-in-out;
}
#headerBox .header .rightNav .navList .nav h1:hover{
    color: var(--bColor);
    transition:0.35s ease-in-out;
}
#headerBox .header .rightNav .navList .nav .iconfont{
    display:none;
    transition:0.35s ease-in-out;
}
#headerBox .header .rightNav .navList .nav .childList{
    display:none;
    transition:0.35s ease-in-out;
}
#headerBox .header .rightNav .navList .nav:hover .childList{
    display:block;
    transition:0.35s ease-in-out;
}
#headerBox .header .rightNav .navList .nav .child{
    text-align:center;
    background:var(--bColor);
    border-bottom: 1px solid var(--fColor);
}
#headerBox .header .rightNav .navList .nav .child:hover{
    text-align:center;
    background:var(--hColor);
    border-bottom: 1px solid var(--fColor);
}
#headerBox .header .rightNav .navList .nav .child:nth-last-child(1){
    border-bottom:none;
}
#headerBox .header .rightNav .navList .nav .child h2{
    margin: 0;
    padding: 0;
    font-size:0.875rem;
    color:var(--fColor);
    line-height: 3rem;
}
/* bannerBox */
/* bannerBox */
#bannerBox{
    position: relative;
}
#bannerBox img{
    width:100%;
    transition:0.35s ease-in-out;
}
#bannerBox .imgBgBox{
	position:relative;
	height:500px;
	background-size: cover !important;
}
#bannerBox .titleBox{
	display: block;
	text-align: center;
	position: absolute;
	top: calc(((100% + 6rem) - 5rem)/2);
	width: 100%;
	margin: 0;
}
#bannerBox .titleBox .title{
	display:block;
	margin:0 0 0.5rem;
	font-size: 2rem;
	font-weight:400;
	color: var(--fColor);
}
#bannerBox .titleBox:hover .title{
	color:var(--fColor);
}
#bannerBox .titleBox .des{
	display:block;
	margin:0 0 0.5rem;
	font-size: 1rem;
	font-weight:400;
	color: var(--fColor);
	text-transform: uppercase;
}
#bannerBox .swiper-button-prev{
	position:absolute;
	top:calc((100% - 2rem)/2);
	left:calc((100% - 1440px)/2);
	margin:0 0 0 -1rem;
	background: transparent;
	transition:0.35s ease-in-out;
}
#bannerBox .swiper-button-next{
	position:absolute;
	top:calc((100% - 2rem)/2);
	right:calc((100% - 1440px)/2);
	margin:0 -1rem 0 0;
	background: transparent;
	transition:0.35s ease-in-out;
}
#bannerBox:hover .swiper-button-prev,#bannerBox:hover .swiper-button-next{
	margin:0;
	transition:0.35s ease-in-out;
}
#bannerBox .swiper-button-prev .iconfont,#bannerBox .swiper-button-next .iconfont{
	margin:0 1rem;
	font-size:2rem;
	color: #fff;
	opacity:0.8;
	transition:0.35s ease-in-out;
}
#bannerBox .swiper-button-prev:hover .iconfont,#bannerBox .swiper-button-prev:active .iconfont{
	color:var(--bColor);
	opacity:1;
	transition:0.35s ease-in-out;
}
#bannerBox .swiper-button-next:hover  .iconfont,#bannerBox .swiper-button-next:active .iconfont{
	color:var(--bColor);
	opacity:1;
	transition:0.35s ease-in-out;
}
/* productNavBox */
#productTypeBox{
    position: relative;
    width:100%;
    max-width:1440px;
    margin: 5rem auto 7.5rem;
    padding: 0;
    overflow:hidden;
    cursor: default;
}
#productTypeBox .topTitleBox{
    position:relative;
    text-align:center;
    width:100%;
    margin: 0 0 3rem 0;
}
#productTypeBox .topTitleBox span:nth-child(1){
    display:block;
    font-family: arial;
    font-size: 3rem;
    font-weight: 600;
    color: var(--bColor);
    line-height:1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#productTypeBox .topTitleBox span:nth-child(2){
    display:block;
    font-size: 1.5rem;
    font-weight:500;
    color: var(--hColor);
    line-height:1.5;
}
#productTypeBox .typeListBox{
    position:relative;
    width: 100%;
}
#productTypeBox .typeListBox ul{
    display: flex;
    position:relative;
    width:100%;
    margin: -9.125rem 0 0 0;
}
#productTypeBox .typeListBox ul li{
    position:relative;
    width: calc((100%-2.625rem)/4);
    max-height: 29.5rem;
    margin: 0 2.625rem 0 0;
    z-index:1;
}
#productTypeBox .typeListBox ul li:nth-child(4){
	display:none;
}
#productTypeBox .typeListBox ul li:nth-child(2){
    margin:9rem 2.625rem 0 0;
}
#productTypeBox .typeListBox ul li:nth-child(2) .coverBox{
    background-image: linear-gradient(45deg, rgba(0,0,0,1), rgba(255,255,255,0.2));
}
#productTypeBox .typeListBox ul li:nth-child(3){
    margin:9rem 2.625rem 0 0;
}
#productTypeBox .typeListBox ul li:nth-child(3) .coverBox{
    background-image: linear-gradient(45deg, rgba(0,0,0,1), rgba(255,255,255,0.2));
}
#productTypeBox .typeListBox ul li .coverBox{
    position:absolute;
    top: 0;
    width:100%;
    height:100%;
    background-image: linear-gradient(45deg, var(--bColor), rgba(255,255,255,0.2));
    border-radius:0.5rem 0.5rem 0 0;
    transition:0.35s ease-in-out;
    z-index:2;
}
#productTypeBox .typeListBox ul li:hover .coverBox{
    top:70%;
    height:30%;
    border-radius:0.5rem 0.5rem 0 0;
    transition:0.35s ease-in-out;
}
#productTypeBox .typeListBox ul li .imgBox{
    position:relative;
    width:100%;
    height: 0;
    padding: 0 0 148%;
    overflow:hidden;
    z-index:1;
}
#productTypeBox .typeListBox ul li .imgBox img{
    width:100%;
    transform: scale(1);
    transition:0.35s ease-in-out;
}
#productTypeBox .typeListBox ul li .imgBox:hover img{
    transform: scale(1.1);
    transition:0.35s ease-in-out;
}
#productTypeBox .typeListBox ul li .contentBox{
    position:absolute;
    left: 2rem;
    bottom: 2rem;
    width: 100%;
    z-index:4;
}
#productTypeBox .typeListBox ul li .contentBox .title h1{
    width:100%;
    font-size: 1.5rem;
    color:#fff;
    -o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
#productTypeBox .typeListBox ul li .contentBox .title span{
    font-size: 0.8875rem;
    line-height:3;
    color: var(--fColor);
}
#indexAboutBox{
	position:relative;
	background: #efefef;
}
#indexAboutBox .aboutPic{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 28rem;
}
#indexAboutBox .aboutPic img{
	position:relative;
	width:100%;
}
#indexAboutBox .topTitleBox{
	text-align:center;
	position: relative;
	width: 100%;
	height: auto;
	padding: 7.5rem 0 3rem;
	text-transform: uppercase;
	z-index:3;
}
#indexAboutBox .topTitleBox h1{
	margin: 0 0 0.5rem;
	padding: 0;
	font-size:3rem;
	font-weight: bold;
	color:var(--fColor);
}
#indexAboutBox .topTitleBox span{
	font-size:1.5rem;
	color:var(--fColor);
}
#indexAboutBox .contentBox{
	position: relative;
	width:100%;
	max-width:1440px;
	margin: 0 auto;
}
#indexAboutBox .contentBox .imgBox{
	position:relative;
	width:100%;
}
#indexAboutBox .contentBox .imgBox img{
	position:relative;
	width:100%;
	transform: scale(1);
	transition:0.35s ease-in-out;
}
#indexAboutBox .contentBox .profileBox{
	padding:2rem;
	background:#fff;
	box-shadow: 1px 4px 8px rgba(51,51,51,0.1);
}
#indexAboutBox .contentBox .profileBox p{
	margin: 0 0 1rem;
	line-height:2;
	text-indent: 2rem;
}
#indexAboutBox .contentBox .profileBox .more{
	display:block;
	text-align:center;
	width:10rem;
	height:auto;
	margin: 2rem auto 1rem;
	font-size: 0.875rem;
	color: var(--hColor);
	line-height:2.5rem;
	border: 1px solid var(--borderColor);
	border-radius:0.5rem;
	transition:0.35s ease-in-out;
}
#indexAboutBox .contentBox .profileBox .more:hover{
	color: var(--fColor);
	background:var(--bColor);
	border: 1px solid var(--bColor);
	transition:0.35s ease-in-out;
}
.pNavLine{
    animation:pNavLine 4s ease-in-out;
}
@keyframes pNavLine{
    0% {height:0;opacity:0;background:#000;}
    100% {height:100%}
}
@-webkit-keyframes pNavLine{
    0% {height:0;opacity:1;background:#1b76b7;}
    100% {height:100%}
}
/* indexNewsListBox */
#indexNewsListBox{
	position:relative;
	width:100%;
	padding: 0 0 4rem;
	background: url(/public/assets/addons/cms/images/indexAboutBg02.jpg) no-repeat;
	background-size: cover;
}
#indexNewsListBox .topTitleBox{
	text-align:center;
	position:relative;
	padding: 7.5rem 0 4rem;
}
#indexNewsListBox .topTitleBox h1{
	margin:0 0 1rem;
	padding:0;
	font-size:3rem;
	font-weight:bold;
	color:var(--bColor);
}
#indexNewsListBox .topTitleBox span{
	margin:0;
	padding:0;
	font-size:2rem;
	font-weight:normal;
	color:var(--hColor);
}
#indexNewsListBox .listBox{
	position:relative;
	width:100%;
	max-width:1440px;
	margin:0 auto;
	padding: 0 2rem;
}
#indexNewsListBox .listBox ul{
	display:flex;
	position:relative;
	width: calc(100% + 4rem);
	flex-wrap: nowrap;
}
#indexNewsListBox .listBox ul li{
	width: calc((100% - 12rem)/3);
	margin: 0 4rem 0 0;
	padding: 1rem;
	background: var(--fColor);
}
#indexNewsListBox .listBox ul li .timeBox{
	margin:0 0 1rem;
	padding:0 0 1rem;
	font-size:1rem;
	color:var(--desColor);
	border-bottom:1px solid var(--borderColor);
}
#indexNewsListBox .listBox ul li .contentBox{
	position:relative;
}
#indexNewsListBox .listBox ul li .contentBox .title{
	margin:0 0 1rem;
	font-size:1.125rem;
	color:var(--hColor);
	transition:0.35s ease-in-out;
}
#indexNewsListBox .listBox ul li:hover .contentBox .title{
	color:var(--bColor);
	transition:0.35s ease-in-out;
}
#indexNewsListBox .listBox ul li .contentBox .des{
	display: -webkit-box;
	margin: 0 0 2rem;
	color:var(--fdColor);
	font-size: 0.875rem;
	line-height: 2;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
#indexNewsListBox .listBox ul li .more{
	float: right;
	text-align:right;
	margin:0;
	padding: 0;
	font-size: 0.875rem;
	color: var(--fdColor);
	line-height: 1;
	border: none;
	transition:0.35s ease-in-out;
}
#indexNewsListBox .listBox ul li:hover .more{
	color: var(--bColor);
	transition:0.35s ease-in-out;
}
#indexNewsListBox .more{
	display:block;
	text-align: center;
	width:10rem;
	height: auto;
	margin: 4rem auto 0;
	padding: 0;
	line-height: 3rem;
	border: 1px solid #333;
	border-radius: 0.5rem;
	transition:0.35s ease-in-out;
}
#indexNewsListBox .more:hover{
	border: 1px solid var(--bColor);
	transition:0.35s ease-in-out;
}
/* breadcrumb */
#breadcrumb{
    position: relative;
    padding:1rem 0;
    background: #f8f8f8;
    border-bottom:1px solid var(--borderColor);
}
#breadcrumb ul{
	display:flex;
	max-width:1440px;
	margin:0 auto;
	padding: 0 1.5rem;
	flex-wrap:nowrap;
}
#breadcrumb ul li{
	margin:0 1rem 0 0;
	padding:0 1rem 0 0;
	font-size:0.875rem;
	color:var(--hColor);
	border-right:1px solid var(--borderColor);
	transition:0.35s ease-in-out;
}
#breadcrumb ul li:hover{
    color:var(--bColor);
    transition:0.35s ease-in-out;
}
/* aboutNavBox */
.aboutNavBox{
    position: relative;
    left: 0;
    bottom: 0;
    width:100%;
    margin: 0 auto 3rem;
    padding: 0;
    background: transparent;
    cursor: default;
    z-index: 20;
}
.aboutNavBox .topTitleBox{
    display: none;
    position:relative;
    margin: 0 0 2.5rem 0;
}
.aboutNavBox .topTitleBox h1{
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--bColor);
    letter-spacing: 1px;
}
.aboutNavBox .mNavIconBox{
    display:none;
}
.aboutNavBox .mNavIconBox .iconfont:hover{
    color: var(--bColor);
    transition: 0.35s ease-in-out;
}
.aboutNavBox .mNavIconBox .iconfont:acitve{
    color: var(--bColor);
    transition: 0.35s ease-in-out;
}
.aboutNavBox .mNavClose{
    display:none;
}
.aboutNavBox .mNavClose:hover{
    background: var(--bColor);
}
.aboutNavBox .mNavClose:active{
    background: var(--bColor);
}
.aboutNavBox .navList{
    position: relative;
    padding: 0;
}
.aboutNavBox .navList .navLine{
    display: none;
    position:absolute;
    top:0;
    left:0;
    width:1px;
    height:100%;
    background: var(--bColor);
}
.aboutNavBox .navList .navBox{
    display: flex;
    justify-content: center;
    position:relative;
    width: calc(100% + 1rem);
    margin: 3rem auto;
    z-index: 20;
    flex-wrap: wrap;
}
.aboutNavBox .navList .navBox .nav{
    position:relative;
    width: calc((100% - 6rem)/6);
    margin: 0 1rem 0 0;
    background: transparent;
    border: 1px solid var(--borderColor);
    border-radius: 0.5rem;
}
.aboutNavBox .navList .navBox .nav:nth-last-child(1) h2{
    margin:0;
}
.aboutNavBox .navList .navBox .nav .icon-down1{
	display:none;
}
.aboutNavBox .navList .navBox .nav h2{
    text-align: center;
    margin: 0;
    font-size: 1rem;
    color: var(--hColor);
    line-height: 2.5rem;
    letter-spacing: 0;
    transition: 0.35s ease-in-out;
}
.aboutNavBox .navList .navBox .nav:hover{
	background:var(--bColor);
	transition:0.35s ease-in-out;
}
.aboutNavBox .navList .navBox .nav:hover h2{
    color:#fff;
    transition:0.35s ease-in-out;
}
.aboutNavBox .navList .navBox .nav .chlidBox{
	display: none;
}
.aboutNavBox .navList .navBox .nav:hover .chlidBox{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 20rem;
	margin: 0 0 0 50%;
	padding: 0 1rem;
	background: rgba(255,255,255,0.8);
	border-left: 1px solid #e3e3e3;
	border-radius: 0;
	box-shadow: 1px 2px 4px rgba(51,51,51,0.15);
	transition: 0.35s ease-in-out;
	z-index: 200;
}
.aboutNavBox .navList .navBox .nav .chlidBox .chlid h2{
	margin:0;
	color:var(--hColor);
	line-height:2.5;
	border-bottom:1px solid #efefef;
	transition:0.35s ease-in-out;
}
.aboutNavBox .navList .navBox .nav .chlidBox .chlid:hover h2{
	color:var(--bColor);
	transition:0.35s ease-in-out;
}
.pnavOpen{
    transform: translateX(0%) !important;
    transition:0.35s ease-in-out;
}
.pnavClose{
    transform: translateX(100%) !important;
    transition:0.35s ease-in-out;
}
.pClose{
    transform: translateX(-100%) !important;
    transition:0.35s ease-in-out;
}
/* productListBox */
.productListBox{
	position:relative;
	margin: 0 auto 3rem;
}
.productListBox ul{
	display:flex;
	justify-content: flex-start;
	position:relative;
	width: calc(100% + 1rem);
	flex-wrap: wrap;
}
.productListBox ul li{
	width: calc((100% - 4rem)/4);
	margin: 0 1rem 1rem 0;
}
.productListBox ul li .imgBox{
	width:100%;
	height: 0;
	padding: 0 0 75%;
	overflow:hidden;
}
.productListBox ul li .imgBox img{
	width:100%;
	transform:scale(1);
	transition:0.35s ease-in-out;
}
.productListBox ul li:hover .imgBox img{
	width:100%;
	transform:scale(1.25);
	transition:0.35s ease-in-out;
}
.productListBox ul li h1{
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size:1rem;
	color:var(--hColor);
	line-height: 3rem;
	transition:0.35s ease-in-out;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
.productListBox ul li:hover h1{
	color:var(--bColor);
	transition:0.35s ease-in-out;
}
/* detailBox */
#detailBox{
    position: relative;
    max-width:1440px;
    margin:0 auto;
}
#detailBox h1{
	text-align:center;
	font-size:1.5rem;
	color:var(--hColor);
	margin: 0;
	padding: 0 0 1rem;
	border-bottom:1px solid var(--borderColor);
}
#detailBox .article_box{
	display: none;
	margin: 0;
	padding: 1rem 0;
	border-bottom:1px solid #efefef;
}
#detailBox .article_box .views{
	padding: 0 1rem 0 0;
}
#detailBox .article_box .date{
	padding: 0 0 0 1rem;
}
#detailBox .news_info{
	margin:0 0 1rem;
	padding: 1rem 0;
	border-bottom:1px solid #efefef;
}
#detailBox .news_info img{
	width:100%;
}
#detailBox .product_info{
	position:relative;
	display: block;
}
#detailBox .product_info .left{
	position:relative;
	width:50%;
	float: left;
}
#detailBox .product_info .left .imgbig{
	position:relative;
	width:100%;
	height: 0;
	padding: 0 0 75%;
	border: 1px solid #eeee;
	overflow:hidden;
}
#detailBox .product_info .left .imgbig .mask{
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	max-width: 42.875rem;
	height: 0;
	padding: 0 0 75%;
	z-index:2;
}
#detailBox .product_info .left .imgbig img{
	width:100%;
}
#detailBox .product_info .left .imgsmall{
	position:relative;
	display:flex;
	overflow:hidden;
}
#detailBox .product_info .left .imgsmall img{
	width:calc(100%/4);
	margin: 1rem 0;
	border:1px solid #efefef;
	transition:0.35s ease-in-out;
}
#detailBox .product_info .left .imgsmall img:hover{
	border:1px solid var(--bColor);
	transition:0.35s ease-in-out;
}
#detailBox .product_info .right{
	position:relative;
	width:50%;
	padding: 0 2rem;
	float: right;
}
#detailBox .product_info .right .title{
	margin:0 0 1rem;
	padding:0 0 1rem;
	font-size:1.5rem;
	color:var(--bColor);
	border-bottom:1px solid #efefef;
}
#detailBox .product_info .bigshowimg{
	display: none !important;
	position:absolute;
	top:0;
	right:0;
	width:50%;
	z-index:10;
}
#detailBox .product_info .bigshowimg img{
	border:1px solid #efefef;
}
#detailBox .product_info_content{
	position:relative;
	width:100%;
	margin: 1rem auto;
	padding: 1rem 0;
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #efefef;
}
#detailBox .product_info_pages{
	position:relative;
	width:100%;
}
#detailBox .detail #bttxBox{
	position:relative;
	width:100%;
	max-width: 1024px;
	margin:2rem auto;
}
#detailBox .detail #bttxBox img{
	width:100% !important;
}
/* footerBox */
#footerBox{
    position: relative;
    background: #222;
}
#footerBox .footer{
	margin:5rem auto;
}
#footerBox .footer .listBox{
	position:relative;
	display:flex;
	width:70%;
	flex-wrap:wrap;
	float:left;
}
#footerBox .footer .listBox .nav{
	position:relative;
	width:calc(100%/4);
}
#footerBox .footer .listBox .nav:nth-last-child(1){
	display:none;
}
#footerBox .footer .listBox .nav h1{
	width: 90%;
	margin: 0 0 2rem;
	padding: 0;
	font-size:1.25rem;
	color:var(--fColor);
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
#footerBox .footer .listBox .nav .iconfont{
	display:none;
}
#footerBox .footer .listBox .nav .childList{
	position:relative;
}
#footerBox .footer .listBox .nav .childList .child{
	position:relative;
}
#footerBox .footer .listBox .nav .childList .child h2{
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.875rem;
	color:var(--desColor);
	transition:0.35s ease-in-out;
}
#footerBox .footer .listBox .nav .childList .child:hover h2{
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.875rem;
	color:var(--bColor);
	transition:0.35s ease-in-out;
}
#footerBox .footer .contactBox{
	text-align:right;
	width:30%;
	float:right;
}
#footerBox .footer .contactBox .logoBox{
	position:relative;
	width:100%;
	height:auto;
	margin:0 0 2rem;
	float: right;
}
#footerBox .footer .contactBox .logoBox img{
	position:relative;
	width:12.25rem;
	height:4.125rem;
	margin: 0;
	float: right;
}
#footerBox .footer .contactBox .list{
	display: inline-block;
	margin:0 0 1rem;
	font-size:0.875rem;
	color:var(--fColor);
}
#footerBox .footer .contactBox .list:nth-child(2){
	display:block !important;
}
#footerBox .footer .contactBox .list a{
	display: inline-block;
	font-size:0.875rem;
	color:var(--fColor);
}
#copyRightBox{
    position: relative;
    padding:1rem 0;
    background: var(--bColor);
}
#copyRightBox .left{
	text-align:left;
	font-size:0.875rem;
	color:var(--fColor);
	float:left;
}
#copyRightBox .right a{
	margin:0 0 0 1rem;
	text-align:right;
	font-size:0.875rem;
	color:var(--fColor);
	float:right;
}
@keyframes navAfter{
    0% {bottom:0px;}
    100% {bottom:6}
}
@-webkit-keyframes navAfter{
    0% {bottom:0px;}
    100% {bottom:6}
}
@keyframes navBefore{
    0% {top:0px;}
    100% {top:6}
}
@-webkit-keyframes navBefore{
    0% {top:0px;}
    100% {top:6}
}
@keyframes navMiddle{
    0% {width:0px;}
    100% {width:1rem}
}
@-webkit-keyframes navMiddle{
    0% {width:0px;}
    100% {width:1rem}
}
@-webkit-keyframes indexAboutPic{
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}