@charset 'utf-8';

/* reset */
* {margin:0px; padding:0px;}
ul,ol,li {list-style:none;}
a {text-decoration:none;}

.cls-1 {
    fill-rule: evenodd;
    fill: #fff;
}

/*  gnb  */
#header {width:100%; border-bottom:1px solid rgb(77, 77, 77); position:relative; background-color: black; }
/*  로고  */
#header .logo { position: absolute; left:18px; font: bolder 20px/80px 'arial'; color:#fff;}
/*  메뉴  */
/*#header .inner {width:1180px; height:80px; left:180px;  }*/
#header .inner #gnb {position:absolute; bottom:0px; left:180px;}
#header .inner #gnb>li {float:left; position:relative;}
#header .inner #gnb>li>a {display:block; width:140px; height:80px; font:bold 16px/80px 'arial'; color:rgb(153, 153, 153); text-align:center;}
#header .inner #gnb>li>a:hover {background:#444; color:#fff;}
#header .inner #gnb>li>a.on {background:#444; color:#fff;}

/*  로그인  */
/*#header .log_in { position: absolute; width: 200px; height: 80px;  font:bold 16px/80px 'arial'; color: white;  text-align: center;right: 200px; transition: 0.3s;}*/
/*#header .start { position: absolute; width: 200px; height: 80px;   font:bold 16px/80px 'arial'; color: white; text-align: center; right:0px; transition: 0.3s;}*/
#header .log_in:hover { background-color: #444; transition: 0.3s;}
#header .start:hover { background-color: #444; transition: 0.3s;}

/* 2depth */
#header .inner #gnb>li>ul {position:absolute; top:80px; left:0px; z-index:2; display:none;}
#header .inner #gnb>li>ul>li>a {display:block; background:#444; width:140px; height:38px; font:14px/38px 'arial'; color:#bbb; text-align:center;}
#header .inner #gnb>li>ul>li>a:hover {color:orange;}
#header .gnb_right { width: 300px; position: relative;  }
#header .gnb_right>ul>li:nth-of-type(1) { left: 75%;  }
#header .gnb_right>ul>li:nth-of-type(2) { left: 85%; position: absolute; z-index: 2;}
#header .gnb_right>a { width: 150px; font: bold 16px/80px 'arial'; color: white; }

/*  게시판 상단 이미지  */
.sub_board_back { width: 100%;   margin:0px auto; }
.sub_board_back_inner { width: 100%; height:520px;  background:url(/sub_board/sub_board_imG/20201104_125159.png) no-repeat 0px -80px/cover; opacity: 0.7;}
.sub_board_back_inner h1 {  font:bold 240px/520px 'arial'; color: rgb(255, 255, 255); text-align: center; opacity: 0.7; text-shadow: rgb(0, 0, 0) 3px 3px 3px;}

/*  게시판 메뉴  */
.tab_wrap { width:100%;  min-height:100%;  position: relative; margin:0px auto; margin-top:100px}
button { background:none; border:0; outline:0;  cursor:pointer;  }
  .tab_menu_container { width: 1180px; display:flex; margin:0px auto; text-align: center; }
    .tab_menu_btn {    width:25%;  height:70px; border:1px solid rgba(211, 211, 211, 0.5);  font:bold 16px/1 'arial'; }
  .tab_menu_btn.on {   border-bottom:2px solid rgb(180, 180, 180); font:bold 20px/1 'arial';background-color: rgb(0, 0, 0); color:white;  }
  .tab_menu_btn:hover { background-color: lightgray;  border-bottom: 2px inset gray; }
  .tab_menu_btn.on:hover {background-color: black; color:white;}
  .tab_box { display:none;  padding:50px 0px; width:1180px; margin:0px auto; }
  .tab_box.on { display:block; }

