.n-banner{ width: 100%; display: block; position: relative;}
.n-banner .text{ top: 50%; right: 2.4rem; transform: translateY(-50%); position: absolute;}
.n-banner .text h2{ font-size: .6rem; line-height: 1.4rem; color: #fff; display: block; margin-bottom: .4rem; font-family: "SourceHanSansCN-Normal"; text-align: center; border-bottom: 2px solid #fff; width: 4.6rem;}
.n-banner .text p{ font-size: .48rem; color: #fff; display: block; font-family: "SourceHanSansCN-Normal"; writing-mode: vertical-rl; margin: 0 auto; text-align: center; letter-spacing: 5px;}
.n-banner.nopiclist{ height: 80vh; background: var(--gold); display: flex; justify-content: flex-end; align-items: flex-end;}
.n-banner.nopic{ height: 4rem; background: var(--gold); display: flex; justify-content: flex-end; align-items: flex-end;}
.n-banner .pic{ display: block; text-align: center; width: 100%;}
.n-banner .pic img{ max-width: 100%;}

.container{ margin-top: 0; background: #fff;}
.nav-list{ display: block; font-size: 0; padding-top: .38rem;}
.nav-list ul{ display: block; text-align: right; font-size: 0;}
.nav-list ul li{ display: inline-block; margin: 0 .26rem; position: relative;}
.nav-list ul li::after{ content: ""; position: absolute; left: -.26rem; top: 50%; transform: translateY(-50%); width: 2px; height: .2rem; background: var(--gold);}
.nav-list ul li a{ font-size: .2rem; color: var(--gold); font-family: "SourceHanSansCN-Normal"; line-height: .36rem; position: relative; display: inline-block; transition: all 0.3s ease-in-out;}
.nav-list ul li a:hover{ opacity: .7;}
.nav-list ul li a::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); opacity: 0;}
.nav-list ul li.cur a::after{ opacity: 1;}
.nav-list ul li:first-of-type::after{ display: none;}

.n-banner.nopic .nav-list ul li::after,
.n-banner.nopic .nav-list ul li a::after{ background: #fff;}
.n-banner.nopic .nav-list{ margin-bottom: .6rem;}
.n-banner.nopic .nav-list ul li a{ color: #fff;}

/* 产品列表 */
.product-list { padding-bottom: .15rem;}
.product-list ul { margin-top: 1.8rem; display: flex; flex-wrap: wrap; justify-content: space-between;}
.product-list ul li { width: 3.82rem; margin-bottom: .8rem;}
.product-list .img { width: 100%; height: 2.7rem; position: relative; overflow: hidden;}
.product-list .img::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; transition: opacity .8s ease-in-out;}
.product-list .img img { width: 100%; height: 100%; object-position: center; object-fit: cover; transition: transform .8s ease;}
.product-list .product-name { line-height: .56rem; font-size: .24rem; color: #1e1e1e; font-family: "DIN-Medium"; margin-top: .2rem;}


.product-list ul li:hover .img::before { opacity: 1;}
.product-list ul li:hover .img img { transform: scale(1.1);}
/* 页码样式 */
.page_zt { width: 100%; display: block; padding: .2rem 0 .5rem; text-align: center;}
.page_zt .page_r { width: auto; display: inline-block; height: .42rem;}
.page_zt .page_r a,
.page_zt .page_r .ym2 { height: .42rem; margin: 0 3px; width: .42rem; color: #787878; text-align: center; display: inline-block; position: relative; line-height: .42rem; font-size: .16rem; font-family: "SourceHanSansCN-Normal";}
.page_zt .page_r .ym2::after{ content: ""; position: absolute; width: .16rem; left: 50%; bottom: 0; transform: translateX(-50%); background: var(--gold); height: 1px;}
.page_zt .page_r a.page_prev,.page_zt .page_r a.page_next { line-height: .42rem; font-family: "iconfont"; position: relative; display: inline-block; vertical-align: top}
.page_zt .page_r a.page_next::after{ content: "\e70b";}
.page_zt .page_r a.page_prev::after{ content: "\e640";}
.page_zt .page_r a:hover {  border-color: #535865; cursor: pointer; }
.page_zt .page_r .ym2 { border-color: #535865; cursor: pointer; }
.page_zt .page_r .ym2:hover { opacity: .7; cursor: pointer;}

/* 内页通用配置 */
center {font-size: 20px; margin: 20px auto;}
.none{ display: none;}





/* 产品详情 */
.major-info {  margin-top: 1.8rem; display: flex; justify-content: space-between; font-size: 0;
}
.major-info .left { width: 5.14rem;
}
.major-info .right { width: 5.1rem;
}
.jqzoom{ width:100%; position:relative;
}
.jqzoom img{ max-width: 100%;
}
.zoomdiv{  height:4.12rem; width:4.12rem; z-index:100; position:absolute; top: 0; left: 0; background:url(i/loading.gif) #fff no-repeat center center; display:none; text-align:center; overflow: hidden;
}

#spec-n5{ width:100%; height:1.28rem; margin-top: .2rem; overflow:hidden;
}
#spec-left{ background:url(images/left.gif) no-repeat; width:10px; height:45px; float:left; cursor:pointer; margin-top:5px; display: none;}
#spec-right{background:url(images/right.gif) no-repeat; width:10px; height:45px; float:left;cursor:pointer; margin-top:5px; display: none;}

#spec-list{  width:100%; overflow:hidden; display: block; font-size: 0;
}
#spec-list ul{ width: 100%; display: block;
}
#spec-list ul li{  margin-right: .16rem; display: inline-block; width: 1.6rem; text-align: center;
}
#spec-list ul li img{ max-width: 100%; box-sizing: border-box; padding: 2px; border: 1px solid #ccc; transition: all 0.3s ease-in-out;
}
#spec-list ul li:last-of-type{ margin-right: 0;
}

