* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 scroll-behavior: smooth;
}



#test {
 min-height: 100vh;
 background: #f7f7f7;
 font-family: "微软雅黑";
}

#test .testBanner {
 width: 100%;
}

#test .testBanner>img {
 width: 100%;
 display: block;
}

#test .testContent {
 background-image: url(../image/bgi1.png);
 background-size: 1920px 980px;

}

#test .testContent>.selectList {

 margin-top: 60px;
}

#test .testContent>.selectList .listClass {
 width: 1200px;
 margin: 0 auto;
 height: 80px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

#test .testContent>.selectList .listClass>.left {
 list-style: none;
 display: flex;
 padding: 0 10px;
}

#test .testContent>.selectList .listClass>.left>li {
 padding: 0 20px;
}

#test .testContent>.selectList .listClass>.left>li>a {
 text-decoration: none;
 font-size: 16px;
 color: #666666;
 font-weight: bold;
 display: block;
 height: 36px;
 line-height: 36px;
}

#test .testContent>.selectList .listClass>.left>li>.select {
 color: #000000;
 border-bottom: 4px solid #0099AD;
}

#test .testContent>.selectList .listClass>.collections {
 color: #666666;
 font-size: 16px;
 display: flex;
 align-items: center;
 text-decoration: none;
}

#test .testContent>.selectList .listClass>.collections::before {
 display: block;
 content: "";
 background: url(../image/collections1.png) no-repeat;
 background-size: 100% 100%;
 width: 20px;
 height: 20px;
 margin-right: 6px;
}

#test .testContent>.selectList .listClass>.collected {
 color: #0099AD;
}

#test .testContent>.selectList .listClass>.collected::before {
 display: block;
 content: "";
 background: url(../image/collections2.png) no-repeat;
 background-size: 100% 100%;
 width: 20px;
 height: 20px;
 margin-right: 6px;
}

#test .testContent>.selectList .classification {
 display: block;
 list-style: none;
 width: 1200px;
 margin: 0 auto;
 display: flex;
 align-items: center;

}



#test .testContent>.selectList .classification>li {
 padding: 16px 24px;
 background: #EEEEEE;
 margin-left: 20px;

}

#test .testContent>.selectList .classification>li:nth-of-type(1) {

 margin-left: 0px !important;

}

#test .testContent>.selectList .classification>li>a {
 height: 26px;
 line-height: 26px;
 font-weight: 400;
 color: #333333;
 font-size: 19px;
 text-decoration: none;
}

#test .testContent>.selectList .classification>li:hover {
 background: #FFFFFF !important;
}

#test .testContent>.selectList .classification>.select {
 background: #FFFFFF !important;
 position: relative;
}

#test .testContent>.selectList .classification>.select::after {
 display: block;
 content: '';
 width: 18px;
 height: 18px;
 background: url("../image/subscript1.png") no-repeat;
 background-size: 100% 100%;
 float: right;
 position: absolute;
 bottom: 0px;
 right: 0px;
}

#test .testContent>.describeBox {
 margin-top: 20px;


}

#test .testContent>.describeBox .describeContent {

 margin: 0 auto;
 width: 1200px;

 background: #FFFFFF;

}

#test .testContent>.describeBox .describeContent .texta {
 padding: 30px 24px;

 font-size: 14px;
 font-family: "微软雅黑";
 font-weight: 400;
 line-height: 28px;
 color: #000000;

}

#test .testContent>.describeBox .describeContent .texta>p {
 text-indent: 28px;

}

#test .testContent>.cententList {
 width: 1200px;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 margin-top: 20px;
}

#test .testContent>.cententList .title {
 width: 1200px;
 height: 58px;
 background: #FFFFFF;
 font-size: 19px;
 position: relative;
 margin-bottom: 20px;
 padding-left: 24px;
 line-height: 58px;
}

#test .testContent>.cententList .itemDetails {
 width: 1200px;
 background: #FFFFFF;
 margin: 0 auto;
 display: flex;
 padding-bottom: 20px;
 flex-wrap: wrap;

}

#test .testContent>.cententList .itemDetails .img {
 width: 275px;
 height: 252px;
 background: #FFFFFF;
 margin-top: 20px;
 margin-left: 20px;
 position: relative;
 border: 1px solid #CCCCCC;
}

