/* 通用按钮 */
.swiper-tool { width: 100%; margin-top: 40px; position: relative; display: flex; justify-content: space-between; align-items: center; }
.swiper-tool .swiper-pagination ,
.swiper-tool .swiper-button-next,
.swiper-tool .swiper-button-prev {
	position: relative;
	top: unset;
	left: unset;
	right: unset;
	margin: 0;
	bottom: unset;
	transform: translate(0,0);
	text-align: left; 
}

.swiper-tool .swiper-button-next::after,
.swiper-tool .swiper-button-prev::after { content: ""; display: none; }


.swiper-tool .swiper-pagination { width: auto; }
.swiper-tool .swiper-pagination span.swiper-pagination-bullet {
	background-color: #000;
	opacity: .15;
}

.swiper-tool .swiper-pagination span.swiper-pagination-bullet-active { opacity: 1; }

.swiper-tool .swiper-btn-group { min-width: 1rem;  display: flex; justify-content: space-between; }
.flip-prev,
.flip-next { 
	width: 45px;
	height: 45px;
	transform-origin: center center;
	border: 1px #b3b3b3 solid;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-size: auto 14px;
}

.flip-prev { 
	background-image: url(../img/icon/flip-prev.png);
	background-repeat: no-repeat;
	background-position: 15px 50%; 
	margin-right: 8px !important;
	transition: all .4s;
}

.flip-prev:hover { 
	background-color: #000;
	background-position:-25px 50%;
	transition: all .4s;
}

.flip-next { 
	background-image: url(../img/icon/flip-next.png);
	background-repeat: no-repeat;
	background-position: -25px 50%; 
	transition: all .4s;
}

.flip-next:hover { 
	background-color: #000;
	background-position: 15px 50%;
	transition: all .4s;
}



.btn-more-normal {
    display: inline-flex;
	justify-content: center;
	min-width: 110px;
    align-items: center;
    background-color: #000;
    color: #fff;
    padding: 16px;
    font-size: .14rem;
    line-height: 1;
    text-align: center;
    border-radius: 55px;
}
.btn-more-normal:hover {color: #fff;  text-decoration: none; }


.btn-more { 
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	min-width: 100px;
	border: 1px #000 solid;
	border-radius: 45px;
	padding: 8px;
	padding-left: 18px;
	text-decoration: none;
	transition: all .35s;
}

.btn-more-bai { background-color: #fff !important; color: #000 ; }

.btn-more-bai:hover,
.btn-more:hover {
	background-color: #000 !important;
	color: #fff !important;
	transition: all .35s;
}

.btn-more:hover,
a:hover {text-decoration: none;  }

.icon-btn-next {
	display: inline-flex;
	align-items: center;
	width: 35px;
	height: 35px;
	background-color: #f3f3f5;
	border-radius: 50%;
	position: relative;
	margin-left: 12px;
	background-image: url(../img/icon/flex-img.png);
	background-repeat: no-repeat;
	background-position: -28px 50%;
	background-size: auto 14px;
	transition: all .35s;
}

.btn-more:hover .icon-btn-next {
	background-position: 11px 50%;
	transition: all .35s;
}

/* .icon-btn-next::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%)  ;
	width: 14px; 
	border-top: 2px #000 solid; 
}

.icon-btn-next::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	border-top: 2px #000 solid;
	border-right:2px #000 solid ;
} */



/* banner */
#banner { width: 100%; height: 100vh; overflow: hidden; }
#banner .inside-bottom  { 
	color: #fff; 
	width: 90%;
	 max-width: 1866.83px;
	padding: 0 15px;
	padding-bottom: 10vh; 
	left: 50%; 
	transform: translateX(-50%); 
	text-align: left;
}
#banner .swiper-slide { border-radius: 0; }
#banner .swiper-slide a { 
	display: block; 
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}

#banner video { 
	width: 100%; height: 100%; object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.banner-tittle { line-height: 1.15;  margin-bottom: 20px }

