@charset "UTF-8";
:root{
    --gray-0:   #FFFFFF;
    --gray-50:  #E6E9ED;
    --gray-100: #C4C9CF;
    --gray-200: #8E939C;
    --gray-300: #646A73;
    --gray-400: #474C54;
    --gray-500: #2E3238;
    --gray-600: #23282E;
    --gray-700: #121418;
    --gray-800: #090A0D;
    --gray-900: #000000;
    --gray-0-rgb:   255, 255, 255;
    --gray-50-rgb:  230, 233, 237;
    --gray-100-rgb: 196, 201, 207;
    --gray-200-rgb: 142, 147, 156;
    --gray-300-rgb: 100, 106, 115;
    --gray-400-rgb: 71, 76, 84;
    --gray-500-rgb: 46, 50, 56;
    --gray-600-rgb: 35, 40, 46;
    --gray-700-rgb: 18, 20, 24;
    --gray-800-rgb: 9, 10, 13;
    --gray-900-rgb: 0, 0, 0;

    --blue-50  : #EBF2FF;
    --blue-100 : #D1E1FF;
    --blue-200 : #6EA3FF;
    --blue-300 : #4A8CFF;
    --blue-400 : #2475FF;
    --blue-500 : #005EFE; /*base*/
    --blue-600 : #0052DE;
    --blue-700 : #0045BD;
    --blue-800 : #0553D9;
    --blue-900 : #003282;

    --dark-gray-50  : #F4F6F9;
    --dark-gray-100 : #D2D6DF;
    --dark-gray-200 : #ADB5C3;
    --dark-gray-300 : #757B89;
    --dark-gray-400 : #464D67; /*base*/
    --dark-gray-500 : #353C52;
    --dark-gray-600 : #2A3042;
    --dark-gray-700 : #1F2432;
    --dark-gray-800 : #141821;
    --dark-gray-900 : #0A0C11;

    --border-color01 : var(--dark-gray-100);
}

body::-webkit-scrollbar{width:4px; background: var(--gray-50);}
body::-webkit-scrollbar-thumb{background: var(--blue-500);}