#test .testContent>.cententList .itemDetails .img:hover {
 border: 1px solid #0099AD;
}

#test .testContent>.cententList .itemDetails .img>img {
 display: block;
 width: 273px;
 height: 202px;
}

#test .testContent>.cententList .itemDetails .img>.name {
 width: 275px;
 height: 50px;
 font-size: 14px;
 color: #333333;
 line-height: 20px;
 margin-top: 10px;
 text-align: center;
}

#test .testContent>.cententList .itemDetails .img>.ishover {
 position: absolute;
 top: 0px;
 right: 0px;
 width: 44px;
 height: 202px;
 background: #0099AD;

}

#test .testContent>.cententList .itemDetails .img>.ishover::after {
 display: block;
 content: '';
 width: 24px;
 height: 24px;
 background: url("../image/arrow1.png") no-repeat;
 background-size: 100% 100%;
 float: right;
 position: absolute;
 top: 89px;
 right: 10px;

}


#test .testContent>.cententList .title::after {
 display: block;
 content: '';
 width: 18px;
 height: 18px;
 background: url("../image/subscript1.png") no-repeat;
 background-size: 100% 100%;
 float: right;
 position: absolute;
 bottom: 0px;
 right: 0px;
}

#test .testContent>.cententList .itemBox:hover {
 box-shadow: 0px 3px 10px #DDDDDD;
}


#test .testContent>.cententList .itemBox:nth-child(5n) {
 margin-right: 0px;
}

.itemBox {
 width: 224px;
 height: 266px;
 background: #FFFFFF;
 margin-right: 20px;
 padding: 10px;
 position: relative;
 margin-bottom: 20px;
}

.itemBox .itemDetails {
 display: block;
 width: 100%;
 height: 100%;
}

.itemBox .itemDetails .img {
 width: 204px;
 height: 150px;
}


.itemBox .itemDetails .img>.imgBox {
 display: block;
 width: 100%;
 height: 100%;
 position: relative;
}

