@charset "utf-8";
html,body{height:100%;}
p,span,a,div {word-break:keep-all;}
.page-progress-outer{
    position:fixed;
    z-index:99;
    height:var(--page-infobar-height);
    top:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:1006;
}

.page-progress-outer .page-progress-bar{
    top:0;
    left:0;
    background-color:var(--page-infobar-bgcolor);
    position:absolute;
    height:var(--page-infobar-height);
    transition:width 0.3s ease;
}

#hd{
    position:relative;
    /*
    left:0;
    top:0;
    right:0;
    */
    z-index:1005 !important;
    border-bottom: 1px solid #ddd;    

}

.hd_flex{
	height:var(--gnb-height);
}

.m_control_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 4px;
}

.m_control_box > li > strong {
    color: #127c66;
}

.m_control_box li > a {
    display: flex;
    width: 37px;
    height: 37px;
    border: 1px solid #ddd;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.m_control_box li > a:hover {
    border-color: #127c66;
}

.m_control_box li > a > span {
}
.m_tab_titbox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* SNB */
.snb_wrap{
	position:absolute;
	z-index:999;
	left:0;
	right:0;
}
.fixed.snb_wrap{
	position:fixed;
}
.snb_wrap > .snb_inner{
	position:relative;
	background-color:#ffffff;
}
.snb_wrap > .snb_inner > .snb_ul{
	max-width:var(--max-width);
	margin:0 auto;
}

#snb_all_bg{
	position:fixed;
	left:0;
	right:0;
	background-color:#ffffff;
}

/* footer */
#ft{
    background-color:var(--footer-background);
}
#ft a
,#ft div
,#ft p
,#ft dt
,#ft dl
,#ft ul
,#ft ol
,#ft li{
    color:#818181;
}
#ft_wr {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 40px 0;
    position: relative;
    display: block;
    text-align: left;
}
#top_btn{
    color:#000000;
}

nav#gnb{flex:1; position:relative;font-family:var(--base-font); background-color:transparent; border-bottom: 1px solid transparent;}
#menu-pc.container-wrap{position:relative; z-index:99; }
#menu-pc .nav {width:100%;position:relative;}
#menu-pc .nav {list-style: none;margin: 0;padding: 0;text-transform:capitalize;display: flex; width: calc(100% - var(--gnb-height));}
#menu-pc .nav>li { flex:1; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }
#menu-pc .nav .gnb {display: block;text-align: center;position:relative;cursor:default;line-height:var(--gnb-height);padding:0px;font-size:1.125rem;transition:all 0.5s; color:#242424;}

#menu-pc .nav .gnb.current, #menu-pc .nav .gnb.active,#menu-pc .nav .gnb.on { font-weight:400; color:var(--n-color-blue);}
#menu-pc .nav .gnb.active,#menu-pc .nav .gnb.on { color:#242424; font-weight:700; }
#menu-pc .nav .gnb.current:before,#menu-pc .nav .gnb.active:before{content:'';width:100%;height:2px; background-color:var(--n-color-blue);position:absolute;left:0px; bottom:0px;}
#menu-pc .nav .gnb.on:before {
    content:''; 
    position:absolute; 
    width:10px; 
    height:10px;
    left:50%; 
    border-radius:50%;
    bottom:-4px; 
    -webkit-transform:translate(-50%,0); 
    -ms-transform:translate(-50%,0); 
    transform:translate(-50%,0);
    background-color:#ffcc00;
}

#menu-pc .nav .snb { display: none; position: absolute; z-index: 5; background-color:transparent; width: 100%;}
#menu-pc .nav .snb.current, .menu-pc.index .nav .gnb.active + .snb, .menu-pc.index .nav .snb:focus + .snb {background-color: rgba(0,0,0,.01); }
#menu-pc .nav .snb {border-style: solid;border-color: #ccc;border-width: 0px 0px 0px 0px;text-align: left;position: absolute;padding: 1em 0.5em;-webkit-box-sizing:border-box;box-sizing:border-box;}
#menu-pc .nav li:last-child .snb { border-right-width: 0px; }
#menu-pc .nav .snb a {display: block;width:100%;text-align: center;padding: 0.35em 0.1em;-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;line-height:1.5em;overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;padding-left: 8px;font-weight:400;}
#menu-pc .nav .snb a.depth1 {font-size:1.025rem;}
#menu-pc .nav .snb a.depth1.on {color:#000000;font-weight:600;}