.icon::before{display: inline-flex; content:''; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;}
.icon.arrow-top::before{mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Google Material Icons by Material Design Authors - https://github.com/material-icons/material-icons/blob/master/LICENSE --%3E%3Cpath fill='currentColor' d='M8.12 14.71L12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0L6.7 13.3a.996.996 0 0 0 0 1.41c.39.38 1.03.39 1.42 0'/%3E%3C/svg%3E");}
.icon.arrow-bottom::before{mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Google Material Icons by Material Design Authors - https://github.com/material-icons/material-icons/blob/master/LICENSE --%3E%3Cpath fill='currentColor' d='M8.12 9.29L12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0'/%3E%3C/svg%3E");}
.icon.arrow-right::before{mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Google Material Icons by Material Design Authors - https://github.com/material-icons/material-icons/blob/master/LICENSE --%3E%3Cpath fill='currentColor' d='M9.29 15.88L13.17 12L9.29 8.12a.996.996 0 1 1 1.41-1.41l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3a.996.996 0 0 1-1.41 0c-.38-.39-.39-1.03 0-1.42'/%3E%3C/svg%3E");}
.icon.arrow-left::before{mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Google Material Icons by Material Design Authors - https://github.com/material-icons/material-icons/blob/master/LICENSE --%3E%3Cpath fill='currentColor' d='M14.71 15.88L10.83 12l3.88-3.88a.996.996 0 1 0-1.41-1.41L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0c.38-.39.39-1.03 0-1.42'/%3E%3C/svg%3E");}

.header{position: fixed; left:0; top:0; width:100%; height:80px; z-index: 90000; border-bottom:1px solid var(--border-color01); background: var(--gray-0); z-index: 10000;}
.header .hd-inner{display: flex; justify-content: space-between; align-items: center; height:100%; padding:0 35px;}
.header .logo{font-size:21px; font-weight: 700;}
.header .menu{height:100%;}
.header .menu > ul{display: flex; gap:50px; height:100%;}
.header .menu > ul > li {position: relative; height:100%;}
.header .menu > ul > li > a{position: relative; display: flex; align-items: center; height:100%; padding:0 25px; font-size:18px; color:var(--dark-gray-500); font-weight: 600;}
.header .menu > ul > li > a::before{position: absolute; content:''; left:50%; bottom:calc(50% + 15px); transform: translateX(-50%); width:4px; height:0; background: var(--blue-500); transition: all .3s ease; z-index: 1;}
.header .menu > ul > li:hover > a::before{height:10px;}
.header .menu > ul > li > ul{position: absolute; left:50%; top:100%; transform: translateX(-50%); min-width:125px; background: var(--gray-0); border-radius: 15px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transition: all .3s ease;}
.header .menu > ul > li > ul::before{position: absolute; content:''; left:0; bottom:100%; width:100%; height:16px;}
.header .menu > ul > li > ul::after{position: absolute; content:''; left:50%; bottom:100%; transform: translate(-50%,50%) rotate(45deg); width:12px; height:12px; background: var(--gray-0); z-index: -1;}
.header .menu > ul > li:hover > ul{top:calc(100% + 15px); opacity: 1; visibility: inherit; z-index: 1;}
.header .menu > ul > li > ul > li{overflow: hidden;}
.header .menu > ul > li > ul > li:first-child{border-radius: 15px 15px 0 0;}
.header .menu > ul > li > ul > li:last-child{border-radius: 0 0 15px 15px;}
.header .menu > ul > li > ul > li > a{display: flex; justify-content: center; padding:12px; font-size:15px; transition: all .3s ease;}
.header .menu > ul > li > ul > li:hover > a{background: var(--blue-500); color:var(--gray-0) }
.header .site-map-btn{display: flex; flex-direction: column; width:32px; gap:6px; cursor: pointer; visibility: hidden; display: none;}
.header .site-map-btn::before,
.header .site-map-btn::after{content:''; width:100%; height:3px; background: var(--gray-900); transition: all .3s ease;}
.header .site-map-btn:hover::after{width:50%;}



.footer{background: var(--gray-700); white-space: nowrap;}
.footer .ft-inner{display: flex; flex-direction: column; max-width:1440px; width:100%; margin:0 auto; padding:65px 0; color:var(--gray-200)}
.footer .ft-top{display: flex; justify-content: space-between; align-items: flex-end; padding-bottom:15px; border-bottom:1px solid var(--gray-400);}
.footer .logo{font-size:24px; font-weight: 700; color:var(--gray-0); opacity: .75;}
.footer .ft-link{display: flex; flex-wrap: wrap; justify-content: space-between; gap:25px;}
.footer .ft-link a{color:var(--gray-0); opacity: .75; transition: all .3s ease;}
.footer .ft-link a:hover{color:var(--gray-0); opacity: .95;}
.footer .ft-bottom{display: flex; flex-wrap: wrap; justify-content: space-between; gap:25px; padding-top:15px;}
.footer .ft-info{display: flex; gap:25px; flex-wrap: wrap;}
.footer .ft-info li{line-height: 1;}
.footer .ft-info li .tit{color:var(--gray-50); font-size:14px;}
.footer .copyright{line-height: 1;}

.site-map{display: flex; justify-content: flex-end; position: fixed; left:0; top:0; width:100vw; height:100vh; z-index: 10000; background: rgba(0, 0, 0, .25); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: all .3s ease;}
.site-map.is-on{opacity: 1; visibility: initial;}
.site-map-inner{display: flex; width:35%; height:100%; padding:50px; background: var(--gray-0); box-shadow: 20px 0 40px rgba(0, 0, 0, .75); transform: translateX(100%); transition: all .3s ease;}
.site-map.is-on .site-map-inner{transform: translateX(0);}
.site-map .close{position: absolute; top:25px; right:25px; width:55px; height:55px; background: var(--blue-500); border-radius: 50%; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); cursor: pointer; transition: all .3s ease;}
.site-map .close:hover{background: #0045bd;}
.site-map .close::before{position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%) rotate(45deg); width:55%; height:1px; background: var(--blue-100);}
.site-map .close::after{position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%) rotate(-45deg); width:55%; height:1px; background: var(--blue-100);}
.site-map-body{display: flex; flex-direction: column; gap:25px; flex:1 1 0; min-height:0;}
.site-map-body h2{font-size:24px; font-weight: 700;}
.site-map-body .menu{flex:1 1 0; min-height:0; overflow: hidden; overflow-y: auto;}
.site-map-body .menu > ul{display: flex; flex-direction: column;flex:1;}
.site-map-body .menu > ul > li{display: flex; flex-direction: column; gap:15px; padding:25px 0; border-bottom:1px solid var(--gray-50);}
.site-map-body .menu > ul > li:last-child{border:0;}
.site-map-body .menu > ul > li > a{font-size:18px; font-weight: 600;}
.site-map-body .menu > ul > li > ul{display: flex; flex-wrap: wrap; --gap:15px; gap:var(--gap);}
.site-map-body .menu > ul > li > ul > li{width:calc((100% - (var(--gap) * 3)) / 4);}
.site-map-body .menu > ul > li > ul > li > a{font-size:15px; white-space: nowrap;}


.table-type1{display: block;}
.table-type1 table{table-layout: fixed; width:100%; border-top:2px solid var(--gray-500);}
.table-type1 table.center{text-align: center;}
.table-type1 table caption{display: none;}
.table-type1 table tr:hover{background: var(--blue-50);}

.table-type1 table th,
.table-type1 table td{padding:15px 0; border-bottom:1px solid var(--gray-50)}
.table-type1 table thead,
.table-type1 table thead:hover tr{background: #f5f5f5;}


.admin_board .board_list table{table-layout: fixed;}
.admin_board .board_list td .lnk{display: block; width:auto; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;}

@media (max-width:768px) {
    .table-type1{overflow-x: auto;}
    .table-type1 table{}
    .table-type1 table th, .table-type1 table td{padding:10px; font-size:14px; word-break: keep-all;}
}




@media (max-width:1440px) {
    .header {height:60px}
    .header .menu > ul{gap:25px;}
    .footer .ft-inner{width:90%;}
}

@media (max-width:1100px) {
    .header .menu > ul > li > a{padding:15px; font-size:16px;}
}

@media (max-width:1024px) {
    .header .menu{display: none;}
    .header .site-map-btn{visibility: initial; display: flex;}
    .site-map-inner{width:75%;}
    .footer .ft-inner{padding:45px 0;}
    .footer .ft-bottom{padding-top:35px;}
    .footer .ft-info{justify-content: center; align-items: center; width:100%;}
    .footer .ft-info li{text-align: center;}
    .footer .ft-top{flex-direction: column; justify-content: center; align-items: center; gap:15px; padding-bottom:25px;}
    .footer .ft-link{justify-content: center; align-items: center; gap:15px; font-size:14px;}
    .footer .ft-bottom{align-items: center; justify-content: center;}
    .footer .copyright{font-size:12px; font-weight: 300;}
}


@media (max-width:768px) {
    .header .hd-inner{padding:0 25px;}
    .header .logo{font-size:18px;}
    .footer .ft-info li:nth-child(1){white-space: initial; line-height: 1.4;}
    .site-map-body .menu > ul > li > ul > li{width:calc((100% - (var(--gap) * 2)) / 3)}
}


@media (max-width:550px) {
    .site-map.is-on .site-map-inner{padding:25px;}
    .site-map .close{top:15px; right:15px; width:45px; height:45px;}
    .admin_board .board_list{overflow-x: auto;}
    .admin_board .board_list table{width:600px !important;}
}

@media (max-width:425px) {
    .header{height:45px;}
    .header .hd-inner{padding:0 10px;}
    .header .logo{font-size:14px;}
    .header .site-map-btn{gap:4px;}
    .header .site-map-btn::before,
    .header .site-map-btn::after{height:2px;}
    .site-map-body .menu > ul > li > ul > li{width:calc((100% - (var(--gap) * 1)) / 2)}
}