/* RWD CASCADING STYLE SHEET */
/* Menu 01 Milestone */
/* 2016 04 14 CREATED BY RTISTECH */

#M1Milestone {
    text-align: center;
    color: #CCC;
    background-color: #0C0C0C;

    background: url("../images/M1/Milestone/M1Milestone.png") repeat #0C0C0C;

}

#M1Milestone .Header {
    padding: 0 0 20px 0; 
    font-size: 2.0em;
    text-align: left;
}

#M1Milestone p {
    padding: 12px 0;
    font-size: 1.0em;
    line-height: 1.5em;
}

#M1Milestone .justfy {
    text-align: justify;
    -ms-text-justify: inter-ideograph;
    text-justify: inter-ideograph;
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    #M1Milestone .Header { 
        padding: 0 0 30px 0;
        font-size: 2.2em; }
    #M1Milestone p {
        font-size: 1.0em; }
}

@media only screen and (min-width: 769px) {
    #M1Milestone .Header { 
        padding: 0 0 40px 0;
        font-size: 2.4em; }
    #M1Milestone p {
        font-size: 1.1em; }
}

/* Menu 01 Milestone: 重大里程 */
#M1Milestone .timeline { position: relative; padding: 0;list-style: none; }
#M1Milestone .timeline:before { content: ""; position: absolute;top: 0; bottom: 0; left: 40px; width: 1px; margin-left: -1.5px; background-color: #FF4040;}
#M1Milestone .timeline>li { position: relative; margin-bottom: 50px; min-height: 50px;}
#M1Milestone .timeline>li:before,
#M1Milestone .timeline>li:after { content: " "; display: table; }
#M1Milestone .timeline>li:after { clear: both;}
#M1Milestone .timeline>li .timeline-panel { float: right; position: relative; width: 100%; padding: 0 20px 0 100px; text-align: left; }
#M1Milestone .timeline>li .timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0;}
#M1Milestone .timeline>li .timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0;}
#M1Milestone .timeline>li .timeline-image { z-index: 100; position: absolute; left: 0; width: 80px; height: 80px; margin-left: 0; border: 3px solid #FF4040; border-radius: 100%; text-align: center; color: #fff; background-color: #FF4040;}
#M1Milestone .timeline>li .timeline-image h4 { margin-top: 12px; font-size: 10px; line-height: 14px;}
#M1Milestone .timeline>li.timeline-inverted>.timeline-panel { float: right; padding: 0 20px 0 100px; text-align: left;}
#M1Milestone .timeline>li.timeline-inverted>.timeline-panel:before { right: auto;left: -15px; border-right-width: 15px; border-left-width: 0;}
#M1Milestone .timeline>li.timeline-inverted>.timeline-panel:after { right: auto;left: -14px; border-right-width: 14px; border-left-width: 0;}
#M1Milestone .timeline>li:last-child { margin-bottom: 0;}
#M1Milestone .timeline .timeline-heading h4 { margin-top: 8px; color: inherit;}
#M1Milestone .timeline .timeline-heading h4.subheading { text-transform: none;}
#M1Milestone .timeline .timeline-body>p,
             .timeline .timeline-body>ul { margin-bottom: 0;}

@media(min-width:768px) {
    #M1Milestone .timeline .timeline-heading h4 { margin-top: 30px; color: inherit;}
    #M1Milestone .timeline:before {
        left: 50%;
    }
    #M1Milestone .timeline>li {
        margin-bottom: 100px;
        min-height: 100px;
    }
    #M1Milestone .timeline>li .timeline-panel {
        float: left;
        width: 41%;
        padding: 0 20px 20px 30px;
        text-align: right;
    }
    #M1Milestone .timeline>li .timeline-image {
        left: 50%;
        width: 100px;
        height: 100px;
        margin-left: -50px;
    }
    #M1Milestone .timeline>li .timeline-image h4 {
        margin-top: 16px;
        font-size: 13px;
        line-height: 18px;
    }
    #M1Milestone .timeline>li.timeline-inverted>.timeline-panel {
        float: right;
        padding: 0 30px 20px 20px;
        text-align: left;
    }
}
@media(min-width:992px) {
    #M1Milestone .timeline .timeline-heading h4 { margin-top: 50px; color: inherit;}
    #M1Milestone .timeline>li {
        min-height: 150px;
    }
    #M1Milestone .timeline>li .timeline-panel {
        padding: 0 20px 20px;
    }
    #M1Milestone .timeline>li .timeline-image {
        width: 150px;
        height: 150px;
        margin-left: -75px;
    }
    #M1Milestone .timeline>li .timeline-image h4 {
        margin-top: 30px;
        font-size: 18px;
        line-height: 26px;
    }
    #M1Milestone .timeline>li.timeline-inverted>.timeline-panel {
        padding: 0 20px 20px;
    }
}
@media(min-width:1200px) {
    #M1Milestone .timeline>li {
        min-height: 170px;
    }
    #M1Milestone .timeline>li .timeline-panel {
        padding: 0 20px 20px 100px;
    }
    #M1Milestone .timeline>li .timeline-image {
        width: 170px;
        height: 170px;
        margin-left: -85px;
        border: 4px solid #FF4040;
    }
    #M1Milestone .timeline>li .timeline-image h4 {
        margin-top: 40px;
    }
    #M1Milestone .timeline>li.timeline-inverted>.timeline-panel {
        padding: 0 100px 20px 20px;
    }
}