@charset "utf-8";
/*-----
flex pto list
-----*/
.flex_Border_pro{
	margin:0px 9% 1% 9%;
	padding: 20px;
	width: 80%;
	display: flex;
	position: relative;
}
.flex_left_navi{
	width: 20%;
	margin-top: 14px;
}
.flex_left_navi ul {
	width: 100%;
}
.flex_left_navi ul > li{
	width: 100%;
	border-bottom: 1px solid #dfdfdf;
	display: block;
}
.flex_left_navi ul > li >a{
	display:block;
	padding: 8px;
	transition: background 0.5s;
}
.flex_left_navi ul > li >a.onchoose{
	background: #fff5f6;
}
.flex_left_navi ul > li >a:hover{
	background: #ffcdcd;
}
.flex_right_navi{
	width: 77%;
	margin-top: 14px;
	margin-left: 3%;
	display: flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;
	position: relative;
}
.flex_index_navi{
	width: 90%;
	max-width: 1100px;
	margin:3% auto;
	display: flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;
	position: relative;
}
.flex_pro_list{
	margin: 16px 3px;
	width: 355px;
	border:1px solid #cdcdcd;
	padding:16px;
	position: relative;
}

span.subcate{
	width:100%;
	padding: 8px;
	font-size:1.3em;
	line-height:2em;
	font-weight: 550;
	display: inline-table;
	color:#ff9999;
	border-bottom: 2px solid #ff9999;
}
button.icon_secSub{
	display: none;
	position:relative;
	left: -46px;
	top: 100px;
	width: 45px;
	height: 45px;
	background-color: #ff9999;
	color: #fff;
	font-size: 1em;
	line-height: 1.3em;
	font-weight: 600;
	letter-spacing: 3px;
	text-align: center;
	padding-top: 2px;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	transition: background 0.5s;
    transition-duration: 1s;
    /*display: inline-block;*/
	z-index: 999;
	/* CSS3 陰影*/
	 -webkit-box-shadow: 0px 2px 6px #b8b8b8;
	 -moz-box-shadow: 0px 2px 6px #b8b8b8;
	 box-shadow: 0px 2px 6px #b8b8b8; 
}
button.icon_secSub:hover{
	background: #f48585;
}
button.icon_secSub_Fixed{
	position: fixed;
	top: 100px;
	left: 0;
}
.icon {
  height: 3px;
  width: 30px;
  top: 20px;
  left:5px; 
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  transition-duration: 0.5s;
}
.icon:before {
  left:0;
  position: absolute;
  top: -10px;
  height: 3px;
  width: 30px;
  background-color: #fff;
  content: "";
  border-radius: 4px;
  transition-duration: 0.5s;
}
.icon:after {
  left:0;
  position: absolute;
  top: 10px;
  height: 3px;
  width: 30px;
  background-color: #fff;
  content: "";
  border-radius: 4px;
  transition-duration: 0.5s;
} 
.burger2.open .icon {
  transition-duration: 0.1s;
  transition-delay: 0.5s;
  background: transparent;
}
 
.burger2.open .icon:before {
  transition: top 0.5s, transform 0.5s 0.5s;
  top: 0px;
  transform: rotateZ(-45deg);
  background-color: #a1a1a1;
}
 