/*#menu-pc .nav .snb a:before {content: '';width: 2px;height: 2px;background-color: var(--n-color-blue);border-radius: 2px;display: block;position: absolute;left: 0px;top: 0.75em;}*/
#menu-pc .nav .snb a { color: #444; }
/*#menu-pc .nav .snb a:before{content:'\f3d3 ';font-family:'Ionicons';}*/
/*
#menu-pc .nav .snb.current a, .menu-pc.index .nav .gnb.active + .snb a, .menu-pc.index .nav .snb:focus + .snb a { color:#444; }
#menu-pc .nav .snb.current a:hover, .menu-pc.index .nav .gnb.active + .snb a:hover, .menu-pc.index .nav .snb:focus + .snb a:focus { color:#fff; }
*/
#menu-pc .nav .snb a:hover { font-weight: 500; color: #000000;}
#hd_wrapper {background-color:#ffffff; transition: transform 0.3s ease, opacity 0.3s ease;  }
#hd_wrapper.fixed, #hd_wrapper.on{background-color:#ffffff; transition:all 0.5s;}
#hd_wrapper.fixed{
    position:fixed;
    left:0;
    right:0;
    top:0;
    transform: translateY(-20px);
    opacity: 0;
    animation: slideMenuDown 0.4s ease forwards;    
    border-bottom:1px solid #ddd;
}
/*
#hd_wrapper.fixed #logo > a > img
,#hd_wrapper.on #logo > a > img{
    filter:initial;
    transition:all 0.3s;
}
*/
#hd_wrapper.fixed #menu-pc .nav .gnb
,#hd_wrapper.on #menu-pc .nav .gnb{
	color:#242424;
	transition:all 0.3s;
}

#hd_wrapper.fixed .sub_box {border-bottom:1px solid #444; backdrop-filter:blur(10px);}

