.banner{width:100%;height:auto;background:-webkit-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:-o-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:radial-gradient(80% 100% at 50% 40%,#6132b8 0,#131673 100%)} .banner-header{width:100%;height:auto;overflow:hidden;text-align:center;position:relative} .banner-title{text-transform: uppercase;width:100%;margin-top:60px;font-family:"Julius Sans One";font-size:50px;font-weight:700;line-height:1;color:#fff;text-shadow:0 6px 6px rgba(46,20,107,.45)} .banner-intro{padding:0 20px;margin-top:20px;font-size:18px;font-weight:300;line-height:30px;color:#d9f7ff} .banner-footer{width:100%;height:auto;position:relative;margin-top:-30px} .banner-footer img{width:100%;z-index:1} @media (min-width :992px){ .banner-title{margin-top:80px;} .banner-intro{padding:0 80px} } .guide { width: 100%;height: auto;background: #fff;box-shadow:var(--ace-shadow-main);border-radius: 10px;margin-bottom: 20px;padding: 15px;} @media (min-width:992px){ .guide{padding:30px;margin-bottom: 30px;} } .guide-title { width: 100%;line-height: 50px;font-size: 30px;color: var(--ace-color-main);text-align: center;margin-bottom: 20px;} .guide-steps { list-style-type: none;padding: 0;margin: 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;} } .topic{width:100%;margin-bottom:20px;position:relative} .topic:last-child{margin-bottom:0} .topic-bar{width:100%;height:100px;display:flex;justify-content:space-between;align-items:center;background:#f6f7f8;padding:10px;border-radius:5px} .topic-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;} .topic-select:focus{outline:0;box-shadow:0 0 0 .25rem rgba(90,50,255,.25)} .topic-image{width:80px;height:80px} .topic-main{width:100%;background:#f6f7f8;padding:0 20px;border-radius:0 0 5px 5px;padding-bottom:70px} .topic-title{color:var(--ace-color-main);display:block;font-size:30px;line-height:40px;margin-bottom:15px} .topic-title span{display:block;font-size:18px;line-height:30px;color:var(--ace-color-main);margin-top:10px;} .topic-title span::before{content:"----"} .topic-guide{font-size:16px} .topic-guide p{font-size:18px} .topic-guide ul{margin-top:-5px} .topic-guide li{line-height:30px} .topic-question{padding-left:1.5rem} .topic-question ol{list-style-type:decimal;margin-top:-5px} .topic-question li{margin-bottom:10px;padding-left:5px} .topic-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} .topic-button:hover{background:var(--ace-color-button-hover);} @media (min-width:992px){ .topic-select{margin-right:20px} .topic-main{width:calc(100% - 100px);padding:0 30px 30px;margin-top:-100px;margin-left:100px} .topic-title{padding-top:15px} }