@font-face {
    font-family:'intro bold';
    src: url('intro-bold.eot');
    src: url('intro-bold.eot?#iefix') format('embedded-opentype'),
         url('intro-bold.woff') format('woff'),
         url('intro-bold.ttf') format('truetype'),
         url('intro-bold.svg#intro-bold') format('svg');
    font-weight: normal;
    font-style: normal
}



body {
		/*font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;*/
		font-family:"intro bold";
		background:#141B29 url(image/line.png) repeat-x center top;
		margin:auto;
		position: relative;
		}

@media  screen and (max-width: 630px) {
	
#img_1 {
		margin:70px auto 70px !important;
		width:250px !important;
		}		
#example {
		padding:50px 0 50px !important;
		}
#download {
		margin:80px auto 115px!important;
		}	
#form_partner {
		max-width:390px !important;
		margin:100px auto 180px !important;
		}
#form {
		margin:140px auto 130px !important;
	
		}
#info {
		padding:50px 0 0px 0!important;

		}	
	
.partner__list {
        margin: 0px 0 0px !important;
        }	
.partner__item img{
        height:24px !important;
        }	
a #img_4 {
		display: none !important;
		}	
#info_form {
		padding-left: 0px !important;
		margin:0 auto 35px !important;
	}
#info_form_2 {
		margin:0 auto 50px !important;
	}		
.caption-item {
	margin: 0 8px 20px 8px !important;
	width: 85px !important;
	font-size: 13px !important;
}	
}
@media  screen and (min-width: 631px) {
	
#img_1 {
		margin:0px auto 30px !important;
		width:130px !important;
		}
#download {
		margin:30px auto 95px!important;
		}	
			
#example {
		padding:50px 0 50px !important;
		}
#form_partner {
		margin:50px auto 110px !important;
		height:50px !important;
		}
#form_partner p{
		margin:5px 0!important;
		padding:5px 0!important;
		}		
#form {
		margin:60px auto 0px !important;
		padding:0px !important;
		height:160px !important;
		}
#img_3 {
		margin:-20px auto 0px !important;
		width:70px !important;
		}
#form p {
		font-size:16px !important;
		margin:8px !important;
		}	
.partner__list {
        margin: 0px 0 0px !important;
        }	
.partner__item img{
        height:24px !important;
        }
#info {
		padding:50px 0 0px !important;

		}			

#info_form {
		margin:0 auto 35px !important;
	}
#info_form_2 {
		margin:0 auto 50px !important;
	}	
#head {
		margin:25px auto 0px !important;
		}	
}
	
	
@media  screen and (min-width: 900px) {
	
#img_1 {
		margin:40px auto 70px!important;
		width:250px!important;
		}
#download {
		margin:70px auto 100px!important;
		}	
			
#example {
		padding:100px 0 100px!important;
		}
	
#form_partner {
		margin:100px auto 140px !important;
		height:100px !important;
		}
#form_partner p{
		margin:5px 0!important;
		padding:5px 0!important;
		}		
#form {
		height:300px!important;
		margin:140px auto 100px!important;
		}
	
#img_3 {
		margin:20px auto 20px!important;
		width:130px!important;
		}	

#form p {
		font-size:19px !important;
		margin:8px !important;
		}	
.partner__list {
        margin: 0px 0 0px !important;
        }	
.partner__item img{
        height:30px !important;
        }
#info {
		padding:100px 0 50px !important;

		}	
#info_form {
		margin:0 auto 70px !important;
	}
#info_form_2 {
		margin:0 auto 70px !important;
	}	
}
#head {
		max-width: 900px;
		margin:30px auto 20px;
		padding:0 40px;
		}
#head a {
		float:left;
		color:#ffffff;
		text-align:left;
		letter-spacing:.5px;
		font-size:18px;
		line-height: 42px;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);	
		}

#head a:hover {
		color: #C0F7B7;
		text-decoration:none;
		}

