@import "base.css";

.main .bd .list{width: 1200px; height: auto; display: flex; gap: 50px; flex-direction: column; margin-bottom: 50px;}
.main .bd .list .item{padding-left: 70px; position: relative;}
.main .bd .list .item .title{height: 50px; line-height: 50px; font-size: 18px; font-weight: bold; color: #333333;}
.main .bd .list .item .desc{color: #666666; line-height: 30px}
/*.main .bd .list .item .desc::after{content: ""; display: block; width: 100%; height: 1px; background: #cccccc; margin-top: 20px;}*/
.main .bd .list .item .index{width: 70px;height: 50px;color: var(--theme-color);position: absolute;top: 0;left: 0;font-size: 40px;font-family: alfy, serif;}

.actions{width: 100%; display: flex; justify-content: space-between; margin: 30px 0; color: #FFFFFF;}
.actions .action_item{width: 210px; height: 210px; background: #f2f2f2; display: flex; align-items: center; justify-content: center; gap: 20px; flex-direction: column;}
.actions .action_item .action_index{font-size: 32px; font-family: alfy, serif; opacity: 0.5;}
.actions .action_item .action_name{font-size: 16px; line-height: 20px;}
.actions .action_item .action_icon{width: 50px; height: 50px;}
.actions .action_item .action_icon img{width: 100%; height: 100%; object-fit: cover}

.album{width: 100%; height: auto; display: flex; gap: 30px;}
.album .album_item{flex: 1}
.album .album_item img{display: block; width: 100%; aspect-ratio: 16/9; background: #ffffff; object-fit: contain;}

.attr{width: 100%; display: flex; gap: 20px; height: 30px; line-height: 30px; margin-top: 30px;}
.attr .attr_item{display: flex; gap: 10px; flex: 1;}
.attr .attr_item .name{background: var(--theme-color); color: #FFFFFF; width: auto; padding: 0 15px; text-align: center;}
.attr .attr_item .value{font-size: 20px;}


.process{width: 100%; height: auto; background: #f2f2f2; padding: 40px; display: flex; flex-direction: column; gap: 30px; margin: 15px auto;}
.process .process_item{display: flex; height: 56px; line-height: 56px; color: #666666; gap: 20px;}
.process .process_item span{flex: 1; background: #ffffff; border-radius: 60px; font-size: 16px; display: flex ;}
.process .process_item span::before{content: attr(data-index); display: block; width: 70px; font-size: 24px; text-align: center; font-family: alfy, serif; font-weight: bold; color: #cba56d;}
.process .process_item label.arrow{width: 90px; background: url("/images/service22.png") center center no-repeat;}

.process .process_item.angle{color: #FFFFFF;}
.process .process_item.angle span{background: var(--theme-color); border-radius: 0; justify-content: center; max-width: 240px; font-size: 20px;}
.process .process_item.angle span::before{display: none;}