@charset "UTF-8";

.skip_navi{display: none;}

.header{position: relative; width:100%; height:60px; padding: 0 50px; border-bottom:1px solid #ddd; z-index: 10000;}
.hd_container{display: flex; align-items: center; justify-content: space-between; height:100%;}
.hd_container .logo{display: flex; align-items: center; height:100%; font-size:22px; font-weight: 700; color:inherit; text-decoration: none;}
.hd_container .logo .logo-inner{display: flex; align-items: baseline;}
.hd_container .logo .logo-gcms{margin-left:6px; font-size:10px; font-weight: 400; opacity: .85;}
.hd_container .logo:hover{color:#0045bd; font-weight: 500;}
.hd_container .logo:hover .logo-gcms{opacity: 1;}
.hd_container nav > ul{display: flex;}
.hd_container .top_menu{display: flex;}
.hd_container .content_my{display: flex;}
.hd_container nav{display: flex; height:100%;}
.hd_container nav > ul{display: flex; height:100%;}
.hd_container nav > ul > li{position: relative; display: flex; height:100%; transition: all .3s ease;}
.hd_container nav > ul > li::before{position: absolute; content:''; left:0; bottom:0; width:0; height:3px; background: #0045bd; transition: all .3s ease;}
.hd_container nav > ul > li:hover::before{width:100%;}
.hd_container nav > ul > li > a{display: flex; align-items: center; padding:0 25px; font-size:16px; font-weight: 400;}
.hd_container nav > ul > li:hover > a{color:#0045bd; font-weight: 500;}
.hd_container nav > ul > li > ul{position: absolute; left:50%; top:calc(100% - 10px); transform: translateX(-50%); min-width:125px; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); border-radius: 15px; opacity: 0; visibility: hidden; transition: all .3s ease;}
.hd_container nav > ul > li:hover > ul {top:calc(100% + 10px); opacity: 1; visibility: inherit;}
.hd_container nav > ul > li > ul::before{position: absolute; content:''; left:0; bottom:100%; width:100%; height:12px;}
.hd_container nav > ul > li > ul li a{position: relative; display: flex; padding:10px 15px; white-space: nowrap; transition: all .2s ease;}
.hd_container nav > ul > li > ul li a:hover{background: color-mix(in srgb, #0045bd 5%, #fff 100%);}


.hd_container .my_info{display: flex; align-items: center; gap:10px;}
.hd_container .my_info ul{display: flex; align-items: center; gap:10px;}
.hd_container .my_info ul li a{display: inline-flex; border:1px solid #ddd; border-radius: 100px; padding:5px 12px; font-size:13px; transition: all .3s ease;}
.hd_container .my_info ul li a:hover{color:#fff; background: #0045bd; border-color:transparent;}
.hd_container .site_map_btn{display: none;}

.wrap{width:100%; height:100vh;}


.site_map{position: absolute; content:''; left:50%; top:0; transform: translate(-50%,0); z-index: 100000; width:100vw; background:#fff; padding:60px; transition: all .3s ease; display: none;}
.site_map.on{display: block; animation: site_map .3s linear forwards; animation-timing-function: ease;}
@keyframes site_map { 0%{opacity: 0;} 100%{opacity: 1;} }
.site_map .close{position: fixed; right:40px; top:40px; width:50px; height:50px; background:#0045bd; cursor: pointer;}
.site_map .close::before{position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%) rotate(45deg); width:50%; height:1px; background:#fff;}
.site_map .close::after{position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%) rotate(-45deg); width:50%; height:1px; background:#fff;}
.site_map .site_map_inner{max-width:1440px; width:100%; margin:0 auto; position: relative;}
.site_map .page_tit{margin-bottom:30px; color:var(--color--1);}
.site_map .site_map_menu{width:100%; min-height:100vh; border-top:2px solid #333;}
.site_map .site_map_menu a{display: flex; width:100%; padding: 10px; transition: 0.3s all ease;}
.site_map .site_map_menu a:hover{background:#0045bd; color:#fff; border-radius: 5px; box-shadow: 0 10px 20px rgba(0, 76, 152, .25); transform: scale(1.1);}
.site_map .site_map_menu > ul{display: flex; flex-direction: column; width:100%;}
.site_map .site_map_menu > ul > li{display: flex; border-bottom:1px solid #ddd; padding:30px 0;}
.site_map .site_map_menu > ul > li > ul{display: flex; flex-wrap: wrap; flex-grow: 1; width: 80%;}
.site_map .site_map_menu > ul > li > ul > li{width:calc(100% / 4);padding:0 20px; margin-bottom:30px;}
.site_map .site_map_menu > ul > li > ul > li > a{padding:10px;color:var(--color--1);}
.site_map .site_map_menu > ul > li > ul > li > a:hover{background:#0045bd; color:#fff; border-radius: 5px; box-shadow: 0 10px 20px rgba(0, 76, 152, .25);}
.site_map .site_map_menu > ul > li > ul > li > ul > li {font-size:16px; margin-bottom:20px;}
.site_map .site_map_menu > ul > li > ul > li > ul > li a{padding:0 10px;}
.site_map .site_map_menu > ul > li > ul > li > ul > li:last-child{margin:0;}
.site_map .site_map_menu h4{font-size:21px; width:20%; color:#0045bd;}
.site_map .site_map_menu h5{font-size:16px; font-weight: 700; margin-bottom:20px; padding:15px; background:#0045bd; color:#fff; border-radius: 5px; box-shadow: 0 10px 20px rgba(0, 76, 152, .25);}
.site_map .site_map_menu h5 a{color:#fff;}

footer{border-top:1px solid #ddd;}
footer .page_top{display: none;}
footer .footer_menu{display: flex; width:100%; max-width:1440px; width:100%; margin:0 auto; border-bottom:1px solid var(--color--2);}
footer .footer_menu ul{display: flex; align-items: center; height:60px; gap:20px;}
footer .footer_menu ul li a{color:var(--color--4); font-size:14px;}
footer .info{display: flex; justify-content: center; width:100%; padding:10px 0; margin:0 auto;}
footer .info .f_logo{display: none;}
footer .info ul {display: flex; gap:25px;}
footer .info ul li{font-size:13px; opacity: .75;}



.container{display: flex; width: 100%; gap:40px;}
.container.index{flex-direction: column;}
.container .sub_wrap{width:1440px; margin:0 auto; display: flex; gap:80px;}

.tab_menu{width:100%; margin-bottom:30px;}
.tab_menu > ul:first-of-type{width:100%; display: flex; gap:10px;}
.tab_menu > ul:first-of-type li a{display: flex; align-items: center; justify-content: center; padding:15px 20px; border:1px solid #ddd; font-size:14px; font-weight: 700;}
.tab_menu > ul:first-of-type li.on a{background:#0045bd; color:#fff; border:1px solid #0045bd;}
.tab_content{display: none;}
.tab_content.on{display: block; animation: tab_content .5s linear forwards; animation-timing-function: ease; opacity: 0;}
@keyframes tab_content { 0%{opacity: 0;} 100%{opacity: 1;} }

.tab_menu{margin-bottom:20px;}
.tab_menu.type2 > ul:first-of-type{gap:0; border-bottom:1px solid #ddd;}
.tab_menu.type2 > ul:first-of-type li{margin-left:-1px;}
.tab_menu.type2 > ul:first-of-type li a{border-bottom:0; position: relative; z-index: 1; background:#fafafa;}
.tab_menu.type2 > ul:first-of-type li:first-child{margin-left:0;}
.tab_menu.type2 > ul:first-of-type li.on a{background:#fff; color:#0045bd; border-color:#ddd; text-decoration: none;}
.tab_menu.type2 > ul:first-of-type li.on a::before{position: absolute; content:''; left:0; bottom:0; transform: translateY(50%); width:100%; height:3px; background:#fff; z-index: 1;}

#tab_menu{width:100%; margin-bottom:30px;}
#tab_menu > ul:first-of-type{width:100%; display: flex; gap:10px;}
#tab_menu > ul:first-of-type li a{display: flex; align-items: center; justify-content: center; padding:15px 20px; border:1px solid #ddd; font-size:14px; font-weight: 700;}
#tab_menu > ul:first-of-type li.on a{background:#0045bd; color:#fff; border:1px solid #0045bd;}
#tab_content{display: none;}
#tab_content.on{display: block; animation: tab_content .5s linear forwards; animation-timing-function: ease; opacity: 0;}
@keyframes tab_content { 0%{opacity: 0;} 100%{opacity: 1;} }

#tab_menu{margin-bottom:20px;}
#tab_menu.type2 > ul:first-of-type{gap:0; border-bottom:1px solid #ddd;}
#tab_menu.type2 > ul:first-of-type li{margin-left:-1px;}
#tab_menu.type2 > ul:first-of-type li a{border-bottom:0; position: relative; z-index: 1; background:#fafafa;}
#tab_menu.type2 > ul:first-of-type li:first-child{margin-left:0;}
#tab_menu.type2 > ul:first-of-type li.on a{background:#fff; color:#0045bd; border-color:#ddd; text-decoration: none;}
#tab_menu.type2 > ul:first-of-type li.on a::before{position: absolute; content:''; left:0; bottom:0; transform: translateY(50%); width:100%; height:3px; background:#fff; z-index: 1;}

/**  test */

.container .sub_layout,
.container .sub_layout .sub_in,
.container .sub_layout .sub_in .layout{display: flex; width:100%;}
.container .sub_layout .sub_in .layout.index{flex-direction: column;}

.container .sub_layout .sub_in .layout .nav {width:300px; padding:25px; color:#fff; border-right:1px solid #ddd;}
.container .sub_layout .sub_in .layout .nav .inner{display: flex; flex-direction: column; gap:25px;}
.container .sub_layout .sub_in .layout .nav h2{width:100%; padding:15px 0; font-size:24px; display: flex; align-items: center; justify-content: center; font-weight: 600; background:#0045bd; border-radius: 15px; box-shadow: 0 10px 30px rgb(0 76 152 / .25);}
.container .sub_layout .sub_in .layout .nav nav{ border-top:transparent;}
.container .sub_layout .sub_in .layout .nav nav > ul{display: flex; flex-direction: column; gap:10px;}
.container .sub_layout .sub_in .layout .nav nav > ul > li{border:1px solid #ddd; background:transparent; transition: all .3s ease; border-radius: 15px;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.on{background: color-mix(in srgb, #0045bd 7%, #fff 100%); border-color:transparent;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > a{display: flex; align-items: center; justify-content: space-between; padding:10px 15px; position: relative; font-size:14px; font-weight: 600;}
.container .sub_layout .sub_in .layout .nav nav > ul > li a i{width:20px; height:20px; position: absolute; right:5px; top: 50%; transform: translateY(-50%);}
.container .sub_layout .sub_in .layout .nav nav > ul > li a i::after{position: absolute; content:''; left:50%; top:calc(50% - 1px); transform: translate(-50%,-50%) rotate(45deg); width:25%; height:25%; border:1px solid var(--color--1); border-top:transparent; border-left:transparent;}
.container .sub_layout .sub_in .layout .nav nav > ul > li:last-child > a{border:0;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul{width:100%; display: none;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.on > ul{display: block;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li{width:100%; margin:0 auto; position: relative;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li.on::after{display: none;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li > a{display: flex; align-items: center; padding:15px 20px; justify-content: space-between; font-size:14px; position: relative;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li:last-child > a{border:0;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.on > a i{transform: translateY(-50%) rotate(180deg); display: none !important;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li.on{ opacity: 1;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li.on > a{font-weight: bold; color:#0045bd;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.on > a, .container .sub_layout .sub_in .layout .nav nav > ul > li a:hover{color:#0045bd; font-weight: 700;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.on a i::after{border-color:#0045bd}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li > ul{display: none;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li.on > ul{display: block;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li > ul > li{width:100%;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li > ul > li a{display: flex; padding:10px 30px; position: relative;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li > ul > li.on a{color:#0045bd; font-weight: 700;}
.container .sub_layout .sub_in .layout .nav nav > ul > li a i{display: none;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.depth1 a i{display: block;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.depth1 > ul > li a i{display: none;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.depth1 > ul > li.depth2 > a i{display: block !important; transform:translateY(-50%) rotate(0);}
.container .sub_layout .sub_in .layout .nav nav > ul > li.depth1 > ul > li.depth2.on > a i{transform:translateY(-50%) rotate(180deg); display: none !important;}
.container .sub_layout .sub_in .layout .nav nav > ul > li a::before{position: absolute; content:''; right:-6px; top:50%; transform: translateY(-50%); width:15px; height:15px; background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m14 18l-1.4-1.45L16.15 13H4v-2h12.15L12.6 7.45L14 6l6 6z'/%3E%3C/svg%3E") no-repeat center / 100%; opacity: 0; transition: all .3s ease;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.on a::before{display: none;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.on > a::after{position: absolute; content:''; right:10px; top:50%; transform: translate(-50%,-50%); width:7px; height:7px; background:#0045bd; border-radius: 50%;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li.on > a::after{position: absolute; content:''; right:10px; top:50%; transform: translate(-50%,-50%); width:7px; height:7px; background:#0045bd; border-radius: 50%;} 
.container .sub_layout .sub_in .layout .nav nav > ul > li a:hover::before{right:6px; opacity: 1;}
.container .sub_layout .sub_in .layout .nav nav > ul > li.depth1 > a::before{display: none !important;}
.container .sub_layout .sub_in .layout .nav nav > ul > li > ul > li.depth2 > a::before{display: none !important;}


.content_wrap{ flex:1 1 0; padding:50px;}

/**  test end */


#leftmenu{width:300px;  color:#fff; border-radius: 10px;}
#leftmenu h2{width:100%; height:135px; font-size:26px; display: flex; align-items: center; justify-content: center; font-weight: 700; background:#0045bd; border-radius: 15px 15px 0 0; }
#leftmenu nav{border-top:transparent; border-radius: 0 0 15px 15px; }
#leftmenu nav > ul{display: flex; flex-direction: column; gap:10px;}
#leftmenu nav > ul > li{border:1px solid #ddd; background:transparent; transition: all .3s ease; box-shadow:0 2px 10px -2px rgba(0,0,0,.1)}
/* #leftmenu nav > ul li:hover{background:rgba(0, 0, 0, .025);;} */
#leftmenu nav > ul > li > a{display: flex; align-items: center; justify-content: space-between; padding:15px 10px; position: relative; font-size:16px; font-weight: 700;}
#leftmenu nav > ul > li a i{width:20px; height:20px; position: absolute; right:5px; top: 50%; transform: translateY(-50%);}
#leftmenu nav > ul > li a i::after{position: absolute; content:''; left:50%; top:calc(50% - 1px); transform: translate(-50%,-50%) rotate(45deg); width:25%; height:25%; border:1px solid var(--color--1); border-top:transparent; border-left:transparent;}
#leftmenu nav > ul > li:last-child > a{border:0;}
#leftmenu nav > ul > li > ul{width:100%; display: none;}
#leftmenu nav > ul > li.on > ul{display: block;}
#leftmenu nav > ul > li > ul > li{width:100%; margin:0 auto; position: relative;}
#leftmenu nav > ul > li > ul > li.on::after{display: none;}
#leftmenu nav > ul > li > ul > li > a{display: flex; align-items: center; padding:15px 20px; justify-content: space-between; font-size:14px; position: relative; transition: all .3s ease;}
#leftmenu nav > ul > li > ul > li:last-child > a{border:0;}
#leftmenu nav > ul > li.on > a i{transform: translateY(-50%) rotate(180deg); display: none !important;}
#leftmenu nav > ul > li > ul > li.on{ opacity: 1;}
#leftmenu nav > ul > li > ul > li.on > a{font-weight: bold; color:#0045bd;}
#leftmenu nav > ul > li.on > a,#leftmenu nav > ul > li a:hover{color:#0045bd; font-weight: 700;}
#leftmenu nav > ul > li.on a i::after{border-color:#0045bd}
#leftmenu nav > ul > li > ul > li > ul{display: none;}
#leftmenu nav > ul > li > ul > li.on > ul{display: block;}
#leftmenu nav > ul > li > ul > li > ul > li{width:100%;}
#leftmenu nav > ul > li > ul > li > ul > li a{display: flex; padding:10px 30px; position: relative;}
#leftmenu nav > ul > li > ul > li > ul > li.on a{color:#0045bd; font-weight: 700;}
#leftmenu nav > ul > li a i{display: none;}
#leftmenu nav > ul > li.depth1 a i{display: block;}
#leftmenu nav > ul > li.depth1 > ul > li a i{display: none;}
#leftmenu nav > ul > li.depth1 > ul > li.depth2 > a i{display: block !important; transform:translateY(-50%) rotate(0);}
#leftmenu nav > ul > li.depth1 > ul > li.depth2.on > a i{transform:translateY(-50%) rotate(180deg); display: none !important;}
#leftmenu nav > ul > li a::before{position: absolute; content:''; right:-6px; top:50%; transform: translateY(-50%); width:15px; height:15px; background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m14 18l-1.4-1.45L16.15 13H4v-2h12.15L12.6 7.45L14 6l6 6z'/%3E%3C/svg%3E") no-repeat center / 100%; opacity: 0; transition: all .3s ease;}
#leftmenu nav > ul > li.on a::before{display: none;}
#leftmenu nav > ul > li > ul > li > ul > li.on a::after,#leftmenu nav > ul > li.on > a::after, #leftmenu nav > ul > li > ul > li.on > a::after{position: absolute; content:''; right:10px; top:50%; transform: translate(-50%,-50%); width:7px; height:7px; background:#0045bd; border-radius: 50%;}
#leftmenu nav > ul > li a:hover::before{right:6px; opacity: 1;}
#leftmenu nav > ul > li.depth1 > a::before{display: none !important;}
#leftmenu nav > ul > li > ul > li.depth2 > a::before{display: none !important;}

#content{width:1100px;}

#cur_loc_align {width:100%; margin-bottom:10px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:30px;}
#cur_loc_align ul{display: flex;}
#cur_loc_align ul li{margin-right:30px; position: relative; font-size:14px; color:#666;}
#cur_loc_align ul li i{width:15px; height:15px; display: flex; align-items: center; justify-content: center; position: relative; width:20px; height:20px;}
#cur_loc_align ul li i > svg{display: none;}
#cur_loc_align ul li i::before{position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%); width:15px; height:15px; content:''; background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6 19h3v-6h6v6h3v-9l-6-4.5L6 10v9Zm-2 2V9l8-6l8 6v12h-7v-6h-2v6H4Zm8-8.75Z'/%3E%3C/svg%3E") no-repeat center / 100%;}

#cur_loc_align ul li:last-child{margin:0;}
#cur_loc_align ul li::before{position: absolute; right:-15px; top:calc(50% + 1px); transform: translate(50%, -50%) rotate(45deg); content:''; width:5px; height:5px; border:1px solid var(--color--1); border-left: transparent; border-bottom:transparent}
#cur_loc_align ul li:last-child:before{display: none;}

/* location (게시판 브레드크럼) */
.location {margin-bottom: 20px;}
.location ul, .location ul li {display: inline-block; vertical-align: top;}
.location ul li {position: relative; color: #666; font-size: 14px;}
.location ul li + li::before {content: ""; display: inline-block; width: 4px; height: 7px; margin: 0 9px 0 3px; line-height: 18px; background: url(../images/ico_arrow_r_gray_4x7.png) no-repeat; vertical-align: 2px;}
.location ul li:last-child {color: #222;}
.location ul li a {display: inline-block; color: #666; font-size: 14px;}
.location ul li a:hover {color: #222; text-decoration: underline;}
.location ul li a.home {position: relative; padding-left: 19px;}
.location ul li a.home::before {content: ""; display: block; position: absolute; left: 0; top: 3px; width: 14px; height: 13px; background: url(../images/ico_home.png) no-repeat;}

.tit_1 {font-size: 24px; font-weight: 700; margin-bottom: 10px;}
.tit_1 + .tit_2 {margin-top: 5px;}
.tit_2 {font-size: 20px; font-weight: 600; margin-bottom: 20px; color: var(--color--1);}

.page_tit{font-size:28px; font-weight: 900;}

#page_info{font-size:14px;}
#page_info strong{color:#0045bd;}