/* HEADER */
#header { position: fixed; top: 20px; z-index: 999; width: 100%; }
#header h1 a{ position: relative; left: 30px; line-height: 70px; flex: 1; color: #333; font-size:20px }
#header h1 img { max-width:60px; height: 28px; vertical-align:middle; }
#header .cate-list { position: absolute; right: 50px; top: 20px; }
#header .cate-list li { text-transform: uppercase; text-align: right }
#header .cate-list li a {color: #333}
#header .cate-list .btn { color: #333; padding: 0; font-size: 1em; text-transform: uppercase; font-family:'Archivo',sans-serif;  }
#header .cate-list .dropdown-menu.show { display: block; position: relative!important; transform: translate3d(0, 0, 0)!important; padding: 5px;border:1px solid; border-radius:8px }
#header .cate-list .dropdown-menu { font-size: 1em; color: #333; float: unset; border: none; border-radius: unset; }
#header .cate-list .dropdown-item { padding: 3px 6px; border-radius: 6px }
#header .btn-nav { transition: all .5s ease-in-out; position: fixed; top: 15px;left:30px; z-index:600; width:60px; height: 60px; overflow: hidden }
#header .btn-nav .btnBurger { transition: all .5s ease-in-out; background: #fff; border: 3px solid #333; padding: 10px; border-radius: 8px; width: 100%; height: 40px;}
#header .btn-nav .btnBurger:before,
#header .btn-nav .btnBurger:after { content:''; position: absolute; height: 2px; transition: all .5s ease-in-out; background: #41B5FF; }
#header .btn-nav .btnBurger.dark:before,
#header .btn-nav .btnBurger.dark:after { background: #333; }
#header .btn-nav .btnBurger:before { width: 30px; transform: translate(4px, 2px); }
#header .btn-nav .btnBurger:after { width: 20px; transform: translate(4px, 12px); }
#header .btn-nav .bg-w { transition: all .8s ease-in-out; }
#header .btn-nav .navOpen { opacity:0; transform: translateY(80px); transition: all .5s ease-in-out; padding: 0 60px; width: 100%; position: absolute; }
#header .btn-nav .navOpen .nav-list li { font-size: 2.7em; font-weight: bold; }
#header .btn-nav .navOpen li a { color: #333; }
#header .btn-nav .navOpen .board a{ font-size: 1.7em; }
#header .btn-nav .navOpen .btnMember { margin-top: 30px; }
#header .btn-nav .navOpen .btnMember a { font-size: 1.3em; font-weight: bold; padding-right: 20px; color: #333; }
#header .btn-nav.open { height: 400px; width: 100%; background: #fff; top: 0 }
#header .btn-nav.open .bg-w { background: #fff; border-bottom: 1px solid #333; }
#header .btn-nav.open .Logo a { display:none }
#header .btn-nav.open .btnBurger{ border: 0px; }
#header .btn-nav.open .btnBurger:before { height: 2.3px; transform: rotate(45deg) translate(32px, 16px); background: #333; }
#header .btn-nav.open .btnBurger:after { width: 30px; height: 2.3px; transform: rotate(-45deg) translate(-16px, 32px); background: #333; }
#header .btn-nav.open .navOpen { opacity:1; }

#M_member_loginmenu {padding-top: 5px; display:block;}
#M_member_loginmenu a {display: block; font-size:.9em; color:#41B5FF!important}


.mobile { display: none }
@media all and (max-width:860px){
.mobile { display: block }
.f-h5 { font-size: 1em; }
#header { top: 0; }
#header h1 a { left: 70px; font-size: 30px; }
#header .menuArea { display: none; }
#header .btn-nav .navOpen { padding: 0 30px; }
#header .btn-nav.open { height: 100vh;left:15px }
#titleArea h2 { font-size: 2.5em; }
#M_member_loginmenu a {display: inline-block; margin-right: 10px;}
}