.burger2.open .icon:after {
  transition: top 0.4s, transform 0.5s 0.5s;
  top: 0px;
  transform: rotateZ(45deg);background-color: #a1a1a1;
}
@media (max-width: 1915px) {
   .flex_pro_list{
    width: 350px;
  }
}
@media (max-width: 1900px) {
   .flex_pro_list{
    width: 340px;
  }
}
@media (max-width: 1848px) {
   .flex_left_navi{
	width: 20%;
  }
   .flex_right_navi{
	width: 80%;
  }
	.flex_pro_list{
    width: 330px;
  }
	
}
@media (max-width: 1899px) {
	.flex_pro_list > span.newsTxt{
	height:100px;
	/*background-color: aquamarine;*/
  }
}
@media (max-width: 1800px) {
   .flex_pro_list{
    width: 320px;
  }
}
@media (max-width: 1756px) {
	.flex_pro_list{
    width: 330px;
	margin: 10px;
	padding:10px;
  }
}
@media (max-width: 1707px) {
	.flex_pro_list{
    width: 320px;
  }
}
@media (max-width: 1660px) {
	.flex_right_navi{
      margin-top: 0;
      justify-content:center;
  }
	.flex_left_navi{
	width: 30%;
  }
   .flex_right_navi{
	width: 70%;
  }
}
@media (max-width: 1384px) {
	.flex_Border_pro{
	margin:0px 5% 1% 5%;
	width: 90%;
	padding: 0 15px 15px;
  }
	button.icon_secSub{
    display: block;
	animation-name:move_in;
    animation-duration:2s;
    animation-fill-mode:forwards;
  }
	@keyframes move_in{
      from{
          left:-46px;
      }
      to{
          left:0px;
      }
	}
	button.icon_secSub_move{
	background-color: #ffecec;
	animation-name:icon_secSub_move;
    animation-duration:0.5s;
    animation-delay: 0.3s;
    animation-fill-mode:forwards;
  }
	@keyframes icon_secSub_move{
      from{
          left:0%;
      }
      to{
          left:24.9%;
      }
	}
	.flex_left_navi{
	/*display: none;*/
	position:fixed;
    z-index: 999;
    overflow-y:scroll;
    height:100%;
	top: 0;
	left: -999px;
	background-color: #ffecec;
    padding: 20px;
    border-radius: 0 4px 4px 0;
  }
	.flex_left_navi_open{
	animation-name:navi_open;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
  }
	.flex_left_navi_open_over300px{
		top:50px;
		padding-bottom: 65px;
	}
	@keyframes navi_open{
      from{
          left:-999px;
      }
      to{
          left:0px;
      }
	}
   .flex_right_navi{
	width: 100%;
  }
	
}

@media (max-width: 1277px){
	.flex_left_navi{
		width: 40%;
	}
	@keyframes icon_secSub_move{
      from{
          left:0%;
      }
      to{
          left:39.99%;
      }
	}
}
@media (max-width: 838px){
	.flex_left_navi{
		width: 50%;
	}
	@keyframes icon_secSub_move{
      from{
          left:0%;
      }
      to{
          left:49.99%;
      }
	}
}
@media (max-width: 641px){
	.flex_left_navi{
		width: 70%;
	}
	@keyframes icon_secSub_move{
      from{
          left:0%;
      }
      to{
          left:70%;
      }
	}
}
/*---------------------products----------------*/
.changBorder{
	margin:8px 9%;
	width: 80%;
	display: flex;
	flex-direction:row;
	justify-content:flex-end;
	flex-wrap:wrap;
	position: relative;
}
.changIconBorder{
	width:auto;
	height:24px;
	line-height:24px;
	margin:8px 10px;
	color:#ae9d8c;
	font-weight: 400;
}
.changIconBorder img{
	width:20px;
	height:20px;
	margin-right: 3px;
	margin-top: 2px;
	float: left;
}
.proPageBg{
	background:#ffeed9 url(../img/artbg.png) no-repeat top center;
	height:auto;
	padding-top: 15px;
	padding-bottom:15px;
	padding-left: 2%;
	padding-right: 2%;
	text-align:center;
	width: 100%;
	overflow: hidden;
}

.grayBg{
	background:#e8e7e9;
	min-height:250px;
	border-top:1px solid #d8d7da;
	padding:0% 0.2% 1% 0.2%;
	margin-bottom:7%;
}
.yellowProBg{
	background:#fbcf1f;
	min-height:250px;
	border-top:1px solid #e8e8e8;
	padding:2% 0.2%;
	text-align:center;
}