#head a#button {
		display: block;
		width:100px;
		height:23px;
		float:right;
		padding:10px 0 0 0;
		margin:0px;
		border: 3px solid #2EE09A;
		text-align:center;
		border-radius: 30px;
		letter-spacing:.5px;
		font-size:15px;
		line-height: 15px;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
		}

#head a#button:hover {
		margin-top: 1px;
		padding:13px 3px 3px 3px;
		color: #000000;
		border: 0px;
		background: rgb(192,247,183);
		background: -webkit-linear-gradient(214deg, rgba(192,247,183,1) 0%, rgba(46,224,154,1) 100%);
		background: -o-linear-gradient(214deg, rgba(192,247,183,1) 0%, rgba(46,224,154,1) 100%);
		background: linear-gradient(304deg, rgba(192,247,183,1) 0%, rgba(46,224,154,1) 100%);
		text-decoration:none;
		text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);	
		box-shadow: 0px -5px 3px -5px rgba(0, 0, 0, 0.5) inset;
		}

#img_1 {
		display: block;
		text-align:center;
		filter: drop-shadow(0px 0px 50px rgba(46,224,154,.3));
		}
		
#img_2 {
		margin:0px 10px;
		width:40px;
		float:left;
		}
			
a:hover #img_2 {
		margin-top:2px;
		}

#download {
		width:280px;
		margin:100px auto;
		color:#fff;
		text-align:left;
		line-height:48px;
		letter-spacing:1px;
		}	
	
#people {
		position: relative;
		width:100%;
		height:250px;
		text-align:center;
		background:url(image/people_bg.png) repeat-x center top;
		-webkit-box-shadow: 0px 17px 18px -15px rgba(0, 0, 0, 0.22); 
		-moz-box-shadow: 0px 17px 18px -15px rgba(0, 0, 0, 0.22); 
		box-shadow: 0px 17px 18px -15px rgba(0, 0, 0, 0.22);
		}	
#img_5 {
		position: relative;
		top:-50px;
		margin: 0px auto -35px;
		text-align:center;
		width:170px;
		}
#people h3 {
		color:#414141;
		text-align:center;
		letter-spacing:.5px;
		font-size:20px;
		padding: 0px 0px;
		margin: 0px;
		text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
		}
#star img {
		width:20px;
		text-align:center;
		padding: 0px 0px;
		margin:7px 4px;
		}

#people p {
		color:#adadad;
		text-align:center;
		letter-spacing:2px;
		font-size:14px;
		padding: 0px 0px 0px;
		margin: 0px;
		text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
		}		
h1 {
		color:#fff;
		text-align:center;
		font-size:25px !important;
		letter-spacing:1px;
		padding: 0px 30px;
		}

h2 {
		color:#fff;
		text-align:center;
		letter-spacing:1px;
		font-size:25px;
		padding: 0px 30px;
		}

p {
		color:#fff;
		text-align:center;
		letter-spacing:1px;
		padding: 0px 30px;
		font-size:20px;
		}
span {
		color: #5AC994;
		font-weight:lighter;
		}	
a {
		color: #2EE09A;
		text-decoration:none;
		}	
a:hover {
		color: #C0F7B7;
		text-decoration:none;
		}		

#form_partner {
		max-width:940px;
		height:100px;
		margin:100px auto 140px;
		}
#form_partner p {
		color: #49496d;
		letter-spacing:1px;
		text-align:center;
		font-size:15px;
		}
		
#form {
		max-width:450px;
		height:300px;
		margin:140px auto 100px;
	
		}

.partner__list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: calc(100% + 20px * 2);
  width: auto;
  height: 100%;
  list-style: none;
  overflow: hidden;
  margin: 20px 0 0px;
  padding:0px !important;
}

.partner__item {
	padding:0px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0px;
  -webkit-transform: none;
          transform: none;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  opacity: 1;
}

#img_3 {
		margin:20px auto 20px;
		display: block;
		text-align:center;
		width:130px;
		}

#form h2 {
		color: #FFFFFF;
		letter-spacing:2px;
		max-width:330px;
		margin:-14px auto 35px;
		font-size:25px;
		}
#form p {
		color: #fff;
		letter-spacing:1px;
		text-align:center;
		font-size:19px;
		}	
		
