@charset "utf-8";
@font-face {
    font-family: 'TmonMonsori';
    src: url('https://cdn.jsdelivr.net/gh/wizfile/font/TmonMonsori.eot');
    src:url('https://cdn.jsdelivr.net/gh/wizfile/font/TmonMonsori.woff') format('woff');
    font-style: normal;
}

body, html {margin: 0; padding: 0;font-family: Arial, sans-serif;}
body {background-color: #000;overflow-x: auto; overflow-y: scroll;user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For Internet Explorer/Edge */}


.modal {position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.8);}
.modal-content {position: relative; margin: auto; padding: 0; max-width: 60%; max-height: 60%; display: flex; justify-content: center; align-items: center; top: 25%;}
#modal-media-container {position: relative; display: inline-block;}
#modal-media-container img {display: inline-block; width: auto; max-width: 100%; max-height: 100%;}

.close {position: absolute; top: -60px; right: 0; z-index: 10; cursor: pointer; font-size: 50px; padding: 10px; color: #fff;}


#youtube {width: 100%;height: 100%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.35);z-index: 1000;}
#youtube .close {width: 100px;height: 100px; position: absolute;top: -10%;right: -10%;color: #fff;font-size: 2em;cursor: pointer}
.frame {width: 960px; height: 540px;background-color: transparent;position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%)}

@media (max-width:3840) {
    .modal-content {max-width: 100%; max-height: 100%;}
    #youtube .close {top: -2%!important;right: -6%!important;font-size: 3em}
}

#project_box {width: 1920px;background-color: #383333;margin: auto}

#container {width: 1920px;margin: auto;}

.teaser {position: relative;width: 100%;height: 950px;background: url('../img/main/main_bg.jpg') no-repeat center center;background-size: cover;display: flex;align-items: center;justify-content: center;color: #fffaf5;border-radius: 30px;overflow: hidden}

.main-logo {position: absolute;left: 205px;bottom: 150px}
.main-logo img {height: 632px}




@media(min-width:3839px){
    #project_box {width: 3840px;}
    #container {width: 3840px;margin: auto;}
    .teaser {width: 100%;height: 1902px;}

    .main-logo {left: 400px;top: 320px}
    .main-logo img {height: 1264px}

    
}