.body { margin-top: 90px; } @media screen and (max-width: 768px) { .body .school .img-sl { display: block !important; } .body .school .img-bg { display: none !important; } } .body .school .img-sl { display: none; margin: auto; } .body .school .desc { margin-bottom: 10px; } .body .school .desc .desc-item { border-bottom: 1px dashed #eee; line-height: 30px; display: flex; } .body .school .desc .desc-item > .desc-cell:first-child { width: 80px; font-weight: bold; color: #777; } .body .school .desc .desc-item > .desc-cell:last-child a { color: #333; } .body .school .desc .desc-item > .desc-cell:last-child:hover a { color: #32b487; } .body .school p { text-align: justify; text-indent: 28px; } .body .school .p1 { text-indent: 0px; font-weight: 400; font-size: 32px; } .VivaTimeline dl { position: relative; top: 0; padding: 20px 0; margin: 0; } .VivaTimeline dl:before { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 100; width: 2px; margin-left: -1px; content: ''; background-color: #ccd1d9; } .VivaTimeline dl dt { position: relative; top: 30px; z-index: 200; width: 120px; padding: 3px 5px; margin: 0 auto 30px; font-weight: 400; color: #fff; text-align: center; background-color: #aab2bd; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } .VivaTimeline dl dd { position: relative; z-index: 200; } .VivaTimeline dl dd .circ { position: absolute; top: 40px; left: 50%; z-index: 200; width: 22px; height: 22px; margin-left: -11px; background-color: #4fc1e9; border: 4px solid #f5f7fa; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .VivaTimeline dl dd .time { position: absolute; top: 31px; left: 50%; display: inline-block; width: 200px; padding: 10px 20px; color: #4fc1e9; } .VivaTimeline dl dd .events { position: relative; width: 47%; padding: 10px 0 0; margin-top: 31px; background-color: #CCC; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } .VivaTimeline dl dd .events:before { position: absolute; top: 12px; width: 0; height: 0; content: ''; border-style: solid; border-width: 6px; } .VivaTimeline dl dd .events .events-object { margin: 0 auto; } .VivaTimeline dl dd .events .events-header { min-height: 30px; line-height: 20px; text-align: center; font-size: 16px; font-weight: bold; cursor: pointer; } .VivaTimeline dl dd .events .events-body { overflow: hidden; zoom: 1; background-color: #EEE; padding: 10px; } .VivaTimeline dl dd .events .events-body .row { display: none; } .VivaTimeline dl dd .events .events-body .events-desc { text-indent: 2em; padding: 0 15px; } .VivaTimeline dl dd .events .events-footer { text-align: center; } .VivaTimeline dl dd .events .events-footer ol { list-style: none; margin: 0 auto; padding: 0; } .VivaTimeline dl dd .events .events-footer ol li { background: #32b487; border-radius: 5px; margin: 10px; display: inline-block; width: 10px; height: 10px; cursor: pointer; } .VivaTimeline dl dd .events .events-footer ol .active { transform: scale(2); } .VivaTimeline dl dd.pos-right .time { margin-left: -200px; text-align: right; } .VivaTimeline dl dd.pos-right .events { float: right; } .VivaTimeline dl dd.pos-right .events:before { left: -12px; border-color: transparent #CCC transparent transparent; } .VivaTimeline dl dd.pos-left .time { margin-left: 0; text-align: left; } .VivaTimeline dl dd.pos-left .events { float: left; } .VivaTimeline dl dd.pos-left .events:before { right: -12px; border-color: transparent transparent transparent #CCC; } .VivaTimeline .carousel-indicators { bottom: 0; } @media screen and (max-width: 767px) { .VivaTimeline dl:before { left: 90px; } .VivaTimeline dl dt { margin: 0 30px 30px; } .VivaTimeline dl dd .circ { left: 90px; } .VivaTimeline dl dd .time { left: 0px; top: 5px; width: 90px; } .VivaTimeline dl dd.pos-left .time { padding: 10px 0; margin-left: 0; text-align: left; } .VivaTimeline dl dd.pos-left .events { float: right; width: 73%; margin-right: 4%; } .VivaTimeline dl dd.pos-left .events:before { left: -12px; border-color: transparent #CCC transparent transparent; } .VivaTimeline dl dd.pos-right .time { padding: 10px 0; margin-left: 0; text-align: left; } .VivaTimeline dl dd.pos-right .events { float: right; width: 73%; margin-right: 4%; } /* .VivaTimeline dl dd .events .events-body { display: none; } .VivaTimeline dl dd .events .events-footer { display: none; } */ } @media screen and (max-width: 500px) { .VivaTimeline dl dd.pos-left .events { float: right; width: 63%; margin-right: 4%; } .VivaTimeline dl dd.pos-right .events { float: right; width: 63%; margin-right: 4%; } }