@charset "utf-8";
.main-bn{ height:75vh; }
.main-bn .main-bn-in .main-bn-img{ width:100%; height: 75vh; background:url(../img/sub1/image3.jpg) no-repeat; background-size:cover; background-position:center; }
.main-bn .main-bn-txt{ width: auto; height: auto; background-color:rgba(0, 0, 0, 0.0); text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.main-bn .main-bn-txt .line{ display:none; }
.main-bn .main-bn-txt .main-menu{ display:none; }
#layout{margin:20px auto 160px; text-align: center; width: 1400px; position: relative; height:auto; }
#layout img{width: 100%; }
.text2{margin-top:100px;}
.map_text{font-size:40px; margin-bottom: 40px; letter-spacing: 2px;}



.modal_con{ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100vw; height: 100vh; visibility: hidden; opacity:0; background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);  transition: all .3s ease-out; z-index: 999; }
.modal_con.popup{ visibility: visible; opacity: 1; }
.modal_con .modal_bg{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100vw; height: 100vh; visibility: hidden; opacity:0; transition: all .3s ease-out; }
.modal_con .btn_con{ position: relative; top: 20%; left: calc(50% - 24px); width: 48px; height: 48px; padding: 12px; border-radius: 12px; cursor: pointer; z-index: 9999; transition: all .3s ease-in-out; display: none; }
.modal_con .btn_con:hover{ filter:invert(1); }
.modal_con .btn_con .btn_close{ position: absolute; top: 23px; left: 5px; width: 80%; height: 4px;  background: #fff; border-radius: 10px; transform: rotate(45deg);  }

.modal_con .btn_con .btn_close:after{ content:''; left:0; position: absolute; width: 100%; height: 4px;  background: #fff; border-radius: 10px; transform: rotate(-90deg); }

.modal_con .modal_bg.popup{ visibility: visible; opacity: 1; }
.modal_con .modal{ position: fixed; left: 50%; top: 0; transform: translateX(-50%); width: 100%; height: 100%; overflow: auto; }
.modal_con .modal .main_con{ position: absolute; width: 80%; height:80%; top:50%; margin:0 auto; left: 50%; border-radius: 20px; transform: translate(-50%, -50%); text-align: center; padding: 60px 0; overflow:scroll;}
.modal_con .modal .main_con img.main{ width:100%; height: 100%; border-radius: 20px; transition: all .3s ease-out; background-size:cover;}

@media screen and (max-width: 1600px){
    .modal_con .modal .main_con{width: 90%; }
}
@media screen and (max-width: 1400px){
    #layout{ width: calc(100% - 10px); }
}
@media screen and (max-width: 1024px){
    .map_text{font-size:34px; margin-bottom: 30px;}
    .modal_con .modal .main_con img.main{ width: 80%; }
}
@media screen and (max-width: 600px){
    .map_text{font-size:28px; margin-bottom: 20px;}
    .modal_con .modal .main_con img.main{ width: 100%; }
    .modal_con .btn_con{ top:26%; display: block; }
    html, body{ cursor:default !important;}
}