/*jqzoom*/
.bigimg{width:800px;height:800px; object-fit: cover;}

.jqZoomPup{ z-index:10;visibility:hidden;position:absolute;top:0px;left:0px;width:50px;height:50px;border:1px solid #aaa;background:#FEDE4F 50% top no-repeat;opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;filter:alpha(Opacity=50);cursor:move; font-size: 0;}







.major-info .product-title { margin-bottom: .6rem; box-sizing: border-box; width: 100%;  position: relative;
}

.major-info .product-title .product-name { font-size: .48rem; font-family: "DIN-Medium"; display: block; color: #000; line-height: 1;
}
.major-info .divider { width: 100%; height: 2px; background-color: #b3b3b3;
}
.major-info .attr-name {font-size: .24rem; color: var(--titleColor); position: absolute; left: 0; top: 0; line-height: 1; letter-spacing: .9px;
}
.major-info .attr-name .select { position: absolute; right: 0; top: -.04rem; font-family: Alibaba-PuHuiTi-Medium; font-size: .14rem; letter-spacing: .9px; border: 0; outline: none; text-align: center; text-align-last: center; cursor: pointer;
}
.major-info .attr-name .select:focus option:checked { background-image: linear-gradient(#fff, #000);
}
.major-info .attr-name .select.show .iconfont { transform: rotate(180deg);
}
.major-info .attr-name .select i { margin-left: .06rem; font-size: .14rem; transition: transform .4s ease-in-out; display: inline-block;
}
.major-info .material,
.major-info .color { padding: 0 0 .47rem 1.44rem; box-sizing: border-box; position: relative; margin-top: .29rem;
}
.major-info .material ul,
.major-info .color ul { width: 100%; font-size: 0; margin: .2rem 0 .1rem; position: relative; overflow: hidden; transition: height .4s ease-in-out;
}


.major-info .material ul::after,
.major-info .color ul::after { content: ''; width: 0; height: 0; display: block; clear: both;
}
.major-info .material ul li,
.major-info .color ul li { margin: 0 0 .28rem 0; float: left; width: 1.3rem; font-size: .16rem; line-height: .36rem; color: var(--titleColor); vertical-align: top; transition: all .4s ease-in-out; cursor: pointer;
}
.major-info .material ul li:nth-of-type(3n),
.major-info .color ul li:nth-of-type(3n) { width: .92rem; white-space: nowrap;
}
.major-info .material ul li:hover img,
.major-info .color ul li:hover img { border-color: #333;
}
.major-info .material ul li:hover .material-name,
.major-info .color ul li:hover .material-name { color: #000;
}
.major-info .material ul li img,
.major-info .color ul li img {width: .36rem; height: .36rem; border-radius: 50%; margin-right: .1rem; vertical-align: bottom; box-sizing: border-box; border: 1px solid transparent; transition: border .3s ease-in-out;
}
.major-info .select-divider {position: absolute; bottom: 0; left: 0; margin-top: .1rem; width: 100%; height: 1px; background-color: #939393;
}
.major-info .description {padding-left: 1.44rem; box-sizing: border-box;position: relative; margin-bottom: .3rem; font-size: .13rem; color: #a2a1a2;
}
.major-info .description .attr-name { margin-top: .32rem; margin-bottom: .22rem;
}
.major-info .description p { letter-spacing: .5px; margin-top: .3rem; font-size: .16rem;line-height: .3rem; color: var(--titleColor);
}
.major-info .more { margin-bottom: .13rem; font-size: .14rem; color: var(--titleColor); display: inline-block; letter-spacing: .9px; position: relative;
}
.major-info .more::after { content: ''; width: 100%; height: 1px; background-color: #939393; position: absolute; bottom: -.02rem; left: 0;
}
.major-info .share { padding-top: .08rem; display: flex; position: relative;
}
.major-info .share::before { content: ''; width: 100%; height: 1px; background-color: #939393; position: absolute; top: 0; left: 0;
}
.major-info .share::after { content: ''; width: 100%; height: 1px; background-color: #939393; position: absolute; bottom: -.04rem; left: 0;
}
.major-info .share .attr-name { margin: .4rem 0 .18rem;
}
.major-info .share ul::after { content: ''; width: 0; height: 0; display: block; clear: both;
}
.major-info .share ul li { margin-top: .29rem; font-size: .36rem; margin-left: .85rem; color: #606060; float: left;
}
.major-info .link .attr-name { margin: .95rem 0 .27rem;
}
.major-info .link a { width: 2.65rem; height: .61rem; display: inline-block; border-radius: 3px; background-color: var(--gold); color: #fff; font-size: .31rem; text-align: center; line-height: .61rem; letter-spacing: -.3px;
}

.related { position: relative;
}
.block-title { padding-bottom: .19rem; margin-bottom: .85rem; line-height: 1; font-size: .3rem; color: var(--titleColor); border-bottom: 1px solid #b3b3b3; font-family: Alibaba-PuHuiTi-Medium; letter-spacing: 1px;
}
.block-title .tab {margin-right: .92rem; display: inline-block; vertical-align: top; cursor: pointer;
}
.block-title .tab.cur {color: var(--gold);
}
#relatedProducts .img { width: 3.85rem; height: 2.72rem; position: relative; overflow: hidden; display: flex; align-items: center;
}
#relatedProducts .img::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); opacity: 0; z-index: 1; transition: opacity .4s ease-in-out;
}
#relatedProducts .img:hover::before { opacity: 1;
}
#relatedProducts .img img { width: 100%; object-position: center; object-fit: cover; transition: transform 1.5s ease-in-out;
}
#relatedProducts .product-name { margin: .25rem 0 .1rem; line-height: 1; font-size: .24rem; color: #1e1e1e;
}
#relatedProducts .product-model { font-size: .13rem; line-height: 1; color: var(--gold);
}
.related .iconfont { position: absolute; top: 50%; right: -.72rem; font-size: .4rem; color: #676767; outline: none; cursor: pointer;
}
.related .icon-back { left: -.72rem;
}