#banner .swiper-pagination {
	    width: auto;
	    height: auto;
	    text-align: center;
	    margin: auto;
	    left: auto;
	    right: 0;
	    top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-flow: column;
		justify-content: center;
}

#banner .swiper-pagination span { margin:5px 20px ; }
 
#banner .swiper-tool {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: .5rem;
	z-index: 5;
	width: auto;
}

#banner .flip-prev, 
#banner .flip-next { background-color: rgba(255,255,255,.35); border: none; }

#banner .flip-prev { background-position:-25px 50%; } 
#banner .flip-prev:hover { background-position: 15px 50%;  }
#banner .flip-next { background-position: 15px 50% ; }
#banner .flip-next:hover { background-position:-25px 50%; }


#banner .flip-prev:hover, 
#banner .flip-next:hover { background-color: rgba(255,255,255,1); transition: all .35s; }

/* banner */


/* mode-about */
.mode-about { width: 100%; background-repeat: no-repeat; background-size: 100%; }
.group-flex-2 { width: 80%; margin: auto; display: flex; align-items: center; }

.brand-story {
    position: absolute;
    background-color: #fff;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 40px 80px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    height: 40vh;
}


/* mode-about-end */



/* mode-prolist */
.pro-set { margin-bottom: 20px; }
.pro-set img { width: 100%; }
.pro-set-info {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.25);
    text-align: left;
    padding: 0.3rem;
    display: flex;
    flex-flow: column;
    justify-content: end;
}

.pro-set-info .btn-group {	position: absolute;	right: 0.3rem; z-index: 10; }
.pro-set-info .btn-more {margin-left: 15px; border: none; width: auto; }
.pro-set-info .btn-more:hover { background-color: #fff; color: #000 ;  }


#product { overflow: hidden; margin-bottom: 40px; }
#product .swiper-slide { height: 55vh; border-radius: 6px; display: block; text-align: left; overflow: hidden; }

#product .swiper-slide a .imgsize,
.cp-groups ul li .imgsize { background-color: transparent; }

#product .swiper-slide a.bg_fff ,
.cp-groups ul li a.bg_fff  { background-color: #fff; transition: all .35s; }

#product .swiper-slide h3 span ,
.cp-groups ul li h3 span { display: block; font-size: .16rem; line-height: 1.35;  }

p.price { text-align: right; color: #000; font-size: .24rem; line-height: 1.15;   }
p.price span { display: block;   text-decoration: line-through; }

.cp-tag {
	color: #999;
	position: absolute;
	padding: .2rem;
	bottom: 0;
	left: 0;
	transition: all .35s;
}

.flex-heard {
	padding: .2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-normal-group {
	width: 100%;
	display: flex;	    
	align-items: center;
	justify-content: space-between;
	position: absolute;
	z-index: 10;
	bottom: 0;
	padding: 0.2rem;
	transform: translateY(100%);
	opacity: 0;
	transition: all .35s; 
}

.btn-normal-group a {  width: 48%; color: #fff; text-align: center; text-decoration: none; transition: all .35s; }
.btn-normal-group a:hover { background-color: #fff; color: #000; transition: all .35s; }

.cp-groups ul li:hover a.bg_fff,
#product .swiper-slide:hover a.bg_fff { background-color: transparent; transition: all .35s; }

.cp-groups ul li:hover .flex-heard *,
#product .swiper-slide:hover .flex-heard * { color: #fff;  }

.cp-groups ul li:hover .flex-heard p.price span,
#product .swiper-slide:hover .flex-heard p.price span { opacity: .7; }

.cp-groups ul li:hover a .imgsize,
.cp-groups ul li:hover .cp-tag,
#product .swiper-slide:hover a .imgsize,
#product .swiper-slide:hover .cp-tag { opacity: 0; transition: all .35s; }


.cp-groups ul li:hover .btn-normal-group,
#product .swiper-slide:hover .btn-normal-group {
	transform: translateY(0%);
	opacity: 1;
	transition: all .35s; 
}
 


.pro-adv { width: 100%;max-height: 500px; overflow: hidden; }
.pro-adv ul { flex-flow:row nowrap; }
.pro-adv ul li { 
	position: relative; 
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
	transition: all .35s;
}

.pro-adv ul li h3 { /* position: absolute; transform: translateY(37px); */transition: all .5s; }
.pro-adv ul li .imgsize  {  height: 100%; }
.pro-adv ul li .imgsize ,
#adv .swiper-slide .imgsize { background-color: transparent; }

.pro-adv ul li .pro-surface ,
#adv .swiper-slide .pro-surface {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1rem .3rem;
	background-color: rgba(0,0,0,.15);
	color: #fff;
	text-align: left;
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
	overflow: hidden;
	transition: all .35s;
}

.pro-adv ul li .pro-surface .desc-unlimit {	margin: .2rem 0; transition: all .35s;}

.pro-adv ul li .pro-surface a.btn-more { 
	width: 177px; 
	height: auto; 
	background-color: #fff;
	color: #000 !important;
	transition: all .35s;
}



.hover-transform {
	transform: translateY(100%);
	position: absolute;
	opacity: 0;
	transition: all .35s;
}
 
.pro-adv ul li:hover h3 ,
#adv .swiper-slide:hover h3  { position: relative;  transition: all .5s; }

.pro-adv ul li:hover { width: 60%; }
.pro-adv ul li:hover .hover-transform ,
#adv .swiper-slide:hover .hover-transform  {
	transform: translateY(0);
	position: relative;
	opacity: 1;
	transition: all .35s;
}
.pro-adv ul li a.btn-more:hover { color: #fff !important; }

/* mode-prolist-end */


/* cp-brandshop */
#cp-brandshop {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.85);
	z-index:150;
	display: none;
}

#cp-brandshop .brand-discount {
	width: 65%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
}

#cp-brandshop .brand-discount dl { 
	display: flex;
	justify-content: center;
	width: 100%; 
	background-color: #fff;
}

#cp-brandshop .brand-discount dl dt { width: 8.5rem; }

#cp-brandshop .brand-discount dl dd {
	text-align: left;
	padding: .3rem;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}