.proPageBox{
	width:23.333333%;
	margin:1% 5% 5% 5%;
	float:left;
	max-height:15%;
	/*background:#fbcf1f;*/
	border:1px solid #c8c8c8;
}
.proimgBorder{
	width:88%;
	margin:6%;
	float:left;
	height:auto;
}
.proimgBorder img{
	width:100%;
	height:auto;
}
.btnImg img{
	width:100%;
	height:auto;
}
.proSubBorder{
	font-size:1em;
	padding:5.5% 3%;
	width:100%;
	height:auto;
	float:left;
	text-align:center;
	font-weight:600;
	color:#111111;
	background:#eae6e6;
}
.proSubBorder a{
	display:block;
	color:#000;
}
.proSubBorder:hover{
	background:#b6b5b5;
}
.protextBorder{
	margin:2% 3%;
	width:94%;
	float:left;
	font-size:0.8em;
	line-height:1.6em;
	font-weight:600;
	color:#7b7363;
}
.proPageBox >span.moreBtu{
	width:15%;
	font-size:0.7em;
	font-weight:600;
	height:auto;
	float:left;
	margin:2% 3%;
	border-bottom:2px solid #e54072;
}
.proPageBox >span.moreBtu:hover{
	border-bottom:2px solid #fc5033;
}

.prolistImg{
	width:30%;
	float:left;
	margin-left:15%;
	margin-right:5%;
	height:auto;
}
.prolistImg img{
	width:100%;
	height:auto;
}
.protypelistPageText{
	float:right;
	width:50%;
	text-align:left;
}
span.protypelistPageSub{
	font-size:1.2em;
	color:#fc462a;
	float:left;
	clear:left;
	line-height:1.8em;
	margin-bottom:18px;
}
span.protypelistPageSub1{
	font-size:1.2em;
	font-weight:600;
	color:#66635c;
	float:left;
	clear:left;
	line-height:1.6em;
	margin-top:8px;
	margin-bottom:3px;
}
span.protypelistPageTxt{
	font-size:1em;
	float:left;
	clear:left;
	color:#252524;
	line-height:1.6em;
}

/*------------------------------------------------------*/
/* RESPONSIVE
/*------------------------------------------------------*/
@media (max-width: 1055px) {
	.changBorder{
	margin:8px 2%;
	width: 96%;
}
@media (max-width: 991px) {
}

/*---------- MEDIA 480px ----------*/
@media  (max-width: 768px) {
	
	
}

@media  (max-width: 480px) {
	.grayBg{
		background:#f3f2f0;
		min-height:250px;
		border-top:1px solid #e8e8e8;
		padding:2% 0.2%;
		text-align:center;
	}
	.yellowProBg{
		background:#fbcf1f;
		min-height:250px;
		border-top:1px solid #e8e8e8;
		padding:2% 0.2%;
		text-align:center;
	}
	
	.proPageBox{
		width:96%;
		margin:4% 2%;
		float:left;
		max-height:15%;
		/*background:#fbcf1f;*/
	}
	.proimgBorder{
		width:70%;
		margin:2% 15%;
		float:left;
		height:auto;
	}
	.proimgBorder img{
		width:100%;
		height:auto;
	}
	.proSubBorder{
		font-size:1.1em;
	}
	.protextBorder{
		margin:2% 3%;
		width:94%;
		float:left;
		font-size:1.1em;
		line-height:1.6em;
		font-weight:600;
		color:#7b7363;
	}
	.proPageBox >span.moreBtu{
		width:20%;
		font-size:1em;
		font-weight:600;
		height:auto;
		float:left;
		margin:2% 3%;
		border-bottom:2px solid #e54072;
	}
	.proPageBox >span.moreBtu:hover{
		border-bottom:2px solid #fc5033;
	}
	
	.prolistImg{
		width:50%;
		float:left;
		margin-left:25%;
		margin-right:25%;
		margin-bottom:2%;
		height:auto;
	}
	.prolistImg img{
		width:100%;
		height:auto;
	}
	.protypelistPageText{
		float:left;
		width:96%;
		margin-left:2%;
		margin-right:2%;
		margin-top:2%;
		text-align:left;
	}
	span.protypelistPageSub{
		font-size:1.2em;
		color:#fc462a;
		float:left;
		clear:left;
		line-height:1.8em;
		margin-bottom:18px;
	}
	span.protypelistPageSub1{
		font-size:1.2em;
		font-weight:600;
		color:#66635c;
		float:left;
		clear:left;
		line-height:1.6em;
		margin-top:8px;
		margin-bottom:3px;
	}
	span.protypelistPageTxt{
		font-size:1em;
		float:left;
		clear:left;
		color:#252524;
		line-height:1.6em;
	}
}