@charset "utf-8";

@import url("/font/webfonts_gong.css");
@import url("/font/dingbat_xeicon.css");

html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; }

.mo_btn {display:none; position:fixed; right:10px; top:10px; z-index:100; width:60px; height:60px; background:#0052A5 url("../img/menu.png") no-repeat center center; font-size:0; box-shadow:0 4px 10px rgba(0,0,0,0.2); border:none; outline:none; border-radius:8px;}

.float_logo {display:none;}

.menu_wrap {flex:none; width:300px; height:100vh; background:#0052A5; margin:0; padding:0; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;}
.menu_wrap * { font-family:"gong"; font-weight:300;}

.menu_wrap .logo_area {background:#fff; padding:20px 16px; display:flex; flex-direction:row; justify-content:flex-start; align-items:center;}
.menu_wrap .logo_area h1 {display:block; margin:0; padding:0;}
.menu_wrap .logo_area h1 img {display:block;}
.menu_wrap .logo_area .close_btn { width:50px; height:50px; margin-left:auto; background:#0052A5 url("../img/close.png") no-repeat center center; font-size:0; border-radius:8px; border:none; outline:none; display:none;}
.menu_wrap .menu_area {overflow:hidden; padding:24px 8px 24px 16px; flex:1;}
.menu_wrap .menu_area .inner {overflow-y:auto; height:100%; padding-right:16px;}
.menu_wrap .menu_area .inner::-webkit-scrollbar {width:5px;}
.menu_wrap .menu_area .inner::-webkit-scrollbar-thumb {background:#F0F0F04D;}
.menu_wrap .menu_area .inner::-webkit-scrollbar-track {background:#779BFF;}
.menu_wrap .menu_area a {color:#fff; text-decoration:none;}
.menu_wrap .menu_area ul {margin:0; padding:0; list-style:none;}
.menu_wrap .menu_area .depth1 > li + li {margin-top:10px;}
.menu_wrap .menu_area .depth1 > li > span {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; height:52px; padding:3px 24px 0 24px; border:1px solid #F8F8F899; box-sizing:border-box; border-radius:16px; font-size:18px; transition:0.3s;}
.menu_wrap .menu_area .depth1 > li:has(.depth2) > a::after {content:"";}
.menu_wrap .menu_area .depth2 {margin:5px 0 15px;}
.menu_wrap .menu_area .depth2 > li {border-bottom:1px solid #C2DCFE80; padding:3px 0;}
.menu_wrap .menu_area .depth2 > li > a {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; height:44px; padding:2px 16px 0 16px;  box-sizing:border-box; font-size:16px; transition:0.3s; opacity:0.8;}
.menu_wrap .menu_area .depth2 > li > a::before {content:""; display:block; width:3px; height:3px; background:#fff; margin-right:10px;}
.menu_wrap .menu_area .depth2 > li > a:hover {font-weight:500; border-color:#C2DCFE; opacity:1;}
.menu_wrap .menu_area .depth2 > li > a.on {background:#fff; color:#000; border-radius:8px;}
.menu_wrap .copyright {font-size:12px; color:#a3a3a3; padding:0 16px; word-break:keep-all; display:none;}

@media screen and (max-width:1280px) {
    body {display:block;}
    .mo_btn {display:block;}
    .float_logo {display:block; position:fixed; left:10px; top:10px; opacity:0.5;}
    .menu_wrap {position:fixed; right:-300px; top:0; transition:0.5s;}
    .menu_wrap.open {right:0;}
    .menu_wrap .logo_area .close_btn {display:block;}
}