:root {
    --LMainWidth: 360px;
    --AMainWidth: 700px;
    --DfAMainWidth: 700px;
}

body { overflow: hidden; }

#Main { position: relative; display: flex; height: 100%; justify-content: space-between; }
#LMain { position: relative; z-index: 12; flex: none; width: var( --LMainWidth ); height: 100%; padding: 0px; box-shadow: 5px 0px 5px rgba( 0,0,0,0.3 ); }
#LMain h1 { display: block; }
#LMain a.Logo {display: block; margin-bottom: 50px; width: 100%; padding: 50px 30px 25px; text-align: center; }
#LMain a.Logo img { width: 100%; }
#LMain .Title { padding-bottom: 50px; font-size: 1.2em; color: #FFF; line-height: 35px; text-align: center; letter-spacing: 3px; font-weight: bolder; text-shadow: 0px 3px 3px rgba( 0,0,0,0.3 ); }
#LMain .Menu {  }
#LMain .Menu ul { margin: 0px; padding: 0px; }
#LMain .Menu ul li { margin: 20px 0px; padding: 0px; width: 100%; list-style-type: none; }
#LMain .Menu ul li a.MA { display: flex; align-items: center; position: relative; padding: 15px 30px; }
#LMain .Menu ul li a.MA:focus { background-color: rgb(0 0 0 / 15%); }
#LMain .Menu ul li a.MA:hover { background-color: rgb(0 0 0 / 15%); }
#LMain .Menu ul li a.MA.This { background-color: rgb(0 0 0 / 25%); }
#LMain .Menu ul li a.MA.This:before { content: ""; position: absolute; right: 0px; top: calc( 50% - 10px ); width: 0; height: 0; border-color: transparent #4f6442 transparent transparent; border-style: solid; border-width: 10px 10px 10px 0; }
#LMain .Menu ul li a.MA img { width: 79px; }
#LMain .Menu ul li a.MA div { display: inline-block; padding-left: 15px; flex: 1; color: #FFF; font-size: 0.85em; text-align: left; text-shadow: 0px 3px 3px rgba( 0,0,0,0.3 ); }

#LMain .SubMenu { display: none; z-index: 3; position: absolute; top: 0px; right: -75px; width: 75px; height: 100%; background-color: #4f6442; box-shadow: 5px 0px 5px rgba( 0,0,0,0.3 ); }
#LMain .SubMenu.Open { display: block; }
#LMain .SubMenu > ul { display: block; margin: 0px; padding: 15px 0px; margin-top: 100px; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 100%); }
#LMain .SubMenu > ul > li { margin: 0px; width: 100%; padding: 10px 10px; list-style-type: none; }
#LMain .SubMenu > ul > li > a { display: block; padding: 5px; text-align: center; border-radius: 5px; }
#LMain .SubMenu > ul > li > a:hover { background-color: #394c2d;; }
#LMain .SubMenu > ul > li > a .material-symbols-outlined { display: block; color: #FFFFFF; font-size: 1.8em; }
#LMain .SubMenu > ul > li > a div { display: block; color: #FFFFFF; font-size: 0.8em; text-align: center; }
#LMain .CloseSubMenu { width: 100%; }

#NMain { position: fixed; z-index: 5; top: 0px; left: 0px; width: 0px; overflow: hidden; height: 100%; /*padding: 30px 20px;*/ padding: 0px; background-color: #e4fad3; /*transition: left .3s;*/ }
#NMain.Open { padding: 30px 20px; overflow: auto; box-shadow: 5px 0px 5px rgba( 0,0,0,0.3 ); }

#NMain .NMTop { display: block; width: 100%; text-align: right; }
#NMain .NMTop .CloseLightbox { display: inline-block; }
#NMain .NMTop .CloseLightbox .material-symbols-outlined { color: #347c44; }
#NMain .NMTop .NMTitle { margin: 0px 0px 25px; font-size: 1.15em; font-weight: bold; line-height: 1.5; color: #283f1c; text-align: center; }
#NMain .NMContents {}

#AMain { position: fixed; z-index: 5; top: 0px; left: 0px; width: 0px; overflow: hidden; height: 100%; /*padding: 30px 20px;*/ padding: 0px; background-color: #e4fad3; /*transition: left .3s;*/ }
#AMain.Open { padding: 30px 20px; overflow: auto; box-shadow: 5px 0px 5px rgba( 0,0,0,0.3 ); }

#AMain .AMTop { display: block; width: 100%; text-align: right; }
#AMain .AMTop .CloseLightbox { display: inline-block; }
#AMain .AMTop .CloseLightbox .material-symbols-outlined { color: #347c44; }
#AMain .AMTop .AMTitle { margin: 0px 0px 25px; font-size: 1.15em; font-weight: bold; line-height: 1.5; color: #283f1c; text-align: center; }
#AMain .AMContents { padding: 0px 10px; }


