section.section-roadmap{
    color: white;
    background-image: url('img/bg-2.png');
    background-size: cover;
    padding: 65px 0;
}
.common{
    width: 980px;
    text-align: center;
    margin:auto;
}
.roadmap{
    /*background-color: #1e1e1e;*/
    -webkit-user-select: none;
}
.roadmap-map{
    height: 570px; position: relative;
}
.section-roadmap h2{
    color: #ffffff;
}

.timeline{
    width: 720px;
    margin: auto;
    height: 4px;
    background-color: #ffffff;
    margin-top: -50px;
    border-radius: 4px;
    position: relative;
    visibility: visible;
    -webkit-transform: scale(1);
    opacity: 1;
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.1s ease-in 0s, opacity 0.1s ease-in 0s;
    transition: transform 0.1s ease-in 0s, opacity 0.1s ease-in 0s;
}
.timeline .timeline-period{
    position: absolute;
    font-size: 12px;
    width: 60px;
    color: #ffffff;
    bottom: 18px;
    text-align: center;
    z-index: 3;
}
.timeline .timeline-period>p{
    transform: scale(0.85); color: rgb(255, 255, 255);
    font-family: 'Lato', sans-serif;
}
.timeline .timeline-period>div{
    position: absolute;
    bottom: 100%;
    background-color: #ffffff;
    color: #1e1e1e;
    width: 260px;
    margin-bottom: 25px;
    left: -120px;
    padding: 20px;
    text-align: left;
    border-radius: 6px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.timeline .timeline-period>div h3{
    color: #202020;
    font-size: 20px;
    padding: 0px;
    margin: 0px;
    padding-bottom: 10px;
    font-family: 'Lato', sans-serif;
}
.timeline .timeline-period>div ul{
    color: #202020;
    font-size: 15px;
    list-style: none;
    padding: 0;
}
.timeline .timeline-period>div ul li{
    padding-left: 20px;
    position: relative;
    padding-bottom: 5px;
    font-family: 'Lato', sans-serif;
}
.timeline .timeline-period>div ul li:before{
    content: "—";
    color: #202020;
    position: absolute;
    left: 0px;
    top: 0px;
}
.timeline .timeline-period>div>div{
    width: 0;
    height: 0;
    border-top: 8px solid #ffffff;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent; position: absolute; left: 146px; bottom: -7px;
}
.timeline .timeline-period:after{
    position: absolute;
    z-index: 3;
    left: 30px;
    bottom: -19px;
    content: '';
    background-color: #1e1e1e;
    height: 5px;
    width: 1px;
    -webkit-transform: scaleX(.5);
    -webkit-transform-origin:left 0;
}
.timeline .timelineBg{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    width: 0px;
    background-color: #28b90b;
    z-index: 1;
}
.timeline .timelineBgClick{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    width: 0px;
    z-index: 2;
    width: 100%;
    cursor: pointer;
}
.timeline .timelineDrop{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #f5d312;
    border-radius: 20px;
    top: -8px;
    left: -10px;
    cursor: pointer;
    z-index: 4;
}
.timeline .timelineDrop:hover{
    box-shadow: 0px 0px 3px rgba(0,0,0,.2);
}
.timeline .timeline-period.timeline-periodActive{
    bottom: 48px;
    color: #f5d312;
}
.timeline .timeline-period.timeline-periodActive>p{
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
}
.timeline .timeline-period.timeline-periodActive>div{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.timeline .timeline-period.timeline-periodActive:after{
    background-color: #8f8f8f;
    height: 37px;
    bottom: -48px;
}

.timeline .timeline-period:nth-of-type(1){
    left: -30px;
}
.timeline .timeline-period:nth-of-type(2){
    left: 90px;
}
.timeline .timeline-period:nth-of-type(3){
    left: 210px;
}
.timeline .timeline-period:nth-of-type(4){
    left: 330px;
}
.timeline .timeline-period:nth-of-type(5){
    left: 450px;
}
.timeline .timeline-period:nth-of-type(6){
    left: 570px;
}
.timeline .timeline-period:nth-of-type(7){
    left: 690px;
}

.roadmap-map-main{
    position: absolute;
    width: 980px;
    height: 570px;
    left: -22.5px;
}
.roadmap-map-main img{
    display: block;
}
.roadmap-map-main>div{
    transition: all .3s ease-in;
    position: absolute;
    opacity: 0;
}
.roadmap-map-main>div.mapshow{
    opacity: 1;
}
.roadmap-map-main .draw-y-m{
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
}
.roadmap-map-main .draw-y-m.drawshow{
    opacity: 1;
}
.roadmap-map-main .draw-y-m>div{
    position: absolute;
    left: 0px;
    top :0px;
    width: 10px;
    height: 10px;
    background-color: #f5d312;
    border-radius: 10px;
    opacity: .6;
    z-index: 5;
}
.roadmap-map-main .draw-y-m>div:nth-of-type(1){
    -webkit-transform: scale(1);
    z-index: 4;
    opacity: 1;
}
.roadmap-map-main .draw-y-m>div:nth-of-type(2){
    z-index: 3;
    -webkit-animation:_draw-m 3s infinite linear ;
    -webkit-animation-delay:0s;
}
.roadmap-map-main .draw-y-m>div:nth-of-type(3){
    z-index: 2;
    -webkit-animation:_draw-m 3s infinite linear ;
    -webkit-animation-delay:1.5s;
}
.roadmap-map-main .draw-y-m>div:nth-of-type(4){
    z-index: 1;
    -webkit-animation:_draw-m 3s infinite linear ;
    -webkit-animation-delay:3s;
}
@keyframes _draw-m{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(3);
        opacity: 0;
    }
}
.roadmap-map img{
    width: 800px;
    height: auto;
    margin: 0 auto;
}
.map_1, .map_2, .map_3, .map_4, .map_5, .map_6, .map_7{
    width: 100%;
}
.roadmap-map div{
    top: 0;
}