#form_bt {
		border-bottom: 5px solid #33E1ED;
		}		

#bg {	
		top:-220px;
		position:absolute;
		width:100%;
		height:100%;
		overflow:hidden;
		z-index:-1;
		}
			
#info {
		display: block;
		margin:0px auto 0px;
		padding:100px 0 100px;
		background: rgb(46,224,154);
background: -webkit-linear-gradient(221deg, rgba(46,224,154,1) 0%, rgba(11,137,143,1) 100%);
background: -o-linear-gradient(221deg, rgba(46,224,154,1) 0%, rgba(11,137,143,1) 100%);
background: linear-gradient(311deg, rgba(46,224,154,1) 0%, rgba(11,137,143,1) 100%);
		}

#info_form {
		margin:0 auto 70px;
		padding-left: 55px;
		text-align:center;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		-webkit-box-pack: center;
			-ms-flex-pack: center;
		justify-content: center;
		max-width: calc(100% + 20px * 2);
		width: auto;
		height: 100%;
		list-style: none;
		overflow: hidden;	
		}	

#info_form_2 {
		max-width:1000px;
		margin:0px auto 70px;
		color:#fff;
		font-size: 22px;
		text-align:center;
		letter-spacing:1px;
		}

#info_form_3 {
		padding:0px;
		max-width:1000px;
		margin:0px auto 0px;
		color:#fff;
		font-size: 22px;
		text-align:center;
		letter-spacing:1px;
		position:relative;
		}

#projects_num {
		position: relative;
		min-width: 70px;
		float:left;
		margin:5px;
		border: 1px solid #ffffff;
		border-radius: 5px;
		background: rgb(215,215,215);
        background: -webkit-linear-gradient(bottom, rgba(215,215,215,1) 0%, rgba(255,255,255,1) 23%, rgba(255,255,255,1) 51%, rgba(211,211,211,1) 51%, rgba(237,233,233,1) 82%, rgba(253,252,252,1) 100%);
        background: -o-linear-gradient(bottom, rgba(215,215,215,1) 0%, rgba(255,255,255,1) 23%, rgba(255,255,255,1) 51%, rgba(211,211,211,1) 51%, rgba(237,233,233,1) 82%, rgba(253,252,252,1) 100%);
        background: linear-gradient(to top, rgba(215,215,215,1) 0%, rgba(255,255,255,1) 23%, rgba(255,255,255,1) 51%, rgba(211,211,211,1) 51%, rgba(237,233,233,1) 82%, rgba(253,252,252,1) 100%);
		-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5); 
		-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5); 
		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
		}
#projects_num p {
		font-family:"intro bold";
		font-size: 85px;
		background-color: rgba(0,0,0,1);
		margin:  6px;
		padding:17px 0 0 0;
		line-height: 80px;
		color: transparent;
    	text-shadow: 0px 1px 1px rgba(79,79,79,1);
   		-webkit-background-clip: text;
       	-moz-background-clip: text;
            background-clip: text; 
		}

#num_line {
		position:absolute;
		top:53px;
		width:100%;
		border-top: 1px solid rgba(0, 0, 0, 0.2);
		border-bottom: 1px solid rgba(255, 255, 255, 0.4);
		}

a #img_4 {
		display: block;
		margin:31px 0 10px 0;
		padding:5px;
		width:50px;
		}
a:hover #img_4 {
		background:#2EE09A;
		border-radius: 50px;
		}

#info h2 {
		color: #fff;
		letter-spacing:1px;
		margin:0px auto 30px;
		font-size:25px;
		text-shadow: 0px 1px 1px rgba(7, 51, 53, 0.5);
		}


#example {
		margin:0px auto 0px;
		padding:100px 0 100px;
		border-top:1px solid #2d2d40;
		border-bottom:1px solid #2d2d40;
		background: #12121e;
		}


#example h2 {
		color: #fff;
		letter-spacing:1px;
		margin:0px auto 30px;
		font-size:25px;
		}		
						
br {
		clear:both;
		}	


		
