body {
	font: 24px/30px 'Noto Sans CJK KR', Noto Sans KR, sans-serif
}
.ff {
	font-size: 60%;
}
.btn-primary {
	position: relative;
    top: 60px;
    left: 16px;
    color: #fff;
    background-color: #808080;
    border-color: #808080;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);
.freme {
	top: 93%;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
}
 .frame {
	 top: 100%;
	 left: 100%;
     width: 169px;
     height: 450px;
	 margin-top: 0;
	 border-radius: 29px;
	 box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0);
	 overflow: hidden;
	 background: #28404e;
	 background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
	 background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%);
	 background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
	 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28404e', endColorstr='#1c2e38',GradientType=0);
	 color: #111;
	 font-family: 'Open Sans', Helvetica, sans-serif !important;
	 -webkit-font-smoothing: antialiased !important;
	 -moz-osx-font-smoothing: grayscale !important;
}
.video{
	display: flex;
	justify-content: center;
	align-items:center;
}
 .center {
	 position: fixed;
	 top: 73%;
	 left: 50%;
}
 .headline {
	 font-weight: 600;
	 font-size: 24px;
	 text-transform: uppercase;
	 text-align: center;
	 line-height: 22px;
}
 .headline .small {
	 font-weight: 300;
	 font-size: 16px;
}
#wrapper{
	width:600px;
	margin:50px auto;
	height:400px;
	position:relative;
	color:#000;
	text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;	
}

 .circle-big {
	 position: relative;
	 width: 114px;
	 height: 114px;
	 margin: 30px auto 25px auto;
}
 .circle-big svg {
	 width: 114px;
	 height: 114px;
}
 .circle-big .bg {
	 fill: none;
	 stroke-width: 10px;
	 stroke: #1b2a33;
}
 .circle-big .progress {
	 fill: none;
	 stroke-width: 10px;
	 stroke: #27e1ae;
	 stroke-linecap: round;
	 stroke-dasharray: 326.56;
	 stroke-dashoffset: 327;
	 transform: rotate(-90deg);
	 transform-origin: 50% 50%;
	 animation: big 1.5s ease-out;
}
 .circle-big .text {
	 position: absolute;
	 width: 100%;
	 top: 37px;
	 font-size: 24px;
	 text-align: center;
	 font-weight: 400;
	 line-height: 22px;
}
 .circle-big .text .small {
	 font-size: 14px;
	 color: #648192;
}
 .circles-small {
	 margin: 0 auto;
	 width: 400px;
	 height: 80px;
	 text-align: center;
}
 .circle-small {
	 display: inline-block;
	 position: relative;
	 width: 80px;
	 height: 80px;
	 margin: 0 20px;
}
 .circle-small svg {
	 width: 80px;
	 height: 80px;
}
 .circle-small .bg {
	 fill: none;
	 stroke-width: 6px;
	 stroke: #1b2a33;
}
 .circle-small .progress {
	 fill: none;
	 stroke-width: 6px;
	 stroke: #5ce1ec;
	 stroke-linecap: round;
	 stroke-dasharray: 232.36;
	 transform: rotate(-90deg);
	 transform-origin: 50% 50%;
}
 .circle-small .progress.one {
	 stroke-dashoffset: 80;
	 animation: one 1.5s ease-out;
}
 .circle-small .progress.two {
	 stroke-dashoffset: 140;
	 animation: two 1.5s ease-out;
}
 .circle-small .text {
	 position: absolute;
	 width: 100%;
	 top: 26px;
	 font-size: 17px;
	 text-align: center;
	 font-weight: 400;
	 line-height: 16px;
}
 .circle-small .text .small {
	 font-size: 12px;
	 color: #648192;
}