@charset "utf-8";

.step {
    display: flex;
    flex-wrap: wrap;
    /* gap: 0 10%; */
    position:relative;
}
.step:before {content:"";position:absolute;width:1px;height:100%;background-color:#ddd;left: 50%;top: 0;}
.step li {width: 50%;display: flex;flex-direction: column;margin-top:-5rem;align-items: flex-end;position: relative;padding-right: 6%;}
.step li:first-child {margin-top:0}
.step li:nth-child(2n) {
    display: flex;
    /* flex-direction: column; */
    align-items: flex-start;
    margin-top: 18rem;
    padding-right: 0;
    padding-left: 6%;
}
.step li:nth-child(2n) span {text-align:left}
.step li:before {content:"";position:absolute;width: 24px;height: 24px;background-color:#ffffff;border:1px solid #ddd;right:0;top: 0;margin-top: 0;margin-right: -12px;border-radius: 50%;}
.step li:nth-child(2n)::before {right:unset;left:0;margin-left: -12px;} 
.step li:after {content:"";position:absolute;width: 12px;height: 12px;background-color:var(--color-main);right:0;margin-right: -6px;top:0;margin-top: 6px;border-radius:50%}
.step li:nth-child(2n)::after {right:unset;left:0;margin-left: -6px;}
.step .txt {
    margin-bottom: 1.5rem;
}
.step .img {
    text-align: right;
    border-radius: 2rem;
    overflow: hidden;
}
.step .img img {width:100%}
.step .img img:nth-child(2) {margin-top:1rem}
.step span {display:block;text-align: right;width: 100%;color: var(--color-main);text-transform: uppercase;margin-bottom: 5px;}
.step p {font-size: 24px;font-weight: 500;letter-spacing: -1px;word-break: keep-all;text-align: right;}


/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .step:before {display:none}
	.step li {width:100%;padding: 0;padding-left: 1rem;align-items: flex-start;margin-top:2rem}
    .step li:nth-child(2n) {margin-top:2rem}
    .step span {text-align:left}
    .step p {font-size:20px}
    .step li:before {right:unset;left:0;margin-right: 0;margin-left: -10px;width: 20px;height: 20px;}
    .step li:nth-child(2n)::before {margin-left:-10px}
    .step li:after {margin-right:0; right:unset;left:0; margin-left:-5px; width:10px; height:10px; margin-top:5px}
    .step li:nth-child(2n)::after {margin-left:-5px}
}