.banners__list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: calc(100% + 20px * 2);
  width: auto;
  height: 100%;
  list-style: none;
  overflow: hidden;
  margin-bottom: 0px;
  padding:0px !important;
}

@media screen and (max-width: 1679px) {
  .banners__list {
    margin-top: 25px;
	  
  }
}

@media screen and (max-width: 1279px) {
  .banners__list {
    margin-bottom: -20px;
  }
}


.banners__item {
	padding:0px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 0px;
  margin-bottom: 0px;
  -webkit-transform: none;
          transform: none;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  opacity: 1;
}

@media screen and (max-width: 1679px) {
  .banners__item {
    margin-bottom: 20px;
	  
  }
}


@media screen and (max-width: 1279px) {
  .banners__item {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 767px) {
  .banners__item {

  }
}

.banners__link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: 0 auto;
  padding: 15px 15px 0;
  width: auto;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.banners__link:hover .banners__image {
  opacity: 1;
}

.banners__image-block {
  position: relative;
  margin-bottom: 5px;
  width: 240px;
  height: 400px;
  overflow: hidden;
  z-index: 100;
}
.banners__image {
  width: 100%;
  height: 100%;
  opacity: 1;
}
.banners__play {
  position: absolute;
  top: 50%;
  left: 50%;	
  margin: -55px 0 0 -55px;
  width: 110px;
  height: 110px;
  opacity: 1;
}
.banners__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  opacity: 0;
}
.banners__name {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 240px;
  font-size: 12px;
  text-align:center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}




.canvas {
	width: 400px;
	margin: auto;
	position:relative;
	z-index: 1;
}

.canvas_title {
	position:absolute;
	top:80px;
	left:90px;
	margin: auto;
	font-size: 45px;
	width: 150px;
	height: 150px;
	line-height: 160px;
	border-radius: 150px;
	border:35px solid rgba(0, 0, 0, 0.15);
	background:  rgba(0, 0, 0, 0.15);
	text-shadow: 0px 1px 0px rgba(7, 51, 53, 0.4);
	
	}

.canvas_title sup {
	font-size: 25px;
	line-height: 30px;
	}

.unit {
	fill: none;
	stroke-width: 4;
	
}

.unit:nth-child(1) {
	stroke: #f0d96e;
	stroke-dasharray: 15 10;
	stroke-dashoffset: 50;
	stroke-linecap:round;
}

.unit:nth-child(2) {
  stroke: #f65959;
  stroke-dasharray: 25 100;
  stroke-dashoffset: 85;
	stroke-linecap:round;
}

.unit:nth-child(3) {
  stroke: #24f9f9;
  stroke-dasharray: 25 100;
  stroke-dashoffset: 60;
	stroke-linecap:round;
	
}
.unit:nth-child(4) {
  stroke: #ad64e9;
  stroke-dasharray: 40 55;
  stroke-dashoffset: 12;
	stroke-width: 5;
	stroke-linecap:round;
	
}

.legend {
  margin:50px auto 0;
	padding:0px;
}


.caption-item {
	width: 100px;
	position: relative;
	text-align: center;
	margin: 0 20px 20px 20px;
	padding: 20px 0 0 0;
	font-size: 15px;
	line-height: 18px;
	text-shadow: 0px 1px 0px rgba(7, 51, 53, 0.4);
}
.caption-item p {
	margin:0px 0;
	padding: 0px;
	font-size: 45px;
	line-height: 60px;
	text-shadow: 0px 1px 1px rgba(7, 51, 53, 0.4);
}

.caption-item sup {
	margin:0;
	padding: 3px 0 0 0;
	font-size: 25px;
	line-height: 50px;
}

.caption-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 8px;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.5); 
	box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.5);
	border-radius: 6px;
}

.caption-item:nth-child(1)::before {
  background-color: #f0d96e;
}

.caption-item:nth-child(2)::before {
  background-color: #f65959;
}

.caption-item:nth-child(3)::before {
  background-color: #24f9f9;
}
.caption-item:nth-child(4)::before {
  background-color: #ad64e9;
}