html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;

    -webkit-touch-callout: none; 
  -webkit-user-select: none;   
  
  -moz-user-select: none;      
  -ms-user-select: none;      
  user-select: none;
  -webkit-user-drag:none;
}

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag:none;
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoCondensed-Bold';
    src: url('../fonts/RobotoCondensed-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoCondensed-Regular';
    src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype');
}


#f1{
    position: absolute;
    left: 6px;
    bottom: 250px;
    border: 1px solid #cccccc;
}

.map {
    height: 100%;
    width: 100%;
}

.intro {
    visibility:hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    left:0px;
    top:0px;
   
    /*background: url('../images/introBgr.jpg') no-repeat;
    background-repeat:no-repeat;*/
   
    z-index: 100000;
}
.bgtr{
    background: url('../images/introBgr2.jpg') no-repeat;
     background-size: 100% 100%;
}
.bgen{
    background: url('../images/intro_En2.jpg') no-repeat;
     background-size: 100% 100%;
}

#intro{
    cursor:pointer;
}
.introimg{
    height: 100%;
    width: 100%;
}

#loading{
    visibility:hidden;
  position: absolute;
    left:47%;
    top:40%;
}

#yukle{
    display: block;
    text-align:center;
    color:white;
   
     font-family:"RobotoCondensed-Regular";
    font-size:16px;
     margin-left: auto;
     margin-right: auto;
     padding-right: 40px;
    padding-top: 10px;
}
#pc{
    position: relative;
    display: block;
    /*background-color: rgba(152,136,222,0.50);*/
    height:100px;
    width:150px;
}
#percent{
    position: absolute; 
    display: block;
    top:0;
    left:0;
    color:white;

    font-family:"RobotoCondensed-Regular";
    font-size:92px;
   background: -webkit-linear-gradient(#eeeeee, #555555);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
   z-index: 100002;
}

#percents{
    position: absolute; 
    display: block;
    top:3px;
    left:3px;
    color:black;
   
    font-family:"RobotoCondensed-Regular";
    font-size:92px;
    opacity:0.4;
   z-index:100001; 
}
    

#percent2{
    color:white;
    
    font-family:"RobotoCondensed-Regular";
    font-size:42px;
   background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#percent2s{
    color:black;
   
    font-family:"RobotoCondensed-Regular";
    font-size:42px;
 
}
#datetxt{
    position: absolute;
    left:80%;
    bottom:45px;
    color:#012654;
    font-size:18px;
    font-family :'Roboto-Light';
    word-break: keep-all;
    white-space:nowrap;
}

#vertxt{
    position: absolute;
    left:80%;
    bottom:20px;
    color:#012654;
    font-size:18px;
    font-family :'Roboto-Medium';
    word-break: keep-all;
    white-space:nowrap;
}