@import url("https://fonts.dubuplus.com/css?family=Kanit");

.history dl{overflow:hidden; margin:0 0 65px;}
.history dl dt{font-size:40px; font-family:'Kanit'; font-weight:bold; background-image: linear-gradient(-90deg, #0c5ce2, #0087de); color:#fff; text-align:center; padding:40px 0; border-radius:20px 0; margin:0 0 55px; position:relative}
.history dl dt:after {
    content:"";
    position: absolute;
    border-color: #0087de transparent;
    border-style: solid;
    border-width:45px 45px 0 0;
    display: inline-block;      
    bottom:-45px;
	left:0;
	width: 28px;
	height: 14px;
}
.history dl dt span{font-weight:normal; font-size:16px; display:block; opacity:0.5; text-transform:uppercase; letter-spacing:0.6px;}

.history dl dd ul{overflow:hidden;}
.history dl dd ul > li{padding:0 30px; overflow:hidden;}
/* ----- 년도 ----- */
.history dl dd ul > li strong{font-size:34px; font-family:'Kanit'; letter-spacing:0.5px; float:left; width:26%; position:relative;}
.history dl dd ul > li strong:after{content:''; border-top:2px dashed #ddd; width:80px; position:absolute; right:0; top:18px;}

.history dl dd ul > li:nth-child(even) strong:after{border-top:2px dashed #d8e7ff;}
.history dl dd ul > li:nth-child(even) strong,
.history dl dd ul > li:nth-child(even) ol li{color:#0c5ce2;}
.history dl dd ul > li:nth-child(even) ol{border-left:1px solid #0c5ce2}
.history dl dd ul > li:nth-child(even) ol li span:before{border:2px solid #0c5ce2;}

.history dl dd ul > li ol{font-size:15px; position:relative; float:right; width:68%; padding:0 0 50px 110px; border-left:1px solid #000}
.history dl dd ul > li ol li{letter-spacing:-0.7px;}
.history dl dd ul > li ol li + li{margin:40px 0 0;} 
/* ----- 월.일 ----- */
.history dl dd ul > li ol li span:before{position:absolute; content:''; width:10px; height:10px; border:2px solid #000; border-radius:50%; background:#fff; left:-35px; top:8px;}
.history dl dd ul > li ol li span{font-size:22px; font-family:'Kanit'; font-weight:bold; letter-spacing:0.5px; position:absolute; left:30px; line-height:1.1;}
.history dl dd ul > li ol li b{display:block;}
/* tablet */
@media screen and (min-width:768px) and (max-width:991px){

}

/* mobile */
@media screen and (max-width:767px){

    .history dl{margin:0 0 45px;}
    .history dl dt{font-size:30px; padding:25px 0; border-radius:10px 0; margin:0 0 55px;}
    .history dl dt:after {
        border-width:26px 26px 0 0;
        bottom:-26px;
    }
    .history dl dt span{font-size:14px;}


    .history dl dd ul > li{padding:0 25px;}
    /* ----- 년도 ----- */
    .history dl dd ul > li strong{font-size:28px; float:none; width:100%; display:block; margin:0 0 10px}
    .history dl dd ul > li strong:after{width:70%; top:14px;}

    .history dl dd ul > li ol{font-size:14px; float:none; width:100%; padding:0 0 25px 80px; border-left:0;}
    .history dl dd ul > li:nth-child(even) ol{border-left:0;}
    .history dl dd ul > li ol li + li{margin:30px 0 0;} 
    /* ----- 월.일 ----- */
    .history dl dd ul > li ol li span:before{ left:-20px; top:6px;}
    .history dl dd ul > li ol li span{font-size:18px; left:20px;}
}