/****** 헤더 영역 ******/
.background_box{ width: 100%; height: 100%; position: fixed; z-index: 10; background: rgba(0,0,0,0.5); display:none; }

html,body{ overflow-x: hidden; }
#header{ width: 100%; height:115px; margin: 0 0 0 0; display: flex; align-items: center; justify-content: center; flex-flow: row wrap; position: fixed; top: 0; right: 0; left: 0; z-index: 10000; background-color: white; transition: all 0.12s ease-in-out; }
.nav_area{ width: 100%; max-width: 1200px; padding: 0px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
.logo_area{ height: 90px; margin-right: 40px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; }
.logo{height: auto; transition: all 0.12s ease-in-out; cursor: pointer; }
.nav a{ color: rgb(153,153,153); font-size: 14px; cursor: pointer; }
.bar_line{ min-width: 1px; height: 15px; margin: 0 5px; background-color: rgb(218,218,218); transition: all 0.12s ease-in-out; }
.menu_sub{ width: 100%; height: auto; display: flex; flex-flow: row nowrap; justify-content: flex-end; }
#menu_area{ width: 100%; display: flex; flex-flow: row wrap; justify-content: center; }
#menu_area>p{ display: none; }
#menu_area>ul>h4{ display: none; }


/* 버튼 */
/* 버튼 공통 클래스는 정리가 필요함(지우) */
/* 설정 버튼 */
.btn_full{width: 220px;height: 28px;border: 1px solid #e7e7e7;border-radius: 5px;background: linear-gradient(#fff, #f9f9f9);;font-size: 13px;color: #aaa;}
/* 바로가기 버튼 */
.btn_more{position: absolute;top:30px;right: 30px;padding-right: 10px;background: url(../images/common/more_arrow.png) no-repeat center right;font-size: 13px;color: #28aacf;letter-spacing: -1px;}
/* 화살표 그라데이션 버튼 */
.btn_grd{display: block;width: 170px;height: 44px;margin-top: 20px;padding: 12px 15px;background: url(../images/bg/bg_btn_more.jpg);color: white;text-align: left;}
/* 칼라 버튼(기본) */
.btn{display: block;width:100%;height: 35px;max-width: 200px;margin: 0 auto;background:rgb(68,65,154);font-size: 14px;color: white;text-align: center;line-height:1;}
.btn:hover{background:rgb(95,92,198);}
/* 취소 버튼 */
.btn_cancel{background: #aaa;}
/* input 관련 버튼 */
.btn_input{display: block;width: 100px;height: 28px;padding: 7px;background: #555;font-size: 13px;color: white;text-align: center;cursor: pointer;}
/* 선택 버튼 */
.choice_btn{font-size: 15px; font-weight: bold; text-align: center; display: inline-block; background-color: #28aacf; color: #fff; border-radius: 4px; padding: 5px 10px;}



.menu{ width: 100%; height: 90px; max-width: 800px; padding: 0px; display: flex; justify-content: space-around; align-items: center; flex-flow: row nowrap; }
.menu li{ width: auto; height: 100%; position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.menu li p{ width: auto; font-size: 22px; font-weight: 600; color: black; cursor: pointer; display: inline; text-align: center; }
.menu li p .space{ display: inline; }
.menu li p .line_feed{ display: none; }
.menu_hamburger{ display: none; transition: all 0.12s ease-in-out; }

.login_menu {
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
    font-weight: 600;
    position: absolute;
    right: 100px;
}

/* 단일 서브 메뉴 */
.sub_menu{ display: none; width: 140px; padding: 10px 0; position: absolute; top: 70px; left: calc(50% - 70px); z-index: 1000; background-color:#ebebeb;font-weight:600}
.sub_menu a{ height: auto; margin: 0; padding: 8px 0; font-weight: bold; transition: all 0.12s ease-in-out; font-size: 14px; display: block; color: black; text-align: center; cursor: pointer; }
.sub_menu a:hover{ color: black }



/* 푸터 영역 */
.footer{ width: 100%; height: auto; margin-top: 0px; padding: 65px 0; background-color: rgb(51,51,51); color: rgb(153,153,153); font-size: 14px; word-break: keep-all; transition: all 0.12s ease-in-out; }
.footer>ul{ width: 100%; max-width: 1200px; margin: auto; padding: 0 20px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; }
.footer>ul>li{ width: 100%; height: auto; margin-top: 10px; display: flex; flex-flow: row wrap; justify-content: center; transition: all 0.12s ease-in-out; }
.footer>ul>li:nth-of-type(1){ margin-top: 0; line-height: 24px; }
.footer>ul>li:nth-of-type(1)>p{ max-width: 100%; margin: 0 10px; display: flex; flex-flow: row nowrap; transition: all 0.12s ease-in-out; }
.footer>ul>li:nth-of-type(1)>a{ max-width: 100%; margin: 0 10px; display: flex; flex-flow: row nowrap; transition: all 0.12s ease-in-out; }
.footer>ul>li:nth-of-type(1)>a { color: rgba(153,153,153); }
.footer>ul>li:nth-of-type(1)>a:hover{ color: rgba(153,153,153); }
.footer>ul>li:nth-of-type(1)>p>span:nth-of-type(2){ margin: 0 5px; word-break: keep-all; }
.footer>ul>li:nth-of-type(1)>a>span:nth-of-type(2){ margin: 0 5px; word-break: keep-all; }
.footer>ul>li:nth-of-type(2)>p{ max-width: 100%; display: flex; flex-flow: row wrap; word-break: keep-all; }
.footer>ul>li:nth-of-type(2)>p>span{ margin: 0 5px; word-break: keep-all; }

#content_wrapper {
    margin-top: 115px;
}
#board_content_wrapper,#write_content_wrapper {
    margin-top: 3.7%;
    min-height: 373px;
}

#sub_header_area {
    width: 100%;
    margin-top: 115px;
}

  /* 서브페이지 */
    /* 상단이미지 */
    .subpage_top{
        margin-bottom:3vm;
        position: relative;
        width:100%;
        height:220px;
        transition: all 0.2s ease-in-out;
    }
    .subpage_top_img {
        position: relative;
    }
    .subpage_top_img img{
        /* position: absolute;
        top:0;
        left:0; */
        width: auto;
        min-width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        filter: brightness(80%);
    }
    .subpage_top_text{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate( -50%, -50% );
        color:white;
        font-size:35px;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    }
    
        /* 탭메뉴 */
    .subpage_tab ul {
        margin:0;
        height: 60px;
        line-height: 36px;
        display: flex;
        justify-content: center;
        border-bottom:0.04vw solid grey;
    }
    .subpage_tab ul li{
        display: inline;
        font-weight:600;
        font-size:20px;
        padding:10px 20px 10px 20px;
    }
    
    .subpage_tab ul li a.on{
        color:#ed1c24;
        font-weight:600;
    }
    
   


.width_480_space{
    display: none;
}
.particles-js-canvas-el {
    position: absolute;
    top:0;
}

@media all and (max-width:1200px){
    .nav_area{ padding: 0 20px; }
    /* .logo_area{ margin-le3ft: 60px; } */
    .logo{ max-width: 200px; min-width: 180px; }
 
}


@media all and (max-width:1050px){
    .menu li p .space{ display: none; }
    .menu li p .line_feed{ display: inline; }
}

@media all and (max-width:960px){
    .subpage_tab ul li {
        padding: 10px 10px 10px 10px;
    }
    #header{ width: 100%; height:80px;margin: 0 auto; padding: 0; position: fixed; }
    #content_wrapper {
        margin-top: 80px;
    }
    #sub_header_area {
        margin-top: 80px;
    }
    .nav{ padding-right: 20px; }
    .nav_area{ display: flex; justify-content: flex-end; flex-flow: row wrap; }
    .logo_area{ width: 100%; height: 70px; margin-right: 0; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; transition: all 0.12s ease-in-out; }
    /* .logo{ max-width: 130px; min-width: 130px; } */
    /* .logo_m{ width: 100%; max-width: 46px; min-width: 46px; height: auto; display: block; transition: all 0.12s ease-in-out; cursor: pointer; } */
    .menu_hamburger{ width: 40px; height: 35px; border: 6px solid transparent; border-bottom-width: 9px; cursor: pointer; display: block; background-color:transparent; position: relative; }
    .menu_hamburger div{ width: 28px; height: 3px; background: black; position: absolute; left: 0; transition: all 0.3s ease-in-out; }
    .menu_hamburger div:nth-of-type(1){ top: 0; }
    .menu_hamburger div:nth-of-type(2){ top: 50%; right:0; left: 0; margin: auto; }
    .menu_hamburger div:nth-of-type(3){ top: 100%; }

    #menu_area{ width: 250px; margin: auto; justify-content: flex-start; align-items: flex-start; position: fixed; top: 0px; right: -250px; z-index: 100; transition: all 0.5s ease-in-out; overflow: hidden; background-color:#ebebeb; }
    #menu_area>p{ margin: 30px 0 10px; padding: 0 10px 0 20px; display: block; color: rgb(59,131,203); font-size: 18px;
    font-weight: bold; }
    #menu_area>ul>h4{ width: 100%; height: 40px; margin: 20px; display: block; background-color: rgb(102,102,102); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; color: rgb(255,255,255); cursor: pointer; }

    .menu{ width: 250px; height: auto; position: absolute; top: 100px; left: 0; z-index: 10; transition: all 0.5s ease-in-out; flex-flow: row wrap; padding: 0; }
    .menu>li{ width: 100% !important; padding: 0; border-bottom: 1px solid rgb(59,131,203); font-size: 16px;  cursor: pointer; color: rgb(51,51,51); flex-flow: row wrap; }
    .menu>li:last-of-type{ border-bottom: 0; }
    .menu>li p{ width: 100%; padding: 16px 10px 16px 20px; text-align: left;  }

    .login_menu {
        margin: 5%;
        right:10px
    }
    ul.login_menu li a{
        color: white;
    }

    .sub_menu{ display: none; width: 100%; padding: 10px 0; position: static; top:49px; left:0; z-index: 1000; background-color: transparent; box-shadow: 1px 1px 3px 1px transparent; background: rgb(0,102,179); }
    .sub_menu a{ height: auto; margin: 0; padding: 10px 10px 10px 20px; border-left: 0 solid; font-weight: normal; color: rgb(255,255,255); text-align: left; }

    .footer>ul>li{ justify-content: flex-start; }
    .footer>ul>li:nth-of-type(1)>a{ width: 100%; margin: 0; }
    .footer>ul>li:nth-of-type(1)>a>span:nth-of-type(1){ min-width: 80px; }
    .footer>ul>li:nth-of-type(1)>a>span:nth-of-type(2){ display: none; }
    .footer>ul>li:nth-of-type(1)>p{ width: 100%; margin: 0; }
    .footer>ul>li:nth-of-type(1)>p>span:nth-of-type(1){ min-width: 80px; }
    .footer>ul>li:nth-of-type(1)>p>span:nth-of-type(2){ display: none; }
    .footer>ul>li:nth-of-type(2)>p>span{ margin: 0 10px 0 0; }
}
@media all and (max-width:600px){
    .logo_area{ margin-left: 20px; }
}

@media all and (max-width:480px){
    .subpage_tab ul li {
        font-size: 17px;
        padding: 10px 5px 10px 5px;
    }
    .logo_area{ margin-left: 0px; }
}


@media (max-width:480px){

    /* .footer>ul>li:nth-of-type(1)>a{ margin-top: 10px; flex-flow: row wrap; }
    .footer>ul>li:nth-of-type(1)>a>span:nth-of-type(1){ width: 100%; }
    .footer>ul>li:nth-of-type(1)>a>span:nth-of-type(3){ padding-left: 15px; }
    .footer>ul>li:nth-of-type(1)>p{ flex-flow: row wrap; }
    .footer>ul>li:nth-of-type(1)>p>span:nth-of-type(1){ width: 100%; }
    .footer>ul>li:nth-of-type(1)>p>span:nth-of-type(3){ padding-left: 15px; }
    .footer>ul>li:nth-of-type(2)>p>span{ margin: 0 10px 0 0; } */

}

@media (max-width:480px){
    .width_480_space{
        display: block;
    }
}