@charset "utf-8";
/*
 * 方案素材网
 * 请尊重他人劳动成果，你可以模仿页面，但是请自己写代码！
 * 技术支持：QQ2863868475
 * 2024-08-26
 * coyright@tengcee.com
*/
@import url("public.css");
@import url("page.css");
.mb{margin-bottom: 20px;}

.bgbanner{ width: 100%;float: left;position: relative; background-color:#f7f7f7; padding:40px 0; box-shadow: 0 0 10px rgba(0,0,0,0)}
.bgbanner2{ width: 100%;float: left;position: relative; background-color:#f5f5f5; padding:40px 0; box-shadow: 0 0 10px rgba(0,0,0,0);background-image: url('../images/banner01.jpg'); background-repeat: no-repeat;background-position: center bottom; background-size:cover;}
.purple{ background-color: #6610f2;background-image: linear-gradient(45deg, #8618db 0%, #d711ff 50%, #460fdd 100%);}
.orange{ background-color: #0092dc;background-image: linear-gradient(45deg, #e2f2d8 0%, #b1d994 40%, #0092dc 100%);}

.title{ width: 100%;float: left;padding:10px 0; box-sizing: border-box;position: relative; }
.title .tit{float: left;line-height: 45px;font-size: 20px;font-weight: bold; padding: 0 10px;}
.title .iconfont{ float: left;line-height: 45px;}
.title2{ width: 100%;float: left;padding:10px 0; box-sizing: border-box;position: relative; width: 100%;}
.title2 .tit{float: left;line-height: 30px;font-size:25px;font-weight: bold; text-align: center; width: 100%;}
.title2 .desc{float: left;line-height: 30px;font-size: 15px; text-align: center; width: 100%;color: #999}
@media screen and (max-width:900px){
	.bgbanner2{padding:20px 0 30px 0;}
}
.announce{width: 100%;padding:0 120px; box-sizing: border-box; line-height: 35px;color: #fff; text-align: center; font-size: 14px;opacity: .9;}
.announce i{ padding-right: 5px;opacity: .8; }
.so{ width:700px;position: relative;margin:0 auto;}
.sobox{ width:100%;box-sizing: border-box;margin:40px auto 30px auto; float: left;position: relative;}
.sobox .soform{ width: 100%;float: left;box-sizing: border-box; border-radius: 55px;color: #fff; overflow: hidden;position: relative; background-color: rgba(0,0,0,.7);}
.sobox .soform:hover{background-color: rgba(0,0,0,.8);}
.sobox .soform .input1{ width: 100%;float: left; line-height: 55px;  outline: none; border:none; border-radius: 35px; padding: 0 25px; box-sizing: border-box; color: #fff;font-size:15px;position: relative; background-color:transparent;}
.sobox .soform .button1{ position: absolute; top: 20px;right: 20px; font-size: 18px; color: #fff;border:none; outline: none; cursor: pointer;background-color:transparent; }
.sobox .result{ width: 100%;float: left;padding-top: 10px;line-height: 2em;font-size:15px;color: #fff;text-align: center; opacity: .8; }

.sobox2{ width:100%;box-sizing: border-box;margin:30px auto 30px auto; float: left;position: relative;}
.sobox2 .soform{ width: 100%;float: left;box-sizing: border-box; border-radius: 55px;color: #fff; overflow: hidden;position: relative; background-color: rgba(0,0,0,.7);}
.sobox2 .soform:hover{background-color: rgba(0,0,0,.85);}
.sobox2 .soform .input1{ width: 100%;float: left; line-height: 55px;  outline: none; border:none; border-radius: 35px; padding: 0 15px 0 45px; box-sizing: border-box; color: #fff;font-size:15px;position: relative; background-color:transparent;}
.sobox2 .soform .button1{ position: absolute; top: 0px;right: 0px; font-size: 15px; color: #fff;border:none; outline: none; cursor: pointer;background-color:#0093dd;width: 80px;height: 55px; line-height: 55px;text-align:center;}
.sobox2 .soform .icon{ position: absolute; top: 20px;left:20px; opacity: .8; }

.soform2{ width: 300px;float: right;box-sizing: border-box; overflow: hidden;position: relative; padding-top:15px;}
.soform2 form{display: flex;align-content: flex-start;justify-content: space-between; flex-wrap: nowrap;width: 100%;}
.soform2 form .input1{ width: 100%;float: left; line-height: 40px;  outline: none; border:none; padding: 0 15px; box-sizing: border-box; color: #fff;font-size:15px;position: relative; background-color:#fff; border-top-left-radius: 25px; border-bottom-left-radius: 25px;}
.soform2 form .button1{ position: relative; width: 50px;flex:0 0 50px; font-size: 18px; color: #fff;border:none; outline: none; cursor: pointer;background-color:#0093dd;line-height: 40px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;}
@media screen and (max-width:900px){
	.bgbanner{padding:30px 0 20px 0; }
	.announce{padding:0 20px; line-height: 1.5em;}
	.so{ width:90%;position: relative;margin:0 auto;}
	.sobox{margin:20px auto;}
	.sobox .soform .input1{line-height: 45px;padding: 0 15px;}
	.sobox .soform .button1{top: 15px;right: 15px; font-size: 16px;}
	.sobox2{margin:15px auto;}
	.sobox2 .soform .input1{line-height: 45px; padding: 0 15px 0 40px;}
	.sobox2 .soform .button1{width: 60px;height: 45px; line-height: 45px;}
	.sobox2 .soform .icon{top: 15px;left:15px;}
}
.catlist{ width: 100%;text-align:center;float: left;position: relative;margin:20px 0; box-sizing:border-box;}
.catlist .item{ padding:0 2px; display: inline-block;}
.catlist .item span{padding:0 28px;line-height:50px;height:50px;border:solid 1px #e2e2e2; border-radius:1px; float: left; font-size: 16px;}
.catlist .on span{ background-color:#0093dd;}
.catlist .on span a{ color: #fff;}
.catlist .item span:hover{background-color:#0093dd;}
.catlist .item span:hover a{color: #fff;}
@media screen and (max-width:1200px){
	.catlist{margin:15px 0;}
	.catlist .item span{padding:0 20px;line-height:45px;height:45px;font-size: 15px;}
}
@media screen and (max-width:900px){
	.catlist{margin:5px 0; padding:0 10px;}
	.catlist .item{ padding:2px;width:25%;display: inline-block; float: left;}
	.catlist .item span{padding:0;line-height:40px;height:40px;font-size: 13px; width:100%;}
}
.list{ width: 100%; float: left;position: relative;}
.list-pic{ width: 100%;float: left;position: relative;}
.list-pic .item{ width: 20%;float: left;padding:10px;box-sizing: border-box;position: relative;}
.list-pic .item .itemin{ width: 100%;float: left;position: relative;border-radius: 10px;cursor: pointer;}
.list-pic .item .thumb{ width: 100%;float: left;position: relative; border-radius: 10px;overflow: hidden;}
.list-pic .item .thumb img{ width: 100%;height: auto;-moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
.list-pic .item .thumb:hover img{opacity:.95;transform: scale(1.2, 1.2);background-color:#000;-moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
.list-pic .item .thumb .icon{ position: absolute;left:0; top:0; background-color:rgba(0,0,0,.6); line-height: 30px; padding:0 15px;border-bottom-right-radius: 15px; border-top-left-radius: 10px; color: #fff;background-image: linear-gradient(45deg, #333 0%, #222 100%);opacity: .9;}
.list-pic .item .thumb i{ position: absolute;right:5px; top:5px; background-color:rgba(0,0,0,.6); line-height: 25px; padding:0 10px;border-radius: 5px; color: #fff;}
.list-pic .item .thumb .hot{background-image: linear-gradient(45deg, #c68c42 0%, #ebc68c 100%);}
.list-pic .item .info{width: 100%;padding:5px 15px;box-sizing: border-box; float: left;}
.list-pic .item .info .tit{ width: 100%; line-height: 35px; text-align:center; font-size: 16px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.list-pic .item .info .tit a{ color: #666; }
.list-pic .item .info .tit a:hover{ color: #0093dd; }
@media screen and (max-width:900px){
	.list-pic .item{ width: 50%;padding:10px;}
	.list-pic .item .info{padding:5px;}
	.list-pic .item .info .tit{line-height:2em;font-size: 15px;}
	.list-pic .item .thumb{border-radius:5px;}
	.list-pic .item .thumb .icon{line-height:25px; padding:0 10px;border-top-left-radius:5px;}
	.list-pic .item .thumb i{right:5px; top:5px;padding:0 5px;line-height: 20px;}
}
.pic4{width: 100%}
.pic4 .item{ width: 25%; }
@media screen and (max-width:900px){
	.pic4 .item{ width: 50%; }
}