.section{ width: 100%;height: auto;overflow: hidden;background: #fff;box-shadow:var(--ace-shadow-main);border-radius: 10px;padding: var(--ace-gutter);margin-top: var(--ace-gutter);} .section .section-title{ width: 100%;line-height: 1.2;font-size: 30px;color: var(--ace-color-main);text-align: center;margin: 10px 0 20px 0;} #guide{ margin-top: 0;} .guide-steps { list-style-type: none;padding: 0;margin: 10px 0 0;position: relative;} .guide-steps { flex-direction: column;align-items: center;} .step { display: flex;align-items: center;position: relative;width: 100%;margin-bottom: 15px;} .step-number { width: 40px;height: 40px;background-color: #ddd;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-right: 15px;font-weight: 700;z-index: 2;} .step-title { font-size: 16px;color: #333;margin: 0;text-align: left;} .guide-steps::before { content: '';position: absolute;top: 0;left: 20px;bottom: 0;width: 2px;background-color: #ddd;z-index: 1;} .step.active .step-number { background-color: var(--ace-color-main);} .step.active .step-title { color: var(--ace-color-main);font-weight: 600;} .step.completed .step-number { background-color: var(--ace-color-main);} .step.completed::after { content: '';position: absolute;top: 0;left: 20px;width: 2px;height: 100%;background-color: var(--ace-color-main);z-index: 1;} .step-intro { margin-top: 30px;} .step-intro p { margin-bottom: 10px;font-size: 18px;} @media (min-width:992px) { .journey-guide { margin-bottom: 30px;padding: 20px 30px;} .guide-steps { display: flex;justify-content: space-between;flex-direction: row;} .step { display: flex;flex-direction: column;align-items: flex-start;position: relative;width: 20%;} .step-number { margin-right: 0;margin-bottom: 10px;} .guide-steps::before { top: 20px;left: 0;right: 0;bottom: auto;width: 100%;height: 2px;} .step::before { top: 0;left: 10px;} .step-intro { margin-top: 20px;} .step.completed::after { content: '';position: absolute;top: 20px;left: 0;width: 100%;height: 2px;background-color: var(--ace-color-main);z-index: 1;} .step-number { z-index: 2;} } #list{margin-bottom: 0;} .cluster{width:100%;margin-bottom:20px;position:relative} .cluster:last-child{margin-bottom:0} .cluster-bar{width:100%;height:100px;display:flex;justify-content:space-between;align-items:center;background:#f6f7f8;padding:10px;border-radius:5px} .cluster-select{padding:10px 30px 10px 15px;font-size:18px;border:1px solid var(--ace-color-main);color:var(--ace-color-main);border-radius:5px;margin-right:10px;position:relative;appearance: none;-webkit-appearance: none;-moz-appearance: none;background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%235033bb"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat;background-position: right 5px center;background-size: 25px;background-color: white;} .cluster-select:focus{outline:0;box-shadow:0 0 0 .25rem rgba(90,50,255,.25)} .cluster-image{width:80px;height:80px} .cluster-main{width:100%;background:#f6f7f8;padding:0 20px;border-radius:0 0 5px 5px;padding-bottom:70px} .cluster-title{color:var(--ace-color-main);display:block;font-size:30px;line-height:40px;margin-bottom:15px} .cluster-title span{display:block;font-size:18px;line-height:30px;color:var(--ace-color-main);margin-top:10px;} .cluster-title span::before{content:"----"} .cluster-guide{font-size:16px} .cluster-guide p{font-size:18px} .cluster-guide ul{margin-top:-5px} .cluster-guide li{line-height:30px} .cluster-question{padding-left:1.5rem} .cluster-question ol{list-style-type:decimal;margin-top:-5px} .cluster-question li{margin-bottom:10px;padding-left:5px} .cluster-button{position:absolute;bottom:20px;right:20px;height:40px;line-height:40px;padding:0px 20px;border-radius:20px;background:var(--ace-color-button);color:#fff;white-space:nowrap;transition:background .3s ease-out} .cluster-button:hover{background:var(--ace-color-button-hover);} @media (min-width:992px){ .cluster-select{margin-right:20px} .cluster-main{width:calc(100% - 100px);padding:0 30px 30px;margin-top:-100px;margin-left:100px} .cluster-title{padding-top:15px} }