@charset "utf-8";

/* html,body {background: #edf3f7!important;} */
body {background: #fff; overflow-y: auto;}
body::-webkit-scrollbar {display: none;}


/* font */
@import url(font-awesome.min.css);

/* header */
header {width: 100%; transition:top 1s linear; position: fixed;top: 0; left: 0; z-index: 1002; background-color: #1a1a1b;}
.header_top_notice {padding:10px 2rem; background:#333;}
.header_top_notice p {text-align: center; color: #fff; font-size: 14px; margin-bottom:0 !important;}
#recentNotice {color: #fff; font-size: 14px;}
.header_top_notice p span {padding: 0 5px; font-size:1.1rem;}
.header_menu {position: relative;width: 100%; height: 70px;padding: 5px 20px; overflow: hidden; border-bottom: 1px solid #fff;}

/* border:solid; border-image-slice: 1; border-width:1px; border-image-source: linear-gradient(135deg, rgba(41,173,55,0.5) 0%, rgba(32,79,157,0.5) 100%); 그래디언트라인 */
.header_menu >a {float: left; padding: 8px; position:absolute; top:50%; transform:translateY(-50%);}
#logo_3 {display: none;}


/* background: linear-gradient(to right, #29AD37, #204F9D); */
/* background: linear-gradient(135deg, rgba(41,173,55,0.8) 0%, rgba(32,79,157,0.8) 100%); */

.header_menu >a img {width: 160px; position: absolute; top: 50%; transform: translateY(-50%);}
.header_link {width: 60rem; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); display:flex; justify-content: space-between;}
.header_link a {height: 35px; line-height: 35px; padding: 0; float: left; font-size: 14px; font-weight: 400; color: #fff;}
.header_link a .headerTitle_wrap {font-size: 16px; font-weight: 600; line-height: 35px; white-space: nowrap; display: flex; align-items: center; position: relative; color: #fff;}
/* 헤더 호버시 밑줄 효과 */
.header_link a .headerTitle_wrap::after {content: ""; width: 100%; height: 3px; border-radius: 40px; position: absolute; left: 0; bottom: -5px; background-color: #fff; transform: scaleX(0);  transition: 0.5s ease;}
.header_link a .headerTitle_wrap:hover::after {transform: scaleX(1);}
.header_link a .headerTitle_wrap i {font-size: 24px; margin-right: 10px;}
/* .header_link a .headerTitle_wrap .header_icon{width: 25px; height: 25px; margin-right: 5px; object-fit: contain; object-position: center;} */

/* .logout_btn {width: 90px;display: block;text-align: center;background: #777;color: #fff; box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.2);} */
.logout_btn {text-align: center; color: #fff;}
#mobile_header_wrap, .mobile_menu_btn{display: none}

/* layout */
.container_wrap {position: relative;background-size: 100%;margin-left: 210px;padding: 80px 10px 20px 50px; transition: 0.4s ease-in-out; overflow-y: auto;}
.container_wrap::-webkit-scrollbar {display: none;}
.container_wrap.active  {margin-left: 60px !important; transition: 0.4s ease-in-out;}


/* 팝업창 */
/* .ui-draggable .ui-dialog-titlebar {background: #fff;color: #777;} */
.ui-dialog .ui-dialog-buttonpane {text-align: center !important;}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {float: none !important;}
.ui-widget-overlay {background: rgba(0,0,0,0.6)!important; opacity: 1!important;z-index: 99999!important;}
.ui-widget.ui-widget-content{z-index: 999999!important;}


/* overlay */
#overlay {z-index: 10000;}
#overlay2 {z-index: 100;left: 0;}
.tui-grid-border-line-bottom,.tui-grid-border-line-top,.tui-grid-layer-state {z-index: auto !important;}

/* footer */
.copy {font-size: 12px;color: #fff;text-align: center;padding: 15px 10px ;width: calc(100% - 370px);margin: 0 60px 0 310px; background-color:transparent; display: none;}
.copy p{font-family: 'Noto Sans KR', sans-serif;}



@media (max-width:1440px) {
    .header_link {width: 50rem !important;}
    .header_link a .headerTitle_wrap {font-size: 14px;}
    .header_link a .headerTitle_wrap i {font-size: 20px; margin-right: 5px;}
}

@media (min-width:1045px) {
    #mobile_header_wrap{display: none !important;}
}

@media (max-width:1044px) {
    #wrapper nav,.header_link,.header_menu .nav {display: none;}
    .header_menu >a img {width:120px;}
    .header_menu {width: 100%;margin: 0;border-radius: 0; box-shadow: none; padding: 5px 20px;}
    /* box-shadow: 1px 1px 2px #4a6f63;  */
    #logo_2 {display: none;}
    #logo_3 {display: block;}
    .container_wrap.active {margin-left: 0px !important; transition: all .3s ease;}

    /* mobile nav */
    .header_link {top: -200px;}
    #mobile_header_wrap, .mobile_menu_btn{display: block;}
    #mobile_header_wrap {z-index: 9999;display: none;position: fixed;top: 0;right: 0;bottom: 0;margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;}
    #mobile_header_wrap .mobile_menu {z-index: 9999; top: 0;right: 0;background: #fff;height: 100%;width: 100%;float: right;}

    .m_black_bg .close{position: absolute;left: 50%;transform: translateX(-50%);top: 15.5px;}

	.mobile_menu_btn .manual{position:absolute;top:50%;transform:translateY(-50%);color:#fff;right:50px;}
	.mobile_menu_btn .m_menu{position:absolute;right:0;top:50%;transform:translateY(-50%);color:#fff;padding-right:16px;}
	.mobile_menu_btn .hd_logout{ position:absolute; right:158px; top:50%;transform:translateY(-50%);color:#fff; }
	.mobile_menu_btn .hd_blog{ position:absolute; right:86px; top:50%;transform:translateY(-50%);color:#fff; }
	.mobile_menu_btn .hd_shop{ position:absolute; right:122px; top:50%;transform:translateY(-50%);color:#fff; }
    .mobile_menu .close{position: fixed;left: 2%;top: 15.5px;}
    .mobile_menu .top{width: 100%;height: 65px;border-bottom: 1px solid #f8f8f8;display:flex; align-items:center;padding: 0 20px 0 60px; justify-content: space-between;}
    .mobile_menu .top .my_btn {color: #766BFB;}
    .mobile_menu .top .my_btn i {color: #766BFB;}
    .mobile_menu .top .sideCorpName {color: #766BFB;}
    .mobile_menu .top .sideCorpName i {color: #766BFB;}
    .mobile_menu .top  .logoutWork{background-color: #766BFB; color:#fff; display: inline-block; padding: 8px 24px; border-radius: 10px; font-size: 13px;}
	.mobile_menu .bottom{background-color: black; display: flex; align-items: center; padding: 0px 20px; }
    .mobile_menu .bottom a + a{margin-left: 1px;}
	.logout_btn {padding: 14px; border-radius: 12px; white-space: nowrap; width: 24.25%;}
	.infoStatus {font-size: 0.9rem;}

    /* footer */
    .copy {margin-left: 0;font-size: 10px;width: 100%;}
}

@media (max-width:480px) {
	.mobile_menu .bottom{padding: 0px 8px; }
    .mobile_menu .bottom a + a{margin-left: 10px;}
	.logout_btn {padding: 10px; border-radius: 12px; white-space: nowrap;font-size: 14px;}
}


@media (max-width:440px){
	.header_btn{
 		font-size: 13px
	}
}
 
@media (max-width:405px){
	.header_btn{
 		font-size: 11px
	}
}