.infomation { margin-top: 1.65rem; font-size: 0; position: relative;
}
.infomation .infomation-overflow {overflow: hidden;
}
.infomation .infomation-wrap {margin-bottom: 1rem; width: 200%; transition: transform .4s ease-in-out, height .4s ease-in-out;
}
.infomation .main-picture {display: inline-block; vertical-align: top; width: 50%;
}
.infomation .related {display: inline-block; vertical-align: top; width: 50%;
}
.infomation .info-text { margin-top: 1rem; width: 100%; letter-spacing: .5px;
}
.infomation .info-text-title { margin-bottom: .23rem; font-family: Alibaba-PuHuiTi-Medium; font-size: .3rem; letter-spacing: .5px; color: var(--titleColor);
}
.infomation .text-wrap { font-size: .17rem; color: var(--contentColor); display: flex; justify-content: space-between;
}
.infomation .text-wrap p { width: 7.04rem; letter-spacing: .8px; line-height: 1.6;
}
.infomation .text-wrap .col-2 { width: 1.26rem;
}
.infomation .text-wrap .col-3 { width: 2.13rem;
}
.infomation .text-wrap .col-2 span,
.infomation .text-wrap .col-3 span { font-size: .2rem; color: #464345; font-family: Alibaba-PuHuiTi-Light; line-height: 1;
}
.infomation .text-wrap .col-2 div,
.infomation .text-wrap .col-3 div { margin: .08rem 0 .18rem; font-size: .3rem; color: var(--titleColor); font-family: Alibaba-PuHuiTi-Medium; line-height: 1;
}
.infomation .text-wrap .col-only { width: 4.84rem;
}
.infomation .text-wrap .col-only ul { display: flex; justify-content: space-between;
}
.infomation .text-wrap .col-only ul div { margin-top: .09rem;
}
.infomation .icon-next,
.infomation .icon-back {
	position: absolute;
	right: -1rem; top: 45%;
	font-size: .4rem;
	outline: none;
	width: .4rem; height: .4rem;
	display: none;
}
.infomation .icon-back {
	left: -1rem;
}
.infomation2 { padding-bottom: 1.65rem; border-bottom: 1px solid #b3b3b3;
}
.pictures { margin-top: 1rem; position: relative;
}
.pictures .iconfont { position: absolute; top: 43%; right: -.72rem; font-size: .6rem; color: #676767; outline: none; cursor: pointer;
}
.pictures .icon-back { left: -.72rem;
}
.pictures-three { margin-top: 1rem; display: flex; justify-content: space-between;
}
.pictures-three .left { width: 9.2rem; height: 5rem;
}
.pictures-three .left img { width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.pictures-three .right { width: 4.2rem; display: flex; justify-content: space-between; flex-direction: column;
}
.pictures-three .right img { width: 4.2rem; height: 2.4rem; object-fit: cover; object-position: center; float: right;
}
.icons { padding: .39rem 0 1.8rem; box-sizing: border-box;
}
.icons ul { display: flex; justify-content: center;
}
.icons ul li { width: 3rem; text-align: center;
}
.icons .icon-title { margin-top: .1rem; font-size: .2rem;
}
.icons ul li p { margin: .02rem auto .06rem; font-size: .17rem; width: 80%; display: block; line-height: 1.5; color: var(--contentColor); letter-spacing: 1px;
}
.icons ul li a { font-size: .15rem; font-family: Alibaba-PuHuiTi-Light; color: var(--gold);
}

@media screen and ( max-width:768px) { 
.n-banner.nopic { height: 2rem; }
.n-banner.nopic .nav-list {margin-bottom: .2rem;}
.product-list ul {margin-top: .4rem;}
.n-banner{ position: relative; overflow: hidden;}
.n-banner .text{ width: 1.5rem; right: .15rem; top:auto; transform: translateY(0); bottom: .3rem;}
.n-banner .text h2{ width: 100%; font-size: .2rem; line-height: .26rem; padding-bottom: .1rem; margin-bottom: 0;}
.n-banner .text p{ font-size: .14rem; line-height: 1.5; margin-top: .12rem;}
.n-banner .pic img{ max-width: 100%;}
.product-list ul li {margin-bottom: .4rem;}
.product-list .product-name {margin-top: 0;text-align: center;}
.nav-list ul{
	display: flex; justify-content: space-between;
}
.nav-list ul li{ margin: 0;}
.nav-list ul li::after{
	left: -.08rem;
	width: 1px;
}
.nav-list ul li a {
	font-size: .16rem;
}
.major-info { flex-wrap: wrap; margin-top: .4rem;
}
.major-info .left { width: 100%;
}
#gallery img { width: 100%; height: 3rem; object-fit: cover; object-position: center;
}
.major-info #thumbs .swiper-slide { height: auto;
}
#thumbs img { height: 1rem; object-fit: cover; object-position: center;
}
.jqzoom img {height: auto;}
#spec-list ul li {width: 33%; margin-right: .3%;}
.major-info .product-title .product-name {font-size: .28rem;}
.major-info .material, .major-info .color { padding-bottom: 0; }
.major-info .right { margin-top: .2rem; width: 100%;
}
.major-info .material ul li,
.major-info .color ul li { width: 32%; text-align: center; margin-right: .03%;
}
.major-info .material ul li:nth-of-type(3n),
.major-info .color ul li:nth-of-type(3n) {
	width: 30%;
}
.major-info .material ul li span,
.major-info .color ul li span { margin-top: .04rem; display: block;
}
.major-info .more { margin-bottom: .3rem;
}
.major-info .share { display: block;
}
.major-info .share ul li { margin: .3rem 0 0 0; width: 25%; text-align: center;
}
.major-info .link .attr-name { margin-top: .3rem;
}
.block-title .tab {
	font-size: .24rem;
	margin-right: .2rem;
}
.related { margin-top: 0;
}
#relatedProducts { margin-top: 0;
}
#relatedProducts .img { width: 100%;
}
.related .iconfont { right: -.4rem; top: 47%; z-index: 1; width: .45rem; height: .7rem; line-height: .7rem; text-align: center; background-color: #333; color: #fff; transform: translateX(-50%);
}
.related .icon-back { left: -.4rem; transform: translateX(50%);
}
.infomation { margin-top: .8rem; padding-bottom: .3rem;
}
.block-title { margin-bottom: .4rem;
}
.infomation .main-picture { 
}
.infomation .main-picture img { width: 100%; object-fit: cover; object-position: left;
}
.infomation .info-text-title { margin-bottom: .3rem;
}
.infomation .text-wrap { flex-wrap: wrap;
}
.infomation .text-wrap p { width: 100%;
}
.infomation .text-wrap .col-2,
.infomation .text-wrap .col-3 { margin-top: .2rem;
}
.infomation .text-wrap .col-2 div,
.infomation .text-wrap .col-3 div { font-size: .24rem;
}
.pictures { margin-top: .8rem;
}
.pictures .swiper-slide img { width: 100%; height: 2rem; object-fit: cover;
}
.pictures .iconfont { right: -.4rem; top: 40%; z-index: 1; width: .45rem; height: .7rem; line-height: .7rem; text-align: center; background-color: #333; color: #fff; transform: translateX(-50%);
}
.pictures .icon-back { left: -.4rem; transform: translateX(50%);
}
.pictures-three { flex-wrap: wrap;
}
.pictures-three .left { width: 100%; height: auto;
}
.pictures-three .left img { width: 100%;
}
.pictures-three .right { width: 100%; flex-direction: row;
}
.pictures-three .right img { margin-top: 4%; width: 42.24vw; height: 24.08vw;
}
.infomation .text-wrap .col-only ul { margin-top: .2rem;
}
.infomation .text-wrap .col-only ul img { margin-bottom: .06rem;
}
.icons { padding-bottom: .8rem;
}
.icons ul { flex-wrap: wrap;
}
.icons ul li { margin-top: .4rem; width: 48%;
}
.icons ul li p { width: 100%; font-size: .16rem;
}
.infomation .icon-back {
	left: 0; top: 38%;
	color: #fff;
}
.infomation .icon-next {
	right: 0; top: 38%;
	color: #fff;
}

}