/*  게시판 리스트  */
 .sub_list_wrap { width: 100%;  padding-bottom: 50px; }
 .sub_list_wrap span{   font: 13px/2 'arial' , 'sans-serif'; color:rgb(97, 97, 97);}
 .sub_list_wrap span>h4 {position: relative; font: bolder 20px/2 'Do Hyeon', 'arial' , 'sans-serif'; color:rgb(97, 97, 97); }
 .sub_list_wrap span>h4::after {position: absolute; content: ""; width: 100%; height:20px; background-color: #dfd0c6; left:0px;z-index: -1;  }
 .sub_list_wrap span>h5 { font: bold 16px/2 'Do Hyeon', 'arial' , 'sans-serif'; color:rgb(97, 97, 97); }
 .add_1px { margin:30px;}
 
 /* 공지 태그 */
 .sub_list_tag { margin-right: 20px; font: bold 14px/1 'arial';  }
 /* 태그 공지 */
 .sub_list_tag .tag_notice { padding: 5px 20px; border-radius:20px; border:1px solid  rgba(0, 0, 0, 0.350);  color: black; }
 /* 태그 업데이트 */
 .sub_list_tag .tag_update { padding: 5px 20px; border-radius:20px; border:1px solid  rgba(153, 0, 20, 0.350);  color: rgb(153, 0, 20); }
 /* 태그 이벤트 */
 .sub_list_tag .tag_event { padding: 5px 20px; border-radius:20px; border:1px solid  rgba(0, 138, 156, 0.350);  color: rgb(0, 138, 156);}
 /* 태그 개발노트 */
 .sub_list_tag .tag_note { padding: 5px 20px; border-radius:20px; border:1px solid  rgba(116, 0, 151, 0.350);  color: rgba(116, 0, 151);}


 /* 공지 타이틀 */
.sub_list_title { width: 70%; padding-left:10px; text-align: left;  }

 /* 공지 뷰 */
.sub_list_view { width: 100px; text-align: center; }

 /* 공지 날짜 */
.sub_list_day { width: 100px; text-align: center; }

/* footer */
#footer {width:100%; padding:100px 0px; background-color:#222;}
#footer .inner {width:1180px; margin:0px auto;}
#footer .inner::after {content:''; display:block; clear:both;}
#footer .inner h1 {float:left; font:bold 20px/1 'arial'; color:#999; }
#footer .inner .footermenu {float:right;}
#footer .inner .footermenu li {float:left; margin-right:30px;}
#footer .inner .footermenu li a {font:bold 15px/1 'arial'; color:#888;}
#footer .inner address {float:left; width:100%; margin-top:30px; border-top:1px solid #777; padding-top:40px; font:13px/1.7 'arial'; color:#888; letter-spacing:1px;}
#footer .inner p {float:left; margin-top:30px; width:100%; font:12px/1 'arial'; color:#777; letter-spacing:1px; }



@media(max-width:1023px) {
    #header {
        background-color: #111;
        position:fixed;
    }
        #header .inner{
            width:100%;
        }

        #header .fa-bars {
            color: #fff;
        }


    #footer {
        background-color: #111;
        padding: 20px 0;
    }
        #footer .inner {
            width: 100%;
        }
    .move_logo {
        filter: invert(1);
    }

    #footer .logo_wrap {
        justify-content: center;
    }

        #footer .logo_wrap img {
            width: 20%;
        }

    #footer .inner .footermenu li a {
        color: #fff;
    }

    #footer .inner address {
        color: #fff;
    }

    #footer .inner .footermenu {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        width: 100%;
    }

        #footer .inner .footermenu li {
            margin: 0;
            text-align: center;
            padding: 15px 0;
        }

            #footer .inner .footermenu li a {
                font-size: 14px;
            }

    #footer .inner address .address_wrap .inner_div {
        width: 100% !important;
        font-size: 10px;
    }

    #footer .inner p {
        color: #fff;
        font-size: 10px;
    }

    .gnb_tol_wrap {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 300px;
        background: #252525;
        left: -300px;
    }

    .gnb_wrap > li > a {
        width: 150px;
    }


    .pc_only {
        display: none;
    }

    .mo_column {
        display: block;
        text-align: center;
        grid-column-start: 1;
        grid-column-end: 3;
        background: #1d1d1d;
    }

    .gnb_wrap .mo_column a {
        width: 100%;
        height: 45px;
        line-height: 45px;
    }

    .gnb_tol_area {
        opacity: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.85);
        height: 100vh;
        top: 70px;
        position: fixed;
        display: block;
        overflow: hidden;
    }

        .gnb_tol_area.off {
            display: none;
        }

        .gnb_tol_area.on {
            display: block;
        }


/*content*/
    .tab_menu_container {
        width:100%;
        display:grid;
        grid-template-columns:33.33% 33.33% 33.33%;
    }
    .tab_menu_btn {
        width: 100%;
        font: inherit;
        font-size: 14px;
    }
    .tab_menu_btn.on {
        font:inherit;
        color:white;
        font-size:14px;
    }
    .tab_box {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .tab_menu_btn {
        font:inherit;
        font-size:14px;
    }
    .sub_list_wrap {
        margin-top: 20px;
    }
}
@media(max-width:360px) {
    #footer .inner .footermenu li a {
        font-size:12px;
    }
}
@media(max-width:280px) {
    .tab_menu_btn, .tab_menu_btn.on {
        font-size: 12px;
        height: 50px;
    }

    .sub_list_wrap span > h4 {
        font: bolder 18px/2 'Do Hyeon', 'arial', 'sans-serif';
    }
}