.process-wrap {
  width: 1920px;
  margin: 6em auto;
}

.process-main {
	width: 100%;
	min-width: 320px;
	display: flex;
}

.col-3 {
  width: 25%;
  position: relative;
}

.col-3 .process-step::before {font-size: 45px;}
.col-3:first-child .process-step:before {content: '1';}
.col-3:nth-child(2) .process-step:before{content: '2';}
.col-3:nth-child(3) .process-step:before {content: '3';}
.col-3:last-child .process-step:before{content: '4';}

.process-main .col-3:not(:first-child):before{
  content: "";
  display: block;
  position: absolute;
	width: 65%;
	height: 4px;
	top: 35px;
	left: calc(-37% + 20px);
  right: 0;
  background: #ebebeb;
  border: 2px #ebebeb solid;
 -o-transition: .4s;
  -ms-transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
   transition: .4s;
}

.process-step-cont {
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: space-between;
}

.process-step {
	border-radius: 100%;
	line-height: 0;
	background: #D9D9D9;
	text-align: center;
	align-items: center;
	justify-content: center;
	align-self: center;
	display: flex;
	color: #fff;
	width: 90px;
	height: 90px;
	font-weight: 700;
	margin-bottom: 7px;
	z-index: 4;
	cursor: pointer;
}

.process-label {
	color: black;
	font-size: clamp(1em, 1.4vw, 1.3em);
	font-weight: 600;
	width: 100%;
	text-align: center;
}

.process-dots {
  width: 10px; 
  height: 10px;
  border-radius: 50%;
  background-color: #ebebeb;
  cursor: pointer;
}

.process-dot-cont {
  display: none;
  width: 60%; 
  padding-top: 5px;
}

.active-step1 .col-3:first-child .process-step, .active-step1 .col-3:first-child .process-dots:first-child, .active-step1-mini2 .col-3:first-child .process-step, .active-step1-mini2 .col-3:first-child .process-dots:nth-child(-n+2), .active-step1-mini3 .col-3:first-child .process-step, .active-step1-mini3 .col-3:first-child .process-dots:nth-child(-n+3), .active-step1-mini4 .col-3:first-child .process-step, .active-step1-mini4 .col-3:first-child .process-dots:nth-child(-n+4){
  background-color: var(--emphasis-color);}
.active-step1-mini2 .col-3:first-child .process-dots:first-child, .active-step1-mini3 .col-3:first-child .process-dots:nth-child(-n+2), .active-step1-mini4 .col-3:first-child .process-dots:nth-child(-n+3){
  background-color: #fbcb93;}
.active-step1 .col-3:first-child .process-label, .active-step1-mini3 .col-3:first-child .process-label, .active-step1-mini2 .col-3:first-child .process-label, .active-step1-mini4 .col-3:first-child .process-label{
  color: var(--emphasis-color);}
.active-step2 .col-3:first-child, .active-step3 .col-3:nth-child(-n+2), .active-step4 .col-3:nth-child(-n+3){
  opacity: 0.5;
}

.active-step2 .col-3:first-child .process-step:before, .active-step3 .col-3:nth-child(-n+2) .process-step:before, .active-step4 .col-3:nth-child(-n+3) .process-step:before{
  content: '\2713';
  padding: 7px;
}

.active-step2 .col-3:nth-child(-n+2) .process-step, .active-step2 .col-3:nth-child(-n+2) .process-dots, .active-step3 .col-3:nth-child(-n+3) .process-step, .active-step3 .col-3:nth-child(-n+3) .process-dots, .active-step4 .col-3:nth-child(-n+4) .process-step, .active-step4 .col-3:nth-child(-n+4) .process-dots {
  background-color: var(--emphasis-color);}
.active-step2 .col-3:nth-child(-n+2) .process-label, .active-step3 .col-3:nth-child(-n+3) .process-label, .active-step4 .col-3:nth-child(-n+4) .process-label{
  color: var(--emphasis-color);
}

.active-step2 .col-3:nth-child(-n+2):before, .active-step3 .col-3:nth-child(-n+3):before, .active-step4 .col-3:nth-child(-n+4):before{
  background: var(--emphasis-color) !important;
  border: 2px solid var(--emphasis-color);
}

@media (max-width: 1920px) {
  .process-wrap {width: 100%;}

  .process-step {
    width: 70px;
    height: 70px;
}
}

@media (max-width: 1440px){
  .process-step {
    color: #fff;
    width: 70px;
    height: 70px;
  }

  .process-main .col-3:not(:first-child):before {top: 35.5px;}
  .col-3 .process-step::before {font-size: 35px;}
}

@media (max-width: 700px) {
  .process-wrap {display: none;}
}