@font-face {
	font-family: 'Arial';
	src: url('../fonts/arial/arialmt.eot');
	src: url('../fonts/arial/arialmt.eot?#iefix') format('embedded-opentype'),
		url('../fonts/arial/arialmt.woff2') format('woff2'),
		url('../fonts/arial/arialmt.woff') format('woff'),
		url('../fonts/arial/arialmt.ttf') format('truetype'),
		url('../fonts/arial/arialmt.svg#ArialMT') format('svg');
	font-weight: normal;
	font-style: normal;
}

#main_cont {
    height: 636px;
    width: 900px;
    background-color: #dcdcdc;
    border: 1px solid;
    position: relative;
    overflow: hidden;
    font-family: 'Arial';
}
#container {
    position: absolute;
   width: 900px;
    background-color: #666666;
    height: 611px;
    top: 25px;
}
.headerBtn
{
  position: relative;
    width: 800px;
    height: 25px;
    top: 20px;
	text-align:center;
	border-radius:3px;
	background:#bebebe;
	left:50px;
	line-height:25px;
}
.color
{
color:#0099ff;
}
.opt1,.opt2,.opt3
{

color:white;	
}
.headerBtn:hover
{

background:#9d9e9e;
cursor:pointer;

}
.clockDiv
{
position:relative;
width:600px;
height:100px;
margin-top:30px;
margin-left:10px;
border:0px solid red;
visibility:hidden;
}

.activity
{
position:relative;
width:600px;
height:260px;
background:#000;
border:3px solid #ffffff;
margin-left:140px;
margin-top:30px;
overflow:hidden;

}
.hidden_activity
{
position:absolute;
width:900px;
height:660px;
background:transparent;
margin-left:20px;
margin-top:15px;
z-index:1000000;
display:none;

}
.semicircle
{
position:absolute;
width:10px;
height:10px;
background:url('../images/circle.png') no-repeat;
background-size:10px 10px;
border-radius:20px;
cursor:pointer;
//line-height:25px;
font-size:10px;
color:#fff;
text-align:center;
z-index:66;

}

.circle
{
position:absolute;
width:30px;
height:30px;
background:url('../images/circle.png') no-repeat;
background-size:30px 30px;
border-radius:30px;
cursor:pointer;
//line-height:25px;
font-size:10px;
color:#fff;
text-align:center;

z-index:66;
}
.animatecircle
{
position:absolute;
width:2px;
height:2px;
border-radius:2px;
cursor:pointer;
//line-height:25px;
font-size:10px;
box-shadow:#d1effc;
color:#fff;
position:absolute;
border:2px solid white;
box-shadow:2px 2px 22px #0099ff;
 //box-shadow: 2px 2px 2px 2px rgba(247,99,62,0);
text-align:center;
top:200px;
left:30px;
transform: scale(1.5);
transform-origin: 50% 50%;	
}
.animatecircle.animate {
	transform: scale(1.5);
	transform-origin: 50% 50%;
}

