@import url("http://fonts.googleapis.com/earlyaccess/notosanskr.css");

.history{
    font-size:15px;
    letter-spacing:-0.3px;
    color:#555;
    position:relative;
}
.history:before{
    content: '';
    width: 1px;
    height: 100%;
    display: block;
    position: absolute;
    left: calc(50% - 1px);
    z-index: 0;
    background: #e5e5e5;
}
.w50 {
    float: left;
    width: 50%;
    min-height: 140px;    
}
.history .half-side.content {
    padding-left: 80px;
    width: 50%;
    display: inline-block;
    position: relative;
}
.history .box {
    padding: 0 5px 30px 5px;
    margin-bottom: 0px;
    text-align:center;
}
.box:before {
    content: '';
    width: 140px;
    height: 50px;
    display: block;
    position: absolute;
    top: 15px;
    left: -25px;
}
.box.red:before {
	background: url(/app/dubu_sourcecode/docs/imgs/1521101459_point001.png);
}
.box.mint:before {
	background: url(/app/dubu_sourcecode/docs/imgs/1521101826_point003.png);
}
.box.pink:before {
	background: url(/app/dubu_sourcecode/docs/imgs/1521102218_point005.png);
}
.box.green:before {
	background: url(/app/dubu_sourcecode/docs/imgs/1521102218_point007.png);
}
.box.brown:before {
	background: url(/app/dubu_sourcecode/docs/imgs/1521102218_point009.png);
}
.box .year:before {
    content: '';
    width: 50px;
    height: 1px;
    display: block;
    position: absolute;
    top: 15px;
    left: -26px;
}
.box p.year {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 20px;
    color:#1b1464;
}
.box p.month {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}
.box p.txt {
    margin-bottom: 20px;
    line-height: 1.5;
    color: #888;
}



/* left */
.odd {

}
.odd .box:before{
	display:none;
}
.odd .w50:before {
    content: '';
    width: 140px;
    height: 50px;
    display: block;
    position: absolute;
	top: 15px;
    left: -115px;
}
.odd .w50.red:before{
	background: url(/app/dubu_sourcecode/docs/imgs/1521101533_point002.png);
}
.odd .w50.yellow:before{
	background: url(/app/dubu_sourcecode/docs/imgs/1521102218_point004.png);
}
.odd .w50.purple2:before{
	background: url(/app/dubu_sourcecode/docs/imgs/1521102218_point006.png);
}
.odd .w50.blue:before{
	background: url(/app/dubu_sourcecode/docs/imgs/1521102218_point008.png);
}
.odd .w50.olive:before{
	background: url(/app/dubu_sourcecode/docs/imgs/1521102218_point010.png);
}
.history .odd .w50 {
    float: right;
    text-align: right;
    padding-left: 15px;
    padding-right: 45px;
    position: relative;
}

.history .odd .half-side.content {
    display: inline-block;
    text-align: right;
    padding-right: 80px;
    position: relative;
    padding-left: 0;
}


/* tablet */
@media screen and (min-width:769px) and (max-width:991px){
}

/* mobile */
@media screen and (max-width:768px){
    .odd{ min-height:auto;}
    .history:before { left: 30px;}
    .history p{font-size:13.5px;}
    .w50 { min-height: 0;}
    .history .half-side.content { width: 100%; padding-left: 50px;}
    .history .box {    padding-left: 60px;    padding-right: 0; padding-bottom:0px; text-align:left;}
    .box:before { 
        left: 13px; width:70px; background-size:70px; 
        background-image: url(/app/dubu_sourcecode/docs/imgs/1521101459_point001.png) !important;
        background-repeat:no-repeat;    
    }
    .box p.year { padding-top: 0px; font-size:17px;}
    .history .odd .w50 {    float: left; }
    .history .odd .w50:before{ 
        background: url(/app/dubu_sourcecode/docs/imgs/1521102218_point005.png) no-repeat;  left: 13px;
    	width:70px; 
    }
    .history .odd .half-side.content { padding-right: 0px; text-align:left; padding-left: 50px;}
    
}