body {
	margin: 0;
    background-color: #afb4bb;
    height: 100%;
}

@font-face {
    font-family: 'DBSansBlack';
    
    src: 
         url('./DB_Font/DBScreenHead-Black.woff') format('woff'); /* Modern Browsers */
         
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;}
    
@font-face {
    font-family: 'DBSansRegular';
    
    src: 
         url('./font/DBSans-Regular.woff') format('woff'); /* Modern Browsers */
         
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;}

@font-face {
    font-family: 'DBSansBold';
    
    src: url('./font/DBSans-Bold.woff') format('woff'); /* Modern Browsers */
         
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}
    
@font-face {
    font-family: 'DBSansCondBold';
    
    src: url('./font/DBSansCond-Bold.woff') format('woff'); /* Modern Browsers */
         
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}
    
@font-face {
    font-family: 'DBSansCondRegular';
    
    src: url('./font/DBSansCond-Regular.woff') format('woff'); /* Modern Browsers */
         
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


.info {
	color: #FFF;
	position: absolute;
	padding: 20px 0 0 20px;
}

a {
	color: inherit;
}

label {
	cursor: pointer;
}

.ruler {	
	pointer-events: none;	
	position: absolute;	
	top: 0;	
	left: 0;	
	right: 0;	
	bottom: 0;	
	background: url( "./ruler.png" ) no-repeat 0 0;	
}
.label {
				color: #FFF;
				font-family: sans-serif;
				padding: 2px;
				background: rgba( 0, 0, 0, .6 );
			}
.annotation {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin-left: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    border-radius: .5em;
    font-size: 12px;
    line-height: 1.2;
    transition: opacity .5s;
    
    }

.annotation_2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin-left: -77px;
    margin-top: -71px;
    width: 155px;
    height: 71px;
    display: none;
    }

.clickable {height: 100%; width: 100%; left: 0; top: 0; position: absolute; z-index: 1;}

#f_cont {
position: absolute;
top: 10%;
left: 50%;
margin-left: -300px;
z-index: 100;
width: 600px;
height: 80%;
border-radius: 6px;
background-color: #FFF;
box-shadow: 0.3em 0.3em 0.5em 0 rgba(0, 0, 0, 0.4), 0.3em 0.3em 1em 0 rgba(0, 0, 0, 0.25);
display: none;
		}

#frame1 {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 6px;
border: none;
		}

#pin_B {
z-index: 3;
		}

#pin_A2 {
margin-top: 71px;
		}

#loading-screen {
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.6;
 	transition: 2s opacity;
    pointer-events: none;
}

#loading-screen.fade-out {
    opacity: 0;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #f0f3f5;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #e9e9e7;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #656a74;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}			

.sf {position:absolute; background: url(../img/t01.png); cursor: pointer;}
.sfb {position:absolute; cursor: pointer;}
.popup {position:absolute; box-shadow: 0.3em 0.3em 0.5em 0 rgba(0, 0, 0, 0.4), 0.3em 0.3em 1em 0 rgba(0, 0, 0, 0.25); border-radius: 0.5em; overflow: hidden; display: none; z-index: 3}
#Tip1 {position: absolute; display: none; width: 245px; height: 108px; z-index: 600; border-radius: 5px;}
#HL_Head {position: absolute; left: 0; top: 0; width: 100%; height: 80px; background-color: #FFF; opacity: 0.2}
#DB_dig {position: absolute; left: 30px; top: 20px; width: 268.4px; height: 42px}
#sf_ues {left: 20px; bottom: 20px; width: 130px; height: 42px}
#txt_xp {position: absolute; left: 50%; bottom: 70px; width: 290px; height: 25px; margin-left: -145px}
#nav {position: absolute; left: 50%; bottom: 20px; width: 380px; height: 42px; margin-left: -190px}
#reset {position: absolute; right: 20px; bottom: 20px; width: 198px; height: 42px; cursor: pointer}
#FS_go, #FS_stop {position: absolute; right: 20px; top: 90px; width: 198px; height: 42px; cursor: pointer}
#DB_E {position: absolute; right: 20px; bottom: 80px; width: 198px; height: 54px; cursor: pointer}
#DB_E_2 {position: absolute; left: 20px; top: 90px; width: 198px; height: 54px; cursor: pointer; display: none}
#info_allg {position: absolute; right: 20px; top: 20px; width: 198px; height: 42px; cursor: pointer}
#Intro {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 590px; height: 490px; z-index: 200}
#info_A {position: absolute; right: 60px; top: 50%; transform: translateY(-50%); width: 306px; height: 472.6px;}
#info_B {position: absolute; right: 60px; top: 50%; transform: translateY(-50%); width: 306px; height: 406.9px;}
#info_B_N {position: absolute; right: 60px; top: 50%; transform: translateY(-50%); width: 306px; height: 446px;}
#info_C {position: absolute; right: 60px; top: 50%; transform: translateY(-50%); width: 306px; height: 406.9px;}
#info_D {position: absolute; right: 60px; top: 50%; transform: translateY(-50%); width: 306px; height: 452.6px;}
#info_E {position: absolute; right: 60px; top: 50%; transform: translateY(-50%); width: 306px; height: 552.5px;}
#pop_02 {position: absolute; right: 30px; top: 100px; width: 422px; height: 258px; z-index: 4; display: none}
#pop_01 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 583px; height: 405px; z-index: 4; display: none}


@media screen and (max-width: 850px) {
#HL_Head {height: 60px}
#DB_dig {left: 20px; top: 14px; width: 201.3px; height: 31.5px;}
#sf_ues {left: 15px; bottom: 15px; width: 97.5px; height: 31.5px}
#txt_xp {bottom: 52.5px; width: 218px; height: 18.75px; margin-left: -109px}
#nav {bottom: 15px; width: 285px; height:31.5px; margin-left: -142.5px}
#reset {right: 15px; bottom: 15px; width: 148.5px; height: 31.5px}
#FS_go, #FS_stop {right: 15px; top: 67.5px; width: 148.5px; height: 31.5px}
#DB_E {right: 15px; bottom: 60px; width: 148.5px; height: 40.5px; display: none}
#DB_E_2 {left: 15px; top: 67.5px; width: 148.5px; height: 40.5px; display: block}
#info_allg {right: 15px; top: 14px; width: 148.5px; height: 31.5px}
#Intro {width: 442px; height: 367px}
#info_A {right: 20px; width: 214.2px; height: 330.82px;}
#info_B {right: 20px; width: 214.2px; height: 284.83px;}
#info_B_N {right: 20px; width: 214.2px; height: 312.2px;}
#info_C {right: 20px; width: 214.2px; height: 284.83px;}
#info_D {right: 20px; width: 214.2px; height: 316.82px;}
#info_E {right: 20px; width: 214.2px; height: 386.75px;}
#pop_02 {right: 15px; top: 70px; width: 295.4px; height: 180.6px;}
#pop_01 {width: 438px; height: 304px;}
#f_cont {margin-left: -225px; width: 450px;}
.annotation { margin-left: -20px; margin-top: -20px; width: 40px; height: 40px;}
.annotation_2 {margin-left: -58px; margin-top: -53px; width: 116px; height: 53px;}
}

@media screen and (max-width: 600px) {
#txt_xp {bottom: 97.5px}
#nav {bottom: 60px}
#DB_E {display: none}
}