@charset "UTF-8";
@import "/fonts/fonts.css";


/* main
========================================================================== */

body {
    background-color: var(--white);
    overflow-y: scroll;
}

#header{
    position: absolute;
    width: 95%;
    margin: auto;
}

#mainContainer {
    width: 100%;
    min-width: 21.875rem;
    max-width: 37.5rem;
    height: 100%;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: var(--black);
    overflow-y: auto;
    position: relative;
 }

 #mainContainer::before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    background-color: #8a8a8a1a;
    left: 50%;
    transform: translate(-300px);
 }

 #mainContainer::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    background-color: #8a8a8a1a;
    right: 50%;
    transform: translate(300px);
}
 
 
@media screen and (max-width: 1366px) {
    #mainContainer {
        max-width: none;
    }
    #mainContainer::before {
        content: none;
    }
    #mainContainer::after {
        content: none;
    }
 }
 
 #mapContainer {
    width: 100%;
 }
 
 /* 태블릿 크기 (768px) 미만일 때 */
 @media screen and (max-width: 767px) {
    #mainContainer {
        min-width: 18.75rem;   /* 300px */
    }
 }
 
 /* 모바일 크기 (480px) 미만일 때 */
 @media screen and (max-width: 479px) {
    #mainContainer {
        min-width: 16.25rem;   /* 260px */
    }
 }

 .content {
    flex: 1;
 }