@charset "utf-8";



* { margin: 0px; padding: 0px; box-sizing: border-box; }



body { background: rgb(255, 255, 255); }



.data-box { width: 100%; padding: 30px 15px; position: relative; overflow: hidden; }



.data-box::after { content: ""; position: absolute; left: 0px; bottom: 0px; height: 4px; width: 0px; background: rgb(0, 102, 255); animation: 1.2s ease-out 0s 1 normal forwards running lineExpand; }



@keyframes lineExpand { 

  0% { width: 0px; }

  100% { width: 100%; }

}



.data-wrap { display: flex; align-items: center; justify-content: space-evenly; max-width: 1400px; margin: 0px auto; }



.data-item { flex: 1 1 0%; text-align: center; position: relative; padding: 10px 5px; transition: 0.3s; cursor: pointer; }



.data-item:not(:last-child)::after { content: ""; position: absolute; right: 0px; top: 15%; height: 70%; width: 1px; background: rgb(229, 229, 229); }



.data-item:hover { transform: translateY(-6px); }



.data-item:hover .num-text { color: rgb(0, 68, 204); transform: scale(1.08); }



.num-text { font-size: 42px; font-weight: bold; color: rgb(0, 102, 255); line-height: 1.2; transition: 0.3s; display: inline-block; }



.desc-text { font-size: 16px; color: rgb(102, 102, 102); margin-top: 8px; transition: color 0.3s; }



.data-item:hover .desc-text { color: rgb(0, 102, 255); }