html,
 body {
     font-family: 'HMHMedium', "sans-serif";
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     background-color: black;
     display: flex;
 }

@font-face{ font-family:'HMHLight';
	src: url('../fonts/HMHLight.eot');
	src: url('../fonts/HMHLight.eot?#iefix') format('embedded-opentype'),
    url('../fonts/HMHLight.svg') format('svg'),
    url('../fonts/HMHLight.woff') format('woff'),
    url('../fonts/HMHLight.woff2') format('woff2');
}
@font-face{ font-family:'HMHMedium';
	src: url('../fonts/HMHMedium.eot');
	src: url('../fonts/HMHMedium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/HMHMedium.svg') format('svg'),
    url('../fonts/HMHMedium.woff') format('woff'),
    url('../fonts/HMHMedium.woff2') format('woff2');
}
@font-face{ font-family:'HMHBold';
	src: url('../fonts/HMHBold.eot');
	src: url('../fonts/HMHBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/HMHBold.svg') format('svg'),
    url('../fonts/HMHBold.woff') format('woff'),
    url('../fonts/HMHBold.woff2') format('woff2');
}




 div {
     word-break: keep-all;
     list-style: none;
 }

 #renderCanvas {
     position: absolute;
     width: 100%;
     height: 100%;
     /*     touch-action: none;*/
 }

 #attribution {
     position: absolute;
     margin: 10px;
     color: white;
     font-family: sans-serif;
     text-shadow: 1px 1px 3px #000000;
 }


 #mainLogo {
     position: fixed;
     margin-top: 20px;
     margin-left: 70px;

 }

 #menu-btn {
     position: fixed;
     margin-top: 12px;
     margin-left: 10px;
     cursor: pointer;
 }

 .div-center-align {
     position: fixed;
     width: 100%;
     height: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     overflow: hidden;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     pointer-events: none;
 }

 .brochureFrame {
     pointer-events: all;
     border-radius: .25rem;
     background-color: #fff;
     border: 1px solid rgba(0, 0, 0, .125);
     box-sizing: border-box;
     height: 90%;
     width: 90%;
     max-width: 1000px;
     max-height: 800px;
     box-shadow: 0 20px 60px black, 0 -2px white;
     z-index: 0;
 }

 .cancel-btn {
     pointer-events: all;
     cursor: pointer;
     z-index: 1;
 }

 .brochureFrame .cancel-btn {
     float: right;
     padding-right: 10px;
     /*     right: 0px;*/
     /*     right: 80px;*/
     /*     display: block;     */
 }

 .brochureFrame.hidden {
     display: none;
     pointer-events: none;
     z-index: -99;
 }

 #brochure-btn {

     /* width: 60px; */
     /* height: 60px;  */
     /* border: 2px solid white; */
     /* background-color: white; */
     align-items: center;
     transform: translate(0px, 220px);
     /* bottom: 100px; */
     border-radius: 40px;
     justify-content: space-around;
 }

 .brochure-btn-hidden {
     display: none;
     pointer-events: none;
     z-index: -99;
 }

 .brochure-btn-display {
     display: inline-flex;
     pointer-events: all;
     z-index: 999999;
 }


 #brochure-btn:hover {
     cursor: pointer;
 }

 #brochure-btn .div-img img {

width: 42px;
height: 42px;
filter : drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
/* box-shadow: 5px 5px 5px #000; */
     /* display: flex; */
     /* background-image: url("../resource/bg/sub_visual_02.jpg");
    background-size: cover;
    background-repeat: no-repeat;     */
    /* width: 100%;
    height: 100%; */
    /* background-image: url("../resource/icon/downloadIcon.png"); */
    /* background-size: cover; */
    /* background-repeat: no-repeat;     */
 }


 #brochure-btn .div-text {

     color: white;
     align-self: center;
 }




 /* 모바일 Device : 0 ~ 640 */
 @media screen and (max-width: 640px) {

     #mainLogo {
         position: fixed;
         margin-top: 28px;
         margin-left: 55px;
         width: 20x;
         height: 20px;
     }

     #menu-btn {
         position: fixed;
         margin-top: 18px;
         margin-left: 10px;
         widows: 40px;
         height: 40px;
         cursor: pointer;
     }

/*
     .fnQmjl {
         width: 50px;
         bottom: 100px;
     }
*/
 }

 /* Tablet Device : 641 ~ 768 */
 @media screen and (min-width:641px) {

     #mainLogo {
         position: fixed;
         margin-top: 20px;
         margin-left: 70px;

     }

     #menu-btn {
         position: fixed;
         margin-top: 12px;
         margin-left: 10px;
         cursor: pointer;
     }
 }



 /* Desktop Device : 1024 이상 */
 @media screen and (min-width:1024px) {

     #mainLogo {
         position: fixed;
         margin-top: 20px;
         margin-left: 70px;

     }

     #menu-btn {
         position: fixed;
         margin-top: 12px;
         margin-left: 10px;
         cursor: pointer;
     }
 }