header {background:none; transition: .5s;}
header.on {background:#fff;}

.pro .banner {width:100%; background:url('../img/pro_banner.jpg')no-repeat center; background-size:cover; height:490px; padding:200px 0 0 265px;}
.pro .banner h2 {font-size:35px; color:#000; line-height:1.25em; font-weight:300;}
.pro .banner h2 b {font-weight:700; }
.pro .banner p {margin-top:20px; color:#000; font-size:16px; line-height:1.4em; font-weight:300; padding-left:2px;}


.pro .top {position: relative; padding:22px 60px; border-bottom:1px solid #eee;}
.pro .top p {font-size:14px; color:#999; font-weight:300;}
.pro .top p img {margin:-2px 10px 0 13px;}
.pro .top p img.home {margin:-2px 5px 0 0;}
.pro .top p b {color:#111; font-weight:500;}
.pro .top p b img {filter:brightness(100) invert(1);}
.pro .top .select {cursor: pointer; width:120px; height:100%;  position: relative; z-index: 5; position: absolute; right:60px; top:0; border-left:1px solid #eee; }
.pro .top .select .label {width:100%; text-align:left; border:none; height:100%; padding-left: 20px; background: none; cursor: pointer; font-size:13px; color:#777; background:url('../img/down_arrow.svg')no-repeat center right 12px; border-radius:20px;font-weight:400;}
.pro .top .select .optionList {position: absolute; top:60px; left: 0px; width: 100%;  max-height: 0; transition: .3s ease-in;   z-index: 1;   overflow:hidden; font-weight:400; border:1px solid rgba(0,0,0,0)}
.pro .top .select.active .optionList {max-height: 170px;overflow:auto; background:#fff; border:1px solid #eee; border-top:#fff;}
.pro .top .select .optionItem { padding:7px 17px 7px 20px; font-size:13px; color:#888; font-weight:400;}
.pro .top .select .optionItem:first-child {padding-top:13px;}
.pro .top .select .optionItem:last-child {padding-bottom:16px;}
.pro .top .select .optionList::-webkit-scrollbar {width: 6px;}
.pro .top .select .optionList::-webkit-scrollbar-thumb {background:  none; border-radius: 45px;} 


.pro .category {padding:30px 60px;}
.pro .category:after {content:''; clear:both; display: table;}
.pro .category li {float:left; font-size:15px; margin-right:8px; padding:5px 13px; border-radius:50px; background:#f4f4f4; color:#999; cursor: pointer;}
.pro .category li.on {background:#111; color:#fff;} 
.pro .category li:last-child {margin-right:0;}


.pro .list {padding:0 60px 40px 60px;}
.pro .list:after {content:''; clear:both; display: table;}
.pro .list .box {float:left; width:calc((100% - 100px) / 5); margin-right:25px; margin-bottom:60px;}
.pro .list .box a {cursor:pointer;}
.pro .list .box:nth-child(5n) {margin-right:0;}
.pro .list .box .img {width:100%; padding-top:140%; position: relative; }
.pro .list .box .img img.front {position: absolute; left:0; top:0; width:100%; height:100%;}
.pro .list .box .img img.back {position: absolute; left:0; top:0; width:100%; height:100%; opacity: 0; z-index: 1; transition: .5s;}
.pro .list .box:hover img.back {opacity: 1;}
.pro .list .box .banner_icon {position: absolute; right:5px; bottom:-15px; z-index: 2;}
.pro .list .box .banner_icon img {float:left; margin-left:5px;}
.pro .list .box p {font-size:17px; margin-top:21px; color:#000; font-weight:600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pro .list .box span {display: inline-block; width:100%; margin-top:6px; font-size:14px; color:#777; font-weight:300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pro .list .box .write {width:100%; margin-top:20px; font-size:15px; color:#111; border:1px solid #111; background:none; transition: .3s; height:40px; font-weight:500;}
.pro .list .box .write:hover {background:#111; color:#fff;}


.pro .more {font-size:16px ;color:#111;  border:1px solid #111; font-weight:500; height:45px; border-radius:50px; padding:0 23px; text-align: left; width:112px; display: block; margin:0 auto; background:none; margin-bottom:80px; transition: .3s;}
.pro .more.hide { display: none; }
.pro .more img {float:right; margin-top:7px; margin-right:-5px;}
.pro .more:hover {background:#111; color:#fff;}
.pro .more:hover img {filter:invert(1);}




@media screen and (max-width:1440px) {
	.pro .banner {padding-left:80px;}
	.pro .top {padding:22px 40px;}
	.pro .category {padding:22px 40px; display: flex; overflow-x: scroll;}
	.pro .category::-webkit-scrollbar {display: none;}
	.pro .category li {flex:0 0 auto;}
	.pro .list {padding:0 40px 40px 40px;}
	.pro .list .box {width:calc((100% - 75px) / 4);margin-bottom:60px;}
	.pro .list .box:nth-child(5n) {margin-right:25px;}
	.pro .list .box:nth-child(4n) {margin-right:0;}
}

@media screen and (max-width:1200px) {
	.pro .banner {height:300px; padding:122px 0 0 60px;}
	.pro .banner h2 {font-size:25px;}
	.pro .banner p {margin-top:14px; font-size:14px;}
	.pro .top {padding:16px 40px;}
	.pro .top .select {right:40px;}
	.pro .top .select .optionList {top:49px;}
	.pro .list .box {width:calc((100% - 50px) / 3);margin-bottom:50px;}
	.pro .list .box:nth-child(4n) {margin-right:25px;}
	.pro .list .box:nth-child(3n) {margin-right:0;}
	.pro .list .box p {font-size:16px;}
	.pro .list .box span {font-size:13px;}
}

@media screen and (max-width:767px) {
	.pro .banner {height:490px; padding:140px 25px 0 25px;  background:url('../img/pro_banner_mo.jpg')no-repeat center; background-size:cover;}
	.pro .banner h2 {font-size:25px;}
	.pro .banner p {font-size:13px;}
	.pro .top {padding:15px 20px;}
	.pro .top p {font-size:12px;}
	.pro .top p img {height:8px; margin:-2px 8px 0 10px;}
	.pro .top p img.home {display: none;}
	.pro .top .select {right:8px; border:none;}
	.pro .top .select .label {font-size:12px; background-size:10px;}
	.pro .top .select .optionList {top:44px;}
	.pro .top .select .optionItem {font-size:12px;}
	.pro .category {padding:15px 18px;}
	.pro .category li {font-size:13px; }

	.pro .list {padding:3px 20px 20px 20px;}
	.pro .list .box {width:calc((100% - 20px) / 2); margin-bottom:25px; margin-right:20px;}
	.pro .list .box:nth-child(5n) {margin-right:20px;}
	.pro .list .box:nth-child(4n) {margin-right:20px;}
	.pro .list .box:nth-child(3n) {margin-right:20px;}
	.pro .list .box:nth-child(2n) {margin-right:0;}
	.pro .list .box .banner_icon img {height:15px;}
	.pro .list .box .banner_icon {bottom:-10px;}
	.pro .list .box p {font-size:14px; margin-top:15px;}
	.pro .list .box span {font-size:12px; margin-top:5px;}
	.pro .list .box .write {height:34px; font-size:14px; margin-top:15px;}

	.pro .more {font-size:15px; height:40px; margin-bottom:60px;}
	.pro .more img {margin-top:6px;}

}