/****** 헤더 영역 ******/
.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; word-break: keep-all;  }
#header{ width: 100%; height:100px; 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%; height: 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(203,203,203); 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; }


.menu{ width: 92%; 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_title_area{ margin-top:100px; width: 100%; height: 240px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; transition: all 0.2s ease-in-out; }
.sub_title_area>div{ margin: auto; color: rgb(255,255,255); font-size: 35px; text-align: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.sub_title_area>div>h4{ margin-top: 90px; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
.sub_title_area>canvas{ position: relative; z-index: 1; }
.sub_nav{ width: 100%; height: auto; margin-bottom: 65px; display:block; border-top: 1px solid rgb(204,204,204); border-bottom: 1px solid rgb(204,204,204); }
.sub_nav ul{ width: 100%; height: 50px; margin: auto; max-width: 1200px; display: flex; align-items: center; justify-content: flex-start; flex-flow: row nowrap; }
.sub_nav ul li{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; }
.sub_nav ul li:nth-of-type(1){ width: 80px; height: 100%; border-left: 1px solid rgb(204,204,204); border-right: 1px solid rgb(204,204,204); color: rgb(51,51,51); }
.sub_nav ul li:nth-of-type(2), .sub_nav ul li:nth-of-type(3){ width: 250px; height: 100%; border-right: 1px solid rgb(204,204,204); position: relative; }
.sub_nav ul li:nth-of-type(2) i, .sub_nav ul li:nth-of-type(3) i{ margin-bottom: 5px; }
.sub_nav .menu_name, .sub_nav .sub_menu_name{ width: 200px; text-align: center; margin-right: 10px; font-size: 18px; color: rgb(51,51,51); word-break: keep-all; }

  
.sub_nav .menu_select, .sub_nav .sub_menu_select{ width: 251px; position: absolute; top: 50px; left: -1px; z-index: 100; border: 1px solid rgb(204,204,204); background-color: rgb(255,255,255); display: none; }
.sub_nav i{ color: rgb(51,51,51); transition: all 0.2s ease-in-out; }
.sub_nav .menu_select a, .sub_nav .sub_menu_select a{ height: 50px; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; font-size: 16px; color: rgb(51,51,51); }
.sub_nav .menu_select a:hover, .sub_nav .sub_menu_select a:hover{ background-color: rgb(203,203,203); color: rgb(255,255,255); }

.sub_nav .menu_hide{ display: none; }

@media (max-width:960px){

    /****** 서브 페이지 공통 ******/
    .sub_title_area{ height: 250px; margin-top:80px; }
    .sub_title_area>div>h4{ margin-top: 100px; }
    .sub_nav{ margin-bottom: 50px; }
    .sub_nav ul li{ font-size: 18px; }
    .sub_nav ul li:nth-of-type(1){ display: none; }
    .sub_nav ul li:nth-of-type(2){ border-left: 1px solid rgb(170,170,170); }

    .sub_nav .menu_name .common_lf, .sub_nav .sub_menu_name .common_lf{ display: inline; }
}


@media (max-width:480px){
    /****** 서브 페이지 공통 ******/
    .sub_title_area{ height: 200px; }
    .sub_title_area>div{ font-size: 24px; }
    .sub_title_area>div>h4{ margin-top: 80px; }
    .sub_nav{ margin-bottom: 30px; }
    .sub_nav ul li:nth-of-type(2), .sub_nav ul li:nth-of-type(3){ width: 100%; }
    .sub_nav .menu_name, .sub_nav .sub_menu_name{ width: 130px; font-size: 16px; }
    .sub_nav .menu_select a, .sub_nav .sub_menu_select a{ font-size: 16px; }
}


@media (max-width:350px){
    /****** 서브 페이지 공통 ******/
    .sub_nav .menu_name, .sub_nav .sub_menu_name{ width: 110px; font-size: 14px; }
    .sub_nav .menu_select a, .sub_nav .sub_menu_select a{ font-size: 14px; }
}


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


/* 20240627고객요청으로 서브메뉴 가림 */
.menu li:nth-child(3) .sub_menu {display: none !important;}
.menu li:nth-child(4) .sub_menu {display: none !important;}
.menu li:nth-child(5) .sub_menu {display: none !important;}

@media all and (min-width:960px){
    .menu li:hover .sub_menu {display: block;}
}

/* 관리자 게시물 작성화면 */

#bo_w {
    
    max-width:1200px;
    margin:100px auto 0 auto;
}

/* 푸터 영역 */
.footer{ 
    width: 100%; 
    height: auto; 
    margin-top: 0px; 
    font-weight: normal;
    padding: 40px 0 54px 20px; 
    background-color: white;
    border-top:1px solid rgb(221, 221, 221); 
    color: #666666; 
    font-size: 16px; 
    word-break: keep-all; 
    transition: all 0.12s ease-in-out; 
    line-height: 33px;;
}
body > footer > div > h4 {font-weight: normal;}
body > footer > div {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    /* justify-content: flex-start; */
    flex-flow: row wrap;
}
body > footer > div > h4 {
    padding: 0 5px;
}

body > footer > div > h4:nth-child(8) {
    width:100%;
}

#content_wrapper {
    margin-top: 100px;
}
#board_content_wrapper,#write_content_wrapper {
    margin-top: 0rem;
}

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

  /* 서브페이지 */
    /* 상단이미지 */
    .subpage_top{
        margin-bottom:3vm;
        position: relative;
    }
    .subpage_top_img {
        background:url("<?php echo G5_IMG_URL ?>/subpage_img.png" ) center center /cover no-repeat;
    }
    .subpage_top_img img{
        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:red;
        font-weight:600;
    }
    
   


.width_480_space{
    display: none;
}


@media all and (max-width:1200px){
    .nav_area{ padding: 0 20px; }
    .logo_area{ margin-left: 60px; }
    .logo{ width:110px; }
    #content_wrapper {
        margin-top: 5rem;
    }
}


@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%; margin: 0 auto; padding: 0; position: fixed;height: 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: #204498; }
    #menu_area>p{ margin: 30px 0 10px; padding: 0 10px 0 20px; display: block; color: #1658d0; 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 rgba(255,255,255,0.3); 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; color: white; }

    .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; } */
	.footer {
		font-size: 14px;
	}
    body > footer > div > h4 {
        width:100%;
    }
}
@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;
    }
}

.btn {
    border-radius:10px;
    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;
}