.GIcon { display: none; align-items: center; justify-content: center; position: absolute; z-index: 13; width: 40px; height: 40px; border-radius: 50%; background-color: #347c44; box-shadow: 0px 5px 5px rgba( 0,0,0,0.3 ); }
.GIcon:hover { background-color: #0f521e; }
#MenuMobile { top: 15px; left: 15px; }
#Info { display: flex; bottom: 15px; right: 15px; }
#MenuClose { top: 15px; left: 15px; }
.LightBox { display: none; position: fixed; z-index: 11; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba( 0,0,0,0.7 ); }

.LightBoxContent { position: relative; }
.LightBoxContent .CloseLightbox { position: absolute; right: 10px; top: 10px; }
.LightBoxContent .CloseLightbox .material-symbols-outlined { display: block; color: #347c44; font-size: 1.8em; }
.LightBoxContent .MainTitle { width: 100%; padding-top: 35px; text-align: center; line-height: 55px; }

.LightBoxContent ol { padding-right: 10px; }
.LightBoxContent ol li { padding: 5px 0px; font-size: 0.75em; }

.LightBoxContent .Fun { text-align: center; } 
.LightBoxContent .Fun button { background-color: #347c44; color: #FFF; border: none; }
.LightBoxContent .Fun button:hover { background-color: #0f521e; }


#RMain { position: relative; z-index: 1; flex: 1; padding-left: 75px; height: 100%; transition: .1s; }

#RMain.AMainOpen { flex: none; width: calc( 100% - var( --LMainWidth ) - var( --AMainWidth ) ); }

/* Google Map UI Start */
#Stage { 
    position: absolute; z-index: 2;
    width: 100%; height: 100%;
    width: calc( 100% - 75px );
}
#SrchPlaceKW {
    margin: 6px 6px 6px 9px ; padding: 6px; font-size: 0.85em; width: 350px;
    border: 1px #999 solid; border-radius: 2px;
    background-color: #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.24), 0 1px 6px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.24), 0 1px 6px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.24), 0 1px 6px rgba(0, 0, 0, 0.12);    
}

.FEMBox {
    width: 100%;
    line-height: 27px;
    font-size: 0.75em;
    text-align: center;    
}
.FEMBox button {
    padding: 3px 9px;
    color: #FFF;
    border: #FFF 0px solid;
    border-radius: 3px;
    cursor: pointer; 
}
.FEMBox button.Y {
    background-color: #00C853;
}
.FEMBox button.N {
    background-color: #999;
}
.FEMBox button.Wait {
    background-repeat: no-repeat;
    background-position: 9px 50%; 
    background-image: url(../../__/i/loader.gif);
}

#GuidBtn {
    padding: 3px 9px;
    color: #FFF;
    border: #FFF 0px solid;
    border-radius: 3px;
    cursor: pointer;
    background-color: #00C853; 
}
/* Google Map End */

@media screen and ( max-width: 1920px ) {

:root {
    --LMainWidth: 275px;
    --AMainWidth: 500px;
    --DfAMainWidth: 500px;
}

#LMain a.Logo { padding: 20px 20px 15px; }
#LMain .Menu ul li a.MA { padding: 15px 20px; }
#LMain .Menu ul li a.MA img { width: 60px; }
#LMain .Menu ul li a.MA div { font-size: 0.8em; }

}

@media screen and ( max-width: 1550px ) {

    :root {
        --LMainWidth: 275px;
        --AMainWidth: 450px;
        --DfAMainWidth: 450px;
    }

}

@media screen and ( max-width: 1024px ) {

#LMain { position: absolute; left: calc( 0px - var( --LMainWidth ) ); transition: left .3s; }
#LMain.Open { left: 0px; }


#MenuMobile { display: flex; }
#MenuClose { display: flex; }

.LightBox.Open { display: block; }

#RMain { flex: none; width: 100%; }

#RMain.AMainOpen { flex: none; width: 100%; }

}

@media screen and ( max-width: 500px ) {
	#MenuMobile { top: 9px;	left: 9px; }
	#Info { bottom:9px; right: 9px; }

	#LMain { left: calc( ( 100% - 60px ) * -1 ); width: calc( 100% - 60px ); }

	#LMain .SubMenu { right: -60px;	width: 60px; }
	#LMain .SubMenu ul { margin-top: 100px;	}
	#LMain .SubMenu ul li { padding: 10px 5px; }
	#RMain { padding-left: 60px; }

    /* Google Map UI Start */
    #Stage { 
        width: calc( 100% - 60px );
    }

}