.itemBox .itemDetails .img>.label {
 position: absolute;
 top: 20px;
 left: 0px;
 width: 124px;
 height: 32px;
 background: linear-gradient(90deg, #FF60CA 0%, #2D6CFF 100%);
 border-radius: 0px 20px 20px 0px;
 z-index: 999;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 5px 14px 5px 10px;
}



.itemBox .itemDetails .img>.label>span:nth-of-type(1) {
 width: 6px;
 height: 14px;
 background: #FFFFFF;
 opacity: 0.3;
 padding: 9px 0;
}

.itemBox .itemDetails .img>.label>span:nth-of-type(2) {
 width: 64px;
 height: 22px;
 font-size: 16px;
 font-family: "微软雅黑";
 font-weight: 800;
 line-height: 22px;
 color: #FFFFFF;

}

.itemBox .itemDetails .img>.label>span:nth-of-type(3) {
 width: 14px;
 height: 14px;
 background-color: transparent;

}

.itemBox .itemDetails .img>.imgBox img {
 display: block;
 width: 100%;
 height: 100%;

}

.itemBox .itemDetails .img>.imgBox::before {
 display: block;
 position: absolute;
 content: "";
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 background: rgba(0, 0, 0, 0.5);
 opacity: 0;
 transition: all .3s ease;
}

.itemBox .itemDetails .img>.imgBox::after {
 display: block;
 position: absolute;
 content: "项目详情";
 width: 116px;
 height: 30px;
 border: 1px solid #FFFFFF;
 text-align: center;
 line-height: 30px;
 font-weight: bold;
 color: #FFFFFF;
 font-size: 14px;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 opacity: 0;
 transition: all .3s ease;
}

.shirem .itemDetails .img>.imgBox::after {
 display: block;
 position: absolute;
 content: "定制" !important;
 width: 116px;
 height: 30px;
 border: 1px solid #FFFFFF;
 text-align: center;
 line-height: 30px;
 font-weight: bold;
 color: #FFFFFF;
 font-size: 14px;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 opacity: 0;
 transition: all .3s ease;
}

.itemBox .itemDetails .seckill {
 position: relative;
}

.itemBox .itemDetails .seckill::before {
 position: absolute;
 width: 80px;
 height: 80px;
 content: "";
 left: 0;
 top: 0;
 background: url("../image/tips1.png") no-repeat;
 background-size: 100% 100%;
 z-index: 10;
}

.itemBox .itemDetails .title {
 display: flex;
 align-items: center;
 height: 40px;
 margin-top: 10px;
}

.itemBox .itemDetails .title>p {
 font-size: 14px;
 font-weight: 400;
 line-height: 20px;
 color: #333333;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 text-align: center;
 width: 100%;
}

.itemBox .itemDetails .tips {
 width: 189px;
 font-size: 12px;
 font-weight: 400;
 line-height: 20px;
 color: #999999;
 margin-top: 8px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 /* text-align: center; */
}

.itemBox .itemDetails:hover .img .imgBox::before {
 opacity: 1;
}

.itemBox .itemDetails:hover .img .label {
 opacity: 0;
}

.itemBox .itemDetails:hover .img .imgBox::after {
 opacity: 0.77;
}

.itemBox .itemBut {
 position: absolute;
 z-index: 100;
 width: 100%;
 background: #fff;
 height: 50px;
 left: 0;
 bottom: 0;
 display: flex;
 justify-content: space-between;
 padding: 0 10px;
 padding-top: 15px;
 opacity: 0;
 transition: all .3s ease;
}

.itemBox .itemBut>a {
 display: block;
 width: 120px;
 height: 24px;
 background: #0099AD;
 border-radius: 2px;
 font-size: 12px;
 font-weight: 400;
 line-height: 24px;
 color: #FFFFFF;
 text-align: center;
}

.itemBox .itemBut>.collectionBut {
 width: 24px;
 height: 24px;
 background: url("../image/collection1-3.png") no-repeat;
 background-size: 100% 100%;
 cursor: pointer;
}

.itemBox .itemBut>.itemCollecteds {
 background: url("../image/collection2.png") no-repeat;
 background-size: 100% 100%;
}

.itemBox:hover .itemBut {
 opacity: 1;
}

.itemCollected::after {
 position: absolute;
 width: 12px;
 height: 12px;
 content: "";
 display: block;
 background: url(../image/collections4.png) no-repeat;
 background-size: 100% 100%;
 margin-right: 3px;
 margin-bottom: 3px;
 right: 0;
 bottom: 0;
 z-index: 11;
}

.itemCollected::before {
 position: absolute;
 content: "";
 right: 0;
 bottom: 0;
 width: 30px;
 height: 30px;
 clip-path: polygon(100% 100%, 0 100%, 100% 0%, 100% 0);
 display: flex;
 align-items: flex-end;
 justify-content: flex-end;
 z-index: 10;
 background: #0099AD;
}

#test .flowContent {
 margin-top: 60px;
 height: 626px;
 background: #FFFFFF;

}

#test .flowContent>.flowTop {
 padding-top: 88px;
 font-size: 44px;
 font-weight: 800;
 color: #333333;
 text-align: center;

}

#test .flowContent>.order {
 margin-top: 16px;

 font-size: 22px;
 font-weight: 400;

 color: #333333;
 text-align: center;

}

#test .flowContent>.order>span {
 color: #0099AD;

}

#test .flowContent>.cardBox {
 padding-top: 40px;
 width: 1201px;

 margin: 0 auto;
 display: flex;
 flex-wrap: nowrap;
}

#test .flowContent>.cardBox .card {
 width: 240px;
 height: 302px;
 background: #FFFFFF;
 position: relative;
}

#test .flowContent>.cardBox .card::after {
 display: block;
 content: '';
 width: 16px;
 height: 16px;
 background: url(../image/arrow2.png) no-repeat;
 background-size: 100% 100%;
 position: absolute;
 z-index: 100;
 top: 82px;
 right: -8px;

}

#test .flowContent>.cardBox .card:nth-last-of-type(1)::after {
 display: block;
 content: '';
 width: 0;
 height: 0;

 background-size: 100% 100%;


}

#test .flowContent>.cardBox .card:hover>.top img {
 opacity: 1 !important;

}

#test .flowContent>.cardBox .card:hover>.bottom {
 background: #F7F7F7 !important;
 position: relative;
}