.shopOnline {  }
.shopOnline ul li {	background-color: #f3f3f5; border-radius: 4px;	overflow: hidden; }
.shopOnline ul li a {
	padding: .2rem .3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.shopOnline ul li:last-child,
.shopOnline ul li:nth-last-child(2) { margin-bottom: 0; }

.brand-discount-actives { line-height: 1.15; letter-spacing: 2px; }

/* cp-brandshop-end */





/* mode-retroaction */
.mode-retroaction { width: 100%; }

#user-evaluate {   overflow: hidden; }
#user-evaluate .swiper-container { height: 45vh; }
#user-evaluate .swiper-slide a { 
	background-color: #f9f9f9;	
	padding: .25rem; 
	text-align: left; 
	position: relative; 
	padding-bottom: 1rem;  
}

#user-evaluate .swiper-slide a .stand-title-24 { margin-bottom: 10px; }
.stars-juge {  margin-bottom: 25px; display: flex; }
.stars-juge span { 
	display: block;
	width: 25px;
	height: 25px;
	background-image: url(../img/icon/star.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
}

#user-evaluate .swiper-slide a .uesr-position {
	position: absolute;
	bottom: .3rem;
}

.uesr-position { display: flex; align-items: center; }
.uesr-position dt { width: 55px; border-radius: 50%; overflow: hidden; margin-right: 15px; }
.uesr-position dd {	width: auto; line-height: 1; }
/* mode-retroaction-end */




/* mode-shop */
.shopping-platform { width: 100%; }
.shopping-platform ul { display: flex; justify-content: center; align-items: center; }
.shopping-platform ul li { border-right: 1px rgba(255,255,255,.5) solid; }
.shopping-platform ul li:last-child { border: none; }

.shopping-platform ul li a { padding:0 .8rem; text-align: center;}
.shopping-platform ul li img { height: .6rem; filter: grayscale(100%); -webkit-filter: grayscale(100%); transition: all .35s; }
.shopping-platform ul li span {	display: block;	text-align: center;	color: #fff; margin-top: 10px; }

.shopping-platform ul li:hover img { filter: grayscale(0); -webkit-filter: grayscale(0); transition: all .35s;  }

/* mode-shop-end */







/* ------------- pages ------------- */
.mode-item { 
	padding-top: 60px; 
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.mode-item .container { width: 14.8rem;}



/* about */
.caizhi { width: calc( ( 100vw - 13.38rem ) / 2 + 100%); }

.gongyi { padding: .5rem; position: relative; }
.gongyi .box { min-height: 8rem; }

.gongyi .inside-bottom { }
.craft_list {  width: 86%; margin: auto; }
.craft_list ul li {
	border-left: 1px rgba(255,255,255,.5) solid;
	padding-left: .3rem;
	padding-top: .5rem;
	padding-bottom: 1rem;
	margin-bottom: 0;
	
}

.craft_list ul li h1 { line-height: 1.4; }

 
.slide-active::before,
.slide-active::after { content: " "; width: calc(50% - 1.32rem) !important; transition: all .3s; }

.mind { padding: 0;  }
.mind .container {
	position: absolute;
	top: 1rem;
	left: 50%;
	transform: translateX(-50% ) ;
	z-index: 15;
}

.mode-shop .container { position: static; transform: translateX(0); }


.map,
.map img,
.mode-item img { width: 100%; }
.ft-contact ul li p { font-size: .2rem; }

.map h3 {
	color: #fff;
	line-height: 35px;
	position: absolute;
	top: 42%;
	left: 32vw;
	transform: translateY(-50%);
}

.positions {
	display: inline-block;
	width: 35px;
	height: 35px;
	float: left;
	transform: translateY(0);
	animation:  loading 1.3s ease-in-out infinite;
}

.icons-left {
    padding-left: 25px;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: left center;
}
.positions {
    background-image: url(../img/icon/dingwei.png);
}

@keyframes loading {
	0% {transform: translateY(0);}
	50% {transform: translateY(-15px);}
	100% {transform: translateY(0);}
}



/* contact */
textarea {
    background-color: #f3f3f5;
    padding: 20px;
    text-align: left;
    width: 100%;
    border: 0;
    min-height: 350px;
    margin-bottom: 40px;
    outline: none;
    border: none;
}

.input-group {  width: 100%;  margin-bottom: 35px; }
.input-group ul li { float: left; margin-right: 5%; color: #000; }




/* product */
.cp-type { width: 100%; margin-bottom: 40px; }
.cp-type ul { display: flex; flex-flow: row wrap; }
.cp-type ul li {
	width: auto;
	background-color: #f9f9f9;
	border-radius: 4px;
	overflow: hidden;
	padding: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	transition: all .35s;
}

.cp-type ul li:hover,
.cp-type ul li.active {	background-color: #000; transition: all .35s; }
.cp-type ul li:hover a ,
.cp-type ul li.active a { color: #fff; text-decoration: none; transition: all .35s; }


.cp-groups ul li {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
	height: 50vh;
	overflow: hidden;
}

.has-series ul li:first-child {
	width: calc( (100% - 60px) / 4 * 2 + 20px );
}

.has-series ul li:nth-child(4n-1),
.has-series ul li:last-child { margin-right: 0; }
.has-series ul li:nth-child(4n) { margin-right: 20px; }

.cp-groups ul li a.bg_fff { background-color: #f9f9f9; }
.cp-groups ul li .btn-more-normal { justify-content: center; }

.btn-more-normal span {	position: absolute;	display: block; transition: all .35s; }
.btn-more-normal span:nth-child(2) { transform: translateY(20px); opacity: 0; transition: all .35s; }
.btn-more-normal:hover span:nth-child(1) { transform: translateY(-20px); opacity: 0; transition: all .35s; }
.btn-more-normal:hover span:nth-child(2) { transform: translateY(0px); opacity: 1; transition: all .35s; }


/* .btn-more-normal span { transform-style: preserve-3d; transform-origin: center top; position: absolute; background-color: #000; transition: all .35s; } 
.btn-more-normal span:nth-child(2) { transform-origin: center bottom;  transform: rotateX(-180deg); z-index: 10;opacity: 0; transition: all .35s;}
.btn-more-normal:hover span:nth-child(1) {		
	transform: rotateX(-180deg);
	z-index: 10;
	opacity: 0;
	transition: all .35s;
} 

.btn-more-normal:hover span:nth-child(2) {	
	transform: rotateX(00deg);
	z-index: 10;
	opacity: 1;
	transition: all .35s;
} */


/* cp-detail */
.box-sticky { padding:1rem 0; }
.box-sticky-left {  width: calc( 100% - 35% - 40px ) ; margin-right: 40px; float: left;  }
.box-sticky-right { width: 35%; float: right; }
.position_sticky {  top:25px;   }

#cp-detail { margin-bottom: 30px; }
#cp-detail .swiper-gallery { width: 100%; margin-bottom: 30px; }
#cp-detail .swiper-gallery .imgsize img { width: unset; height: unset; max-height: 100%; }

.cp-basic-info { width: 100%; }
.cp-basic-info p { margin-bottom: 8px; }
.cp-flex { display: flex; justify-content: space-between; align-items: center; }
.cp-flex-wrap { display: flex; flex-flow: row wrap; }

.cp-price { text-align: left; line-height: 1.15;}
.cp-price span { display: block; opacity:.3; text-decoration: line-through; }
.cp-has-goods { 
	padding: 8px 15px;
	padding-left: 30px;
	border: 1px #b3b3b3 solid;
	border-radius: 4px;
	overflow: hidden;
	color: #000;
	font-size: 14px;
	position: relative;
}

.cp-has-goods::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #40e300;
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
}

.noRepertory::before {background-color: #da011b; }
.cp-parameter{ display: block;  font-size: 14px;  margin-bottom: 8px;}

.cp-size ,
.cp-color ,
.cp-detail-parameter { margin-bottom: 30px; }
.cp-size ul li {
	color: #000;
	background-color: #f3f3f5;
	border-radius: 4px;
	overflow: hidden;
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
	padding: 8px 15px;
	font-size: 14px;
	position: relative;
}

.cp-size ul li input {
	display: block;
	width: 100%;
	height: 100%;	
	background-color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	border: none;
	margin: 0;
	outline: none;
	border-radius: 4px;
}

.cp-size ul li span { position: relative; z-index: 5; }

.checked { background-color: #000 !important; }
.checked span { color: #fff; }
.checked input,
.cp-size ul li input[checked] {	 border: none; margin: 0; outline: none; }

select.cp-color { 
	display: block;
	min-height: 50px;
	width: 100%; padding: 15px;  
	background-color: #f3f3f5;  
	border: none;  
	outline: none; 
	border-right: 20px #f3f3f5 solid; 
	font-size: 16px;
}

button.btn-goOrder { 
	width: 100%;
	padding: 15px;
	text-align: center; 
	color: #fff; 
	background-color: #da011b;
	border-radius: 4px;
	overflow: hidden;
}
button.btn-goOrder span {
	padding-right: 25px;
	background-repeat: no-repeat;
	background-image: url(../img/icon/icon-buy.png);
	background-repeat: no-repeat;
	background-position: right center;
}

.goback ,
.goback:hover {
	width: 100%;
	background-color: #000;
	text-align: center;
	color: #fff;
	padding: 15px;
	border-radius: 4px;
	overflow: hidden;
	font-size: 20px; 
	text-decoration: none;
}