/* 

    .dg-number -> dg-number%s { Style } 01 / 02 / 03 / 04
    if ( dg-number01 )
       .dg-number -> border_width%s { Line Border Width } 1 / 2 / 3
       .dg-number -> line_width%s { Line Width } 18 / 30 / 40
    end

	.dg-number -> %s { Bolg } number_bold	{需要全局设置}
    .dg-number -> size-%s { Size } sm /  / lg 
    .dg-number -> %s { Separator Line } counter-top-line / counter-left-line
    .dg-number .number -> data-separator="%s" { Separator } true / fasle

*/


/* number */
.dg-number {
	position: relative;
  }
  
  .dg-number .line{
	border:1px solid #20a3f0;
	margin: auto;
  }
  .dg-number.line_width18 .line{
	  width: 18px;
  }
  .dg-number.line_width30 .line{
	  width: 30px;
  }
  .dg-number.line_width40 .line{
	  width: 40px;
  }
  .dg-number.border_width1 .line{  
	  border-bottom-width:1px;	  
  }
  .dg-number.border_width2 .line{  
	  border-bottom-width:2px;	  
  }
  .dg-number.border_width3 .line{  
	  border-bottom-width:2px;	  
  }
  .dg-number .icon{
	display: block;
	width: 1em;
	height: 1em;
	line-height: 1em;
	margin: auto;
	text-align: center;
  }
  
  .dg-number01{
	  text-align: center;
	  color:#333;
  }
  .dg-number01 .number{
	  color:#20a3f0;
	  line-height: 1;
	  display:inline-block;
	  vertical-align: middle;
  }
  .dg-number01 sub{
	  color:#20a3f0;
  }
  .dg-number02{
	  line-height:1;	
  }
  .dg-number02 .icon{
	  float:left;
	  display:inline-block;
  }
  .dg-number02 .number {
	  display: inline-block;
	  vertical-align: middle;
  }
  .dg-number02 .box-right{
	  overflow:hidden;
  }
  .dg-number02 .line{
	margin-left:0;
  }
  .dg-number02 .icon{
	margin-left: 0;
  }
  
  .dg-number03{
	  line-height:1.2;	
  }
  .dg-number03 .icon{
	  display:inline-block;
	  position: absolute;
	  left: 0;
	  top: 0;
	  color: rgba(255,255,255,0.2);
	  z-index: 0;
  }
  .dg-number03 .number {
	  display: inline-block;
	  vertical-align: middle;
  }
  .dg-number03 .box{
	  position: relative;
	  overflow: hidden;
	  z-index: 1;
  }
  .dg-number03 .line{
	margin-left:0;
  }
  
  
  .dg-number04{
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	  line-height:1.2;
  }
  .dg-number04 .icon{
	  display:inline-block;
	  vertical-align: middle;
  }
  .dg-number04 .number {
	  display: inline-block;
	  vertical-align: middle;
  }
  .dg-number04 .box{
	  position: relative;
	  overflow: hidden;
	  z-index: 1;
  }
  .dg-number04 .line{
	margin-left:0;
  }
  
  
  .dg-number01.size-sm .number{
	font-size: 24px;  
  }
  .dg-number01 .number{
	font-size: 48px;  
  }
  .dg-number01.size-lg .number{
	font-size: 60px;
  }
  .dg-number01.size-sm sup{
	font-size: 14px;  
  }
  .dg-number01 sup{
	font-size: 28px;  
  }
  .dg-number01.size-lg sup{
	font-size: 36px;
  }
  .dg-number01.size-sm .icon{
	font-size: 28px;  
  }
  .dg-number01 .icon{
	font-size: 36px;  
  }
  .dg-number01.size-lg .icon{
	font-size: 55px;
  }
  
  
  
  .dg-number01.size-sm .number,
  .dg-number01.size-sm .icon,
  .dg-number01.size-sm .line,
  .dg-number01.size-sm .title{
	margin-bottom: 10px;
  }
  .dg-number01 .number,
  .dg-number01 .icon,
  .dg-number01 .line,
  .dg-number01 .title{
	margin-bottom: 13px;
  }
  .dg-number01.size-lg .number,
  .dg-number01.size-lg .icon,
  .dg-number01.size-lg .line,
  .dg-number01.size-lg .title{
	margin-bottom: 15px;
  }
  
  
  .dg-number02.size-sm .number{
	font-size: 18px;  
  }
  .dg-number02 .number{
	font-size: 28px;  
  }
  .dg-number02.size-lg .number{
	font-size: 37px;
  }
  .dg-number02.size-sm sup{
	font-size: 10px;  
  }
  .dg-number02 sup{
	font-size: 16px;  
  }
  .dg-number02.size-lg sup{
	font-size: 22px;
  }
  .dg-number02.size-sm .icon{
	font-size: 36px;
	margin-right: 15px;
  }
  .dg-number02 .icon{
	font-size: 54px;  
	margin-right: 22px;
  }
  .dg-number02.size-lg .icon{
	font-size: 60px;
	margin-right: 30px;
  }
  .dg-number02.size-sm .number,
  .dg-number02.size-sm .icon,
  .dg-number02.size-sm .line,
  .dg-number02.size-sm .title{
	margin-bottom: 6px;
  }
  .dg-number02.size-lg .icon{
	margin-top: 3px;
  }
  .dg-number02 .number,
  .dg-number02 .icon,
  .dg-number02 .line,
  .dg-number02 .title{
	margin-bottom: 8px;
  }
  .dg-number02.size-lg .number,
  .dg-number02.size-lg .icon,
  .dg-number02.size-lg .line,
  .dg-number02.size-lg .title{
	margin-bottom: 10px;
  }
  
  
  .dg-number03.size-sm .number{
	font-size: 36px;  
  }
  .dg-number03 .number{
	font-size: 48px;  
  }
  .dg-number03.size-lg .number{
	font-size: 60px;
  }
  .dg-number03.size-sm sup{
	font-size: 14px;  
  }
  .dg-number03 sup{
	font-size: 28px;  
  }
  .dg-number03.size-lg sup{
	font-size: 36px;
  }
  .dg-number03.size-sm{
	  padding: 18px;
  }
  .dg-number03.size-sm .icon{
	font-size: 36px;
  }
  .dg-number03{
	  padding: 27px;
  }
  .dg-number03 .icon{
	font-size: 54px;  
  }
  .dg-number03.size-lg{
	  padding: 40px;
  }
  .dg-number03.size-lg .icon{
	font-size: 80px;
  }
  .dg-number03.size-sm .number,
  .dg-number03.size-sm .line,
  .dg-number03.size-sm .title{
	margin-bottom: 12px;
  }
  .dg-number03 .number,
  .dg-number03 .line,
  .dg-number03 .title{
	margin-bottom: 16px;
  }
  .dg-number03 .title{
	  font-size: 16px;
  }
  .dg-number03.size-lg .number,
  .dg-number03.size-lg .line,
  .dg-number03.size-lg .title{
	margin-bottom: 20px;
  }
  .dg-number03.size-lg .title{
	  font-size: 20px;
  }
  
  
  .dg-number04 .box sup{
	  font-size:60%;
  }
  .dg-number04 .box,
  .dg-number04 .title{
	  color: #293340;
  }
  .dg-number04 div.title{
	  font-size: 18px;
  }
  .dg-number04 .icon{
	  color: #20a3f0;
  }
  .dg-number04.size-sm .box{
	font-size: 26px;  
	margin-bottom: 6px;
  }
  .dg-number04 .box{
	font-size: 38px;  
	margin-bottom: 8px;
  }
  .dg-number04.size-lg .box{
	font-size: 64px;
	margin-bottom: 10px;
  }
  .dg-number04.size-sm .icon{
	margin-right: 15px;
  }
  .dg-number04 .icon{
	margin-right: 22px;
  }
  .dg-number04.size-lg .icon{
	margin-right: 30px;
  }
  
  
  
  .dg-number.counter-left-line:before{
	  content: "";
	  position: absolute;
	  width: 100%;
	  height: 70%;
	  left: -15px;
	  top: 15%;
	  border-left: 1px solid #e0dede;  
  }
  .dg-number.counter-top-line:after{
	  content: "";
	  position: absolute;
	  width: 80%;
	  height: 100%;
	  left: 10%;
	  top: 0; 
	  border-top: 1px solid #e0dede;  
  }
  
  @media only screen and (max-width: 767px) {
	  .dg-number.counter-left-line:before{
		  display:none;
	  }
	  .dg-number.counter-top-line:after {    
		  display:none;	  
	  }	
  }
  
  
  /**/
  @media only screen and (max-width: 1024px) {
	  .dg-number02{
		  text-align:center;
	  }
	  .dg-number02 .icon{
		  float:none;
	  }
  }
  @media only screen and (max-width: 767px) {
	  .dg-number02{
		  margin:10px 0;
	  }
	  .dg-number01 {
		  margin:0;
	  }	
	
  }