.VivaTimeline {
    width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.VivaTimeline dl {
    position: relative;
    top: 0;
    padding: 0;
}

.VivaTimeline dl:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    margin-left: 0;
    content: '';
    background-color: #2855a5;
	z-index: 100;
}

.VivaTimeline dl dd {
    position: relative;
	margin: 0.25em 0;
    z-index: 1;
}

.VivaTimeline dl dd .circ {
    position: absolute;
    top: 3.5em;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #2855a5;
    outline: 2px solid #2855a5; /* 藍色虛線外框 */
    outline-offset: 2px; /* 外框與圓點的間距 */
    outline-radius: 50%; /* 讓外框也變成圓形 */
    z-index: 400;
}


.VivaTimeline dl dd .kk {  
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 50%;
	height: auto;
	padding: 0;
	color: rgba(0, 0, 0, 0.8);
	background: rgba(255, 255, 255,0);
	border: solid 0px #F00;
}

    .VivaTimeline dl dd .kk img{  
        width: 100%;
	    height: auto;
    }

.VivaTimeline dl dd .kk1 { 
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 50%;
	height: auto;
	padding: 0;
	color: rgba(0, 0, 0, 0.8);
	background: rgba(255, 255, 255,0);
	border: solid 0px #F00;
}

    .VivaTimeline dl dd .kk1 img{  
        width: 100%;
	    height: auto;
    }

.VivaTimeline dl dd .events {  /* 事件框線 */
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 55%;
	height: 100%;
    padding: 1em 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border: solid 0px #CCC;
}

.VivaTimeline dl dd .events_g {  /* 事件框線 */
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 55%;
	height: 100%;
    padding: 1em 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    background: #e3e3e3;
    border: solid 0px #CCC;
    z-index: 1;
}


    .events_title1 {  
        display: flex;
        justify-content: center;
        padding: 0 1em;
        width: 100%;
	    border-bottom: solid 1px #2855A5;
    }

    .events_txt1 {  
        display: flex;
        justify-content: center;
        padding: 0.5em 1em;
        width: 100%;
        text-align: center;
    }

    .events_txt1-2 {  
        display: flex;
        justify-content: flex-start;
        margin: 0 auto;
        padding: 0.5em 0;
        width: 80%;
        text-align: justify;
    }

.VivaTimeline dl dd .events-w { 
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 55%;
	height: 100%;
    padding: 1em;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border: solid 0px #CCC;
}

    .events_title2 {  
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
	    border-bottom: solid 1px #2855A5;
    }

    .events_txt2 {  
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 0.5em 1em;
        width: 100%;
        text-align: center;
    }


.evenspic {  /* 事件pic */
    position: relative;
	display: inline-block;
    width: 90%;
	height: 100%;
    padding: 0em;
	margin: 0.5em auto 0 auto;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}





@media screen and (max-width: 1680px) {

.VivaTimeline {
    width: 100%;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;

}
    
.VivaTimeline dl dd .events {  /* 事件框線 */
    width: 65%;
	height: 100%;
    padding: 1em 0;
}

.VivaTimeline dl dd .events_g {  /* 事件框線 */
    width: 65%;
	height: 100%;
    padding: 1em 0;
}

.VivaTimeline dl dd .events-w {  
    width: 65%;
	height: 100%;
    padding: 1em 0;
}
    
    
    
    
    
}

@media screen and (max-width: 1440px) {
	
.VivaTimeline dl dd .events {  /* 事件框線 */
    width: 80%;
	height: 100%;
    padding: 1em 0;
}

.VivaTimeline dl dd .events_g {  /* 事件框線 */
    width: 80%;
	height: 100%;
    padding: 1em 0;
}

.VivaTimeline dl dd .events-w {  
    width: 80%;
	height: 100%;
    padding: 1em 0;
}
    
    

}


@media screen and (max-width: 1024px) {
	
.VivaTimeline dl dd .events {  /* 事件框線 */
    width: 85%;
	height: 100%;
    padding: 1em 0;
}

.VivaTimeline dl dd .events_g {  /* 事件框線 */
    width: 85%;
	height: 100%;
    padding: 1em 0;
}

.VivaTimeline dl dd .events-w {  
    width: 85%;
	height: 100%;
    padding: 1em 0;
}
     

    
    
	
}


@media screen and (max-width: 980px) {


}


@media screen and (max-width: 840px) {
	
.VivaTimeline {
    width: 100%;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 4em;
	
}
	
    .VivaTimeline dl:before {
        left: 4%;
    }
	
    .VivaTimeline dl dd .circ {
        left: 4%;
    }
	
	

.VivaTimeline dl dd .kk {  
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
	height: auto;
	padding: 0 0 0 7%;
}

    .VivaTimeline dl dd .kk img{  
        width: 100%;
	    height: auto;
    }

.VivaTimeline dl dd .kk1 { 
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
	height: auto;
	padding: 0 0 0 7%;
}

.VivaTimeline dl dd .events {  /* 事件框線 */
    width: 100%;
	height: 100%;
    padding: 1em 0;
}

.VivaTimeline dl dd .events_g {  /* 事件框線 */
    width: 100%;
	height: 100%;
    padding: 1em 0;
}
    
    
.VivaTimeline dl dd .events-w { 
    display: none;
}
	
    .events_title1 {  
        display: flex;
        justify-content: center;
        padding: 0 1em;
        width: 100%;
	    border-bottom: solid 1px #2855A5;
    }

    .events_txt1 {  
        display: flex;
        justify-content: center;
        padding: 0.35em 0;
        width: 100%;
        text-align: center;
    }
	
    .events_title2 {  
        display: flex;
        justify-content: center;
        padding: 0 1em;
        width: 100%;
	    border-bottom: solid 1px #2855A5;
    }

    .events_txt2 {  
        display: flex;
        justify-content: center;
        padding: 0.35em 0;
        width: 100%;
        text-align: center;
    }
    
    
    
    
    
    
    
	
}


@media screen and (max-width: 736px) {
	
.VivaTimeline {
    width: 100%;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 4em;

}
	

	
}


@media screen and (max-width: 600px) {
	
.VivaTimeline {
    width: 100%;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 1em;
}
	
	
	
	
}
	

@media screen and (max-width: 400px) {
	
	
	
}





}