.rs-work-process-wrap .work-item {
position: relative;
}
.rs-work-process-wrap ul.list_content {
display: flex;
list-style: none;
margin: 15px 0 0 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.rs-work-process-wrap ul.list_content li {
display: flex;
align-items: center;
gap: 12px;
}
.rs-work-process-wrap ul.list_content li i {
font-size: 20px;
color: var(--primaryColor);
}
.rs-work-process-wrap ul.list_content li svg {
width: 20px;
height: 20px;
}
.rs-work-process-wrap ul.list_content li svg path {
fill: var(--primaryColor);
}
.rs-work-process-wrap .step-part {
color: var(--primaryColor);
font-family: var(--titleFont);
}
.rs-work-process-wrap .process-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--titleColor);
}
.rs-work-process-wrap .process-icon i {
font-size: 20px;
}
.rs-work-process-wrap .process-icon svg {
width: 20px;
height: 20px;
}
.rs-work-process-wrap .process-icon svg path {
fill: var(--whiteColor);
}
.rs-work-process-wrap .line-style {
--line-dot-size: 16px;
position: absolute;
left: 0;
top: 0;
width: 100%;
max-width: 120px;
height: 1px;
background: var(--borderColor);
}
.rs-work-process-wrap .line-style:after, .rs-work-process-wrap .line-style:before {
position: absolute;
content: "";
left: calc(-1 * var(--line-dot-size) / 2);
top: calc(-1 * var(--line-dot-size) / 2);
width: var(--line-dot-size);
height: var(--line-dot-size);
border-radius: 50%;
background: var(--primaryColor);
border: 5px solid var(--titleColor);
}
.rs-work-process-wrap .line-style:after {
right: calc(-1 * var(--line-dot-size) / 2);
bottom: calc(-1 * var(--line-dot-size) / 2);
left: unset;
top: unset;
}
.rs-work-process-wrap-main.is_scrollable {
position: relative;
}
.rs-work-process-wrap-main.is_scrollable .rs-work-process-wrap {
display: flex;
flex-direction: column;
gap: 40px;
height: 600px;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.rs-work-process-wrap-main.is_scrollable .rs-work-process-wrap::-webkit-scrollbar {
display: none;
}
.rs-work-process-wrap-main.is_scrollable:before, .rs-work-process-wrap-main.is_scrollable::after {
left: 0;
right: 0;
position: absolute;
content: "";
height: 100px;
pointer-events: none;
transition: var(--transition);
}
.rs-work-process-wrap-main.is_scrollable:after {
bottom: 0;
background: linear-gradient(180deg, transparent 0%, #fff 100%);
}
.rs-work-process-wrap-main.is_scrollable:before {
top: 0;
opacity: 0;
background: linear-gradient(180deg, #fff 0%, transparent 100%);
}
.rs-work-process-wrap-main.is_scrollable.anti::after {
opacity: 0;
}
.rs-work-process-wrap-main.is_scrollable.anti:before {
opacity: 1;
}
.rs-work-process-wrap-main.is_scrollable:hover:before, .rs-work-process-wrap-main.is_scrollable:hover::after {
opacity: 0;
}
.rs-work-process-scroll-btn {
margin-top: 20px;
display: flex;
align-items: center;
flex-direction: column;
}
.rs-work-process-scroll-btn .btn-inner {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--primaryColor);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
cursor: pointer;
}
.rs-work-process-scroll-btn .btn-inner i {
font-size: 20px;
color: #fff;
transition: var(--transition);
}
.rs-work-process-scroll-btn .btn-inner svg {
width: 20px;
height: 20px;
}
.rs-work-process-scroll-btn .btn-inner svg path {
fill: #fff;
transition: var(--transition);
}
.rs-work-process-scroll-btn .btn-inner.anti {
transform: scaleY(-1);
}