@charset "utf-8";
/*************************************************************************
* @ 서비스명   : commonui
* @ 파일명     : /css/commonui.css
* @ 페이지설명  : commonui.css
**************************************************************************/

.header{background:#fff;position:sticky;top:0;width:100%;z-index:999;}
.header .layout{display:flex;align-items:center;justify-content: space-between;padding:20px 30px;}
.header .layout .left{display:flex;gap:45px;}
.header .layout .left img{width:130px;margin-right:30px;}
.header .layout .left .menu{font-size:17px;}
.header .layout .right{display:flex;gap:12px;}
.header .layout .right .signin{font-size:15px;padding:10px 20px;border:1px solid#a5a5a5;border-radius:8px;}
.header .layout .right .id{font-size:15px;padding:10px 20px;}
.header .layout .right .dashboard{font-size:15px;padding:10px 20px;border:1px solid#173b57;background:#173b57;border-radius:8px;color:#fff;}

.bottom .layout{border-top:1px solid #efefef;margin:0 auto;padding:50px 30px;}
.bottom .layout .line{display:flex;justify-content: space-between;margin-bottom:25px;}
.bottom .layout .line .left{font-size:21px;font-weight:800;}
.bottom .layout .line .right{display:flex;gap:30px;font-size:16px;}
.bottom .layout .form{margin-top:5px;display:flex;gap:20px;}
.bottom .layout .form span{font-size:15px;}
.bottom .layout .copy{margin-top:25px;font-size:14px;}

.top{display:none;}




@media all and (max-width:1200px) {
.header{display:none;}

.bottom .layout{padding:80px 20px 40px 20px;}
.bottom .layout .line{flex-direction: column;gap:18px;}
.bottom .layout .line .left{font-size:17px;}
.bottom .layout .line .right{gap:15px;font-size:15px;}
.bottom .layout .form{flex-direction:column;gap:7px;margin-top:8px;}
.bottom .layout .form span{font-size:14px;}
.bottom .layout .copy{font-size:13px;}

.top{display:block;position:sticky;top:0;width:100%;background:#fff;z-index:99999;}
.top_menu{display: flex;align-items: center;justify-content: space-between;height:55px;padding: 0 20px;background: #fff;position:sticky;top: 0;left: 0;width: 100%;z-index: 1000;box-sizing: border-box;}
.top_menu .m_logo img {height:21px;display:block;}
.top_menu .m_menu_btn {width:20px;height:17px;border:0;background:none;padding:0;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;}
.top_menu .m_menu_btn span {display: block;width: 100%;height:2px;background: #222;border-radius: 10px;    }
.mobile_menu {position: fixed;top: 0;right: -100%;width:85%;max-width: 320px;height: 100vh;background: #fff;z-index: 1002;transition: right 0.3s ease;box-shadow: -4px 0 12px rgba(0, 0, 0, 0.12);box-sizing: border-box;}
.mobile_menu.on {right: 0;}
.mobile_menu .mobile_menu_top {height:50px;padding: 0 20px;display: flex;align-items: center;justify-content: space-between;}
.mobile_menu .mobile_menu_top img {height:21px;display: block;}
.mobile_menu .m_close_btn {border: 0;background: none;font-size:27px;line-height: 1;cursor: pointer;color: #222;}
.mobile_menu .line{display:flex;margin:15px 20px 0px 20px;border:1px solid#f1f1f1;border-right:0px;border-radius: 8px;}
.mobile_menu .line .m_login{border-right:1px solid#f1f1f1;font-size:16px;text-align:center;width:100%;padding:13px 0px;}
.mobile_menu .line .m_email{display:block;border-right:1px solid#f1f1f1;font-size:16px;text-align:center;width:100%;padding:13px 0px;}
.mobile_menu .mobile_nav {padding:15px 20px 20px 20px;display: flex;flex-direction: column;gap: 4px;}
.mobile_menu .mobile_nav a {display: block;padding: 14px 12px;font-size: 16px;color: #222;text-decoration: none;border-radius: 8px;}
.mobile_menu .mobile_nav a.on,.mobile_nav a:hover {background: #173b57;color: #fff;}

.menu_dim {display: none;position: fixed;inset: 0;background: rgba(0, 0, 0, 0.45);z-index: 1001;}
.menu_dim.on {display: block;}
body.menu_open {overflow: hidden;}
}