#test .flowContent>.cardBox .card:hover>.bottom::after {
 display: block;
 content: '';
 width: 18px;
 height: 18px;
 background: url(../image/subscript1.png) no-repeat;
 background-size: 100% 100%;
 float: right;
 position: absolute;
 bottom: 0px;
 right: 0px;

}

#test .flowContent>.cardBox .card .top>div {
 width: 56px;
 padding-top: 40px;
 margin: 0 auto;

}

#test .flowContent>.cardBox .card .top>div img {
 width: 56px;
 height: 81px;
 opacity: 0.25;
}





#test .flowContent>.cardBox .card .bottom {
 margin-top: 28px;
 background: #FFFFFF;
 height: 133px;

}

#test .flowContent>.cardBox .card .bottom>p {
 padding-top: 20px;
 text-align: center;
 font-size: 18px;
 font-weight: bold;
 color: #333333;
}

#test .flowContent>.cardBox .card .bottom>div {
 width: 210px;
 padding-top: 20px;
 margin: 0 15px;
 text-align: center;
 font-size: 14px;
 font-weight: bold;
 color: #333333;
}

#test .flowContent>.cardBox .card .bottom>div>p {
 font-size: 14px;
 font-weight: 400;
 line-height: 28px;
 color: #333333;
}


#test .flowContent>.tabsBox {
 padding-top: 60px;
 width: 1230px;
 margin: 0 auto;

 display: flex;
 justify-content: space-between;
}

#test .flowContent>.tabsBox>.tabs-left {

 width: 200px;


}

#test .flowContent>.tabsBox>.content-right {

 margin-left: 20px;
 width: 1000px;
 height: 380px;
 background: #FFFFFF;
 display: flex;
 justify-content: space-between;
}

#test .flowContent>.tabsBox>.tabs-left .item:nth-of-type(1) {
 margin-top: 0px !important;
}

#test .flowContent>.tabsBox>.tabs-left .item {
 margin-top: 10px;
 width: 200px;
 height: 88px;
 background: #EEEEEE;
 border: none;
}

#test .flowContent>.tabsBox>.tabs-left .item>p:nth-of-type(1) {
 padding-top: 16px;
 margin-left: 20px;
 font-size: 19px;
 font-weight: bold;
 line-height: 20px;
 color: #333333;
 border: none;
}

#test .flowContent>.tabsBox>.tabs-left .item>p:nth-of-type(2) {
 padding-top: 8px;
 margin-left: 20px;
 font-size: 14px;
 font-weight: 400;
 line-height: 28px;
 color: #333333;
 border: none;
}


#test .flowContent>.tabsBox>.tabs-left .choice {
 background: #FFFFFF !important;
 position: relative;
}

#test .flowContent>.tabsBox>.tabs-left .choice::after {
 display: block;
 content: '';
 width: 18px;
 height: 18px;
 background: url(../image/subscript1.png) no-repeat;
 background-size: 100% 100%;
 position: absolute;
 bottom: 0px;
 right: 0px;
}

#test .flowContent>.tabsBox>.content-right .img-left {
 width: 230px;

}

#test .flowContent>.tabsBox>.content-right .img-left>div {
 width: 140px;
 height: 190px;
 margin-top: 40px;
 margin-left: 40px;
}

#test .flowContent>.tabsBox>.content-right .img-left>div img {
 width: 140px;
 height: 190px;
}

#test .flowContent>.tabsBox>.content-right .text-right {
 width: 730px;
 margin-left: 30px;
 margin-right: 10px;


}

#test .flowContent>.tabsBox>.content-right .text-right>.name {
 padding-top: 40px;
 font-size: 19px;
 font-weight: bold;
 line-height: 20px;
 color: #333333;
 text-align: left;
}

#test .flowContent>.tabsBox>.content-right .text-right>p {
 margin-top: 16px;
 font-size: 14px;
 font-weight: 400;
 line-height: 28px;
 color: #333333;
 margin-top: 16px;
}



#test .flowContent>.tabsBox>.content-right .text-right>.title {
 margin-top: 30px;
 padding-left: 6px;
 height: 16px;
 line-height: 16px;
 border-left: 6px solid #0099AD;

}