.circleCenter{
position:absolute;
width:30px;
height:30px;
border-radius:30px;
left:275px;
top:110px;
color:#fff;
font-size:10px;
background:url('../images/sun.png') no-repeat;
background-size:30px 30px;
text-align:left;
z-index:66;
}
.order
{
position:absolute;
top:470px;
border:0px solid red;
width:500px;
height:50px;
left:20px;

}
.obs_selet
{
opacity:1;
color:#000;
}
.text-color
{
color:#0099ff;
font-weight:bold;
font-size:14px;
}
.popop
{
background:white;
width:200px;
height:100px;
z-index:1000000;
position:absolute;
margin:0 auto;
right:0px;
left:0px;
top:368px;
text-align:left;
display:none;
}
.pophead
{
background:#dcdcdc;
width:190px;
height:20px;
margin-top:0px;
font-weight:bold;
padding:5px;
color:#000;
}
.popup
{
top:10px;
text-align:center;
}
.ok{position:absolute;top:74px;cursor:pointer;width:40px;height:20px;background:#9abbdf;color:#000;text-align:center;margin:0 auto;right:0px;left:0px;}
.ok:hover{background:#7ea1d5;}

select
{
background:#999999;
width:100px;
height:30px;
font-size:12px;
border-radius:4px;
color:#000;

}
.run
{
width:200px;
height:10px;
background:#999999;
display:inline;
text-align:center;
border-radius:5px;
font-size:14px;
padding:3px;
cursor:default;
}
.run1
{
position:absolute;
width:200px;
height:10px;
background:transparent;
display:inline;
text-align:center;
border-radius:5px;
font-size:14px;
padding:3px;
cursor:default;
z-index:10;
height:20px;
border:0px solid red;
margin-left:-99px;
z-index:1000;
}
.enable
{
background:#e4e4e4;
cursor:pointer;
}
.popop
{
//border:1px solid red;
//background:#e4e4e4;

}
.animation {
  -webkit-animation: KEYFRAME-NAME 5s infinite;
  -moz-animation:    KEYFRAME-NAME 5s infinite;
  -o-animation:      KEYFRAME-NAME 5s infinite;
  animation:         KEYFRAME-NAME 5s infinite;
}

/* @-webkit-keyframes KEYFRAME-NAME {
  0%   { width: 10%; }
  50%   { width: 50%;height: 50%; }
  
}
@-moz-keyframes KEYFRAME-NAME {
  0%   { width: 10%; }
  50%   { width: 10%;height:10%; }
  
}

 */


.text
{
display:inline-block;
width:100px;
border:0px solid red;
height:10px;
margin-top:30px;
margin-left:-5px;
}
.Atext
{
display:inline-block;
width:100px;
border:0px solid red;
height:10px;
margin-top:30px;
margin-left:-33px;
}
#circle_A
{
left:142px;
top:133px;
opacity:0.5;
}
#semicircle_A{
left:142px;
top:153px;
}
#circle_G
{
left:95px;
top:35px;
opacity:0.5;
}
#circle_D
{
left:350px;
top:30px;
opacity:0.5;
}
#circle_C
{
left:365px;
top:175px;
opacity:0.5;
}
#circle_E
{
left:465px;
top:80px;
opacity:0.5;
}
#circle_B
{
left:545px;
top:203px;
opacity:0.5;
}
#circle_F
{
//background:#d1effc;
left:35px;
top:203px;
opacity:0.5;
}
.timeborad
{
position:absolute;
right:20px;
color:#0099ff;
font-weight:bold;
top:3px;
z-index:100;

}
.click
{
display:none;
z-index:70;
}
#click_A
{
    position: absolute;
    top: 70px;
    left: 224px;
    width: 4px;
    height: 137px;
    border-radius: 40px;
    background: #0072bf;
    -ms-transform: rotate(80deg);
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);


}
#click_B
{
    position: absolute;
    top: 26px;
    left: 424px;
    width: 4px;
    height: 292px;
    border-radius: 40px;
    background: #0072bf;
    -ms-transform: rotate(289deg);
    -webkit-transform: rotate(289deg);
    transform: rotate(289deg);
}
#click_F
{
    position: absolute;
    top: 43px;
    left: 170px;
    width: 4px;
    height: 256px;
    border-radius: 40px;
    background: #0072bf;
    -ms-transform: rotate(249deg);
    -webkit-transform: rotate(249deg);
    transform: rotate(249deg);

}
#click_C
{
position:absolute;
top:98px;
left:332px;	
width:4px;
height:120px;
border-radius:40px;
background:#0072bf;
-ms-transform: rotate(307deg); /* IE 9 */
-webkit-transform: rotate(307deg); /* Safari */
transform: rotate(307deg);
}
#click_E
{
position:absolute;
top:10px;
left:382px;	
width:4px;
height:200px;
border-radius:40px;
background:#0072bf;
-ms-transform: rotate(80deg); /* IE 9 */
-webkit-transform: rotate(80deg); /* Safari */
transform: rotate(80deg);
}
#click_D
{
position:absolute;
top:35px;
left:324px;	
width:4px;
height:110px;
border-radius:40px;
background:#0072bf;
-ms-transform: rotate(43deg); /* IE 9 */
-webkit-transform: rotate(43deg); /* Safari */
transform: rotate(43deg);
}
#click_G
{

    position: absolute;
    top: -12px;
    left: 200px;
    width: 4px;
    height: 200px;
    border-radius: 40px;
    background: #0072bf;
    -ms-transform: rotate(293deg);
    -webkit-transform: rotate(293deg);
    transform: rotate(293deg);
	
}
.distance
{
position:absolute;
text-align:center;
width:600px;
color:#0099ff;
font-weight:bold;
font-size:18px;
bottom:3px;
}
#circle_A:hover,#circle_F:hover,#circle_B:hover,#circle_C:hover,#circle_G:hover,#circle_D:hover,#circle_E:hover
{
opacity:1;
}
.top1
{
position:relative;
width:600px;
margin-top:10px;
border:0px solid red;
}
.top1 span{display:inline-block;vertical-align:middle;}
.top1 img{vertical-align:middle}
.circleB{
   /*  -webkit-transition: all 18.5s linear;
    -moz-transition: all 18.5s linear;
    -o-transition: all 18.5s linear;
    -ms-transition: all 18.5s linear;
    transition: all 18.5s linear; */
}

.circle_B {    
    top:-103px;
    left:238px;	 
    width: 640px;
    height: 640px;
	z-index:2;

}
.circle_C {    
    
	top:-94px;
    left:95px;	 
    width: 570px;
    height: 570px;
    z-index:2;
}

.circle_D {    
    
  top:-223px;
  left:87px;	 
  width: 550px;
  height: 550px;
  opacity:1;
  z-index:2;
}
.circle_E {    
     
	position:absolute;
	 top:-155px;
    left:229px;	 
    width: 500px;
    height: 500px;
    z-index:2;
}

.circle_A{
   
    top:-70px;
    left:-65px;	
    width: 440px;
    height: 440px;
 	z-index:2;
}

.distance_cal
{
  /*  -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    transition: opacity 1s linear;   */ 
    //border-radius: 100%;
   /*  color: white;
    text-align: center; */
    font-family: 'Arial';
    -webkit-transform: scale( 0 );
    -moz-transform: scale( 0 );
    -o-transform: scale( 0 );
    -ms-transform: scale( 0 );
    transform: scale( 0 );  
	position:absolute;
	background:url("../images/animate.png") no-repeat;
    background-size:100% 100%;
	opacity:1;
	//background:transparent;

}
.circle_F{
    top:-85px;
    left:-250px;	
    width: 600px;
    height: 600px;
	z-index:2;
}
.circle_G
{
    top:-250px;
    left:-193px;	
    width: 600px;
    height: 600px;
    z-index:2;
}
#loadInfo {
    position: absolute;
    width: 176px;
    height: 50px;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    font-size: 24px;
    text-align: center;
}
        #main_cont{
                opacity: 0;
        }