.hd_inner .sub_box {width:100%; background-color:rgba(255,255,255,1);border-bottom:1px solid #fff; position:absolute; z-index:10;display:none; top:var(--gnb-height); -webkit-box-shadow:0px 3px 6px rgba(0,0,0,.5); box-shadow:0px 3px 6px rgba(0,0,0,.5); backdrop-filter:blur(10px);}
.hd_inner .sub_box.current {-webkit-transition:height 0.1s ease;-o-transition:height 0.1s ease;transition:height 0.1s ease;}

/* C.I.P 완료 되면 로고나 엠블럼이라도... */
#gnb .sub_box .sub_bg {background-image:none; background-repeat:no-repeat;background-position:left bottom;height: 100%;width: 1200px;position: relative;left: 0;margin: 0 auto;}

@keyframes slideMenuDown {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


#menu-pc .treeview > a {position:relative;}
#menu-pc .treeview > a:after {display:block;content:'\f3d0';position:absolute;top:50%;right:10px;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);font-family:'Ionicons';}
#menu-pc .treeview.menu-open > a:after {content:'\f3d8';}

#menu-pc .nav  .menu-open > a, #menu-pc .nav  .menu-open > a:hover {color: #000;}

#menu-pc .treeview .treeview-menu{display:none;}
#menu-pc .nav  .active > .treeview-menu {}
/* #menu-pc .nav .treeview-menu {padding:0em; -webkit-box-shadow:0px 0px 8px inset rgba(0,0,0,.3); box-shadow:0px 0px 8px inset rgba(0,0,0,.3);} */
#menu-pc .nav .treeview-menu li > a {border-bottom: 1px solid #ddd;font-weight:400;font-size:0.95em;padding:.35rem; -webkit-box-sizing:border-box; box-sizing:border-box;}
#menu-pc .nav .treeview-menu li > a:hover,#menu-pc .nav .treeview-menu li > a:focus {color:#000000;}
#menu-pc .nav .treeview-menu li.on a{font-weight:700;}

.menu_all_pc {
    width:var(--gnb-height);
    height:var(--gnb-height);
    position:absolute;
    background-color:transparent;
    overflow:hidden; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box;
    right:0;
    top:0;
}
.menu_all_pc > a {font-size:50px;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#242424;}
.mobile-menu.open{
    background-color:transparent;
    border:none;
    font-size:24px;
    display:inline-block;
    vertical-align:middle;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 0;
    color: #666;
    height: 100%;
    width: 75px;
    background-color:transparent;
}
.mobile-menu.open{display:none;}

.mobile-menu.close{
    background-color:transparent;
    font-size:36px;
    color:#ffffff;
    border:0 !important;
}
/*
#logo > a > img{
    filter:grayscale(1) brightness(1000);
    transition:all 0.3s;
}
*/
.side_title {color:#fff;font-size:1rem;}
.side_title h2 {color:#fff; text-shadow:2px 2px 5px rgba(0,0,0,.3); font-size:2.5em; text-align:center; font-family:SegoeUI;font-weight:600;letter-spacing:-3px;line-height:1;}
.side_title p {font-size:1.5em;color: #fff;font-weight: normal;text-align:center;padding:1.25rem 0;letter-spacing: -1px;}

.sidebar_container {
    position: relative;
    height: 60px;
    background-color: rgba(255, 255, 255, 1);
    width: 100%;
    border-bottom: 1px solid #dfdfdf;
}
.sidebar_container.fixed{
    position:fixed;
    top:var(--gnb-height);
    background-color:#ffffff;
    backdrop-filter:blur(5px);
    z-index:5;
}

.side_menu_wrap_pc {position: relative;display:block;width:100%;z-index:3;left: 1px;text-align: center;}
.side_menu_wrap_pc .side_menu {margin:0 auto;display: inline-block;width:100%;}
.side_menu_wrap_pc .side_menu li {display:inline-block;}

.side_menu_wrap_pc .side_menu.ea1 li{width:100%;}
.side_menu_wrap_pc .side_menu.ea2 li{width:50%;}
.side_menu_wrap_pc .side_menu.ea3 li{width:33.33%;}
.side_menu_wrap_pc .side_menu.ea4 li{width:25%;}
.side_menu_wrap_pc .side_menu.ea5 li{width:20%;}
.side_menu_wrap_pc .side_menu.ea6 li{width:16.66%;}

.side_menu_wrap_pc .side_menu li > a {font-size:1.25rem;box-sizing:border-box;padding: 0 2rem;display:block;text-align:center;color: #333;transition:all 0.5s; font-weight:500;}
.side_menu_wrap_pc .side_menu li > a {line-height:60px; height:60px;position:relative;}
/* .side_menu_wrap_pc .side_menu li > a::after {content:'\f3d3';font-family:'Ionicons'; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:1.2em; color:#9c9c9c} */
/* .side_menu_wrap_pc .side_menu li > a::before{content:'';position:absolute;display:block;width:18px;height:18px;box-sizing:border-box;border:3px solid #2ebad1;background-color:#fff;box-shadow:0px 0px 4px rgba(0,0,0,.5);border-radius:50%;bottom:-9px;left:0;transition:all 0.5s;opacity:0;}
.side_menu_wrap_pc .side_menu li > a:hover::before{display:block;left:50%;transform:translateX(-50%);opacity:1;}
.side_menu_wrap_pc .side_menu li > a.on::before{content:'';position:absolute;display:block;width:18px;height:18px;box-sizing:border-box;border:3px solid #2ebad1;background-color:#fff;box-shadow:0px 0px 4px rgba(0,0,0,.5);border-radius:50%;bottom:-9px;left:50%;transform:translateX(-50%);transition:all 0.5s;opacity:1;}
*/
.side_menu_wrap_pc .side_menu li > a.on,.side_menu_wrap_pc .side_menu li > a.on:hover {color: #000;font-weight:700;}
.side_menu_wrap_pc .side_menu li > a:hover,.side_menu_wrap_pc .side_menu li > a:focus{color:#222;}
.side_menu_wrap_pc .side_menu li:first-child > a {border-top-width:0px;}
.side_menu_wrap_pc .side_menu li > a.on::after,.side_menu_wrap_pc .side_menu li > a.on:hover::after{color:#fff;}
.side_menu_wrap_pc .side_menu li > a:hover::after{color:#222;}
.side_menu_wrap_pc .snb_pos_info {position:absolute;display:block;width:18px;height:18px;box-sizing:border-box;border:3px solid var(--n-color-base);background-color:#fff;box-shadow:0px 0px 4px rgba(0,0,0,.0);border-radius:50%;bottom:-9px;left:0;transition:all 0.5s;}

.side_menu_wrap_mobile {display:none;}
.side_menu_current {display:none;}

.side_menu_wrap_pc .side_menu .snb3 {background-color:#fff;box-sizing:border-box;padding:0;display:none;}
.side_menu_wrap_pc .side_menu li.on .snb3{display:block;}
.side_menu_wrap_pc .side_menu .snb3 > div {box-sizing:border-box;padding:0.3rem 2rem; border-bottom:1px solid #ddd;}
.side_menu_wrap_pc .side_menu .snb3 > div > a {position:relative;display:block;padding:10px 0;}
.side_menu_wrap_pc .side_menu .snb3 > div > a::before{content:'- ';}
.side_menu_wrap_pc .side_menu .snb3 > div.on{background-color:#dfeffb;}
.side_menu_wrap_pc .side_menu .snb3 > div > a.on{color:#222;font-weight:bold;}

/* 라이트박스형 레이어 */
.lightbox {position:fixed; width:100%; height:100%; background-color:rgba(255,255,255,0.8);top:0;left:0; z-index:999;}
.lightbox > div {position:absolute; width:60%; box-sizing:border-box; top:50%;left:50%; transform:translate(-50%,-50%); background-color:#fff; border:1px solid #405988; box-shadow:0 0 10px rgba(0,0,0,0.6); margin:3px;}
.lightbox .layerCloseBtnBox {background-color:#00469d; color:#fff;}
.lightbox .layerCloseBtnBox {overflow:hidden; padding:10px;}
.lightbox .layerCloseBtnBox .layerCloseBtn {color:#fff;}
.lightbox .layerCloseBtnBox .layer_title {font-size:15px; color:#fff; float:left;}
.lightbox .layerCloseBtnBox .layerCloseBtn{float:right;}

/* 마우스 우측버튼 스타일 메뉴 */
.right_menu_box {width:230px; background-color:#eff1f3; padding:1em; border:1px solid #dadada; box-shadow:2px 2px 5px rgba(0,0,0,0.35); position:absolute; z-index:11;}
.right_menu_box:before{content:'';position:relative;overflow:auto;}
.right_menu_box a {color:#000; font-size:11px; text-decoration:none; padding-left:1em; display:block;}
.right_menu_box a:hover {color:#fff; background-color:#405988;}

/* 커스텀 Alert 사용법 Alert.render('메시지') */
#dialogoverlay{display: none;opacity: .8;position: fixed;top: 0px;left: 0px;background: #242424;width: 100%;z-index: 1001;}
#dialogbox{display: none;position: fixed;background: #fff;border-radius:2px;width: 90%;max-width: 550px;z-index: 1002;box-shadow: 0px 0px 20px rgba(0,0,0,.7);top: 30%;}
/* #dialogbox{filter: blur(.0px);backface-visibility: hidden;-webkit-font-smoothing: subpixel-antialiased; transform-origin: 0% 0; transform:perspective(1px) translateY(-30.4%) translateZ(0) scale(1.0);} */

#dialogbox > div{background:#FFF;margin: 3px;}
#dialogbox > div > #dialogboxhead{background-color: #242424;font-size: 1.1em;padding:5px 10px;color: #fff;}
#dialogbox > div > #dialogboxbody{background-color: #f5f5f5;padding:20px;color: #3c3b3b;font-size: 1.15em;}
#dialogbox > div > #dialogboxfoot{background-color: #f5f5f5;padding:10px;text-align:right;}
#dialogboxfoot button{padding:5px 20px;border: 1px solid #ccc;}

.coreditor-table{
    width:100%;
    border-collapse:collapse;
}

.page-sub-image{
    height:300px;
    position:relative;
    background-color:#cccccc;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    margin-top:0;
}
.page-sub-image[data-group="gridx0"]{ background-image:url(../page/img/subvisual_02.jpg?v=2025-06-16);}
.page-sub-image[data-group="gridx1"]{ background-image:url(../page/img/subvisual_01.jpg?v=2025-06-16);}
.page-sub-image[data-group="gridx2"]{ background-image:url(../page/img/subvisual_02.jpg?v=2025-06-16);}
.page-sub-image[data-group="gridx3"]{ background-image:url(../page/img/subvisual_03.jpg?v=2025-06-16);}
.page-sub-image[data-group="gridx4"]{ background-image:url(../page/img/subvisual_06.jpg?v=2025-06-16);}
.page-sub-image[data-group="gridx5"]{ background-image:url(../page/img/subvisual_05.jpg?v=2025-06-16);}
.page-sub-image[data-group="gridx6"]{ background-image:url(../page/img/subvisual_08.jpg?v=2025-06-16);}
.page-sub-image[data-group="gridx7"]{ background-image:url(../page/img/subvisual_09.jpg?v=2025-06-16);}

.page-sub-image h2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:3rem;
}
.page-sub-image h2 span{
    color:#ffffff;
}
#m_menu {
    display:none;
    width:0px; 
    overflow:hidden; 
    left:-110vw;
}
.tail-login-box{
    display:flex;
    align-items:center;
    font-size:14px;
    gap:10px;
}
#ft_catch{
    margin-bottom:0.7rem;
}
#ft_catch > img{
    max-width:300px;
}

.ft_content .ft_info{
    margin-bottom:10px;
}
.ft_content .ft_info > ul{
    display:flex;
    align-items:center;
    gap:1.5rem;
    margin-bottom:0.5em;
}
.ft_content .ft_info > ul > li{
    
}