.top-line{margin: 0 -40px; border-color:#ccc; margin-bottom: 35px; border-width: 0; border-bottom-width:1px}
#cms-dash .dev{display: flex; flex-wrap:wrap; justify-content: space-between; margin-bottom: -45px;}
#cms-dash .item{width: 100%;margin-bottom: 45px;}
#cms-dash .w40{width: calc(40% - 15px)}
#cms-dash .w60{width: calc(60% - 15px)}
#cms-dash .box{border:1px solid #ddd; border-radius:5px;}
#cms-dash .box.grey{background: #f9f9f9;}

#cms-dash .box.top{height: 260px; display: flex; align-items:center; justify-content:center}

.log-dash{padding: 15px}

.dash-web{display: flex; justify-content:center; text-align: center;width: 100%;; font-size: 18px; font-weight: 500; color: #696969; word-break:keep-all; line-height: 1.35;}
.dash-web > li{width: 33.3%; border-left: 1px solid #ddd; opacity: 0.8}
.dash-web > li:first-child{border-left: 0;}
.dash-web > li:hover { color: #000; opacity: 1.0}
.dash-web .ico{display: flex; align-items:center; justify-content:center; margin: 0 auto; width: 117px; height: 118px; border-radius:50%; margin-bottom: 27px; position:relative;}
.dash-web .ico span{font-size: 45px; position: absolute; left: 50%; top:50%; margin: auto; transform:translate(-50%,-50%)}
.dash-web .blue{background: #EDFBFF; color: #097CBD}
.dash-web .red{background: #FFF4F4; color: #D86363}
.dash-web .grey{background: #F4F4F4; color: #615959}

#drag-box{display: flex; justify-content:space-between; color: #333; flex-wrap:wrap}
#drag-box .group{width: 16%; padding: 18px; position: relative; height: 240px;    align-items: self-end; text-align: right; justify-content: flex-end; flex-flow: column; display: flex;;
  cursor: move;}
#drag-box .group.wide{width: 23%}
#drag-box .ico{font-size: 45px; position: absolute; left: 18px; top:18px; color: #555}
#drag-box .ico img{display: block;}
#drag-box .more{font-size: 30px; position: absolute; right: 10px; top:18px; color: #ccc}
/* #drag-box .i1.ico{font-size: 63px; margin: -8px 0 0 -5px;}
#drag-box .i2.ico{font-size: 40px;} */
#drag-box .cont{font-size: 16px;}
#drag-box .no{font-size: 20px; color: #ccc; font-weight: 700; line-height: 1; margin-top: 10px;}
#drag-box .big{font-size: 36px; }
#drag-box .group.over{border-color: #000; background: #f7f7f7}
#drag-box .g5{border-color: #56D9FF; background: #EDFBFF}
/* #drag-box .g5 .ico, */
#drag-box .i5.more,#drag-box .g5 .big{color: #097CBD}
#drag-box .more{display: none;}

.log-dash{position: relative; padding-top: 50px; line-height: 1; align-items: baseline !important}
.log-label{position: absolute; right: 0; top:0; display: flex; right: 40px; top:19px; font-size: 13px; color: #555}
.log-label li{margin-left: 25px;}
.log-label li:fist-child{margin-left: 0;}
.log-label span{width:12px; height: 12px; border-radius:50%; border:2px solid #ccc; display: middle; margin-right: 4px; vertical-align: middle; display: inline-block;}
.log-label .type-3 span{background: #cccccccc; border-color:#ccc; }

@media (max-width:1024px){
	#drag-box .group{width: 31.833%; margin-bottom: 2%; height: auto; padding: 15px}
	#drag-box .group.wide{width: 31.833%}
	#drag-box .group:nth-child(n+4){width:48.5%}
	#drag-box .ico{position: static; width: 100%; display: block; margin-bottom: 30px;}
	#drag-box .ico img{width: 35px}
	#drag-box .no{margin-top: 5px; font-size: 18px;}
	#drag-box .big{font-size: 30px;}
	
	.dash-web .ico{width: 80px; height: 80px}
	.dash-web .ico span{font-size: 30px;}
	#cms-dash .w40,#cms-dash .w60{width: 100%}
	#cms-dash .box.top{height: auto; padding: 30px 0}
	#cms-dash .box.top.log-dash{padding: 40px 15px 15px}
}
@media (max-width:720px){
	.dash-web{font-size: 15px;}
	.dash-web .ico{width: 55px; height: 55px; margin-bottom: 18px;}
	.dash-web > li{padding: 0 15px}
}
@media (max-width:420px){
	#drag-box .cont{font-size: 14px; letter-spacing: -0.05em;}
	#drag-box .cont .txt{white-space: nowrap;}
	#drag-box .group{padding: 10px}
	#drag-box .no{font-size: 15px;}
	#drag-box .big{font-size: 25px;}
	
}